week14

 week14_01_draw_line_mouseDragged_mouseButton_LEFT_RIGHT

1.右鍵拖曳會往下滴

2.左鍵畫圖

程式碼

//week14_01_draw_line_mouseDragged_mouseButton_LEFT_RIGHT

void setup(){

  size(500,500);

}

int x=-1,y=-1;

void draw() {

  if(x!=-1) {

    ellipse(x,y,1,1);

    y++; //y變大就會越來越長，像是往下滴水

  }

}

void mouseDragged(){

  if(mouseButton==LEFT) line(mouseX,mouseY,pmouseX,pmouseY);

  if(mouseButton==RIGHT) {

    x = mouseX;

    y = mouseY;

  }

}

week14_02_draw_lines_loadPixels_pixels_updatePixels

1.取出像素

2.碰到不是白色的線就會變成亂數色彩

程式碼

//week14_02_draw_lines_loadPixels_pixels_updatePixels

void setup(){

  size(500,500);

  background(255);

}

void draw(){

  //pixels

  

}

void mouseDragged(){

  if(mouseButton==LEFT) { //左鍵拖曳時

    line(mouseX,mouseY,pmouseX,pmouseY);//本來的線是灰黑色的

    loadPixels();//取出畫面的像素

    //println(pixels[0]);白色是-1

    for(int i=0;i<width*height;i++) {//全部的點都巡一次色彩

      if(pixels[i]!=-1) pixels[i] = color(random(255),random(255),random(255));

    }//如果{不是白色}就是有畫面碰到pixels，都變成亂數彩色

    updatePixels();//若有修改要在放回去

  }

}

week14_03_draw_lines_rain_PImage_creatImage_img

1.攔住球

程式碼

//week14_03_draw_lines_rain_PImage_creatImage_img

PImage img;

