Skip to content

Instantly share code, notes, and snippets.

@gncgnc
Last active May 2, 2020 21:21
Show Gist options
  • Save gncgnc/11055bf8491c13d91fb1cc0464835300 to your computer and use it in GitHub Desktop.
Save gncgnc/11055bf8491c13d91fb1cc0464835300 to your computer and use it in GitHub Desktop.
'use strict'
var gif, canvElt,
numFrames = 30,
duration = 1200,
recording = true,
time = 0
;
function setup() {
canvElt = createCanvas(1000, 1000).elt;
gif = new GIF({
workers: 2,
quality: 10,
width: width,
height: height
});
noStroke()
}
function draw() {
time = (frameCount%numFrames)/numFrames
// time = mouseX/width % 1;
background(0)
translate(width/2, height/2)
let numCircs = 20,
numLayers = 20,
R = width * 0.4,
r = R * 0.2
;
for (let j=0; j<numLayers; j++) {
push()
scale(pow(0.80, j)) // <----------- here
rotate((j-2*time) * 1.5*TAU/numCircs)
for (let i=0; i<numCircs; i++) {
// let a = lerp(0, TWO_PI, ease(mod(i/numCircs+time,1)),5) - time*TAU,
let aoff = TAU / numCircs * sin(time*TAU+i/numCircs*TAU),
a = i*TAU/numCircs + aoff,
x = R * cos(a),
y = R * sin(a)
ellipse(x,y,r,r);
}
pop()
}
ellipse(0,0,width*0.02)
if(recording) gif.addFrame(canvElt,{copy:true,delay:duration/numFrames})
if(frameCount>=numFrames && recording === true) {
console.log("rendering...")
noLoop();
gif.on("progress", (p) => document.title = ((p*numFrames)+ "/"+numFrames))
gif.render()
gif.on("finished", function(blob) {
var resultGif = document.createElement("img")
resultGif.src = URL.createObjectURL(blob);
document.body.appendChild(resultGif)
document.title = "done; "+blob.size/1000000+"Mb"
});
}
}
function ease(t, n) {
n = n | 2
if (t<0.5){
return pow(2*t,n)/2
} else {
return 1-pow(2*abs(t-1),n)/2
}
}
var quintEase = function(t) {
return ease(t,5)
}
function anim(from, to, ease, startTime, endTime) {
startTime = (typeof startTime === "undefined") ? 0 : startTime;
endTime = (typeof endTime === "undefined") ? 1 : endTime;
ease = ease || function(t) {return t}
if (time < startTime) {
return from;
} else if (time > endTime) {
return to;
} else {
var t = (time - startTime) / (endTime - startTime)
return lerp(from, to, ease(t));
}
}
function mod(n, m) {
return ((n % m) + m) % m;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment