Week02 小畫家

利用滑鼠點及改變筆刷粗細和顏色

1.跑出基本型

void setup(){

  size(800,600);

  rect(width-100,0,width,height); //左框框

  rect(0,0,100,height);  //右框框

  colorMode(HSB,100);///Q:Hue,Saturation,Brightness,0-100

}

void draw(){

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

}

void mouseDragged(){  //滑鼠拖曳

  if(mouseX<100){///strokeWeight()

    strokeWeight(mouseY/50);

  }

  if(mouseX>width-100){///stroke() 

    stroke(mouseY/6.0,100,100);

  }

}

2.調色盤

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

   }

} 

畫出圖形

1.圓形

void setup() {

  size(720,720);

}

void draw(){

  

}

void mouseDragged(){

  ellipse(mouseX, mouseY, 100,100);

} 

2.圓形並縮小移動

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;

}

3.匯入圖檔並加上背景音樂

size(500,500);

background(255,174,101); 

PImage img=loadImage("download.jpg");

image(img,90,90,300,300);

4.改變滑鼠圖案

PImage img1,img2;

void setup()

{

  size(500,500);

  img1 = loadImage("download.jpg");

  img2 = loadImage("images.jpg");

}

void draw()

{

  background(255,174,101);

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

  image(img1,90,90,300,300);

}

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.

Week 02 邱

#第02週

-------------------------------------------------------------------------------------------------------------------------

◎更好的小畫家

左邊根據 mouseX 的位置調整粗細，右邊根據 mouseX 的位置調整顏色 

程式碼：

  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)
       strokeWeight(mouseY/6.0,100,100);

  } 

}

◎再更好的小畫家

程式碼：

  void setup(){
    size(800,600);

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

    rect(0,0,100,height); //modify
    colorMode(HSB,100);  //Q:Hue,Saturation,Brightness,0-100

}
  void draw(){

    if(mousePressed)

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

  void mousePressed(){//modify!!

    if(mouseX<100) //strokeWeight()

       strokeWeight(mouseY/50);

    if(mouseX>width-100) //stroke()//modify
       strokeWeight(mouseY/6.0,100,100);

  } 

}

 

 

◎colorMode()

程式碼：

void setup(){
   size(800,800);
   colorMode(HSB, 800);
   for (int i = 0; i < 800; i++) {
    for (int j = 0; j < 800; j++) {
      stroke(i, 800, 800);
      point(i, j);
    }
}
//noStroke();
}

 

 ◎畫圈圈

程式碼： 

void setup(){
  size(800,800,P2D);
}
void draw(){
 
}
void mouseDragged(){
  ellipse(mouseX,mouseY,100,100);
}

程式碼：

void setup(){
  size(800,800,P2D);
}
float pX=-100,pY=-100,r=100;
void draw(){
   ellipse(pX,pY,r,r);
   if(r>3){
     r-=10;
     pX+=13;
   }
}
void mouseDragged(){
  pX=mouseX;pY=mouseY;r=100;
}
 

 

◎畫圈圈進階版(自動收尾)

程式碼：

void setup(){
  size(800,800,P2D);
}
float pX=-100,pY=-100,r=100;
void draw(){
   ellipse(pX,pY,r,r);
   if(r>3){
     r-=10;
     pX+=13;
   }
}
void mouseDragged(){
  pX=mouseX; pY=mouseY; r=100;
}
 

◎讀圖檔

把圖片存在桌面，再拉進程式碼視窗 

程式碼：

size(500,500);
background(180,217,254);
PImage img=loadImage("gg.png");
image(img,0,0,500,500);
 

◎讀圖檔進階(img2隨游標移動)

程式碼：

void setup(){
  size(500,500);
  img1=loadImage("gg.png");
  img2=loadImage("gg2.png");
}
void draw(){
  background(180,217,254);
  image(img1,0,0,500,500);
  image(img2,mouseX,mouseY,100,100);
 
}