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.js
Copied!
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.js
Copied!
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
}
}

Powered by Helpfeel