void setup(){

  size(500,500);

  img = createImage(500,500,RGB);//用來畫圖的畫布

  img.loadPixels();

  for(int i=0;i<500*500;i++) {

    img.pixels[i] = color(#FFFFF2);//顏色-14的底

  }

  img.updatePixels();

}

int x = 250,y = 0;

void draw(){ //畫在套的資料夾(比喻)

  background(img);

  ellipse(x,y,20,20);//畫圓形

  if(img.pixels[x+y*500]==-14) y++;//沒有碰到其他顏色往下

}

void mouseDragged(){//畫在抵

  background(img);

  line(mouseX,mouseY,pmouseX,pmouseY);

  loadPixels();

  img.loadPixels();

  for(int i = 0;i<500*500;i++) img.pixels[i] = pixels[i];//把畫布的色彩搬到img裡面

  img.updatePixels();

  updatePixels();

}

week14_04_draw_lines_rain_ArrayList_PVector_p_pp

1.第一張圖片是註解前的版本

2.第二張用到資料結構的陣列PVector

程式碼

//week14_04_draw_lines_rain_ArrayList_PVector_p_pp

PImage img;

void setup(){

  size(500,500);

  img = createImage(500,500,RGB);//用來畫圖的畫布

}

int x = 250,y = 0;

ArrayList<PVector> p = new ArrayList<PVector>();

void draw(){ //畫在套的資料夾(比喻)

  background(img);

  //ellipse(x,y,20,20);//畫圓形

  for(PVector pp:p) {

    ellipse(pp.x,pp.y,20,20);

    if(pp.y<498 && img.pixels[int (pp.x)+int(pp.y)*500]==-16777216) pp.y++;  

  } //if(y<498 && img.pixels[x+y*500]==-16777216) y++;//沒有碰到其他顏色往下

}

void mouseDragged(){//畫在抵

  background(img);

  stroke(random(255),random(255),random(255));

  line(mouseX,mouseY,pmouseX,pmouseY);

  loadPixels();

  img.updatePixels();

  for(int i = 0;i<500*500;i++) {

    img.pixels[i] = pixels[i];

  }

  img.updatePixels();

  updatePixels();

  for(PVector pp:p) {

    ellipse(pp.x,pp.y,20,20);

  } 

}

void mousePressed(){

  if(mouseButton==RIGHT) {

    p.add(new PVector(mouseX,mouseY));

  }

}

week14_05_draw_lines_myFlood_x_y_c1_c2_pixels_isOK

1.右鍵畫圖，左鍵填色

程式碼

///week14_05_draw_lines_myFlood_x_y_c1_c2_pixels_isOK

void setup(){

  size(500,500);

  background(#FFFFF2);

}

void draw(){

  if(mousePressed && mouseButton==LEFT) line(mouseX,mouseY,pmouseX,pmouseY);

  if(mousePressed && mouseButton==RIGHT) {

    loadPixels();//畫面讀取到pixels[]陣列裡面

    color c1 = pixels[mouseX+mouseY*500]; ///原本的顏色

    color c2 = color(random(255),random(255),random(255));//亂數新色彩

    if(c1!=c2) myFloodFill(mouseX,mouseY,c1,c2);

    updatePixels();//把陣列的數值放回去

  }

}

boolean isOK(int x,int y,color c1) {

  if(x<0 || y<0 || x>=500 || y>=500) return false;//超過邊界不能做

  if(pixels[x+y*500]!=c1) return false;//色彩原本的c1色彩不同，就不要變色

  return true;

}

void myFloodFill(int x,int y,color c1,color c2){

  pixels[x+y*500] = c2;//這一格設定成新色彩

  if(isOK(x+1,y,c1))  myFloodFill(x+1,y,c1,c2);

  if(isOK(x-1,y,c1))  myFloodFill(x-1,y,c1,c2);

  if(isOK(x,y+1,c1))  myFloodFill(x,y+1,c1,c2);

  if(isOK(x,y-1,c1))  myFloodFill(x,y-1,c1,c2);

} //不要點太大區域，因為呼叫函示太多次

week14_06_cute_cursor

1.滑鼠鼠標換成自己想要的圖片

程式碼

//week14_06_cute_cursor

void setup(){

  size(500,500);

  PImage img = loadImage("cute.png");

  cursor(img);//滑鼠只能32X32

}

void draw(){

  background(#FFFFF2);

}

week14_07_cute_cursor_kitty_cursor

1.滑鼠鼠標換成自己想要的圖片10秒切一張

程式碼

//week14_07_cute_cursor_kitty_cursor

PImage imgCute,imgKitty;

void setup(){

  size(500,500);

  imgCute = loadImage("cute.png");

  imgKitty = loadImage("kitty.png");

  cursor(imgKitty);//滑鼠只能32X32

}

void draw(){

  background(#FFFFF2);

  if(frameCount%120==0) cursor(imgCute);

  if(frameCount%120==60) cursor(imgKitty);

}

week14_08_big_cursor_image_imagemode

1.放大

程式碼

//week14_08_big_cursor_image_imagemode

// 希望不只用 16x16 或 32x32，要更大

PImage imgBigCute, imgBigKitty, imgCursor; // 宣告三個圖片變數

void setup() {

  size(500, 500); // 設定畫布大小

  imgBigCute = loadImage("bigcute.png"); // 載入第一張圖片

  imgBigKitty = loadImage("bigkitty.png"); // 載入第二張圖片

  imgCursor = imgBigKitty; // 預設圖片為 imgBigKitty

}

void draw() {

  background(#FFFFF2); // 設定背景顏色為淡黃色

  

  imageMode(CENTER); // 設定圖片模式為以中心點為參考

  image(imgCursor, mouseX, mouseY); // 在滑鼠位置繪製當前圖片

  imageMode(CORNER); // 重置圖片模式為以左上角為參考

  

  // 每隔 120 幀切換圖片為 imgBigCute

  if (frameCount % 120 == 0) imgCursor = imgBigCute;

  

  // 每隔 120 幀中的第 60 幀切換圖片為 imgBigKitty

  if (frameCount % 120 == 60) imgCursor = imgBigKitty;

}