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

2012年10月4日星期四

Week04,HW04

在課堂上製作屬於自己的小畫家，我的小畫家具有變換顏色和變換粗細的功能，這樣大家上課就能玩圈圈叉叉囉!

執行圖:

程式碼:

void setup(){
size(600,600);
fill(255,0,0);
rect(0,0,50,50);//紅按鈕
fill(0,255,0);
rect(0,50,50,50);//綠按鈕
fill(0,0,255);
rect(0,100,50,50);//藍按鈕
fill(0,0,0);
rect(0,150,50,50);//黑按鈕
fill(255,255,255);
rect(550,0,50,50);//粗按鈕
rect(550,50,50,50);//細按鈕
fill(0,0,0);
ellipse(575,25,40,40);//粗圓
ellipse(575,75,10,10);//細圓
}
int lines=2;
void draw(){
if (mousePressed && mouseX<50 && mouseY<50) stroke(255,0,0);
else if(mousePressed && mouseX<50 && mouseY<100) stroke(0,255,0);
else if(mousePressed && mouseX<50 && mouseY<150) stroke(0,0,255);
else if(mousePressed && mouseX<50 && mouseY<200) stroke(0,0,0);

else if(mousePressed && mouseX>550 && mouseY<50){
strokeWeight(++lines);
}
else if(mousePressed && mouseX>550 && mouseY<100){
strokeWeight(--lines);
if(lines<2)lines=2;
}
else if(mousePressed) line(mouseX, mouseY, pmouseX, pmouseY);
}

2012年10月3日星期三

hw4,week4

作業 : 小畫家
製作了8種顏色方塊可選則顏色
右方有 "+" 與 "-" 可以調整畫筆粗細
下方
ave按鈕可以存取影像
load按鈕可以載入所存取的影像

void setup()
{
size(600,500);
background(172,255,255);
//background(0,125,63);
//選顏色方塊
fill(255,255,255);
rect(10,10,30,30,3);
fill(192,192,192);
rect(10,50,30,30,3);
fill(128,64,0);
rect(10,90,30,30,3);
fill(255,128,0);
rect(10,130,30,30,3);
fill(255,255,0);
rect(10,170,30,30,3);
fill(108,180,68);
rect(10,210,30,30,3);
fill(252,211,193);
rect(10,250,30,30,3);
fill(0,0,255);
rect(10,290,30,30,3);
fill(0,157,220);
rect(10,330,30,30,3);

//選筆粗
fill(255,255,255);
rect(560,10,30,30,3);
String w = "+";
fill(0);
text(w,572,30);

fill(255,255,255);
rect(560,50,30,30,3);
String d = "-";
fill(0);
text(d,572,70);

//button_save
fill(0,120,0);
rect(450,450,50,30,3);
String s = "save";
fill(255);
text(s,462,470);
//button_load
fill(128,64,64);
rect(507,450,50,30,3);
String l = "load";
fill(255);
text(l,520,470);

stroke(0,0,0);
strokeWeight(1);
}

int ha=5;
void draw()
{
//筆觸大小
if(mousePressed && mouseX>450 && mouseY<50){
strokeWeight(++ha);
if(ha>20)ha=20;
}
else if(mousePressed && mouseX>560 && mouseX<590 && mouseY>50 && mouseY<80){
strokeWeight(--ha);
if(ha<2)ha=2;
}

//button事件
if(mousePressed && mouseX>450 && mouseX<500 && mouseY>450 && mouseY<480){
save("pic_1.jpg");
}
else if(mousePressed && mouseX>507 && mouseX<557 && mouseY>450 && mouseY<480){
PImage file = loadImage("pic_1.jpg");
image(file, 0,0,600,500);
}

//顏色
else if(mousePressed && mouseX<40 && mouseY>10 && mouseY<40)stroke(255,255,255);
else if(mousePressed && mouseX<40 && mouseY>50 && mouseY<80)stroke(192,192,192);
else if(mousePressed && mouseX<40 && mouseY>90 && mouseY<120)stroke(128,64,0);
else if(mousePressed && mouseX<40 && mouseY>130 && mouseY<160)stroke(255,128,0);
else if(mousePressed && mouseX<40 && mouseY>170 && mouseY<200)stroke(255,255,0);
else if(mousePressed && mouseX<40 && mouseY>210 && mouseY<240)stroke(0,128,0);
else if(mousePressed && mouseX<40 && mouseY>250 && mouseY<280)stroke(252,211,193);
else if(mousePressed && mouseX<40 && mouseY>290 && mouseY<320)stroke(0,0,255);
else if(mousePressed && mouseX<40 && mouseY>330 && mouseY<360)stroke(0,157,220);
else if(mousePressed)line(mouseX,mouseY,pmouseX,pmouseY);
}

我是想要畫阿寶.........

心得
小畫家的介面製作好好玩
但是其實我還希望可以做出橡皮擦的功能(因為常常會不小心畫錯)
老師有提供一個方法，是多一個筆刷並設成背景顏色。
但是我想要的是四還原功能的筆刷~~
還有點選 + - 部分加大縮小筆刷大小
但是顏色都會殘留在上面

2012年10月2日星期二

week4hw4

今天我成功地完成了自己的小畫家 ^__>^ y
可以選顏色，放大縮小筆粗細度，存檔，載檔

