2012年9月11日星期二

week01 HW01

1.

2.
size (500,500);
PImage kitty;
kitty=loadImage("http://www.youtube.com/watch?v=ZByppaYSJB8");
image(kitty, 3,50);

3.
原圖:

Week 01, HW01

1.processing 影片

2.kitty 程式碼

size(350,350);
PImage robbot;
robbot = loadImage("http://pic.wenwen.soso.com/p/20080830/20080830234948-1104005910.jpg");
image(robbot, 20,20);

3.想用processing畫的圖

參考圖就是以上機器人圖
然後在自己畫上草稿圖

利用processing 幾個簡單幾何圖形拼湊後

之後這是完成圖

這是作業中的這個圖全是用四角形和三角形拼湊出來
總覺得自己用了一個很笨的方法，硬是去瞄點，瞄到眼睛都脫窗了
希望未來可以學到比較快的方法可以一次做出多邊形
這樣就不會有把過多時間砸在瞄點這上面的問題了

4. 9/11互動技術上課心得
今天一開始在新增作者的地方有點混亂，再加上電腦螢幕不賞臉，讓我剛開始這堂課有點小小不順，不過對於今天的上課內容真的感覺很好玩，新的東西新的程式，讓人非常新鮮，讓我感到很有趣

Week01,HW01

作業1-1 Youtube 影片分享：( Processing 出來的作品 )
IPhone controlled Arduino-based Tank via WiFi, xBees & Processing

作業1-2 寫出你的第一個Processing 程式碼： Hello World 變 Hello Kitty (dog)。

程式碼↓

size(450,350);
PImage dog;
dog = loadImage("http://cl.jroo.me/z3/x/T/y/d/a.aaa-sweet-puppy.jpg");
image(dog,20,20);

作業1-3 請找一張圖,用小畫家(mspaint)輔佐你,畫出你的 Processing 圖, 並都貼出來。

用小畫家開啟的原圖↓

用processing畫的圖↓

作業1-4 請寫下你的心得 (1) 你學了什麼東西, (2) 有什麼東西不懂, (3) , 還想學什麼。

今天學了新的程式語言Processing，算是比較高階的語言。
不用宣告，只要寫四行程式，圖片很快就秀出來了。

如果想要自己試試看其他的程式語法和結構，可以用小幫手幫忙，真的很方便。

比較不熟悉的地方是部落格的使用，自己會利用時間去熟悉部落格。

3D LED RGB Cube Laying Screen Display H48 Dance

1.processing影片
3D LED RGB Cube Laying Screen Display H48 Dance

2.程式碼

size(500,500);
PImage rody;
rody = loadImage("
http://profile.ak.fbcdn.net/hprofile-ak-ash3/162020_108764849163248_4953921_n.jpg
");
image(rody, 20,20);


3.作業

(1)小畫家圖

(2)processing

(3)程式碼

void setup(){
size(340, 390);
background(255);
smooth();
}

void draw(){
beginShape();
line(35,193,168,16);
line(310,179,168,16);
line(35,193,51,222);
line(310,179,297,211);

line(169,59,297,211);
line(169,59,51,222);

line(77,193,90,313);
line(254,313,90,313);
line(254,313,272,192);

line(117,87,117,22);
line(82,30,117,22);
line(82,30,92,123);

line(110,155,234,155);
line(110,155,118,260);
line(224,260,234,155);
line(224,260,118,260);

line(119,162,166,161);
line(167,249,166,161);
line(167,249,123,253);
line(119,162,123,253);

line(177,161,224,162);
line(220,250,224,162);
line(220,250,174,250);
line(177,161,174,250);

line(103,260,175,300);
line(246,260,175,300);

endShape();
}

4.心得


第一次上互動技術的課，很有趣
收穫很多
程式碼原來可以這麼不複雜

Week01,HW01

mRNA Processing

size(500,500);
PImage kitty;
kitty = loadImage("http://www.hello-kitty-wallpapers.com/wp-content/uploads/2011/12/Hello-Kitty-Wallpapers-3.jpg");
image(kitty, 20,20);

Week01, HW01

1. Processing 寫出來的作品

2. Processing 練習

size (500,500);
PImage kitty;
kitty=loadImage("http://www.wahouse.com.tw/blog/images/upimages/y1w3e2f8j2j003d8p876.jpg");
image(kitty, 5,50);

3. Processing 畫圖
原圖

Processing 執行畫面

程式碼:

size(400,350);
background(187,216,255);
/*SUN*/
fill(255,255,0);
ellipse(115, 50, 45, 45);
fill(228,102,37);
triangle(100, 10, 97, 23, 112, 18);
triangle(135, 12, 125, 18, 136, 23);
triangle(142, 32, 148, 45, 155, 32);
triangle(145, 53, 152, 65, 138, 66);
triangle(130, 76, 117, 78, 127, 86);
triangle(92, 75, 105, 78, 93, 86);
triangle(82, 53, 85, 65, 72, 63);
triangle(75, 31, 87, 30, 83, 43);
/*Doll*/
noFill();
ellipse(200 ,130 , 15, 15);//circle
ellipse(200 ,80 , 15, 100);
fill(255,255,255);//body
triangle(198, 200, 225, 320, 130, 300);
fill(255,255,255);//Head
ellipse(200, 185, 120, 95);
fill(0,0,0);
ellipse(170, 185, 10, 10);//eyes
ellipse(230, 190, 10, 10);
noFill();//mouse
beginShape();
curveVertex(155, 200);
curveVertex(155, 200);
curveVertex(195, 220);
curveVertex(235, 210);
curveVertex(235, 210);
endShape();

4.
題 :學了什麼? 有什麼不懂?

今天學到了 Processing 最基本的一些語法
老師還告訴我們一個網站，讓我們可以直接在網路上查詢語法。
剛開始第一堂課，目前都還聽得懂，而且 Processing 的程式語言
感覺還蠻人性化的，所以很好理解:)

