Week14-唐門外系弟子-林活修行互動技術秘笈

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

void mouseDragged(){
  if(mouseButton==LEFT) line(mouseX, mouseY, pmouseX, pmouseY);
  if(mouseButton==RIGHT){
    x = mouseX;
    y = mouseY;
  }
}

week14_02_draw_lines_loadpixels_pixels_updatePixels

像素點pixels，必須將背景設置成白色，滑鼠點擊可以改變顏色，改變顏色就畫圖。

void setup() {
  size(500, 500);
  background(255);
}
void draw() {
  //pixels
}

void mouseDragged() {
  if (mouseButton==LEFT) {
    line(mouseX, mouseY, pmouseX, pmouseY);
    loadPixels();
    
    for(int i=0; i< width*height; i++){
      if(pixels[i] != -1) pixels[i] = color(random(255),random(255),random(255));
    }
    updatePixels();
  }
}
week14_03_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);
  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() {
  line(mouseX, mouseY, pmouseX, pmouseY);
  loadPixels();
  img.loadPixels();
  for(int i=0; i<500*500; i++) img.pixels[i] = pixels[i];
  img.updatePixels();
  updatePixels();
}


week14_04_draw_lines_rain_
利用滑鼠的右鍵可以叫出球體做物體落下模擬下雨，左鍵畫線可以隔擋球體落下。
PImage img;
void setup() {
  size(500, 500);
  img = createImage(500, 500, RGB);
}
ArrayList<PVector> p = new ArrayList<PVector>(); //很多個點p
//int x = 250, y=0;
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_05_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();
    color c1 = pixels[mouseX+mouseY*500];
    color c2 = color(random(255),random(255),random(255));
    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;
  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
改變滑鼠游標圖示，酷東西。
void setup(){
  size(500, 500);
  PImage img = loadImage("cute.gif");
  cursor(img);
}
void draw(){
  background(#FFFFF2);
}
week14_07_cute_cursor_miku_cursor
可以切換不同圖示的游標。
PImage imgCute, imgMiku;
void setup(){
  size(500, 500);
  imgCute = loadImage("cute.gif");
  imgMiku = loadImage("miku.gif");
  cursor(imgMiku);
}
void draw(){
  background(#FFFFF2);
  if(frameCount%120==0) cursor(imgCute);
  if(frameCount%120==60) cursor(imgMiku);
  
}
week14_08_big_cursor_imageMode_image_imageMode
//希望不只用16x16 or 32x32 要更大
PImage imgBigCute, imgBigMiku, imgCursor;
void setup(){
  size(500, 500);
  imgBigCute = loadImage("bigCute.gif");
  imgBigMiku = loadImage("bigMiku.gif");
  imgCursor = imgBigMiku;
}
void draw(){
  background(#FFFFF2);
  imageMode(CENTER);
  image(imgCursor, mouseX, mouseY);
  if(frameCount%120==0) imgCursor=imgBigCute;
  if(frameCount%120==60) imgCursor = imgBigMiku;
}