void setup(){

background (255,202,202);
size(500,400); //設定視窗大小
fill(247,70,119);
rect(0,0,50,50);
fill(255,255,128);
rect(0,50,50,50);
fill(128,255,128);
rect(0,100,50,50);
fill(149,255,255);
rect(0,150,50,50);
fill(0,128,255);
rect(0,200,50,50);
fill(0,0,0);
rect(0,250,50,50);
fill(255,202,202);
rect(0,300,50,50);
fill(255,202,202);
rect(450,0,50,50);
rect(450,50,50,50);
rect(450,100,50,50);
rect(450,150,50,50);
fill(255,255,255);
rect(465,120,20,20);
}
void draw(){
int www=5;
line(476,163,476,190);
line(480,190,466,183);
line(480,190,490,183);
ellipse(476,24,5,5);
ellipse(476,76,10,10);

if(mousePressed && mouseX<50 && mouseY<50 ) stroke (247,70,119);
else if(mousePressed && mouseX<50 && mouseY<100 ) stroke (255,255,128);
else if(mousePressed && mouseX<50 && mouseY<150 ) stroke (128,255,128);
else if(mousePressed && mouseX<50 && mouseY<200 ) stroke (149,255,255);
else if(mousePressed && mouseX<50 && mouseY<250 ) stroke (0,128,255);
else if(mousePressed && mouseX<50 && mouseY<300 ) stroke (0,0,0);
else if(mousePressed && mouseX<50 && mouseY<350 ) stroke (255,202,202);

else if(mousePressed && mouseX>450 && mouseY<50){
strokeWeight(++www);
}
else if(mousePressed && mouseX>450 && mouseY<100){
strokeWeight(--www);
if(www<2)www=2;
}
else if(mousePressed && mouseX>450 && mouseY<150) save("imageout.png");
else if(mousePressed && mouseX>450 && mouseY<200){
PImage file = loadImage("imageout.png");
image(file,0,0,500,400);
}
else if(mousePressed)line(mouseX,mouseY,pmouseX,pmouseY); //mousePressed 滑鼠按下
}

覺得真開心，剛開始有點小緊張不太會寫，後來參考老師和上屆學長姐的程式碼，完成了我可愛的小畫家，其實蠻簡單的哈哈 ^__^

week03,HW03

1
void setup(){
size(600,600);
}
void draw(){
fill(255,0,0);
ellipse(mouseX,mouseY,150,100);
}

2void setup(){
size(500,500);
frameRate(24);
}
float x=100,y=100;
void draw(){
background(0,0,0);
fill(random(255),random(255),random(255));
ellipse(mouseX,mouseY,50,50);
fill(255,0,0);
ellipse(x,y,50,100);

x=x*0.9 + mouseX*0.1;
y=y*0.9 + mouseY*0.1;
}

這周教得很有趣很實用

week04,HW04

1,小畫家

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

fill(255,0,0,60); //red
noStroke();
rect(0,0,50,50);

fill(255,255,0,60); //yellow
noStroke();
rect(0,50,50,50);

fill(0,0,255,60); //blue
noStroke();
rect(0,100,50,50);

fill(0,255,0,60); //green
noStroke();
rect(0,150,50,50);

fill(0,0,0,80); //black
noStroke();
rect(0,200,50,50);

fill(255,255,255); //thin
stroke(200);
rect(0,250,50,50);
fill(0,0,0);
ellipse(0+25,250+25,5,5);

fill(255,255,255); //stok
stroke(200);
rect(0,300,50,50);
fill(0,0,0);
ellipse(0+25,300+25,10,10);

fill(255,255,255); //eraser
stroke(200);
rect(0,350,50,50);
fill(255);
rect(0+20,350+20,10,10);

stroke(0,0,0);
strokeWeight(2);

fill(255,255,255); //save
stroke(100);
rect(0,400,50,50);
fill(255);
scale(0.5);
triangle(25,820,53,875,81,820);

}
void draw()
{
if(mouseX <50 && mouseY >450 && mouseY <500 && mousePressed)
{
save("aaa.png");
}
else if(mouseX <50 && mouseY >350 && mouseY <400 && mousePressed)
{
stroke(255);
}
else if(mouseX <50 && mouseY >250 && mouseY <300 && mousePressed)
{
strokeWeight(3);
}
else if(mouseX <50 && mouseY >300 && mouseY <350 && mousePressed)
{
strokeWeight(10);
}

else if(mouseX <50 && mouseY <50 && mousePressed)
{
stroke(255,0,0);
}
else if(mouseX <50 && mouseY <100 && mousePressed)
{
stroke(255,255,0);
}
else if(mouseX <50 && mouseY <150 && mousePressed)
{
stroke(0,0,255);
}
else if(mouseX <50 && mouseY <200 && mousePressed)
{
stroke(0,255,0);
}
else if(mouseX <50 && mouseY <250 && mousePressed)
{
stroke(0,0,0);
}
else if(mousePressed)
{
line(mouseX,mouseY,pmouseX,pmouseY);
}
}

2.本周心得
今天我參考去年學長姊的小畫家
了解了其中程式的涵義
並且更改了畫筆顏色
加入調整大小以及存檔的動作
另外我把調色盤介面，調成半透明狀態
讓介面變得有質感，這個idear是從win7視窗想到的
這樣讓小畫家介面變得比較柔和舒適
當然最主要學到的技巧還是在滑鼠行為上面
因為小畫家，讓滑鼠控制的技巧越來越純熟

Week04 , HW04

1. 小畫家
執行畫面

儲存畫面

2.程式碼

void setup(){
size(500,400);
background(255,255,255);
fill(255,0,0);
rect(0,0,50,50);//Red
fill(0,255,0);
rect(0,50,50,50);//Green
fill(0,0,255);
rect(0,100,50,50);//Blue
fill(255,255,255);
rect(0,150,50,50);//eraser
fill(0,0,0);
text("eraser",6,180);
fill(255,255,255);
rect(0,200,50,50);//save
fill(0,0,0);
text("save",10,230);
fill(255,255,255);
rect(450,0,50,50);
ellipse(475, 25, 2,2);//samllpen
rect(450,50,50,50);
ellipse(475, 75, 6, 6);//midpen
rect(450,100,50,50);
ellipse(475, 125, 10,10);//largepen
}
void draw(){
if(mousePressed && mouseX<50 && mouseY <50) stroke(255,0,0);
else if(mousePressed && mouseX<50 && mouseY <100) stroke(0,255,0);
else if(mousePressed && mouseX<50 && mouseY <150) stroke(0,0,255);
else if(mousePressed && mouseX<50 && mouseY <200) stroke(255,255,255);
else if(mousePressed && mouseX<50 && mouseY <250) save("QQQ.png");
   else if(mousePressed && mouseX>450 && mouseY <50) strokeWeight(2);
    else if(mousePressed && mouseX>450 && mouseY <100) strokeWeight(6);
     else if(mousePressed && mouseX>450 && mouseY <150) strokeWeight(10);
if(mousePressed) line(mouseX,mouseY,pmouseX,pmouseY);
}