Week01 HW01

Processing的作品分享:

Hollow Kitty練習題:

size(190,190);
PImage kitty;
kitty = loadImage("http://www.e-informacije.com/wp-content/uploads/2009/06/hello-kitty-3-150x150.jpg");
image(kitty,20,20);

課堂心得:

原本從完全不了解這堂課的課程，到學會Processing的基本使用方法，還有Processing的功用，目前來說並不困難。

Processing作品:

Week01,HW01

1.

2.

size(450,350);
PImage kitty;
kitty = loadImage("http://www.anime.com/Hello_Kitty/images/kitty-wallpaper.jpg");
image(kitty, 20, 20);

4.
e

How to build a flexible LED Curtain display by LED strips use with sd ca...

Week01 HW01

2.

size(400,400);

PImage SpongeBob;
SpongeBob = loadImage("http://www.blogcdn.com/chinese.engadget.com/media/2008/08/1917212687.jpg");
image(SpongeBob,20,20);

3.作業

4.今天學到什麼?有甚麼聽不懂?

今天學了用processing寫程式，目前學的都還簡單，使用的單字都是以前寫過的，我用processing畫出了一張海綿寶寶的圖。

目前是都沒有什麼聽不懂的，但是google的bolg我第一次用，還蠻不熟悉的，都不知道哪些東西要按哪裡才看的到。要再熟悉一下。

98160860黃麒,座號24,HW01,Week01

1.

2.

size(600,600);
PImage kitty;
kitty = loadImage
("http://s1.imgs.ck101.com/t/20120615/2322bc4bbd65c26cadcab6c700b04c12.jpg");
image(kitty,20,20);

size(150,150);
background(100,100,100);
fill(300,300,0);
rect(10,25,130,100);
fill(0,0,0);
rect(70,50,15,40);
triangle(70,45,82,60,70,60);
triangle(85,45,73,60,85,60);
triangle(70,90,85,90,78,110);
rect(57.5,62,40,17);
triangle(58,80,70,80,64,90);
triangle(85,80,97,80,91,90);
triangle(63,45,40,65,57,100);
triangle(95,45,115,65,100,100);

4.

我今天在課堂上學到了如何使用processing 印圖畫圖等等的,後來我嘗試畫一些別的圖片,但我卻碰上了一些另外的問題,像是如何化半圓等等之類的,希望之後能夠學習更多關於processing的東西

98163021,張耀璇,hw01

size(800,800);
PImage Kitty;
Kitty = loadImage("http://www.duckykitty.com/hello-kitty-desktop-wallpapers/w_hellokitty020.jpg");
image(Kitty, 20,20);

3.

