week02_Processing函式應用_小畫家_呂登祐

Processing  函式應用

一.簡易小畫家
二.刮畫效果

1.簡易小畫家功能:

使滑鼠畫線

void setup()

{
  size(800,600);    //畫面大小  
}
void draw()
{
  line(mouseX,mouseY,pmouseX,pmouseY);   //畫線
}

用if判斷式讓滑鼠能按下畫出黑線

void setup()

{
  size(800,600); 
  background(#F5EE11);   //背景顏色大小(e.g.：黃色)
}
void draw()
{
  if(mousePressed)     //若按下滑鼠
    line(mouseX,mouseY,pmouseX,pmouseY);
}

*******************************************************************

如何調出自己喜歡的顏色呢?                   

 點選Tools裡的Color Selector選項               

就會看到各種顏色的代碼                          

*******************************************************************

簡易小畫家功能:

void setup(){
    size(800,600);
    background(#5D61D1);    //背景顏色(紫藍色)
    stroke(#F323F7);              //初始畫線的顏色(紫色)
}
void draw(){
  fill(255,0,0);rect(0,0,100,100);            //第一上色框框(紅色)
  fill(0,255,255);rect(0,100,100,100);    //第二上色框框(淡藍色)
  fill(255,255,0);rect(0,200,100,100);    //第三上色框框(黃色)
}
void mouseDragged(){
  line(mouseX,mouseY,pmouseX,pmouseY);
}
void mousePressed(){
  if(mouseX<100 && mouseY<100){stroke(255,0,0);}              //若點選所選位置則換紅色
  else if(mouseX<100 && mouseY<200){stroke(0,255,255);}  //若點選所選位置則換淡藍色
  else if(mouseX<100 && mouseY<300){stroke(255,255,0);}  //若點選所選位置則換黃色
}

設定筆刷大小 (往右邊點設定，往上點是調細，往下點是調粗)

void setup(){

  size(800,600); 

  background(#5D61D1);  

  stroke(#AD1A00);

}

float MyTsuTsuDer=1;                   //筆刷粗細函數

color MyStorke=color(0);              //顏色函數

void draw(){

  stroke(0); strokeWeight(1);           //初始線的顏色(黑色)和粗細(1)

  fill(255,0,0);rect(0,0,100,100);            

  fill(0,255,255);rect(0,100,100,100);   

  fill(255,255,0);rect(0,200,100,100);

  stroke(MyStorke); strokeWeight(MyTsuTsuDer);

}

void mouseDragged(){

  line(mouseX,mouseY,pmouseX,pmouseY);

}

void mousePressed(){

  if(mouseX<100 && mouseY<100){MyStorke=color(255,0,0);}         

  else if(mouseX<100 && mouseY<200){MyStorke=color(0,255,255);}  

  else if(mouseX<100 && mouseY<300){MyStorke=color(255,255,0);}

  if(mouseX>700) MyTsuTsuDer=mouseY/30;

   //若滑鼠在X設定位置內(mouseX>700)則筆刷隨Y座標越下面變大

}

2.用程式做出刮畫效果:

首先，先製作出背景:

PImage imgBG;

PImage imgBlack;

void setup(){

    size(800,600);

    imgBG=loadImage("a.jpg");                          //找一張漸層圖片，丟進去程式裡面(最底層的圖)

    imgBlack=createImage(800,600,ALPHA);

    imgBlack.loadPixels();

    for (int i=0;i<imgBlack.pixels.length;i++){

      imgBlack.pixels[i] =color(255);

    }

    imgBlack.updatePixels();

}

void draw() {

  image(imgBG, 0 ,0 ,width,height);

}

然後再加上第二層背景和Pixels畫法的應用:

PImage imgBG;

PImage imgBlack;

void setup(){

    size(800,600);

    imgBG=loadImage("a.jpg");                            //最底層的漸層圖

    imgBlack=createImage(800,600,ARGB);       //黑色背景(蓋住漸層圖)

    imgBlack.loadPixels();

    for (int i=0;i<imgBlack.pixels.length;i++){

      imgBlack.pixels[i] =color(0,0,0,255);           //color(red,green,blue,透明度Alpha)

    }

    imgBlack.updatePixels();

}

void draw() {

  image(imgBG,0,0,width,height);                       //出現漸層圖

  image(imgBlack,0,0,width,height);                   //出現黑色背景

}

void mouseDragged(){                                        //滑鼠拖曳函式

  imgBlack.loadPixels();                                      //讀取像素

  imgBlack.pixels[mouseX+mouseY*width] = color(0,0,0,0);         //算出鼠標的點

  imgBlack.updatePixels();                                  //更新像素

}
因為是用像素畫法，所以刮畫效果會呈現一點一點的，如下圖:

把Pixels點設大一點，就會有不同的效果:
PImage imgBG;
PGraphics pgBlack;
void setup(){
  size(800,600);
  imgBG=loadImage("a.jpg");
  imgBG.resize(800,600);
  pgBlack = createGraphics(800,600);
  pgBlack.beginDraw();
  pgBlack.background(0);
  pgBlack.strokeWeight(50);
  pgBlack.stroke(0,0,0,28);
  pgBlack.endDraw();
}
void draw(){
  background(0);
  imgBG.mask(pgBlack);
  if(keyPressed) image(pgBlack,0,0);
  else image(imgBG,0,0,width,height);
}
void mouseDragged(){
  pgBlack.beginDraw();
  pgBlack.strokeWeight(45); pgBlack.stroke(255);
  pgBlack.line(mouseX,mouseY,pmouseX,pmouseY);
  pgBlack.endDraw();
}

再來是畫出漸層色的效果:

PImage imgBG;

PGraphics pgBlack;

void setup(){

    size(800,600);

    imgBG=loadImage("a.jpg");

    pgBlack=createGraphics(800,600);

    pgBlack.beginDraw();

    pgBlack.strokeWeight(50);

    pgBlack.stroke(0,0,0,28);

    pgBlack.endDraw();

}

void draw() {

  image(imgBG,0,0,width,height);

  image(pgBlack,0,0);

}

void mouseDragged(){

    pgBlack.beginDraw();

    pgBlack.strokeWeight(50);

    pgBlack.stroke(255,255,255,100);

    pgBlack.line(mouseX,mouseY,pmouseX,pmouseY);

    pgBlack.endDraw();

}

void setup(){

  size(800,600);

  colorMode(HSB,800);

  background(0);

  strokeWeight(2);

}

void draw(){

  if(mousePressed){

    stroke(mouseX,mouseY,800);

    line(mouseX,mouseY,pmouseX,pmouseY);

  }

}