3. 心得
小畫家的原理很好理解
區塊滑鼠點到就換色
不過如果顏色要設多一點，像電腦的小畫家一樣
這樣程式碼不就必須要寫很長@@??

現在光做簡易版就有點眼花了
不知道有沒有辦法簡化一點

Week04,hw04

(1) 用 processing 畫一個小畫家，然後畫圖 ~~

void setup(){
size(600,600);
background(0,0,0);

fill(255,0,0);
rect(0,0,50,50);

fill(255,127,39);
rect(0,50,50,50);

fill(255,255,0);
rect(0,100,50,50);

fill(0,128,0);
rect(0,150,50,50);

fill(0,128,255);
rect(0,200,50,50);

fill(255,255,255); 
rect(0,250,50,50);

stroke(255,255,255);
fill(0,0,0);
rect(0,300,49,49);

stroke(0,0,0);
fill(255,255,255); 
rect(550,0,50,50); //小圓點點框框
ellipse(575, 25, 2,2); //小圓點點

rect(550,50,50,50); //中圓點點框框
ellipse(575, 75, 6, 6); //中圓點點

rect(550,100,50,50); //大圓點點框框
ellipse(575, 125, 10,10); //大圓點點


rect(550,150,50,50);
fill(0,0,0);
text("Save",563,180);

stroke(255,255,255); //原線段粗細
strokeWeight(1);

}
void draw(){
  
  if(mousePressed && mouseX&rt;550 && mouseY<50) strokeWeight(3);
  else if(mousePressed && mouseX&rt;550 && mouseY<100) strokeWeight(6);
  else if(mousePressed && mouseX&rt;550 && mouseY<150) strokeWeight(10);
  
  else if(mousePressed && mouseX<50 && mouseY<50) stroke(255,0,0);
  else if(mousePressed && mouseX<50 && mouseY<100) stroke(255,127,39);
  else if(mousePressed && mouseX<50 && mouseY<150) stroke(255,255,0);
  else if(mousePressed && mouseX<50 && mouseY<200) stroke(0,128,0);
  else if(mousePressed && mouseX<50 && mouseY<250) stroke(0,128,255);
  else if(mousePressed && mouseX<50 && mouseY<300) stroke(255,255,255);
  else if(mousePressed && mouseX<50 && mouseY<350) stroke(0,0,);


  else if(mousePressed)
  line(mouseX,mouseY,pmouseX,pmouseY);
}

肚子沒有紋路的豆豆龍

(2) 心得感想

在今天這堂課中，完成了類似小畫家功能的作業
左邊可以選畫筆顏色，右邊可以選畫筆粗細
但是目前 save 功能沒有辦法用 ˊ ˇ ˋ
因為快要下課了，所以程式還來不及加進去
連龍貓肚子的紋路也來不及畫 Q Q
我會找時間把程式碼補完整的：D
有空就再畫一張嘍 ~~~~

Week04,HW04

void setup(){
size(600,400);
background(255,255,255);
fill(237,28,36); //紅
rect(0,0,50,50);
fill(255,127,39); //澄
rect(0,50,50,50);
fill(255,242,0); //黃
rect(0,100,50,50);
fill(34,177,76); //綠
rect(0,150,50,50);
fill(0,162,232); //藍
rect(0,200,50,50);
fill(63,72,204); //靛
rect(0,250,50,50);
fill(0,0,0); //紫
rect(0,300,50,50);
fill(255,255,255); //存檔
rect(0,350,50,50);
fill(5,255,255); //讀檔
rect(550,350,50,50);
fill(255,255,255); // 放大
rect(550,0,50,50);
fill(0,0,0);
ellipse(575, 25, 30, 30);
fill(255,255,255); //縮小
rect(550,50,50,50);
fill(0,0,0);
ellipse(575, 75, 10, 10);
}
int www=5;
void draw(){ //控制滑鼠
if(mouseX<50 && mouseY<50) stroke(255,0,0);
else if(mousePressed && mouseX<50 && mouseY<100) stroke(255,127,39);
else if(mousePressed && mouseX<50 && mouseY<150) stroke(255,242,0);
else if(mousePressed && mouseX<50 && mouseY<200) stroke(34,177,76);
else if(mousePressed && mouseX<50 && mouseY<250) stroke(0,162,232);
else if(mousePressed && mouseX<50 && mouseY<300) stroke(63,72,204);
else if(mousePressed && mouseX<50 && mouseY<350) stroke(0,0,0);
else if(mousePressed && mouseX<50 && mouseY<400) save("234.JPEG");
else if(mousePressed && mouseX>550 && mouseY>350){
PImage file = loadImage("234.JPEG"); //讀取圖檔
image(file,0,0,600,400);
}
else if(mousePressed && mouseX>550 && mouseY<50){
    strokeWeight(++www);
}
else if(mousePressed && mouseX>550 && mouseY<100){
    strokeWeight(--www);
    if(www<2)www=2;
}
if(mousePressed) line(mouseX,mouseY,pmouseX,pmouseY);

}

Week04,HW04

(1)自己的小畫家

