In New Zealand being kid of human.
We might make mistakes but we will make other things too. -
Michael Joseph Savage
Published
Edited
Jun 2, 2022
1 fork
1 star
treeSvg = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, w, h])
.style('background', "#000")
.attr('width',w)
.attr('height',h);
const out = svg.append('g')
.attr('id','out')
.attr('transform',`translate(400,440)`)
return svg.node()
}
{
treeSvg // once the SVG base is ready, run the draw function
depth[0]=0
trans.str = ""
draw(120)
}
function draw(d) {
depth[0]++; // avoiding using observables mutable to have a globale constant
let out = d3.selectAll('#out')
out.append('rect')
.attr('fill',chroma.hsv((depth[0]*2)%99,((99-depth[0]*4)*0.01)%0.99,0.99).toString())
.attr('x', 0)
.attr('y', 0)
.attr('rx', d*0.1) // added curves to rects
.attr('width', d)
.attr('height', d)
.attr('transform', `${trans.str}`)
stack.push(trans.str) // push();
let t = `rotate(${radToDeg(-0.6435)}) translate(0 ${-d*0.8})`
trans.str = trans.str.concat(' ',t)
if(d*4>5) draw(d*0.8);
t = `translate(${d*1.4} ${d*0.8}) rotate(${radToDeg(Math.PI/2)})`;
trans.str = trans.str.concat(' ',t)
if(d*3>5) draw(d*.6);
trans.str = stack.pop(); // pop();
depth[0]--
}
depth = [0]
stack = []
trans = ({
str: ''
})
w = 800
h = 600
p5js(p5 => {
let z=0;
p5.setup = () => {
p5.createCanvas(w,h);
p5.noStroke();
p5.colorMode(p5.HSB,99);
p5.background(0);
p5.translate(400,440);
p5.noLoop()
uu(120)
}
p5.draw = () => {}
function uu(d){ // recursive function
z++;
p5.fill(z/2,99-z*4,99); // colour HSB
p5.square(0,0,d);
p5.push();
p5.rotate(-.6435);
p5.translate(0,-d*.8);
if(d*4>5)uu(d*.8);
p5.translate(d*1.4,d*.8);
p5.rotate(p5.PI/2);
if(d*3>5)uu(d*.6);
p5.pop();
z--
};
})
import {p5 as p5js} from "@tmcw/p5"
import {radToDeg} from "@makio135/utilities"
chroma = require('chroma-js@2.4.2/chroma.js')
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.
