In New Zealand being kid of human.
We might make mistakes but we will make other things too. -
Michael Joseph Savage
Published
Edited
May 10, 2022
5 stars
function form(out, x,y,r,c,n){
for(let i=0;i<n;i++){
let a=TAU/n*i
let X=(x+Math.sin(a)*r)
let Y=(y+Math.cos(a)*r)
out.append('circle')
.attr('fill','none')
.attr('stroke','#000')
.attr('stroke-opacity',0.3)
.attr('cx',X)
.attr('cy',Y)
.attr('r',r*0.5) // p5 uses diameter and svg uses radius
if(c>0) form(out,X,Y,r*0.5,c-1,n)
}
}
draw_svg2 = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, W, W])
.style('background', '#fff')
.attr('width',W)
.attr('height',W)
const out = svg.append('g')
for(let i=0;i<6;i++){
form2(out, 140+s*i%(s*3)*1.3, i<3?s:s*3, 70, 4, i+2) // (out, x, y, r, c, n)
}
return svg.node()
}
function form2(out, x,y,r,c,n){
for(let i=0;i<n;i++){
let a=TAU/n*i
let X=(x+Math.sin(a)*r)
let Y=(y+Math.cos(a)*r)
out.append('rect')
.attr('fill','none')
.attr('stroke','#045')
.attr('stroke-opacity',0.3)
.attr('x',X-(r/2))
.attr('y',Y-(r/2))
.attr('rx',r*0.1)
.attr('ry',r*0.1)
.attr('width',r) // p5 uses diameter and svg uses radius
.attr('height',r)
if(c>0) form2(out,X,Y,r*0.5,c-1,n)
}
}
W = 880
s = W/4
TAU = Math.PI*2
import {p5} from "@tmcw/p5"
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.