void setup(){
size(500,500);
background(0,0,0);

//noStroke(); //左邊的顏色fill(255,0,0);//紅rect(0,0,50,50);
fill(255,200,0);//黃rect(0,50,50,50);
fill(80,255,80);//綠rect(0,100,50,50);
fill(50,50,255);//藍rect(0,150,50,50);
fill(55,50,50);//灰rect(0,200,50,50);
fill(255,255,255);//白rect(0,250,50,50);

fill(255,255,255);
rect(450,0,50,50);
fill(255);
rect(450,50,50,50);
rect(450,100,50,50);

fill(0,0,0);
ellipse(475, 25, 2,2);
fill(0,0,0);
ellipse(475, 75, 6, 6);
fill(0,0,0);
ellipse(475, 125, 10,10);

fill(255,255,255);//存檔框框rect(0,300,50,50);

fill(255,255,255);//讀檔框框rect(0,350,50,50);
}

int www=5;

void draw(){
  if(mousePressed && mouseX<50 && mouseY<50) stroke(255,0,0);
  else if(mousePressed && mouseX<50 && mouseY<100) stroke(255,200,0);
  else if(mousePressed && mouseX<50 && mouseY<150) stroke(80,255,80);
  else if(mousePressed && mouseX<50 && mouseY<200) stroke(50,50,255);
  else if(mousePressed && mouseX<50 && mouseY<250) stroke(55,50,50);
  else if(mousePressed && mouseX<50 && mouseY<300) stroke(255,255,255);
  else if(mousePressed)  line(mouseX, mouseY, pmouseX, pmouseY);//畫線 
  else if(mousePressed && mouseX<50 && mouseY<350) save("123.png"); //存檔 
  else if(mousePressed && mouseX<50 && mouseY<400){ //讀檔   PImage img = loadImage("123.png");
   image(img,0,0,500,500);
   } 
   
      
   if(mouseX&rt;450 && mouseX<500 && mouseY&rt;0 && mouseY<50 && mousePressed)strokeWeight(3);
else if(mouseX&rt;450 && mouseX<500 && mouseY&rt;50 && mouseY<100 && mousePressed)strokeWeight(6);
else if(mouseX&rt;450 && mouseX<500 && mouseY&rt;100 && mouseY<150 && mousePressed)strokeWeight(10);
   
     
 }

Week04 HW04

程式碼
void setup(){

size(500,400);
background(241,224,131);

fill(255,255,255);   //save
rect(0,250,50,50);
fill(0,0,0);
text("Save",10,280);

fill(255,255,255);   //load
rect(0,300,50,50);
fill(0,0,0);
text("Load",10,330);

fill(192,192,192); //粗
rect(450,0,50,50);
fill(255,0,0);
text("粗筆",463,30);

fill(192,192,192);   //細
rect(450,50,50,50);
fill(255,0,0);
text("細筆",463,80);

noStroke();
fill(255,0,0); //red
rect(0,0,50,50);

fill(233,33,183); //pink
rect(0,50,50,50);

fill(255,255,0);//yellow
rect(0,100,50,50);

fill(0,255,0);   //green
rect(0,150,50,50);

fill(0,0,255);   //blue

rect(0,200,50,50);

}
int s=5;
void draw(){
if(mousePressed && mouseX<50 && mouseY<50) stroke(255,0,0);

else if(mousePressed && mouseX<50 && mouseY<100) stroke(233,33,183);

else if(mousePressed && mouseX<50 && mouseY<150) stroke(255,255,0);

else if(mousePressed && mouseX<50 && mouseY<200) stroke(0,255,0);

else if(mousePressed && mouseX<50 && mouseY<250) stroke(0,0,255);

else if(mousePressed && mouseX<50 && mouseY<300) save("pic.png");
else if(mousePressed && mouseX<50 && mouseY<350){
    PImage file = loadImage("pic.png");
    image(file, 0,0,500,400);

}else if(mousePressed && mouseX>450 && mouseY<50){
    strokeWeight(++s);
}
else if(mousePressed && mouseX>450 && mouseY<1000){
    strokeWeight(--s);
    if(s<3)s=3;
}
else if(mousePressed) line(mouseX, mouseY, pmouseX, pmouseY);
}

圖片

課堂心得
自己做小畫家好酷，可以調整顏色筆的粗細，很特別。

98160860黃麒, HW04, Week04,

void setup(){
size(500,400);
fill(255,0,0) ; rect(0,0,50,50);
fill(0,255,0); rect(0,50,50,50);
fill(255); rect(0,100,50,50);
fill(255,255,255); rect(0,150,50,50);
fill(125,50,50); ellipse(470,25,50,50); ellipse(470,80,30,30);
fill(0,0,200); rect(0,200,50,50);
fill(0,255,255); rect(0,250,50,50);
}
int www=5;
void draw(){
if(mousePressed && mouseX<50 && mouseY<50) stroke(255,0,0);
else if(mousePressed && mouseX<50 && mouseY<100) stroke(0,255,0);
else if(mousePressed && mouseX<50 && mouseY<250) stroke(0,0,200);
else if(mousePressed && mouseX<50 && mouseY<300) stroke(0,255,255);

else if(mousePressed && mouseX<50 && mouseY<150) save("aaaa.png");
else if(mousePressed && mouseX<50 && mouseY<200){
PImage file = loadImage("aaaa.png");
image(file, 0,0,500,400);

}else if(mousePressed && mouseX>450 && mouseY<50){
strokeWeight(++www);
}
else if(mousePressed && mouseX>450 && mouseY<1000){
strokeWeight(--www);
if(www<2)www=2;
}
else if(mousePressed) line(mouseX, mouseY, pmouseX, pmouseY);
}

Week04, Hw04

1.小畫家

void setup(){
  size(500,400);
  background(223,255,255);
  fill(174,87,0);
  rect(0,0,50,50);
  fill(248,189,67);
  rect(0,50,50,50);
  fill(0);
  rect(0,100,50,50);
  fill(255,255,255);
  rect(0,250,50,50);
  fill(255);  
  rect(0,150,50,50);  //save
  rect(0,200,50,50);  //erase
  
  fill(255,255,255);
  rect(450,0,50,50);
  ellipse(475, 25, 2,2);
  fill(255);
  rect(450,50,50,50);
  ellipse(475, 75, 6, 6);
  rect(450,100,50,50);
  ellipse(475, 125, 10,10);
 
  strokeWeight(1);

}
void draw(){
  if(mousePressed && mouseX<50 && mouseY<50) 
  stroke(174,87,0);
  else if(mousePressed && mouseX<50 && mouseY<100)  
  stroke(248,189,67);
  else if(mousePressed && mouseX<50 && mouseY<150) 
  stroke(0);
  else if(mousePressed && mouseX<50 && mouseY<200) 
  stroke(255);
  else if(mousePressed && mouseX<50 && mouseY<250)  
  save("aaa.png");  //save
  else if(mousePressed && mouseX<50 && mouseY<300)
  
  {                  
    PImage file = loadImage("aaa.png");
    image(file,0,0,500,400);
  }                 //erase
   
  else if(mouseX&rt;450 && mouseX<500 && mouseY&rt;0 && mouseY<50 && mousePressed)
  {
  strokeWeight(3);
  }
  else if(mouseX&rt;450 && mouseX<500 && mouseY&rt;50 && mouseY<100 && mousePressed)
  {
  strokeWeight(6);
  }
  else if(mouseX&rt;450 && mouseX<500 && mouseY&rt;100 && mouseY<150 && mousePressed)
  {
  strokeWeight(10);
  }


  if (mousePressed)
  line(mouseX,mouseY,pmouseX,pmouseY);
}

2.心得
今天教得很有趣，竟然用簡單的程式就可以做出小畫家還可以自己選顏色畫自己喜歡的圖，還可以存檔、復原，很好玩:D

week04,HW04

1
(1)processing
void setup(){
size(500,400);
background(255,255,255);
fill(255,125,128);
rect(0,0,50,25);
fill(255,125,0);
rect(75,0,50,25);
fill(255,255,128);
rect(150,0,50,25);
fill(100,150,10);
rect(225,0,50,25);
fill(125,200,255);
rect(300,0,50,25);
fill(0,0,0);
rect(375,0,50,25);
fill(255,255,255);
rect(450,0,50,25);
line(450,0,500,25);
line(450,25,500,0);
rect(0,50,50,50);
rect(0,100,25,25);
}
int www=5;
void draw(){
if(mousePressed && mouseX<50 && mouseY<25) stroke(255,125,128);
else if(mousePressed && mouseX<125 && mouseY<25) stroke(255,125,0);
else if(mousePressed && mouseX<200 && mouseY<25) stroke(255,255,128);
else if(mousePressed && mouseX<275 && mouseY<25) stroke(100,150,10);
else if(mousePressed && mouseX<350 && mouseY<25) stroke(125,200,255);
else if(mousePressed && mouseX<425 && mouseY<25) stroke(0,0,0);
else if(mousePressed && mouseX<500 && mouseY<25) stroke(255,255,255);
else if(mousePressed && mouseX<50 && mouseY>50){strokeWeight(++www);}
else if(mousePressed && mouseX<25 && mouseY>100){strokeWeight(--www);
if(www<2)www=2;}

else if(mousePressed) line(mouseX, mouseY, pmouseX, pmouseY);
}
(2)pic

2.心得
一次比一次更期待上老師的課了^^

98160682李育瑄

第四週

98163021 張耀璇 HW04 week04

void setup(){
  size(500,400);
fill(255,0,0) ; rect(0,0,50,50);
fill(0,255,0);  rect(0,50,50,50);
fill(255);  rect(0,100,50,50);
fill(255,255,255);  rect(0,150,50,50);
fill(125,50,50);  ellipse(470,25,50,50); ellipse(470,80,30,30);
  fill(0,0,200);  rect(0,200,50,50);
  fill(0,255,255);  rect(0,250,50,50);
}
int www=5;
void draw(){
  if(mousePressed && mouseX<50 && mouseY<50) stroke(255,0,0);
  else if(mousePressed && mouseX<50 && mouseY<100) stroke(0,255,0);
  else if(mousePressed && mouseX<50 && mouseY<250) stroke(0,0,200);
  else if(mousePressed && mouseX<50 && mouseY<300) stroke(0,255,255);
  
  else if(mousePressed && mouseX<50 && mouseY<150) save("aaaa.png");
  else if(mousePressed && mouseX<50 && mouseY<200){ 
    PImage file = loadImage("aaaa.png");
    image(file, 0,0,500,400);
  
  }else if(mousePressed && mouseX&rt;450 && mouseY<50){
    strokeWeight(++www);
  }
  else if(mousePressed && mouseX&rt;450 && mouseY<1000){
    strokeWeight(--www);
    if(www<2)www=2;
  }
  else if(mousePressed)  line(mouseX, mouseY, pmouseX, pmouseY);
}

week02,HW02

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

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

3
size(600,500);
for(int i=0;i<6;i++){
for(int k=0;k<5;k++){
    fill(250,230,230);
    ellipse(i*100+50,k*100+50, 100,100);
    fill(i*255/20,k*255/5,255/5);
    ellipse(i*100+50,k*100+50, 50,50);
    fill(0,0,0);
    ellipse(i*100+50,k*100+50, 15,40);
}
}

這周的感覺滿簡單的


void setup(){

  size(500,400);

  fill(255,0,0);

  rect(0,0,50,50);

  fill(0,255,0);

  rect(0,50,50,50);

  fill(255,255,255);

  rect(0,100,50,50);

  rect(0,150,50,50);

  rect(450,0,50,50);

  rect(450,50,50,50);

}

int www=5;

