2012互動技術概論: 2012-09-16

2012年9月22日星期六

Week01,HW01

1.1

1.2

PImage img;  
int x=10,y=10;
img = loadImage("http://static.zerochan.net/IA.full.978309.jpg");  
size(img.width+2*x,img.height+2*y);  
background(255,255,0);
image(img,x,y);

1.3

size(600,600);
background(255,255,255);
fill(165,202,57);
noStroke();
ellipse(300, 200, 200, 200);
fill(255,255,255);
rect(200, 200, 200, 100);
ellipse(260, 150, 20, 20);
ellipse(340, 150, 20, 20);
fill(165,202,57);
rect(200, 210, 200, 150);
ellipse(225, 360, 50, 50);
ellipse(375,360, 50, 50);
rect(220, 355, 150, 30);
ellipse(345,440, 50, 50);
ellipse(255,440, 50, 50);
rect(230, 380, 50, 60);
rect(320, 380, 50, 60);
ellipse(435,320, 50, 50);
ellipse(435,230, 50, 50);
ellipse(165,320, 50, 50);
ellipse(165,230, 50, 50);
rect(140, 230, 50, 90);
rect(410, 230, 50, 90);
pushMatrix();
translate(380,70);
rotate(PI/6);
rect(0, 0, 10, 60);
popMatrix();
pushMatrix();
translate(220,73);
rotate(PI*1.85);
rect(0, 0, 10, 60);
popMatrix();
ellipse(224,70, 10, 10);
ellipse(385,71, 10, 10);

2012年9月19日星期三

week1 HW01

1.找尋使用Processing製作的作品

2.kitty 程式碼

size(500,363);

PImage Artwork;

Artwork = loadImage("D:/My Images/514.jpg");

image(Artwork,0,0);

3.想用processing畫的圖

(PS.因為很簡單)

首先要先知道怎麼繪製圓形，還有填上顏色的語法

會使用到

ellipse(a,c,b,d); fill(r,g,b);

再來要事先想清楚每個圓圈的座標。

size(500,500);

{

fill(0,153,197);

ellipse(75,200,150,150);

fill(255,255,255);

ellipse(75,200,140,140);

}//circle1

{

fill(0,0,0);

ellipse(250,200,150,150);

fill(255,255,255);

ellipse(250,200,140,140);

}//circle2

{

fill(219,3,55);

ellipse(425,200,150,150);

fill(255,255,255);

ellipse(425,200,140,140);

}//circle3

{

fill(252,202,1);

ellipse(160,300,150,150);

fill(255,255,255);

ellipse(160,300,140,140);

}//circle4

{

fill(8,148,53);

ellipse(340,300,150,150);

fill(255,255,255);

ellipse(340,300,140,140);

}//circle5

每一個大括弧都是代表一個圓圈

4.心得:

其時在上個學年學到了OPENGL的基礎後，這個程式就上手的十分容易，而且語法也都是簡單的單字，再加上參數設定也都算是很輕鬆。

Week02,HW02

作業1

size(600,600);
for(int i=0;i<50;i++){
fill( random(255), random(255), random(255),random(255)); //增加一個random多了透明度
rect(random(500),random(500),random(500),random(500));
}

作業2

size(400,300);
for(int i=0;i<40;i++){
for(int j=0;j<30;j++){
noStroke(); //消除格線
fill(i*220/30,j*200/20,j*225/10,j*225/20); //調整色彩
rect(i*10,j*10, 10,10);
}
}

作業三

size(500,500);
for(int i=0;i<5;i++){
for(int j=0;j<5;j++){
fill(j*225/4,j*225/9,j*225/10);
ellipse(i*100+50,j*100+50, 100,100);
}
}
for(int i=0;i<5;i++){
for(int j=0;j<5;j++){
fill(225,225,225,225);
ellipse(i*100+50,j*100+50, 90,40);
}
}

