Published
Edited
Sep 16, 2020
Insert cell
Insert cell
startTime = Date.now()
Insert cell
howLong = 0.2 // mins
Insert cell
deadline = startTime+howLong*60*1000
Insert cell
millz = {
return deadline - now
}
Insert cell
height = 600
Insert cell
viewof bc_15minute_canvas = {
const q5 = new Q5();
q5.noLoop(); // turn off the draw loop as the cell is the loop
q5.createCanvas(width, height);
q5.randomSeed();
const el = html`${q5.canvas}`;
el.value = q5;
yield el;
// invalidation.then(() => q5.clear());

let cx = width / 2;
let cy = height / 2;
let t = 0
let m = 0
let n = 0
let when = "Time Over"
// while (true) {
// q5.background(255);
q5.clear();
q5.textSize(100);

// https://twitter.com/dn0t_/status/1302531874988802048
q5.push()
q5.noFill()
q5.translate(cx,cy);
if(millz >= 0) {
t= millz/1000 // this could be q5.map() ed to -32000 +32000 ?? todo
when = millz
}


for(let j=q5.TAU;j>0;j-=.01){
let xx=q5.cos(j)+q5.cos( m=t*j+t)/2+q5.sin(n=m*j)/4;
let yy=q5.sin(j)+q5.sin(m)/2+q5.cos(n)/4;

q5.stroke(255,0,0);
q5.ellipse(99*xx,99*yy,q5.TAU/j)
}
q5.pop()
q5.text(`${when}`, 100, height/2);

yield el;
//}
}
Insert cell
Q5 = require("https://cdn.jsdelivr.net/gh/LingDong-/q5xjs/q5.min.js").catch(
() => window.Q5
)
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more