void draw(){

  if(mousePressed && mouseX<50 && mouseY<50) stroke(255,0,0);

  else if(mousePressed && mouseX<50 && mouseY<100) stroke(0,255,0);

  else if(mousePressed && mouseX<50 && mouseY<200) save("aaaa.png");

  else if(mousePressed && mouseX<50 && mouseY<250){ 

    PImage file = loadImage("aaaa.png");

    image(file, 0,0,500,400);

  

  }else if(mousePressed && mouseX&rt;450 && mouseY<50){

    strokeWeight(++www);

  }

  else if(mousePressed && mouseX&rt;450 && mouseY<1000){

    strokeWeight(--www);

    if(www<2)www=2;

  }

  else if(mousePressed)  line(mouseX, mouseY, pmouseX, pmouseY);

}

Week4,Hw4

int m = millis(),n=1;
void setup()
{
size(500,400);
background(255,255,255);
fill(255,0,0);//紅色方格
noStroke();
rect(0,0,50,50);
fill(0,0,0);//黑色方格
rect(0,50,50,50);
fill(0,0,255);//藍色方格
rect(0,100,50,50);
fill(255,255,0);//黃色方格
rect(0,150,50,50);
fill(0,255,0);//綠色方格
rect(0,200,50,50);
stroke(0,0,0);
fill(255,255,255);//筆觸
rect(450,0,50,50);
fill(255,255,255);
ellipse(475, 25, n,n);//筆觸
fill(255);
rect(450,50,50,50);
ellipse(475, 75, n, n);//筆觸
//rect(450,100,50,50);
//ellipse(475, 125, 10,10);//筆觸
//rect(0,250,50,50);
//stroke(255,0,0);
fill(255,255,255);//筆觸
rect(450,100,50,50);
fill(255,255,255);
rect(450,150,50,50);
fill(255,255,255);//筆觸
rect(450,200,50,50);
strokeWeight(1);
}
void draw()
{
if(mousePressed && mouseX>450 && mouseX<500&&mouseY>150&&mouseY<200) save("aaaa.jpg");
else if(mousePressed && mouseX>500 && mouseX<550&&mouseY>200&&mouseY<250){
PImage file = loadImage("aaaa.png");
image(file, 0,0,500,400);
}
if(n<=2)n=2;
if(n>=20)n=20;
if(mouseX>450 && mouseX<500 && mouseY>0 && mouseY<50 && mousePressed)
{
n++;
strokeWeight(1);
fill(255,255,255);//筆觸
rect(450,100,50,50);
fill(0,0,0);
ellipse(475, 125, n,n);//筆觸
strokeWeight(n);
}
else if(mouseX>450 && mouseX<500 && mouseY>50 && mouseY<100 && mousePressed)
{
n--;
strokeWeight(1);
fill(255,255,255);//筆觸
rect(450,100,50,50);
fill(255,255,255);
ellipse(475, 125, n,n);//筆觸
strokeWeight(n);
}
else if(mouseX>450 && mouseX<500 && mouseY>100 && mouseY<150 && mousePressed)
{
n=10;
}
else if(mouseX < 50 && mouseY<50 && mousePressed)
{
stroke(255,0,0);//紅色
}
else if(mouseX < 50 && mouseY<100 && mousePressed)
{
stroke(0,0,0);//黑色
}
else if(mouseX < 50 && mouseY<150 && mousePressed)
{
stroke(0,0,255);//藍色
}
else if(mouseX < 50 && mouseY<200 && mousePressed)
{
stroke(255,255,0);//黃色
}
else if(mouseX < 50 && mouseY<250 && mousePressed)
{
stroke(0,255,0);//綠色
}
else if(mouseX < 50 && mouseY<300 && mousePressed)
{
stroke(255,255,255);//白色
}
else if(mousePressed)
{
m=second();
strokeWeight(n);
line(mouseX,mouseY,pmouseX,pmouseY);
}

}

Week04,HW04

void setup(){
size(500,400);
rect(0,0,50,50);
fill(255,0,0);
rect(0,50,50,50);
fill(0,255,0);
rect(0,100,50,50);
fill(0,0,255);
rect(0,150,50,50);
fill(255,255,0);
rect(450,0,50,50);
fill(255,0,255);
rect(450,50,50,50);
fill(0,255,255);
}
int www=5;
void draw(){
if(mousePressed && mouseX<50 && mouseY<50) stroke(255,255,255);
else if(mousePressed && mouseX<50 && mouseY<100) stroke(255,0,0);
else if(mousePressed && mouseX<50 && mouseY<100) stroke(0,255,0);
else if(mousePressed && mouseX<50 && mouseY<150) save("aaaa.png");
else if(mousePressed && mouseX<50 && mouseY<200){
    PImage file = loadImage("aaaa.png");
    image(file, 0,0,500,400);

}else if(mousePressed && mouseX>450 && mouseY<50){
    strokeWeight(++www);
}
else if(mousePressed && mouseX>450 && mouseY<1000){
    strokeWeight(--www);
    if(www<2)www=2;
}
else if(mousePressed) line(mouseX, mouseY, pmouseX, pmouseY);
}

void setup()
{
size(500,400);
background(255,255,255);
fill(255,0,0);
rect(0,0,50,50);
fill(255,100,0);
rect(0,50,50,50);
fill(255,255,0);
rect(0,100,50,50);
fill(0,255,0);
rect(0,150,50,50);
fill(0,0,255);
rect(0,200,50,50);
fill(255,0,255);
rect(0,250,50,50);
fill(255,255,255);
rect(450,0,50,50);
fill(255,255,255);
ellipse(475, 25, 2,2);
fill(255);
rect(450,50,50,50);
ellipse(475, 75, 6, 6);
stroke(255,0,0);
strokeWeight(1);
}

int ray=5;
void draw()
{
if(mouseX < 50 && mouseY<50 && mousePressed)
{
stroke(255,0,0);
}
else if(mouseX < 50 && mouseY<100 && mousePressed)
{
stroke(255,100,0);
}
else if(mouseX < 50 && mouseY<150 && mousePressed)
{
stroke(255,255,0);
}
else if(mouseX < 50 && mouseY<200 && mousePressed)
{
stroke(0,255,0);
}
else if(mouseX < 50 && mouseY<250 && mousePressed)
{
stroke(0,0,255);
}
else if(mouseX < 50 && mouseY<300 && mousePressed)
{
stroke(255,0,255);
}
   else if(mousePressed && mouseX>450 && mouseY<50)
{
    strokeWeight(++ray);
}
else if(mousePressed && mouseX>450 && mouseY<1000)
{
    strokeWeight(--ray);
    if(ray<2)ray=2;
}
else if(mousePressed) line(mouseX, mouseY, pmouseX, pmouseY);
}

