Published
Edited
Jan 24, 2021
1 star
bnb({
w: 1000,
h: 800,
record: true,
numFrames: 140,
//fps: 30,
//video:true,
globals: {
basePointsx : [],
basePointsy : [],
circles : [],
points : []
},
draw: (sketch, time, globals) => {
if(globals.points.length>1300) globals.points = globals.points.reverse().slice(globals.points.length.length-1300+1, 1395).reverse()
if(sketch.frameCount % 2 == 0 ){
for(var i = 0; i<globals.basePointsx.length; i++){
globals.basePointsx[i].update()
globals.basePointsy[i].update()
}
}
if(sketch.frameCount % 4 == 0 ){
for(var i = 0; i<globals.basePointsx.length; i++){
for(var j = 0; j<globals.basePointsx.length; j++){
var x = globals.basePointsx[i].coord().x
var y = globals.basePointsy[j].coord().y
globals.points.push({x:x,y:y})
}
}
}
// setting up
sketch.background(225); sketch.stroke(0); sketch.strokeWeight(4);
for(i in globals.circles) globals.circles[i].show()
for(var i = 0; i<globals.basePointsx.length; i++) {globals.basePointsx[i].show();
globals.basePointsy[i].show();}
for(var i = 0; i<globals.points.length; i++){
var c = globals.points[i]
sketch.strokeWeight(1.5);
sketch.ellipse(c.x, c.y, 2,2)
}
},
setup: (sketch, globals) => {
for(var i =1; i<=4; i++){
var p1 = new circlePoint(200*i+50, 80, 0, i/30, 50, 0, true)
var p2 = new circlePoint(100, 150*i+50, 0, i/30, 50, 0, false)
globals.basePointsx.push(p1); globals.basePointsy.push(p2);
var c1 = new circle2(200*i+50, 80, 50, 0)
var c2 = new circle2(100, 150*i+50, 50, 0)
globals.circles.push(c1,c2)
}
function circlePoint(x, y, theta, speed, r, color, isX){
var x2 = {x: x+Math.sin(theta)*r, y: y+Math.cos(theta)*r}
this.update = function(){ theta += speed; x2.x = x+Math.sin(theta)*r; x2.y = y+Math.cos(theta)*r; }
this.coord = function() {return {x :x2.x, y:x2.y}}
this.show = function() {
sketch.strokeWeight(4); sketch.fill(color); sketch.stroke(color); sketch.ellipse(x2.x, x2.y, 4, 4);
sketch.strokeWeight(0.5);
if(isX)sketch.line(x2.x, 0, x2.x, 700)
else sketch.line(0, x2.y, 1000, x2.y)
}
}
function circle2(x,y,r,color){
this.show = function(){
sketch.stroke(0);
sketch.fill(230);
sketch.ellipse(x,y, r*2, r*2);
}
}
sketch.pop()
}
})
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.
