SY-BlingBangBang week14 點播3

  [TODO]

上課內容：

畫圖

// week14_1_draw_lines_void_mouseDragged_mouseButton_LIFT_RIGHT
void setup(){
  size(500,500);
}
int x = -1, y = -1;
void draw(){
  if(x != -1){
    ellipse(x, y, 1, 1);
    y++; //往下滴 (x,y)座標中，y慢慢變大，就是往下滴的感覺
  }
}
void mouseDragged(){
  if(mouseButton==LEFT) line(mouseX, mouseY, pmouseX, pmouseY);
  if(mouseButton==RIGHT){
    x = mouseX;
    y = mouseY;
  }
}

畫圖

// week14_2_draw_lines_loadPixels_pixels_updatePixels
void setup(){
  size(500,500);
  background(255); //背景設成白色
}
void draw(){
  //pixels
}
void mouseDragged(){
  if(mouseButton==LEFT){ //在左鍵dragged拖曳時
    line(mouseX, mouseY, pmouseX, pmouseY); //本來的線，是灰黑色，不是白色
    loadPixels(); //取出畫面的像素
    //println(pixels[0]); //白色是-1 其實是 color(255,255,255,255)
    for(int i=0; i<width*height; i++){ //全部的點，都去巡一下色彩
      if(pixels[i] != -1) pixels[i] = color(random(255),random(255),random(255));
    } //如果「不是白色」 就是有畫圖碰到的pixels，都變成亂數的色彩
    updatePixels(); //若有修改，要再放回去
  }
}

畫圖

// week14_3_draw_lines_rain_PImage_createImage_img_loadPixels_pixels_updatePixels
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(y<498 && 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_4_draw_lines_rain_ArrayList_PVector_p_pp
PImage img;
void setup(){
  size(500,500);
  img = createImage(500,500,RGB); //用來畫圖的畫布
} //換黑背景，可以用 mouse 刮出彩色的線條
//int x=250, y=0;
ArrayList<PVector> p = new ArrayList<PVector>(); //很多個點p
void draw(){
  background(img);
  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++;
  }
}
void mouseDragged(){
  background(img);
  stroke(random(255), random(255), random(255));
  line(mouseX, mouseY, pmouseX, pmouseY);
  loadPixels();
  img.loadPixels();
  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_5_draw_lines_myFloodFill_x_y_c1_c2_pixels_isOK
PImage img;
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(); //把陣列的值，放回畫面
  }
}
ArrayList<PVector> stackX = new ArrayList<PVector>();
ArrayList<PVector> stackY = new ArrayList<PVector>();
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; //這1格，設成新色彩
  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_6_cute_cursor
void setup(){
  size(500,500);
  PImage img = loadImage("淨漢.png");
  cursor(img);
}
void draw(){
  background(255);
}

鼠標

// week14_7_cute_cursor_kitty_cursor
PImage img,img2;
void setup(){
  size(500,500);
  img = loadImage("淨漢.png");
  img2 = loadImage("哩兜.png");
  cursor(img2);
}
void draw(){
  background(#FFFFF2);
  if(frameCount%120==0) cursor(img);
  if(frameCount%120==60) cursor(img2);
}

鼠標

// week14_8_big_cursor_imageMode_image_imageMode
// 希望不只用 16*16 或 32*32 要更大
PImage img,imgbig1,imgbig2;
void setup(){
  size(500,500);
  imgbig1 = loadImage("淨漢 (1).png");
  imgbig2 = loadImage("圓佑.png");
  img = imgbig2;
}
void draw(){
  background(#FFFFF2);
  imageMode(CENTER); //畫圖的系統，改成以正中心的座標
  image(img,mouseX,mouseY);
  imageMode(CORNER); //畫圖的系統，改成左上角的座標
  if(frameCount%120==0) img = imgbig1;
  if(frameCount%120==60) img = imgbig2;
}