In New Zealand being kid of human.
We might make mistakes but we will make other things too. -
Michael Joseph Savage
teSvg = {
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')
return svg.node()
}
makeFurn = {
teSvg
count[0]=0
count[1]=0
trans.str = 'translate(245, 600)'
draw(levels)
}
levels = 20
count = [0,0]
trans.str
function draw(d){
count[0]++;
let out = d3.selectAll('#out')
let c = w-count[0]*12
out.append('line') // putting on a line only happens once
.attr('stroke',colour(w,c))
.attr('x1', 0)
.attr('y1', 0)
.attr('x2', 0)
.attr('y2', -d)
.attr('transform', `${trans.str}`)
let t = `translate(0 ${-d}) rotate(${radToDeg(0.06)})`
trans.str = trans.str.concat(' ',t)
if(d*4>5) draw(d*0.8);
t = `rotate(${radToDeg(-0.06)}) translate(0 ${d*0.4}) rotate(${radToDeg(-1)})`
trans.str = trans.str.concat(' ',t)
if(d*4>9) draw(d*4/9);
t = `rotate(${radToDeg(2)})`
trans.str = trans.str.concat(' ',t)
if(d*4>9)draw(d*4/9);
t= `rotate(${radToDeg(-1)}) translate(0 ${d*0.6})`
trans.str = trans.str.concat(' ',t)
count[0]--
};
trans = ({ })
w = 245
colour = (w,c) => chroma(w,c,c/4).toString()
W = 500
H = 640
p5js(p5 => {
let z=0;
let c=0;
let w = 245;
p5.setup = () => {
p5.noLoop()
p5.createCanvas(W,H);
p5.background(0);
p5.translate(245, 600);
f(120)
}
function f(d){
z++;
p5.stroke(w,c=w-z*12,c/4);
p5.line(0,0,0,-d);
p5.translate(0,-d);
p5.rotate(0.06);
if(d*4>5) f(d*0.8);
p5.rotate(-0.06);
p5.translate(0,d*0.4);
p5.rotate(-1);
if(d*4>9) f(d*4/9);
p5.rotate(2);
if(d*4>9)f(d*4/9);
p5.rotate(-1);
p5.translate(0,d*0.6);
z--
};
})
import {p5 as p5js} from "@tmcw/p5"
chroma = require('chroma-js@2.4.2/chroma.js') // http://vis4.net/chromajs/
import {radToDeg} from "@makio135/utilities"
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.
