2017年9月25日 星期一

week02 3D的互動筆記

一、可畫線變色變粗的小畫家
1.自動畫線

void setup(){
  size (800,600);
  colorMode(HSB,100);
}
void draw(){
  line(mouseX,mouseY,pmouseX,pmouseY);///when click draw
}

2.自動畫線+變色+變粗

void setup(){
  size (800,600);
  colorMode(HSB,100);
}
void draw(){
  line(mouseX,mouseY,pmouseX,pmouseY);///when click draw
}
void mousePressed(){
  if(mouseX<100){///strokeWeight()
    strokeWeight(mouseY/50);
  }
  if(mouseX>700){///stroke
    stroke(mouseY/6.0 , 100,100);
  }
}

3.左鍵畫線+變色區(加框)+變粗區(加框)

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);///when click draw
}
void mousePressed(){
  if(mouseX<100){///strokeWeight()
    strokeWeight(mouseY/50);
  }
  if(mouseX>700){///stroke
    stroke(mouseY/6.0 , 100,100);
  }
}

二、色票的運用
1.顏色

noStroke();
colorMode(HSB,100);
for(int i=0;i<100;i++){
  for(int j=0;j<100;j++){
    stroke(i,100,100);
    point(i,j);
  }
}

2.飽和


3.亮度


三、OpenProcessing (很多範例的網站)
網址:https://www.openprocessing.org/

有程式碼可以抓


四、畫圓並可以縮小並移動

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

五、讀取圖片+滑鼠游標
1.讀取圖片

PImage img1,img2;
void setup(){
  size(500,500);
  background(0,255,0);
  PImage img=loadImage("Doraemon.png");
  image(img,0,0,500,500);
}

2.滑鼠游標

3.

沒有留言:

張貼留言