size(300,300);
background(128,128,128);
fill(255,0,0);
rect(50,30,170,240,7);
fill(249,249,0);
rect(60,45,150,200,7);
fill(255,0,0);
rect(117,235,35,20,7);
fill(255,0,0);
rect(112,40,45,30,7);
fill(255,0,0);
rect(112,55,45,45,7);
fill(0,255,255);
rect(70,125,45,15);
fill(0,255,255);
rect(155,125,45,15);
fill(0,0,0);
rect(95,215,80,1);
line(95,215,90,225);
line(90,225,60,210);
line(175,215,180,225);
line(180,225,210,215);

4.
老師目前上的東西跟上課速度都還能接受，但希望老師能多示範幾個例子，讓我們可以多練習。

week01 HW01

作業1
1.2
超酷的，可以拿來當鬼屋的鬼影 size(800,800); PImage lala; lala = loadImage("http://www.lookatcat.com/data/media/12/cat_shrek.jpg"); image(lala,40,40);

3

size(400,400);
background(255);
fill(449,54,20);
noStroke();
ellipse(100,100,150,150);//頭
fill(449,54,20);
rect(50,90,100,100);//下巴
fill(255);
ellipse(60,90,50,50);//左眼
fill(449,54,20);
ellipse(60,100,50,50);
fill(255);
ellipse(140,90,50,50);//右眼
fill(449,54,20);
ellipse(140,100,50,50);
for(int i=0;i<=5;i++)//牙齒上排
{
fill(255);
ellipse(50+i*25,190,20,20);
}

Week 01 HW01

1.processing影片

2.

size(550,450);
PImage amon;
amon = loadImage
("http://i.15fun.com/upload/201009/927_1.jpg");
image(amon,20,20);

3.
原始版

小畫家

processing版

4.心得

第一次上這門課，很新鮮，因為processing真神奇，幾個指令就可以畫出我所要的圖案，
只是在畫圖的過程中，我覺得座標需要花些時間算，還有利用reference找指令，頗有趣的好像在挖寶，會突然找到一些超好用的指令。

week01 hw01

1.

2.

size(450,450);
PImage kitty;
kitty = loadImage("http://www.cmakers.org/Img/kitty_artwork_04.gif");
image(kitty,20,20);

3.

4.

    我在今天的課堂中，一開始看學長姐的作品，雖然覺得很有趣，但是感覺會很難，有點害怕會做不出來，不過上課後教了新的程式，從很簡單的地方開始學，我覺得很有趣，也很想繼續學，希望到了學期末也可以做出像學長姐們的一樣優秀的作品來。

week01,HW01

1. 分享一個YouTube有關Processing的影片

2. Hello Kitty 程式碼

size(1080,800);
PImage cat;
cat=loadImage("http://www.kawaiikakkoiisugoi.com/wp-content/uploads/2012/03/hello-kitty-color.gif");
image(cat,20,20);

3. 藉由小畫家的幫助畫一張圖

我畫了國旗

以下為程式碼

void setup()
{
size(640,480);
background(255,0,0);
fill(0,0,255);
rect(0,0,320,240);
fill(255,255,255);
ellipse(160,120,140,140);

pushMatrix();
paint(240,110);
rotate(radians(30));
paint(285,15);
rotate(radians(30));
paint(270,-90);
rotate(radians(-60));
popMatrix();
translate(280, -40);

rotate(radians(90));
pushMatrix();
paint(240,110);
rotate(radians(30));
paint(285,15);
rotate(radians(30));
paint(270,-90);
rotate(radians(-60));
popMatrix();
translate(280, -40);

rotate(radians(90));
pushMatrix();
paint(240,110);
rotate(radians(30));
paint(285,15);
rotate(radians(30));
paint(270,-90);
rotate(radians(-60));
popMatrix();
translate(280, -40);

rotate(radians(90));
pushMatrix();
paint(240,110);
rotate(radians(30));
paint(285,15);
rotate(radians(30));
paint(270,-90);
rotate(radians(-60));
popMatrix();
}
void paint(int x,int y)
{
translate(x, y);
triangle(0,0,0,20,30,10);
translate(-x, -y);
}

4. 請寫下你的心得

接觸到全新的一套軟體，似乎和openGL很像，語法結構也幾乎就像是簡單版的C
希望這堂課不會就是個openGL plus之類的東西，有一些openGL沒有的特色可以玩。

