Published
Edited
Aug 2, 2021
4 stars
Insert cell
Insert cell
p5(sketch => {
let LL, NL, x, y, dh
let w = width/2 // canvase cube the size of the screen height
let h=width/2
sketch.setup = function() {
sketch.createCanvas(w, h);
LL = h * 0.02 // line length 2% of canvas cube size
NL = h / LL // number of lines across screen
sketch.noLoop()
};
sketch.draw = function() {
doLines()
}

function LLine() {
sketch.line(0, 0, LL, LL)
}
function RLine() {
sketch.line(0, LL, LL, 0)
}
function doLines(){
sketch.background(0)
sketch.stroke('red')
sketch.strokeWeight(LL*0.1)
sketch.push()
for (let y = 0; y < NL; y++) {
for (let x = 0; x < NL; x++) {
switch ((sketch.floor(sketch.random(0, 2)))) {
case 0:
LLine()
break;
case 1:
RLine()
break;
}
sketch.translate(LL, 0)
} // end y loop
sketch.pop() // reset draw position to 0,0
sketch.push() // save new 0,0 draw position
sketch.translate(0, LL * (y + 1))
} // end x loop
}

})
Insert cell
import {p5, ParticleSystem} from "@tmcw/p5"
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