好玩自製的小畫家，不需要太艱難的程式碼就可以有成就感。

Week4,Hw4

1.1

color dw=color(0,0,0);
PImage a;
int type=0,ex=0,ey=0,wt=1;
boolean draw_ellipse=false;

void setup()
{
  background(255);
  size(500,400);
}
void Colorarea()
{
   //Color  stroke(0);
  strokeWeight(1);
  fill(255,0,0);
  rect(0,0,50,50);
  fill(0,255,0);
  rect(0,50,50,50);
  fill(0,0,255);
  rect(0,100,50,50);
  fill(255,255,0);
  rect(0,150,50,50);
  fill(255,0,255);
  rect(0,200,50,50);
  fill(0,255,255);
  rect(0,250,50,50);
  fill(0,0,0);
  rect(0,300,50,50);
  fill(255);
  rect(0,375,50,25);
  fill(0);
  text("Clean", 7,392);
  fill(255);
  rect(50,375,50,25);
  fill(0);
  text("Save", 60,392);
  stroke(dw);
  strokeWeight(wt);
}
void Strokearea()
{
  //Stroke  noFill();
  stroke(0);
  strokeWeight(1);
  rect(450,0,50,50);
  ellipse(475,25,5,5);
  rect(450,50,50,50);
  ellipse(475,75,10,10);
  rect(450,100,50,50);
  ellipse(475,125,15,15);
  rect(450,350,50,50);
  line(460,360,490,390);
  rect(400,350,50,50);
  ellipse(425,375,30,20); 
  rect(350,350,50,50);
  fill(0);
  ellipse(375,375,30,20);
  stroke(dw);
  strokeWeight(wt);
}
void checked()
{
  int k=mouseY/50;
  if(mouseX<50&&mouseY<350){
    if(k==0) dw=color(255,0,0);
    else if(k==1) dw=color(0,255,0,150);
    else if(k==2) dw=color(0,0,255,150);
    else if(k==3) dw=color(255,255,0,150);   
    else if(k==4) dw=color(255,0,255,150);   
    else if(k==5) dw=color(0,255,255,150);
    else if(k==6) dw=color(0);   
  }
  else if(mouseX&rt;450&&mouseY<150){
    if(k==0) wt=1;
    else if(k==1) wt=3;
    else if(k==2) wt=5;
  }
  else if(mouseX<50&&mouseY&rt;375) background(255);
  else if(mouseX<100&&mouseY&rt;375) save("C:/save1.jpg");
  else if(mouseX&rt;350&&mouseY&rt;350){
    if(mouseX&rt;450) type=0;
    else if(mouseX&rt;400) type=1;
    else if(mouseX&rt;350) type=2;   
  }
  else{
    stroke(dw);
    strokeWeight(wt);
    if(type==0){
      line(pmouseX,pmouseY,mouseX,mouseY);
      draw_ellipse=false;
    }
    else if(type==1){
      noFill();
      draw_ellipse=true;
    }
     else if(type==2){
       fill(dw);
       draw_ellipse=true;
    }
  }
}
void mouseReleased()
{
  if(draw_ellipse){
      noFill();
      ellipse(ex,ey,mouseX-ex,mouseY-ey);  
  }  
}
void mousePressed()
{
  save("C:/temp.jpg");
  ex=mouseX;
  ey=mouseY;
  a=loadImage("C:/temp.jpg");
}
void draw()
{
  Colorarea();
  Strokearea();
  if(mousePressed&&draw_ellipse){
     image(a,0,0);
     if(type==1) noFill();
     else fill(dw);
     ellipse(ex,ey,abs(mouseX-ex),abs(mouseY-ey));
  }
  if(mousePressed) checked();
}

Week04,HW04

PImage img;
void setup()
{

img = loadImage("aaaa.jpg");
size(500,400);
fill(255,0,0);rect(0,0,30,30);
fill(0,0,255);rect(0,30,30,30);
fill(0,255,0);rect(0,60,30,30);
fill(0,0,0);rect(0,90,30,30);
fill(255,255,255);rect(0,120,30,30);
fill(255,255,255);
rect(470,0,30,30);
fill(0,0,0);
rect(470,30,30,30);
fill(255,255,255);
rect(470,60,30,30);
fill(0,0,0);
ellipse(485,75,25,25);
fill(255,255,255);
rect(470,90,30,30);
fill(0,0,0);
ellipse(485,105,10,10);

}
void draw()
{
if(mousePressed && mouseX<30 && mouseY<30) stroke(255,0,0);
if(mousePressed && mouseX<30 && mouseY<60 &&mouseY>30) stroke(0,0,255);
if(mousePressed && mouseX<30 && mouseY<90 &&mouseY>60) stroke(0,255,0);
if(mousePressed && mouseX<30 && mouseY<120 &&mouseY>90) stroke(0,0,0);
if(mousePressed && mouseX<30 && mouseY<150 &&mouseY>120) stroke(255,255,255);
if(mousePressed && mouseX>470 && mouseY<30) save("aaaa.jpg");
if(mousePressed && mouseX>470 && mouseY>30 && mouseY<60) image(img,0,0);
if(mousePressed && mouseX>470 && mouseY>60 && mouseY<90)strokeWeight(5);
if(mousePressed && mouseX>470 && mouseY>90 && mouseY<120)strokeWeight(1);
if(mousePressed) line(mouseX,mouseY,pmouseX,pmouseY);
}

week04,hw04

