Jain's 互動技術概論筆記#Week02

 今天來做小畫家

先來用背景換色

沒按的時候

按下滑鼠變紅色

現在用個畫畫用的線

把換背景改成line(mouseX,mouseY,0,0);

mouseX,mouseX現在滑鼠的位置

會從0,0連到現在滑鼠的位置畫線

但它會連在(0,0)這個點

那我們把後面那個(0,0)改成過去的滑鼠座標

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

但是只有黑色不太行吧

所以利用滑鼠去選擇色塊選色

程式碼

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);//紅色

      else if(mouseY<200) stroke(0,255,0);//綠色//在此區間點選可以改變畫筆顏色

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

  }

}

那我們也可以調整粗細

原理一樣

void setup(){

  size(500,500);

  rect(0,0,100,100);ellipse(50,50,8,8);//8的圓

  rect(0,100,100,100); ellipse(50,150,4,4);//4的圓

}

void draw(){

  if(mousePressed) {

    if(mouseX<100){

      if(mouseY<100) strokeWeight(8);//粗

      else if(mouseY<200) strokeWeight(4);//細

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

  }

}

也可以利用for迴圈來做

利用i這個變數增加選項

將這兩個合併

完成拉!!

程式碼:

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

  }

  fill(#FF0320); rect(50,50,50,50);

  fill(#FF6403); rect(50,100,50,50);

  fill(#EDFF03); rect(50,150,50,50);

  fill(#03FF11); rect(50,200,50,50);

  fill(#03BEFF); rect(50,250,50,50);

  fill(#032EFF); rect(50,300,50,50);

  fill(#8C03FF); rect(50,350,50,50);

}

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 if(mouseX>50 && mouseX<100)

    {

      if(mouseY>1*50 && mouseY<1*50+50)stroke(#FF0320);

      if(mouseY>2*50 && mouseY<2*50+50)stroke(#FF6403);

      if(mouseY>3*50 && mouseY<3*50+50)stroke(#EDFF03);

      if(mouseY>4*50 && mouseY<4*50+50)stroke(#03FF11);

      if(mouseY>5*50 && mouseY<5*50+50)stroke(#03BEFF);

      if(mouseY>6*50 && mouseY<6*50+50)stroke(#032EFF);

      if(mouseY>7*50 && mouseY<7*50+50)stroke(#8C03FF);

    }

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

  }

}

紅底為顏色

藍底為粗細