不知道是不是S513沒有切螢幕的功能，
老師只用投影片，就算關燈還是看不太清楚。
可以的話還是切螢幕上課比較容易吸收。

blog不太習慣使用，如果可以還是希望用moodle就好。

另外，我沒修過HTML有關的課程，希望老師可以在講授之餘大概的提點一下
(尤其是又要貼到blog上的話...)
如果沒時間的話，也可以比照電腦圖學的做法貼範例在moodle或blog上

Week 01, HW01

2012.09.11(二) Homework1

(1) 用 processing 寫出來的作品

(2) Hello World 變 Hello Kitty

kitty 程式碼

size(900,900);
PImage kitty;
kitty = loadImage("http://www.kawaiikakkoiisugoi.com/wp-content/uploads/2012/03/hello-kitty-color.gif");
image(kitty, 20,20);

(3)  用 processing 畫出自己想要的圖

參考圖片

程式碼 + 完成圖

最終完成圖

沒有背景圖的完成圖

背景圖是到 google 抓的圖片，豬是用 processing 畫的(如右圖)
-----------------------------------------------------------------------------------------------------

2012.09.24
我原本想要用線段圍邊框填顏色的
但是一開始不曉得要怎麼用
所以就畫憤怒鳥的豬
後來再臉書上有看到助教貼的程式碼
就花了一點時間把之前的豆豆龍完成

程式碼 + 豆豆龍完成圖

google 背景圖 + 豆豆龍完成品

(4) 寫下心得：你學了什麼東西、有什麼東西不懂、還想學什麼

透過這堂課的介紹
我認識了 processing 也學到一些基本圖形的繪製
我覺得很酷的是，程式碼比我想像中的簡單許多
而且環境編譯系統也是一個好簡單的版面
對於寫程式我又增加一點信心：D

week01,HW01

size(500,500);
PImage kitty;
kitty=loadImage("http://4.bp.blogspot.com/-XyZqBSC_SDo/UBb80xhlQII/AAAAAAAAANs/p62sXJoZdfY/s640/Blog1.jpg");
image(kitty,20,20);

原圖

Processing 圖

剛接觸 Processing這個新軟體感覺蠻新鮮的，用簡單幾行程式就能夠大致畫出想要的圖形，蠻好玩的，另外就是上課時投影片看不太清楚。

week01,HW01

size(500,500);
PImage kitty;
kitty = loadImage("http://carseatcoversforgirls.us/wp-content/uploads/2012/02/hello-kitty.jpg");
image(kitty ,20,20);

week01,HW01

1.

2.

size (500,500);
PImage kitty;
kitty = loadImage ("http://buytheway.buyble.com.tw/wp-content/uploads/2011/01/hello-kitty-fredscorner1.jpg");
image (kitty, 20, 20);

3.

原圖

小畫家

processing

size(520,650);

fill(1,64,229);
triangle(75,182,165,92,165,273);//左藍
fill(228,0,204);
quad(165,92,256,182,256,364,165,273);//左紫
fill(12,158,13);
triangle(256,182,437,182,256,364);//右綠
fill(233,229,0);
triangle(256,182,346,92,437,182);//右黃
fill(0,227,164);
quad(165,92,256,182,346,92,256,1);//中綠
fill(236,129,31);
triangle(256,364,256,624,1,364);//左橘
fill(105,188,232);
triangle(256,364,256,624,512,364);//右藍

4.

(1)學到了用processing來寫程式,畫圖可以插入網址,用程式來畫圖(形狀、座標、顏色)

(2)還想學很多同學分享影片中用到的技術

(3)大致上都還行,只是講的有一點快,而且教室的電腦無法廣播只能看投影幕有點不清楚

week01,HW01

1-1

1-2

size(500,500); //大小
background(45,130,223); //背景色
fill(224,83,53); //填上框框顏色

PImage pikachu;
pikachu = loadImage("http://farm3.static.flickr.com/2198/3531070118_354caf8ac1_o.jpg");
image(pikachu, 20,20);

1-3

size(500,500); //大小
background(45,130,223); //背景色

