Creative Technologist, Data Visualizer and HCI researcher.
{
let canvas;
let ctx;
let field;
let w, h;
let size;
let columns;
let rows;
let noiseZ;
function setup() {
size = 20;
noiseZ = 0;
ctx = DOM.context2d(width, height);
reset();
}
function initField() {
field = new Array(columns);
for (let x = 0; x < columns; x++) {
field[x] = new Array(columns);
for (let y = 0; y < rows; y++) {
field[x][y] = [0, 0];
}
}
}
function calculateField() {
for (let x = 0; x < columns; x++) {
for (let y = 0; y < rows; y++) {
let angle = n.simplex3(x / 50, y / 50, noiseZ) * Math.PI * 2;
let length = n.simplex3(x / 100 + 40000, y / 100 + 40000, noiseZ);
field[x][y][0] = angle;
field[x][y][1] = length;
}
}
}
function reset() {
w = width;
h = height;
columns = Math.floor(w / size) + 1;
rows = Math.floor(h / size) + 1;
initField();
}
function draw() {
requestAnimationFrame(draw);
calculateField();
noiseZ += 0.004;
clear();
drawField();
}
function clear() {
ctx.fillStyle = "black";
ctx.fillRect(0, 0, w, h);
}
function drawField() {
for (let x = 0; x < columns; x++) {
for (let y = 0; y < rows; y++) {
let angle = field[x][y][0];
let length = field[x][y][1];
ctx.save();
ctx.translate(x * size, y * size);
ctx.rotate(angle);
ctx.strokeStyle = "white";
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, size * length);
ctx.stroke();
ctx.restore();
}
}
}
setup();
draw();
yield ctx.canvas;
}
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.
