2012互動技術概論

2012年9月19日星期三

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月19日星期三

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月19日 星期三

2012年9月18日 星期二

2012年9月19日星期三

2012年9月18日星期二