/*
PImage pikachu;
pikachu = loadImage("http://farm3.static.flickr.com/2198/3531070118_354caf8ac1_o.jpg");
image(pikachu, 20,20);
//rect(30,20,55,55); //方形
*/
fill(239,231,0); //填上框框顏色(黃色)
ellipse(300, 180 ,310, 310);//橢圓(臉)
fill(224,83,53); //填上框框顏色(紅)
ellipse(200, 271, 70, 70);//橢圓(左)
ellipse(430, 197, 70, 70);//橢圓(右)

fill(1,1,1); //填上框框顏色(黑)
ellipse(223, 187, 60, 60);//橢圓(左眼)
ellipse(365, 150, 60, 60);//橢圓(右眼)
ellipse(300, 197, 15, 10);//橢圓(鼻子)

fill(254,254,254); //填上框框顏色(白)
ellipse(228, 180, 27, 27);//橢圓(左眼)
ellipse(358, 145, 27, 27);//橢圓(右眼)

noFill();
arc(310, 240, 110, 110, HALF_PI, PI);

fill(20,178,21); //填上框框顏色(紅)
triangle(145, 160, 30, 41, 185, 70);
fill(0,64,128); //填上框框顏色(紅)
ellipse(25, 45, 27, 27);//橢圓(右眼)

心得:
從網路搜尋到關於processing相關的作品和其互動應用，剛開始接觸到這個感覺不是很了解，進processing裡的reference了解到許多的用法~ 感覺很好玩。

Week 01 HW01

2.

size(500,500);
PImage kitty;
kitty=loadImage
("http://www.zhongman.com/UploadFiles/Authorized/2012/7/201207261013441973.jpg");
image(kitty,20,20);

3. 原圖

processing+小畫家

4.心得

還不太熟悉，都慢慢摸索，點也很難對，不過很有成就感

但跟之前所學的程式相比，相對簡單，希望繼續加油更上層樓。

Week 1,hw01

1.1

