Week02 彣禎的上課筆記

一.移動滑鼠座標去改變粗細和顏色

(1)要按一下左鍵才會改變顏色和粗細

void setup(){

  size(800,600);

  colorMode(HSB,100);

}

void draw(){

  line(mouseX,mouseY,pmouseX,pmouseY);

}

void mousePressed(){

  if(mouseX<100){ ///粗細

    strokeWeight(mouseY/50);

  }

  if(mouseX>700){ ///筆觸顏色

    stroke(mouseY/6.0,100,100);

  }

}

(2)移到白色框框就可以改變顏色和粗細，不用點左鍵

void setup(){

  size(800,600);

  rect(width-100,0,width,height);

  rect(0,0,100,height);

  colorMode(HSB,100);

}

void draw(){

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

}

void mouseDragged(){

  if(mouseX<100){

    strokeWeight(mouseY/50);

  }

  if(mouseX>width-100){

    stroke(mouseY/6.0,100,100);

  }

}

(3)改變HSB的值

二.練習寫類似openprocessing的互動

(1)複製 https://www.openprocessing.org/sketch/178381 程式碼到processing並執行

(2)畫出白色圓圈圈

(3)畫出圓錐

void setup(){

  size(720,720,P2D);

}

float pX=-100,pY=-100,r=100;

void draw(){

  ellipse(pX,pY,r,r);

  if(r>3){

    r-=10;

    pX+=13;

  }

}

void mousePressed(){

  pX=mouseX;pY=mouseY;r=100;

}

三.做出會動的哆啦A夢

(1)讀入第一個圖檔

程式打好之後要記得拉圖檔dora.png進去

按執行

(2)讀入第二個圖檔

程式打好之後要記得拉圖檔dora2.png進去

 按執行(dora2會跟著滑鼠動 dora1不會動)

PImage img1,img2;

void setup(){

  size(500,500);

  img1=loadImage("dora.png");

  img2=loadImage("dora2.png");

}

void draw(){

  background(0,255,0);

  image(img1,mouseX,mouseY,100,100);

  image(img2,200,200,100,100);

}