Published
Edited
Sep 16, 2019
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
p5(sketch => {
var maxLevels = 7;
var strutFactor = 0.2;
var startAngle = 0;
var hsb = 0;
var strutNoise;
sketch.setup = function() {
sketch.createCanvas(600, 600);
sketch.smooth();
strutNoise = sketch.random(10);
sketch.frameRate(10);
sketch.colorMode(sketch.HSB, 100);
};
sketch.draw = function() {
strutNoise += 0.01;
strutFactor = sketch.noise(strutNoise) * 3 - 1.5;
var root = new PointObj(
sketch.createVector(sketch.width / 2, sketch.height / 2),
startAngle
);
var points = root.fractal();
startAngle += viewof velocity.valueAsNumber;
for (var i = 0; i < maxLevels; i++) {
var obj = new PointObj(
sketch.createVector(sketch.width / 2, sketch.height / 2),
startAngle,
points
);
points = obj.fractal();
startAngle += viewof velocity.valueAsNumber;
}
hsb = hsb >= 100 ? 0 : hsb + 1;
};
class PointObj {
constructor(mid, startAngle, points) {
this.mid = mid;
this.points = [];
sketch.stroke(0);
var c = sketch.color(
hsb,
viewof saturation.valueAsNumber,
100,
viewof alpha.valueAsNumber
); // Update 'c' with new color
sketch.fill(c);
// sketch.noFill();
// sketch.noStroke();
sketch.stroke(1);
sketch.beginShape();
if (points) {
this.points = points;
this.points.forEach(v => sketch.vertex(v.x, v.y));
} else {
for (
var i = 0;
i < viewof deg.valueAsNumber;
i += viewof angleStep.valueAsNumber
) {
var x = this.mid.x + 100 * sketch.cos(sketch.radians(startAngle + i));
var y = this.mid.y + 100 * sketch.sin(sketch.radians(startAngle + i));
sketch.vertex(x, y);
this.points.push(sketch.createVector(x, y));
}
}
sketch.endShape(sketch.CLOSE);
}

fractal() {
var points = [];
sketch.beginShape();
for (var i = 0; i < this.points.length; i++) {
var j = i == this.points.length - 1 ? 0 : i + 1;
var x1 = (this.points[j].x + this.points[i].x) / 2;
var y1 = (this.points[j].y + this.points[i].y) / 2;
var xFactor = (this.mid.x - x1) / sketch.abs(this.mid.x - x1) || 1;
var opp = xFactor * (this.mid.x - x1);
var yFactor = (this.mid.y - y1) / sketch.abs(this.mid.y - y1) || 1;
var adj = yFactor * (this.mid.y - y1);
var x2 = x1 + opp * strutFactor * xFactor;
var y2 = y1 + adj * strutFactor * yFactor;
sketch.line(x1, y1, x2, y2);
sketch.vertex(x2, y2);
points.push(sketch.createVector(x2, y2));
}
sketch.endShape(sketch.CLOSE);
return points;
}
}
})
Insert cell
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