for(int i=0;i<5;i++){
for(int j=0;j<5;j++){
fill(225,225,225,225);
ellipse(i*100+50,j*100+50, 90,20); //眼皮
}
}
for(int i=0;i<5;i++){
for(int j=0;j<5;j++){
fill(0,0,0,225);
rect(i*100+50,j*100+50, 10,20); //黑色長方形眼睛
}
}

Week01 , HW01

作業1-1：
跟 Processing 相關的作品影片

作業1-2：
請找一張圖，用小畫家輔佐你，畫出你的 Processing 圖，並都貼出來
用小畫家開啟原圖：

程式碼：

size(600,500);
background(176,204,204);
//背景線條
noStroke();
fill(131,175,175);
for(int a=0;a<7;a++){
quad((a*90)+20,0,(a*90)+30,0,(a*90)+20,600,(a*90)+10,600);
quad(0,(a*90)+25,600,(a*90)+30,600,(a*90)+40,0,(a*90)+35);
}
//line(20,0,10,600);
//電視幾
fill(0,0,0);
rect(172,190,360,260);
fill(181,230,29);
rect(177,195,350,250);
//天線
fill(0,0,0);
quad(220, 95, 230, 90, 315, 190, 300, 190);
quad(490, 0, 500, 0, 370, 190, 355, 190);
//螢幕
fill(0,0,0);
rect(215,215,245,200);
fill(255,225,225);
rect(220,220,235,190);
//眉毛
fill(0,0,0);
quad(250, 245, 270, 245, 275, 255, 253, 253);
quad(285, 240, 280, 235, 260, 250, 275, 253);
quad(370, 240, 385, 235, 385, 245, 370, 250);
quad(385, 235, 405, 245, 400, 255, 385, 245);
//眼睛
fill(0,0,0);
ellipse(295,290,50,50);
ellipse(385,290,50,50);
//嘴巴
fill(0,0,0);
quad(295, 345, 370, 340, 375, 430, 310, 430);
fill(255,121,121);
quad(300, 350, 365, 345, 370, 425, 315, 425);
fill(0,0,0);
quad(315, 365, 340, 395, 335, 400, 310, 375);
quad(355, 360, 365, 365, 340, 405, 335, 400);
//害羞紋
fill(0,0,0);
quad(230, 345, 240, 345, 235, 380, 225 , 380);
quad(255, 345, 265, 345, 257, 375, 247 , 373);
quad(275, 350, 285, 350, 280, 375, 270 , 375);
quad(385, 350, 392, 345, 402, 360, 395 , 365);
quad(407, 348, 414, 343, 422, 360, 415 , 365);
quad(427, 340, 437, 340, 442, 365, 435 , 370);
//圓按鈕
fill(0,0,0);
ellipse(495,240,30,30);
ellipse(495,300,30,30);
fill(255,255,128);
ellipse(495,240,20,20);
ellipse(495,300,20,20);
//方按鈕
fill(0,0,0);
rect(480,335,30,70);
rect(480,410,30,25);
fill(255,255,128);
rect(485,340,20,60);
rect(485,415,20,15);
//腳腳
fill(0,0,0);
rect(205,450,35,25);
rect(460,450,35,25);
fill(181,230,29);
rect(210,450,25,20);
rect(465,450,25,20);
//尾巴
fill(0,0,0);
rect(0,400,175,25);
fill(3,186,136);
rect(0,405,172,15);

用Processing劃出的圖：

作業1-3：
第一週上課心得 (學了什麼東西？有什麼東西不懂？還想學什麼？)

雖然後來才加選近來，而第一週也沒有上到課，但是 Processing 的介面和操作方式真的比想像中容易許多，感覺多嘗試幾次就能上手 : D
然後這學期的課程除了有facebook社團幫助討論解答，還多加了部落格當作學習和繳交作業的管道，讓我覺得很新鮮也很實用。而且可以直接看到同學的作品，每個都讓我大開眼界，也刺激了自己做作業的興趣和想像。

Week1,HW01

