2021年10月4日 星期一

week02互動概論筆記

一.
1.程式碼:
void setup(){
   size(500,500); 
}
void draw(){
   if(mousePressed) background(255,0,0);
   else background(0,255,0);
}

點擊滑鼠變換顏色(綠變紅)

2.程式碼:
void setup(){
   size(500,500); 
}
void draw(){
   if(mousePressed) line(mouseX,mouseY,0,0);///畫線從(0,0)開始，根據滑鼠座標變化
   
}


3.程式碼:
void setup(){
   size(500,500); 
}
void draw(){
   if(mousePressed) line(mouseX,mouseY,pmouseX,pmouseY);///畫線從前一個滑鼠座標位置開始，根據滑鼠座標變化
   
}
4.程式碼:
void setup(){
   size(500,500);
   fill(255,0,0);rect(0,0,100,100);///紅色調色盤
   fill(0,255,0);rect(0,100,100,100);///綠色調色盤
}
void draw(){
   if(mousePressed){
      if(mouseX<100){
         if(mouseY<100)stroke(255,0,0);///如果滑鼠座標X與滑鼠座標Y都小於100,即是在紅色調色盤內，就將筆觸改成紅色
         else if(mouseY<200)stroke(0,255,0);///如果滑鼠座標X小於100滑鼠座標Y小於200但大於100，即是在綠色調色盤內，就將筆觸改成綠色
      }else line(mouseX,mouseY,pmouseX,pmouseY);
   }
}
可以在調色盤選擇筆觸的顏色

5.程式碼:
void setup(){
   size(500,500);
   rect(0,0,100,100);ellipse(50,50,8,8);
   rect(0,100,100,100);ellipse(50,150,4,4);
}
void draw(){
   if(mousePressed){
      if(mouseX<100){
         if(mouseY<100)strokeWeight(8);///粗
         else if(mouseY<200)strokeWeight(4);///中
      }else line(mouseX,mouseY,pmouseX,pmouseY);
   }
}
可以選擇不同的筆的粗細

延伸練習 利用for迴圈快速製作多個選擇
程式碼:
void setup(){
   size(500,500);
   for(int i=1;i<8;i++){///製作7個不同的粗細
     rect(0,i*50,50,50);
     ellipse(25,25+i*50,i,i);
   }
   
}
void draw(){
   if(mousePressed){
      if(mouseX<50){
        for(int i=1;i<8;i++){
         if(mouseY>i*50&&mouseY<i*50+50){
           strokeWeight(i);
         }
        }
      }else line(mouseX,mouseY,pmouseX,pmouseY);
   }
}

6.
程式碼:
void setup(){
   size(500,500);
   rect(0,50,50,50);ellipse(25,25+50,1,1);
   rect(0,100,50,50);ellipse(25,25+100,2,2);
   rect(0,150,50,50);ellipse(25,25+150,3,3);
   rect(0,200,50,50);ellipse(25,25+200,4,4);
   rect(0,250,50,50);ellipse(25,25+250,5,5);
   rect(0,300,50,50);ellipse(25,25+300,6,6);
   rect(0,350,50,50);ellipse(25,25+350,7,7);
   rect(0,400,50,50);ellipse(25,25+400,8,8);
}
void draw(){
   if(mousePressed){
      if(mouseX<50){
        if(mouseY>1*50&&mouseY<1*50+50)strokeWeight(1);
        if(mouseY>2*50&&mouseY<2*50+50)strokeWeight(2);
        if(mouseY>3*50&&mouseY<3*50+50)strokeWeight(3);
        if(mouseY>4*50&&mouseY<4*50+50)strokeWeight(4);
        if(mouseY>5*50&&mouseY<5*50+50)strokeWeight(5);
        if(mouseY>6*50&&mouseY<6*50+50)strokeWeight(6);
        if(mouseY>7*50&&mouseY<7*50+50)strokeWeight(7);
        if(mouseY>8*50&&mouseY<8*50+50)strokeWeight(8);
      }else line(mouseX,mouseY,pmouseX,pmouseY);
   }
}
8個不同粗細的選擇

