wendy_week2

 互動技術概論 學習日誌

week2

學習目標:

(一)色彩指令

(二)if & else運用

(三)實作小畫家

語言 → Processing

下載網址  →  https://processing.org/download/

(一)色彩指令

背景顏色:

background(色碼);

線框顏色:

stroke(色碼);

填滿顏色:

fill(色碼);

(二)if & else運用

setup()函式:初始設定

void setup(){

  size(500,500);

}

void draw(){

  if(mousePressed){

    background(#30B5CE);

    stroke(#095462);

    fill(#F5B2BF);

    ellipse(250, 250, 200, 200);

    fill(#BC062A);

    ellipse(250, 250, 150, 150);

    fill(#F5B2BF);

    ellipse(250, 250, 100, 100);

    fill(#BC062A);

    ellipse(250, 250, 50, 50);

  }

  else{

    background(#30B5CE);

    stroke(#095462);

    fill(#BC062A);

    ellipse(250, 250, 200, 200);

  }

}

(三)實作小畫家

功能:

(1)自由劃線

(2)選擇顏色

(3)存檔

void setup(){

  size(600,500);

  background(#FFFFFF);

  fill(#FF0000); rect(0,0,100,100);

  fill(#00FF00); rect(0,100,100,100);

  fill(#0000CD); rect(0,200,100,100);

  fill(#FFFF00); rect(0,300,100,100);

  fill(#800080); rect(0,400,100,100);

  strokeWeight(2);

}

void  keyPressed(){

  save("draw.png");

}

void draw(){

 

  if(mousePressed && mouseX<100){

    stroke(#ff0000);

    if(mouseY<100)stroke(#FF0000);

    else if(mouseY<200)stroke(#00FF00);

    else if(mouseY<300)stroke(#0000CD);

    else if(mouseY<400)stroke(#FFFF00);

    else if(mouseY<500)stroke(#800080);    

  }

  else if(mousePressed && mouseX>100){

  

    line(mouseX,mouseY,pmouseX,pmouseY);

  }

}