Data visualisation at @civio, a non-profit journalism organisation specialising in public data and access to information.
Published
Edited
Jun 13, 2021
p5(sketch => {
sketch.setup = function() {
sketch.createCanvas(width, 400);
};
sketch.draw = function() {
sketch.background(0);
sketch.noStroke();
/*
let x = 0;
sketch.circle(x, 200, 25);
x = x + 50;
sketch.circle(x, 200, 25);
x = x + 50;
sketch.circle(x, 200, 25);
x = x + 50;
*/
// While loop option
let x = 0;
while (x <= width) {
sketch.fill(0, 0, 255);
sketch.circle(x, 100, 25);
//x = x + 50;
x += 50;
}
// For loop
for (let x = 0; x <= width; x += 50) {
sketch.fill(255, 0, 0);
sketch.circle(x, 300, 25);
}
};
})
p5(sketch => {
let x = 0;
let speed = 3;
sketch.setup = function() {
sketch.createCanvas(width, 400);
};
sketch.draw = function() {
sketch.background(0);
sketch.noStroke();
// For loop
for (let i = 0; i <= sketch.width; i += 50) {
sketch.fill(sketch.random(255), 0, sketch.random(255));
sketch.circle(i + x, sketch.height / 2, 25);
}
if (x >= sketch.width || x < 0) {
speed = speed * -1; // Possitive to negative etc
}
x = x + speed;
};
})
p5(sketch => {
sketch.setup = function() {
sketch.createCanvas(width, 400);
sketch.frameRate(8); // Change frame rates per second!
};
sketch.draw = function() {
sketch.background(0);
sketch.noStroke();
// For loop
for (let x = 0; x <= sketch.width; x += 50) {
for (let y = 0; y <= sketch.width; y += 50) {
sketch.fill(sketch.random(255), 0, sketch.random(255));
sketch.circle(x, y, 25);
}
}
};
})
p5(sketch => {
sketch.setup = function() {
sketch.createCanvas(width, 400);
sketch.frameRate(8); // Change frame rates per second!
};
sketch.draw = function() {
sketch.background(0);
sketch.noStroke();
// For loop
for (let x = 0; x <= sketch.mouseX; x += 50) {
for (let y = 0; y <= sketch.width; y += 50) {
sketch.fill(sketch.random(255), 0, sketch.random(255));
sketch.circle(x, y, 25);
}
}
};
})
p5(sketch => {
sketch.setup = function() {
sketch.createCanvas(width, 400);
sketch.frameRate(8); // Change frame rates per second!
};
sketch.draw = function() {
sketch.background(0);
sketch.noStroke();
// For loop
for (let x = 0; x <= sketch.width; x += 50) {
for (let y = 0; y <= sketch.mouseY; y += 50) {
sketch.fill(sketch.random(255), 0, sketch.random(255));
sketch.circle(x, y, 25);
}
}
};
})
function* p5(sketch) {
const element = DOM.element('div');
// p5.js really likes its target element to already be in the DOM, not just
// floating around detached. So, before we call P5, we yield it, which puts
// in the DOM.
yield element;
// This is ‘instance mode’ in p5 jargon: instead of relying on lots of
// globals, we create a sketch that has its own copy of everything under p5.
const instance = new P5(sketch, element, true);
// This is the tricky part: when you run P5(sketch, element), it starts a
// loop that updates the drawing a bunch of times a second. If we were just
// to call P5 repeatedly with different arguments, the loops would all keep
// running, one on top of the other. So what we do is we use this cell
// as a generator, and then when that generator is interrupted, like
// when you update the code in the sketch() method, then we call instance.remove()
// to clean it up.
try {
while (true) {
yield element;
}
} finally {
instance.remove();
}
}
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.