1.
2.
size(300,300);
PImage kitty;
kitty = loadImage("http://carseatcoversforgirls.us/wp-content/uploads/2012/02/hello-kitty-300x281.jpg");
image(kitty, 0,0);

3.
4.因為最後才加選到所以還沒去上過課，看著其他同學的作品試著畫畫看，畫得很簡陋，希望能追上大家的進度。

Week1,HW01

1-1 3D Mouse by ETGALIM, ARDUINO+Processing

1-1 叫圖

size(500,500);

PImage sanrio;

sanrio = loadImage("http://iwantigot.geekigirl.com/wp-content/uploads/2010/06/20100607134637ENPRNPRN-SANRIO-ANNIV-LOGO-1y-1275918397MR.jpg.pagespeed.ce.ZSsnvuzU4X.jpg");

image(sanrio, 20,20);

1-3

[原圖]

[程式碼]

size(772, 443); //視窗大小

background(255); //背景

fill(0,130,255); //藍色圈圈

ellipse(200, 221,174, 174); //(x,y,寬,高)

fill(255,255,255); //白色內圈

ellipse(200, 221, 143, 144); //(x,y,寬,高)

fill(0,0,0); //黑色圈圈

ellipse(397, 221,174, 174);

fill(255,255,255); //白色內圈

ellipse(397, 221, 143, 144);

fill(255,0,0); //紅色圈圈

ellipse(592, 221,174, 174);

fill(255,255,255); //白色內圈

ellipse(592, 221, 143, 144);

fill(241,231,23); //黃色圈圈

ellipse(300, 300,174, 174);

fill(255,255,255); //白色內圈

ellipse(300, 300, 143, 144);

fill(0,128,64); //綠色圈圈

ellipse(496, 300,174, 174);

fill(255,255,255); //白色內圈

ellipse(496, 300, 143, 144);

[完成圖]

2012年9月18日星期二

Week1,HW01

作業一：找尋使用processing製作的作品

Arduino iphone processing color mixer tutorial

混色器 ( 控制3個LED的Arduino連接到你的iPhone！)

9：25 ─ 9：50 與 13：10為 Demo 成果部分，
而9：50後有電路實作(接LED)，
藉由mac作業系統設定控制並連接混色器(13：30)

作業二 : kitty程式碼

size(300,240);
PImage pic;
pic = loadImage("http://upload.wikimedia.org/wikipedia/zh/thumb/e/ef/P_and_F_Logo.jpg/260px-P_and_F_Logo.jpg");
image(pic, 20,20);

作業三：想用processing畫的圖

多拉A夢

size(206,244);

//noStroke();

//頭

fill(2,187,233);

ellipse(100, 75, 150, 146);

//身體

fill(2,187,233);

rect(47,140, 108, 76, 3);

quad(17,165,47,143,48,173,32,185);

quad(154,143,178,162,166,180,153,170);

fill(255,255,255);

ellipse(23,174,30,31);

ellipse(178,173,30,31);

ellipse(100, 165, 84, 84);//身體白處

//臉

fill(255,255,255);

ellipse(100, 95, 126, 95);

//眼睛

fill(255,255,255);

ellipse(82, 46, 35, 44);

fill(255,255,255);

ellipse(117, 46, 35, 44);

//眼珠

fill(0,0,0);

ellipse(91, 55, 9, 9);

fill(0,0,0);

ellipse(111, 55, 9, 9);

//鼻子

fill(255,0,0);

ellipse(100, 68, 19, 19);

//嘴巴

line(100,77,100,125);

noFill();

arc(100,88,84,77,PI/7.8,PI/1.2);

//鬍鬚

line(128,78,153,69);

line(128,84,155,84);

line(128,88,153,98);

line(77,78,51,69);

line(77,84,50,84);

line(77,88,51,98);

//項圈

fill(207,36,12);

rect(45,132,113,11,5);

//鈴鐺

fill(255,255,0);

ellipse(100,146,22,23);

line(91,143,109,143);

line(90,146,111,146);

fill(0,0,0);

ellipse(100,149,2,2);

line(100,150,100,157);

