Used to work on @observablehq — still think it rocks.
🏍 🌎 👶
Guided Tour of an Infinite Sphere GridCreating a Canvas Noise Map for Generative Art012 Truchet tiles014 Joy Division016 Some TrianglesConnections 2Stacking Polygons In A CircleSplitting LinesBulge IllusionVoronoi Spirals IIPerlin Noise ContoursTruchet Tiles variant: Intertwined quarter circlesGetting Artsy With LloydUlam SpiralOil painting brushstrokesRotating VoronoiBridget Riley 3Triangles And CirclesYvaral IITwo GridsRandomized Flood FillOrientedTrefoilsMeandering VoronoiVoronoi StipplingEyesSubstrateIncremental Drift (Rose Equation)Circles, Spirals and SunflowersVoronoi Stained Glass PortraitsYvaralMy first Observable Notebook - Art of πQuadtree ArtFitzHugh–Nagumo MazeBridget RileyStructure de QuadrilatèresFractal TreePencil TraceAltered World
Sphoise
init = {
const colorStart = d3Color.rgb(colorA);
const colorEnd = d3Color.rgb(colorB);
mutable lines = [];
mutable colors = [];
for (let y = 0; y <= width; y += yGutter) {
mutable colors.push(
d3Color.hsl(
`rgb(${Math.round(
convertRange(y, 0, width, colorStart.r, colorEnd.r)
)}, ${Math.round(
convertRange(y, 0, width, colorStart.g, colorEnd.g)
)}, ${Math.round(convertRange(y, 0, width, colorStart.b, colorEnd.b))})`
)
);
mutable lines.push(
new Line({
emphasis: 1 - Math.abs(convertRange(y, 0, width, -1, 1)),
start: { x: 0, y },
stop: { x: width, y }
})
);
}
mutable noiseY = 1000 * Math.random();
}
loop = {
init;
while (true) {
c.clearRect(0, 0, width, width);
for (let l = 0; l < mutable lines.length; l++) {
const color = mutable colors[l],
line = mutable lines[l];
color.h -= viewof colorRotation.value;
line.color = color + "";
line.draw(mutable noiseY);
}
mutable noiseY += viewof noiseIncrement.value;
yield;
}
}
funLoop = {
while (fun) {
mutable funLineWidth =
Math.sin(now / viewof funSpeed.value) * viewof lineWidth.value +
(viewof lineWidth.value + 1);
mutable funDissonance = Math.cos(now / (viewof funSpeed.value * 3)) + 2;
yield;
}
}
class Line {
constructor({ color = "#fff", emphasis = 1, start, stop }) {
this._start = { x: start.x, y: start.y };
this._stop = { x: stop.x, y: stop.y };
this.color = color;
this.emphasis = emphasis;
}
length() {
return distance(this._start, this._stop);
}
draw(noiseY) {
c.strokeStyle = this.color;
c.lineWidth = mutable fun ? mutable funLineWidth : viewof lineWidth.value;
c.beginPath();
c.moveTo(this._start.x, this._start.y);
const pointDistance = this.length() / (viewof samples.value + 2);
let lastPoint = { x: this._start.x, y: this._start.y };
for (
let x = this._start.x + pointDistance;
x < this._stop.x - pointDistance;
x += pointDistance
) {
let emphasisX =
1 - Math.abs(convertRange(x, this._start.x, this._stop.x, -1, 1));
const point = {
x,
y:
this._start.y +
noise.noise2d(
x,
this._start.y *
((fun ? mutable funDissonance : viewof dissonance.value) / 100) +
noiseY
) *
this.emphasis *
viewof emphasis.value *
emphasisX
};
const controlPoint = {
x: (lastPoint.x + point.x) / 2,
y: (lastPoint.y + point.y) / 2
};
c.quadraticCurveTo(
lastPoint.x,
lastPoint.y,
controlPoint.x,
controlPoint.y
);
lastPoint = point;
}
const controlPoint = {
x: (lastPoint.x + this._stop.x) / 2,
y: (lastPoint.y + this._stop.y) / 2
};
c.quadraticCurveTo(
controlPoint.x,
controlPoint.y,
this._stop.x,
this._stop.y
);
c.stroke();
}
}
function distance(a, b) {
return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2));
}
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.