1.2
PImage img;
int x=10,y=10;
img = loadImage("http://buytheway.buyble.com.tw/
wp-content/uploads/2011/01/hello-kitty-fredscorner1.jpg");
size(img.width+2*x,img.height+2*y);
background(125,125,255);
image(img,x,y);

1.3

在今天有學習到一些processing的語法，有一種入門的感覺！

而今天有深深地感覺到這是一個比較高階的語言，短短幾行就能夠表現出以往需要比較多程式碼

的效果。在它本身的help裡面有許多的函式，東西很多，連事件的部分感覺得比以往寫的還要簡

單。未來我想要學習到一些比較屌一點的東西，而且比較有難度的。比較希望能夠將processing

的程式讓手機能夠執行，寫出來一個很炫的動態桌布或是很好玩的遊戲在手機上面。

1.4

原始圖片

Processing圖片

程式碼：

void setup()
{
  size(600,600);
  background(255,255,255); 
}

void draw()
{
  //卡片底
  strokeWeight(2);
  stroke(131,199,252);
  translate(5,419);
  rotate(-PI/4); 
  fill(39,134,200); 
  rect(0,0,580,250,18);   
  rotate(PI/4); 
  translate(-5,-419);
  
  //臉區
  strokeWeight(0);
  stroke(255,255,255);
  translate(390,396);
  rotate(-PI/4); 
  fill(254,251,242); 
  ellipse(0, 0, 500, 360);
  rotate(PI/4); 
  translate(-396,-396);
  
  //眼睛
  strokeWeight(6);
  stroke(39,134,200);
  translate(235,315);
  rotate(-PI/4); 
  fill(254,251,242); 
  ellipse(0, 0, 120, 150);
  ellipse(120, 0, 120, 150);
  rotate(PI/4); 
  translate(-235,-315);
  
  //瞳孔
  strokeWeight(12);
  stroke(39,134,200);
  translate(260,305);
  rotate(-PI/4); 
  fill(254,251,242); 
  ellipse(0, 0, 20, 30);
  ellipse(70, 0, 20, 30);
  rotate(PI/4); 
  translate(-260,-305);
  
  //鼻線
  strokeWeight(6);
  stroke(39,134,200);
  translate(330,324);
  rotate(PI/4); 
  line(0,0,90,0);
  rotate(-PI/4); 
  translate(-330,-324);
  
  //鼻子
  strokeWeight(0);
  stroke(234,4,31);
  translate(330,324);
  rotate(-PI/4); 
  fill(231,4,31); 
  ellipse(0, 0, 68, 68);
  fill(255,255,255);
  ellipse(-4, -10, 24, 24);
  rotate(PI/4); 
  translate(-330,-324);
  
  //鬍鬚
    //left
  strokeWeight(6);
  stroke(39,134,200);
  translate(158,483);
  rotate(-PI/7.5); 
  line(0,0,150,0);
  rotate(PI/7.5); 
  translate(-158,-483);
  
  strokeWeight(6);
  stroke(39,134,200);
  translate(200,540);
  rotate(-PI/4.34); 
  line(0,0,150,0);
  rotate(PI/4.34); 
  translate(-200,-540);
    //right
  strokeWeight(6);
  stroke(39,134,200);
  translate(414,299);
  rotate(-PI/7.5-PI/5); 
  line(0,0,150,0);
  rotate(PI/7.5+PI/5); 
  translate(-414,-299);
  
  strokeWeight(6);
  stroke(39,134,200);
  translate(434,319);
  rotate(-PI/3.85); 
  line(0,0,150,0);
  rotate(PI/3.85); 
  translate(-434,-319);
  
  //卡片底線
  strokeWeight(2);
  stroke(205);
  translate(215,568);
  rotate(-PI/4); 
  line(0,0,500,0);
  rotate(PI/4); 
  translate(-215,-568);
  
  save("C:/99161196Pic1.jpg");
}

week01,HW01

Processing + Arduino + Servo.mp4

size(600,600);

PImage webImg;

background(255, 204, 0);

webImg = loadImage("http://buytheway.buyble.com.tw/wp-content/uploads/2011/01/hello-kitty-fredscorner1.jpg", "jpg");

image(webImg, 0, 0);

課堂心得：

開始了解processing的程式，也學了一些他的使用方法，也更想學其他相關的東西，使用電腦搭配其他東西做應用。

原圖:

以下是畫的很不像的小機器人:

size(400, 330);//畫布大小

background(255, 255, 255);//白色背景

fill(240, 235, 230);//右手顏色

ellipse(380, 350, 40, 120);//右肩位置

fill(240, 235, 230);//身軀顏色

rect(240, 280, 150, 150, 50, 40, 12, 18);//身軀

noStroke();//無邊

fill(0, 0, 0);//脖子顏色

ellipse(320, 260, 110, 80);//脖子位置

ellipse(250, 320, 30, 60);//右肩位置

stroke(0,0,0);//黑邊

fill(240, 235, 230);//右手顏色

ellipse(245, 350, 40, 120);//右肩位置

fill(245, 240, 235);//頭形顏色

ellipse(320, 200, 180, 180);//頭形位置

ellipseMode(CORNER);//漸層一在其頭的一角

noStroke();//無邊

fill(253, 248, 242,72);//漸層一顏色

ellipse(315, 130, 80, 80);//漸層一位置

noStroke();//無邊

fill(255, 255, 255,72);//漸層二顏色

ellipse(340, 140, 50, 50);//漸層二位置

stroke(0,0,0);//黑邊

noFill();//不放顏色

bezier(230, 215, 230, 195, 410, 195, 410,215);//曲線

fill(22, 165, 24,80);//右眼顏色

triangle(300, 201, 265, 202, 280, 220);//右眼位置

fill(22, 165, 24,80);//左眼顏色

triangle(350, 201, 382, 203, 369, 218);//左眼位置

訂閱：文章 (Atom)

2012互動技術概論

網頁

2012年9月11日星期二

week01 HW01

Week 01, HW01

Week01,HW01

3D LED RGB Cube Laying Screen Display H48 Dance

Week01,HW01

mRNA Processing

Week01, HW01

Week01 HW01

Week01,HW01

How to build a flexible LED Curtain display by LED strips use with sd ca...

Week01 HW01

98160860黃麒,座號24,HW01,Week01

98163021,張耀璇,hw01

week01 HW01

Week 01 HW01

week01 hw01

week01,HW01

Week 01, HW01

week01,HW01

week01,HW01

week01,HW01

week01,HW01

Week 01 HW01

Week 1,hw01

week01,HW01

Processing + Arduino + Servo.mp4

作者們

搜尋此網誌

網頁

2012年9月11日 星期二

Processing + Arduino + Servo.mp4

2012年9月11日星期二