Creative Technologist, Data Visualizer and HCI researcher.
p5((sketch) => {
sketch.setup = function () {
sketch.createCanvas(400, 400);
};
sketch.draw = function () {
sketch.background(51);
var x = sketch.random(sketch.width);
sketch.ellipse(x, 200, 24, 24);
};
})
p5((sketch) => {
var xoff = 0;
sketch.setup = function () {
sketch.createCanvas(400, 400);
};
sketch.draw = function () {
sketch.background(51);
var x = sketch.map(sketch.noise(xoff), 0, 1, 0, sketch.width);
xoff += 0.02;
sketch.ellipse(x, 200, 24, 24);
};
})
p5((sketch) => {
let xoff1 = 0;
let xoff2 = 10000;
sketch.setup = function () {
sketch.createCanvas(400, 400);
};
sketch.draw = function () {
sketch.background(51);
let x = sketch.map(sketch.noise(xoff1), 0, 1, 0, sketch.width);
let y = sketch.map(sketch.noise(xoff2), 0, 1, 0, sketch.height);
xoff1 += 0.02;
xoff2 += 0.02;
sketch.ellipse(x, y, 24, 24);
};
})
p5((sketch) => {
let inc = 0.01;
let start = 0;
sketch.setup = function () {
sketch.createCanvas(400, 400);
};
sketch.draw = function () {
sketch.background(51);
sketch.stroke(255);
sketch.noFill();
sketch.beginShape();
let xoff = start;
for (let x = 0; x < sketch.width; x++) {
sketch.stroke(255);
let y = sketch.noise(xoff) * sketch.height;
sketch.vertex(x, y);
xoff += inc;
}
sketch.endShape();
start += inc;
};
})
p5((sketch) => {
let inc = 0.01;
let start = 0;
sketch.setup = function () {
sketch.createCanvas(400, 400);
};
sketch.draw = function () {
sketch.background(51);
sketch.stroke(255);
sketch.noFill();
sketch.beginShape();
let xoff = start;
for (let x = 0; x < sketch.width; x++) {
sketch.stroke(255);
let n = sketch.map(sketch.noise(xoff), 0, 1, 0, sketch.height);
let s = sketch.map(sketch.sin(xoff), -1, 1, -50, 50);
let y = s + n;
sketch.vertex(x, y);
xoff += inc;
}
sketch.endShape();
start += inc;
};
})
p5((sketch) => {
let inc = 0.01;
sketch.setup = function () {
sketch.createCanvas(200, 200);
};
sketch.draw = function () {
let yoff = 0;
sketch.loadPixels();
for (let y = 0; y < sketch.height; y++) {
let xoff = 0;
for (let x = 0; x < sketch.width; x++) {
let index = (x + y * sketch.width) * 4;
let r = sketch.noise(xoff, yoff) * 255;
sketch.pixels[index + 0] = r;
sketch.pixels[index + 1] = r;
sketch.pixels[index + 2] = r;
sketch.pixels[index + 3] = 255;
xoff += inc;
}
yoff += inc;
}
sketch.updatePixels();
};
})
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.
