P5.jsでアニメGIFを作る

P5.jsでアニメGIFを作る

	P5.jsの draw() で画像を描くたびにセーブする
		 noise00.png  〜  noise09.png 
	まとめてImageMagickでアニメGIFにすると上のようなものができる
		% convert -delay 5 -loop 0 noise*.png noise.gif

	下のコードを実行
noise.jsCopied!
function setup(){
  createCanvas(200,100)
  fill('#ffffff')
  rect(0,0,300,300);
}
id = 0
function draw(){
  noStroke();
  for(var x=0;x<200;x++){
    for(var y=0;y<100;y++){
      color = round(random(128,255))
      fill(color,color,color)
      rect(x,y,1,1)
    }
  }
  if(id < 10){
    n = ("000" + id).slice(-2)
    // save("noise" + n + ".png") // コメントを取るとセーブ
    id += 1
  }
}

noise2.jsCopied!
function setup(){
  createCanvas(200,100)
  fill('#ffffff')
  rect(0,0,300,300);
  /*****/
}
id = 0
delta = { x: 1, y: 0 }
pos = { x: 20, y: 20 }
function draw(){
  noStroke();
  valy = []
  for(var y=0;y<100;y++){
    valx = []
    for(var x=0;x<200;x++){
      valx[x] = round(random(128,255))
    }
    valy[y] = valx
  }
  newvaly = []
  /***/
  for(var y=0;y<100;y++){
    newvalx = []
    for(var x=0;x<200;x++){
      if(x > pos.x && x < pos.x + 20 && y > pos.y && y < pos.y + 60){
        v = 0
        for(xx = x-1; xx <= x+2; xx++){
          for(yy = y-1; yy <= y+2; yy++){
            v += valy[yy][xx]
          }
        }
        newvalx[x] = round(v/16)
      }
      else {
        newvalx[x] = valy[y][x]
      }
    }
    newvaly[y] = newvalx
  }
  pos.x += delta.x * 6
  pos.y += delta.y * 6
  if(pos.x > 160){
    pos.x = 160
    delta.x = -1
    delta.y = 0
  }
  else if(pos.x < 20){
      pos.x = 20
      delta.x = 1
      delta.y = 0
  }
  /*
  if(pos.x > 150){
    pos.x = 150
    delta.x = 0
    delta.y = 1
  }
  else if(pos.y > 60){
      pos.y = 60
      delta.x = -1
      delta.y = 0
  }
  else if(pos.x < 20){
    pos.x = 20
    delta.x = 0
    delta.y = -1
  }
  else if(pos.y < 20){
    pos.y = 20
    delta.x = 1
    delta.y = 0
  }
  */
  
  for(var y=0;y<100;y++){
    for(var x=0;x<200;x++){
      color = newvaly[y][x]
      fill(color,color,color)
      rect(x,y,1,1)
    }
  }
  if(id < 10){
    n = ("000" + id).slice(-2)
    // save("noise" + n + ".png") // コメントを取るとセーブ
    id += 1
  }
}

#Tips #アニメGIF #P5.js
P5.jsでアニメGIFを作る

関連ページ