void setup(){
size(500,400);
fill(0,255,0);
rect(0,0,50,50);
fill(0,0,255);
rect(0,50,50,50);
fill(255,0,0);
rect(0,100,50,50);
fill(255,255,255);
rect(0,150,50,50);
fill(0,0,0);
ellipse(25,175,10,10);
fill(255,255,255);
rect(0,200,50,50);
fill(0,0,0);
ellipse(25,225,30,30);
}
void draw(){
if(mousePressed && mouseX<50 && mouseY<50) stroke(0,255,0);
else if(mousePressed && mouseX<50 && mouseY<100) stroke(0,0,255);
else if(mousePressed && mouseX<50 && mouseY<150) stroke(255,0,0);
else if(mousePressed && mouseX<50 && mouseY<200) strokeWeight(5);
else if(mousePressed && mouseX<50 && mouseY<250) strokeWeight(30);
else if(mousePressed)
line(mouseX,mouseY,pmouseX,pmouseY);
}

慢慢趕上進度了

Week04,HW04

void setup()
{
  size(600,400);
}
int w=1;
void draw()
{
  if(mousePressed&&mouseX<50)
  {
    if(mouseY<50)
      stroke(255,0,0);
    else if(mouseY<100)
      stroke(0,255,0);
    else if(mouseY<150)
      stroke(0,0,255);
    else if(mouseY&rt;350&&mouseY<400)
      save("light.png");
  }
  else if(mousePressed&&mouseX<100&&mouseY&rt;350&&mouseY<400)
  {
    PImage imaged=loadImage("light.png");
    image(imaged,0,0,600,400);
  }
  else if(mousePressed&&mouseX&rt;550&&mouseY<50)
    strokeWeight(++w);
  else if(mousePressed&&mouseX&rt;550&&mouseY<100)
  {
    strokeWeight(--w);
    if(w<1)w=1;
  }
  
  
  if(mousePressed)
  {
    line(mouseX,mouseY,pmouseX,pmouseY);
  }
  
  strokeWeight(1);
  
  fill(255,0,0);
  rect(0,0,50,50);
  fill(0,255,0);
  rect(0,50,50,50);
  fill(0,0,255);
  rect(0,100,50,50);
  
  fill(0,0,0);
  rect(0,350,50,50);
  fill(255,255,255);
  rect(50,350,50,50);
  
  fill(0,0,0);
  ellipse(575,25,50,50);
  fill(255,255,255);
  ellipse(575,75,50,50);
  
  strokeWeight(w);
}

基本上也就是把老師DEMO的功能跑一遍，

做一些(我自以為)優化，

if判定列我不喜歡每一格都寫開，

用大方向去分成幾個小分支，程式的脈絡比較清楚，

（應該也會稍微加快程式的速度？）

存檔和讀檔的功能很有用

week04.HW04

void setup()
{
background(55,155,25);
size(500,400);
stroke(0,0,0);
strokeWeight(1);
fill(255,0,0);
rect(0,0,50,50);
fill(0,255,0);
rect(0,50,50,50);
fill(0,0,255);
rect(0,100,50,50);
fill(0,0,0);
rect(0,150,50,50);
fill(255,255,255);
rect(0,200,50,50);
rect(450,0,50,50);
fill(0,0,0);
text("eraser", 460,30);
fill(255, 255, 255);
rect(450,50,50,50);
ellipse(475,75,1,1);
rect(450,100,50,50);
ellipse(475,125,5,5);
rect(450,150,50,50);
ellipse(475,175,10,10);
rect(450,200,50,50);
fill(0,0,0);
text("Clear", 460,230);
fill(255,255,255);
rect(450,250,50,50);
fill(0,0,0);
text("Save", 460,280);
}
void draw()
{
if(mouseX<50 && mouseY <50 && mousePressed)
{
stroke(255,0,0);
}
else if(mouseX<50 && mouseY <100 && mousePressed)
{
stroke(0,255,0);
}
else if(mouseX<50 && mouseY <150 && mousePressed)
{
stroke(0,0,255);
}
else if(mouseX<50 && mouseY <200 && mousePressed)
{
stroke(0,0,0);
}
else if(mouseX<50 && mouseY <250 && mousePressed)
{
stroke(255,255,255);
}
else if(mouseX>450 && mouseY <50 && mousePressed)
{
stroke(255,255,255);
}
else if(mouseX>450 && mouseY <100 && mousePressed)
{
strokeWeight(1);
}
else if(mouseX>450 && mouseY <150 && mousePressed)
{
strokeWeight(5);
}
else if(mouseX>450 && mouseY <200 && mousePressed)
{
strokeWeight(10);
}
else if(mouseX>450 && mouseY <250 && mousePressed)
{
setup();
}
else if(mouseX>450 && mouseY <300 && mousePressed)
{
save("1.jpg");
}
else if(mousePressed)
{
line(mouseX,mouseY,pmouseX,pmouseY);
}
}

2.心得
這次的還蠻有趣的，用自己設計的小畫家畫圖，超有成就感，感覺自己好像有點樣子了
好像很厲害一樣，期待下周的課程，能學到更多更精彩的東西！

訂閱：文章 (Atom)

2012互動技術概論

網頁

2012年10月4日星期四

Week04,HW04

2012年10月3日星期三

hw4,week4

2012年10月2日星期二

week4hw4

week03,HW03

week04,HW04

Week04 , HW04

Week04,hw04

Week04,HW04

Week04,HW04

Week04 HW04

98160860黃麒, HW04, Week04,

Week04, Hw04

week04,HW04

98160682李育瑄

98163021 張耀璇 HW04 week04

week02,HW02

Week4,Hw4

Week04,HW04

Week4,Hw4

Week04,HW04

week04,hw04

Week04,HW04

week04.HW04

作者們

搜尋此網誌

網頁

2012年10月4日 星期四

2012年10月3日 星期三

2012年10月2日 星期二

2012年10月4日星期四

2012年10月3日星期三

2012年10月2日星期二