7.
程式碼:
void setup(){
   size(500,500);
   fill(#F71702);rect(0,50,50,50);
   fill(#F75402);rect(0,100,50,50);
   fill(#FFF303);rect(0,150,50,50);
   fill(#3CFF03);rect(0,200,50,50);
   fill(#0383FF);rect(0,250,50,50);
   fill(#3C03FF);rect(0,300,50,50);
   fill(#B10ACB);rect(0,350,50,50);
   fill(#FF00DE);rect(0,400,50,50);
}
void draw(){
   if(mousePressed){
      if(mouseX<50){
        if(mouseY>1*50&&mouseY<1*50+50)stroke(#F71702);
        if(mouseY>2*50&&mouseY<2*50+50)stroke(#F75402);
        if(mouseY>3*50&&mouseY<3*50+50)stroke(#FFF303);
        if(mouseY>4*50&&mouseY<4*50+50)stroke(#3CFF03);
        if(mouseY>5*50&&mouseY<5*50+50)stroke(#0383FF);
        if(mouseY>6*50&&mouseY<6*50+50)stroke(#3C03FF);
        if(mouseY>7*50&&mouseY<7*50+50)stroke(#B10ACB);
        if(mouseY>8*50&&mouseY<8*50+50)stroke(#FF00DE);
      }else line(mouseX,mouseY,pmouseX,pmouseY);
   }
}
8種不同顏色的選擇

8.程式碼:
void setup(){
   size(500,500);
   rect(0,50,50,50);ellipse(25,25+50,1,1);
   rect(0,100,50,50);ellipse(25,25+100,2,2);
   rect(0,150,50,50);ellipse(25,25+150,3,3);
   rect(0,200,50,50);ellipse(25,25+200,4,4);
   rect(0,250,50,50);ellipse(25,25+250,5,5);
   rect(0,300,50,50);ellipse(25,25+300,6,6);
   rect(0,350,50,50);ellipse(25,25+350,7,7);
   rect(0,400,50,50);ellipse(25,25+400,8,8);
   fill(#F71702);rect(450,50,50,50);
   fill(#F75402);rect(450,100,50,50);
   fill(#FFF303);rect(450,150,50,50);
   fill(#3CFF03);rect(450,200,50,50);
   fill(#0383FF);rect(450,250,50,50);
   fill(#3C03FF);rect(450,300,50,50);
   fill(#B10ACB);rect(450,350,50,50);
   fill(#FF00DE);rect(450,400,50,50);
}
void draw(){
   if(mousePressed){
      if(mouseX<50){
        if(mouseY>1*50&&mouseY<1*50+50)strokeWeight(1);
        if(mouseY>2*50&&mouseY<2*50+50)strokeWeight(2);
        if(mouseY>3*50&&mouseY<3*50+50)strokeWeight(3);
        if(mouseY>4*50&&mouseY<4*50+50)strokeWeight(4);
        if(mouseY>5*50&&mouseY<5*50+50)strokeWeight(5);
        if(mouseY>6*50&&mouseY<6*50+50)strokeWeight(6);
        if(mouseY>7*50&&mouseY<7*50+50)strokeWeight(7);
        if(mouseY>8*50&&mouseY<8*50+50)strokeWeight(8);
        }else if(mouseX>450){
        if(mouseY>1*50&&mouseY<1*50+50)stroke(#F71702);
        if(mouseY>2*50&&mouseY<2*50+50)stroke(#F75402);
        if(mouseY>3*50&&mouseY<3*50+50)stroke(#FFF303);
        if(mouseY>4*50&&mouseY<4*50+50)stroke(#3CFF03);
        if(mouseY>5*50&&mouseY<5*50+50)stroke(#0383FF);
        if(mouseY>6*50&&mouseY<6*50+50)stroke(#3C03FF);
        if(mouseY>7*50&&mouseY<7*50+50)stroke(#B10ACB);
        if(mouseY>8*50&&mouseY<8*50+50)stroke(#FF00DE);
      }else line(mouseX,mouseY,pmouseX,pmouseY);
   }
}
將筆的顏色與粗細結合使畫盤更完整





















於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)