//口袋

fill(255,255,255);

arc(100, 165, 50, 50, 0, PI);

line(75,164,125,165);

//腳

fill(255,255,255);

rect(38,215,60,16,10,5,5,5);

rect(100,215,60,16,5,10,5,5);

我畫的

作業四 : 第一週上課心得
我是第二周才加選進此課程的，第一週沒有上到課，Processing 的介面和操作方式感覺不會很繁瑣複雜。
以Blogger學習和繳交作業的方式，可以直接看到其他同學的作品，可以互相激勵及切磋呢!

Week1,HW01

1-1 YouTube分享

1-2 Hello World 變 Hello Kitty

size(330,450);
PImage kero;
kero = loadImage("http://baochen.web.fc2.com/images/Keroro.jpg");
image(kero, 20,20);

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

原圖

Processing 圖

size(260,250);
background(255);
noStroke();

/*星星*/
fill(255,255,0);
triangle(129,5,170,80,86,80);
triangle(170,80,255,100,197,162);
triangle(197,162,210,250,130,212);
triangle(130,212,50,247,58,161);
triangle(86,80,3,100,58,161);
triangle(86,80,130,212,58,161);
triangle(86,80,170,80,130,212);
triangle(170,80,197,162,130,212);

/*眼睛*/
fill(0);
ellipse(106,120,15,50);
ellipse(156,120,15,50);
fill(255);
ellipse(156,110,10,20);
ellipse(106,110,10,20);

原本是用line線來畫星星，可是無法著色，因此把星星分成八等份的triangle三角形，就可以上所想要的顏色了；用小畫家輔助畫圖瞄點方便了許多。

1-4 請寫下你的心得 (1) 你學了什麼東西, (2) 有什麼東西不懂, (3) , 還想學什麼
第一次的課程雖然沒有參予到，但會努力趕上進度的!

Week1,HW01

第一題

第二題

size(500,500);
PImage kitty;
kitty = loadImage("http://pic7.nipic.com/20100607/5049923_100835005070_2.jpg");
image(kitty, 20,20);

Week02,HW02

size(800,600);
for(int i=0;i<40;i++)
{
   for(int  j=0;j<30;j++)
{
fill(random(255),random(255),random(255));
rect(i*10,j*10,(i+1)*10,(j+1)*10);
}
}
for(int i=0;i<40;i++)
{
for(int j=30;j<60;j++)
{
fill(0,j*255/30,i*255/40);
rect(i*10,j*10,(i+1)*10,(j+1)*10);
}
}
for(int i=40;i<80;i++)
{
   for(int j =0;j<30;j++)
{
fill((i-40)*255/40,j*255/30,0);
rect(i*10,j*10,(i+1)*10,(j+1)*10);
}
}
for(int i=40;i<80;i++)
{
   for(int j=30;j<60;j++)
{
fill((i-40)*255/40,(j-30)*255/30,(j-30)*255/30);
rect(i*10,j*10,(i+1)*10,(j+1)*10);
}
}

把老師教的幾個圖片技巧做在一起

size(800,800);
for(int i=0;i<80;i++)
{
for(int k=0;k<80;k++)
{
fill(0,0,i*255/40);
ellipse(i*20,k*20,20,20);
fill(i*255/40,k*255/40,0);
rect(i*10,k*10,5,5);
}
}
for(int n=0;n<2000;n++)
{
fill(random(255),random(255),random(255));
ellipse(random(800),random(800),random(10),random(10));
}

多方的嘗試了一下不過不知道怎麼弄才會好看

Week1,HW01

第一題

第二題
kitty 程式碼

size(190,190);
PImage kitty;
kitty = loadImage("http://daxinf8tk39bw.cloudfront.net/wp-content/uploads/2012/05/hello-kitty.png");
image(kitty,20,20);

week02,HW02

HW2-1
1.調整尺寸
2.填滿顏色
3.畫出50個正方形

size(600,600);
for(int i=0;i<50){

fill(random(255),random(255),random(255),random(125));
rect(random(500),random(500),random(500),random(500));
}

