Public
Edited
May 18, 2023
2 stars
Insert cell
Insert cell
Insert cell
te_Wsvg = {

const svg = d3.create("svg")
.attr("viewBox", [0, 0, W, W])
.style('background', "#f2f2f2")
.attr('width',W)
.attr('height',W);

const out = svg.append('g')
.attr('transform',`translate(${W/2} ${W/2})`)

let ratio = 0.01;
// let angle_num = 10;
for (let i = 0; i < 10000; i++) {
let bool = Math.random() > 0.5;
let angle = (getRandomInt(angle_num) * 360) / angle_num + ((recursiveRandom(3, bool) - 0.5) * 360) / angle_num / 2; // diff results
let n = recursiveRandom(getRandomInt(5), bool);
let r = 200 * n;
let x = Math.cos(degToRad(angle)) * r * (bool ? 1 - ratio : 1 + ratio);
let y = Math.sin(degToRad(angle)) * r * (bool ? 1 - ratio : 1 + ratio);

out.append('circle')
.attr('fill','#400')
.attr('cx', x)
.attr('cy', y)
.attr('r', (2 - Math.abs(n - 1) * 2)/2)
}

return svg.node()
}
Insert cell
Insert cell
function recursiveRandom(count, bool = true) {
let n = 1;
while (count > 0) {
n *= Math.random();
count--;
}
return bool ? 1 - n : 1 + n;
}
Insert cell
Insert cell
p5js(p5 => {

p5.setup = () => {
p5.createCanvas(W, W);
p5.angleMode(p5.DEGREES);
}

p5.draw =()=> {
p5.background((95 / 100) * 255);
// p5.push();
p5.translate(W / 2, W / 2);
let ratio = 0.01;
// let angle_num = 3;
for (let i = 0; i < 10000; i++) {
let bool = p5.random() > 0.5;
let angle = (p5.int(p5.random(angle_num)) * 360) / angle_num + ((recursiveRandom(3, bool) - 0.5) * 360) / angle_num / 2;

let n = recursiveRandom(p5.random(0, 5), bool);
let r = 200 * n;
let x = p5.cos(angle) * r * (bool ? 1 - ratio : 1 + ratio);
let y = p5.sin(angle) * r * (bool ? 1 - ratio : 1 + ratio);
p5.strokeWeight(2 - p5.abs(n - 1) * 2);
p5.point(x, y);
}
// p5.pop();
p5.noLoop();
}
})
Insert cell
import {p5 as p5js} from "@tmcw/p5"
Insert cell
import {degToRad} from "@makio135/utilities"
Insert cell
function getRandomInt(max) {
return Math.floor(Math.random() * max);
}
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