2021年10月4日 星期一

week02 小畫家

 void setup(){

  size(500,500);

}

void draw(){

  if(mousePressed) background(255,0,0);

  else background(0,255,0);

}

mousePressed按下滑鼠

void setup(){

  size(500,500);

}

void draw(){

  if(mousePressed) line(mouseX,mouseY,0,0);

}

這樣可以從角落畫線到滑鼠點的位子

void setup(){
  size(500,500);
}
void draw(){
  if(mousePressed) line(mouseX,mouseY,pmouseX,pmouseY);
}
pmouse :前一個滑鼠的位子
前一個位子+現在的位子可以連續連線,做出畫線的感覺


void setup(){
  size(500,500);
  fill(255,0,0); rect(0,0,100,100);//red (畫左上紅色選擇區)
  fill(0,255,0); rect(0,100,100,100);//green (畫左上綠色選擇區)
}
void draw(){
  if(mousePressed) {
    if(mouseX<100){
      if(mouseY<100) stroke(255,0,0);//red
      else if(mouseY<200) stroke(0,255,0);//green
    } 
    else line(mouseX,mouseY,pmouseX,pmouseY);
  }
}
做出類似小畫家選顏色的部分

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);
  }
}

做出類似小畫家選筆粗細的部分

void setup(){
  size(500,500);
  for(int i=1;i<8;i++){
    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);
  }
}

用for迴圈做出更多粗細選擇

void setup(){
  size(500,500);
  fill(#FF0505); rect(0,50,50,50);
  fill(#FFB005); rect(0,100,50,50);
  fill(#D0FF05); rect(0,150,50,50);
  fill(#05FF24); rect(0,200,50,50);
  fill(#05DCFF); rect(0,250,50,50);
  fill(#051BFF); rect(0,300,50,50);
  fill(#7905FF); rect(0,350,50,50);
  fill(#FF05EF); rect(0,400,50,50);
}
void draw(){
  if(mousePressed) {
    if(mouseX<50){
        if(mouseY>1*50&&mouseY<1*50+50) stroke(#FF0505);
        if(mouseY>2*50&&mouseY<2*50+50) stroke(#FFB005);
        if(mouseY>3*50&&mouseY<3*50+50) stroke(#D0FF05);
        if(mouseY>4*50&&mouseY<4*50+50) stroke(#05FF24);
        if(mouseY>5*50&&mouseY<5*50+50) stroke(#05DCFF);
        if(mouseY>6*50&&mouseY<6*50+50) stroke(#051BFF);
        if(mouseY>7*50&&mouseY<7*50+50) stroke(#7905FF);
        if(mouseY>8*50&&mouseY<8*50+50) stroke(#FF05EF); 
        }
        else line(mouseX,mouseY,pmouseX,pmouseY);
      }
  }
用暴力一點的方式做選顏色

color[] c = {#FF0505,#FFB005,#D0FF05,#05FF24,#05DCFF,#051BFF,#7905FF,#FF05EF};//顏色陣列
void setup(){
  size(500,500);
  for(int i=0;i<8;i++){
    fill(255); rect(0,i*50,50,50); ellipse(25,25+i*50,i+1,i+1);//筆刷粗細圖示列表
    fill(c[i]); rect(450,i*50,50,50);//顏色圖示列表
  }
}
void draw(){
  if(mousePressed) {
    if(mouseX<50){
      for(int i=0;i<8;i++){
          if(mouseY>i*50&&mouseY<i*50+50) strokeWeight(i+1);//筆刷粗細
      }
    }
    else if(mouseX>450){
      for(int i=0;i<8;i++){
        if(mouseY>i*50&&mouseY<i*50+50) stroke(c[i]);//顏色
      }
    }
        else line(mouseX,mouseY,pmouseX,pmouseY);
    }
}

利用迴圈將兩者結合作出小畫家



沒有留言:

張貼留言