HW2-2

1.貼出類似磁磚效果

2.漸層效果

size(400,400); for(int a=0;a<40;a++){ for(int k=0;k<40;k++){ fill(0,a*255/40,k*255/30,100); ellipse(a*20, k*20, 20, 20); fill(a*255/40,0,k*255/30,100); rect(a*10, k*10, 10, 10); } }

HW2-3

1.畫眼睛

size(400,300);

for(int a=0;a<4;a++){

for(int k=0;k<3;k++){

fill(0,a*255/4,k*255/3,100);

ellipse(a*100+50, k*100+50, 100, 100);

fill(0,a*255/4,k*255/3,255);

ellipse(a*100+50, k*100+50, 100, 40);

fill(255,255,255,255);

ellipse(a*100+50, k*100+50, 80, 60);

fill(0,0,0,255);

ellipse(a*100+50, k*100+50, 50, 30);

}

心得:

程式碼的語法都非常淺顯易懂，只是自己還是需要在邏輯方面上的加強，要不然很難使用。

Week02,HW02

作業一

size(600,600); //視窗大小

for(int i=0;i<50;i++){

fill(random(255), random(255), random(255), random(255)); //fill顏色， randow為亂數

rect(random(500), random(500),random(300), random(300) ); //rect四邊形

}

多維度色彩及隨機四邊形

作業二

size(800,600);

for(int i=0;i<40;i++){

for(int j=0;j<40;j++){

for(int k=0;k<40;k++){

fill(i*255/10,j*255/10,k*255/10);

ellipse(i*30,k*30, 50,50);

}

彩色魚鱗

作業三

size(400,300);

for(int i=0;i<4;i++){

for(int k=0;k<3;k++){

fill(i*255/2,k*255/3,50);

ellipse(i*100+50,k*100+50, 100,100);

fill(255,255,255);

ellipse(i*100+50,k*100+50, 20,50);

fill(0,0,0);

ellipse(i*100+50,k*100+50, 10,10);

}

噁矮妖怪眼睛

作業四
經由同學的口述了解課程內容才加入此課程，
由不同的方式設計並繪圖，
我會再上網查查Proccessing的相關資料已跟上進度。

真是有趣的課程 : )

size(800,800); PImage kitty; kitty = loadImage("http://4.bp.blogspot.com/_ZzqosGpYFAw/TLFI6tHuiDI/AAAAAAAADDA/bbBoJ0Xz-50/s1600/Hello+Kitty.gif"); image(kitty, 20,20);

week02,HW02

1.
(1)processing
size(600,600);
for (int i=0;i<50;i++){
fill(random(255),random(255),random(255));
rect(random(250),random(250),random(150),random(150));
}

(2)pic

2.
(1)processing

size(700,500);
for (int i=0;i<70;i++){
for(int j=0;j<50;j++){
fill(i*155/50,j*300/20,100);
rect(i*20,j*50,20,20);

}
}

(2).pic

(1)processing

size(500,300);

for(int i=0;i<5;i++){

for(int k=0;k<3;k++){

fill(i*300/6,k*255/2,60);

ellipse(i*100+50,k*100+50, 100,100);

fill(i*255/10,k*200/2,5);

ellipse(i*100+50,k*100+50, 10,10);

}

(2).pic

4.心得
原來顏色與形狀的不同
可以產生這麼多的變化

Week2,HW02

1.迴圈長方體

2.彩色馬賽克

3.圓形迴圈

課堂心得:

　　除了學會圓形、正方形的打法，還會利用for迴圈做更多變化。

WEEK01,HW01

1.
processing 影片

2.

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

3.
原圖

size(400,600);
fill(255,200,0,100);
rect(130,100,150,100);
rect(165,200,80,120);
fill(0,0,0,255);
ellipse(155,210,20,20);
fill(0,0,0,255);
ellipse(255,210,20,20);
fill(255,200,0,100);
rect(145,220,20,80);
fill(255,200,0,100);
rect(245,220,20,80);
fill(255,200,0,100);
rect(165,320,80,20);
rect(165,340,35,50);
rect(210,340,35,50);

完成圖:

size(600,600);
for (int i=0;i<50;i++){
fill(random(255),random(255),random(255));
rect(random(250),random(250),random(150),random(150));
}

size(400,300);
for(int i=0;i<40;i++){
for(int k=0;k<30;k++){
    fill(i*255/30,k*255/-20,50);
    ellipse(i*10,k*40,-10,60);
     rect(i*10,k*10, 10,10);
}
}

size(400,300);
for(int i=0;i<4;i++){
for(int k=0;k<3;k++){
    fill(i*255/4,k*255/3,60);
    ellipse(i*100+50,k*100+50, 100,100);
    fill(i*255/20,k*255/50,5);
    ellipse(i*100+30,k*100+50, 40,90);
}
}

今天的上課氣氛非常好 , 上課進度也非常符合我的學習速度 , 希望老師可以一直維持這樣的上課速度這樣才能讓我完全吸收學習 , 今天的內容也非常的有趣實用 , 謝謝老師的指導 , 我會繼續認真學習

week2

作業1

size(600,600);
for(int i=0;i<50;i++)
{
fill(random(255),random(255),random(255));
rect(random(255),random(255),random(255),random(255));
}

作業2

size(400,300);

for(int i=0;i<40;i++)

{

for(int x=0;x<30;x++){

noStroke();

fill(i*220/20,x*200/20,i*200/16);

rect(i*10,x*10,10,10);

}

作業3

size(600,500);

for(int i=0;i<6;i++){

for(int k=0;k<5;k++){

fill(255,255,255);

ellipse(i*100+50,k*100+50, 100,100);

fill(i*255/8,k*255/2,255/2);

ellipse(i*100+50,k*100+50, 50,50);

fill(0,0,0);

ellipse(i*100+50,k*100+50, 10,40);

}

Week2,HW02

size(600,600);
for(int i=0;i<50;i++){
fill(random(255),random(255),random(255));
rect(random(255),random(255),random(255),random(255));
}

size(500,500);

for(int i=0;i<50;i++){ for(int k=0;k<50;k++){
fill(i*320/40,k*300/40,120);
rect(i*10,k*10, 50,30);
}
}

size(400,300);

for(int i=0;i<4;i++)
{
for(int k=0;k<3;k++){
fill(i*128/4,k*18/5,0);
ellipse(i*100+50,k*100+50, 100,100);
fill(i*80/4,k*250/5,0);
ellipse(i*100+50,k*100+50, 80,100);
fill(i*255/4,k*255/3,0);
ellipse(i*100+50,k*100+50, 60,100);
fill(i*120/4,k*150/3,0);
ellipse(i*100+50,k*100+50, 40,100);
fill(i*64/4,k*64/5,0);
ellipse(i*100+50,k*100+50, 20,100);
fill(i*128/8,k*100/10,0);
ellipse(i*100+50,k*100+50, 0,100);
}
}

心得感想：

今天讓我學到了很多圖案的程式碼

還學到了馬賽克的程式，以及加以變化就能變出很多圖案的程式碼，例如可以做出西瓜，眼睛之類的圓形狀物體。

訂閱：文章 (Atom)

2012互動技術概論

網頁

2012年9月22日星期六

Week01,HW01

2012年9月19日星期三

week1 HW01

Week02,HW02

Week01 , HW01

Week1,HW01

Week1,HW01

2012年9月18日星期二

Week1,HW01

Week1,HW01

Week1,HW01

Week02,HW02

Week1,HW01

week02,HW02

Week02,HW02

week02,HW02

Week2,HW02

WEEK01,HW01

week2

Week2,HW02

作者們

搜尋此網誌

網頁

2012年9月22日 星期六

2012年9月19日 星期三

2012年9月18日 星期二

2012年9月22日星期六

2012年9月19日星期三

2012年9月18日星期二