Data visualisation at @civio, a non-profit journalism organisation specialising in public data and access to information.
Published
Edited
Jun 13, 2021
p5(sketch => {
// Set variables into an object
const ball = {
x: 300,
y: 200,
xSpeed: -3,
ySpeed: 4
};
sketch.setup = function() {
sketch.createCanvas(width, 400);
//sketch.frameRate(8); // Change frame rates per second!
};
sketch.draw = function() {
//sketch.background(0);
sketch.background(0, 80);
sketch.stroke(255);
sketch.strokeWeight(4);
sketch.noFill();
sketch.circle(ball.x, ball.y, 24);
ball.x >= sketch.width || ball.x < 0 ? (ball.xSpeed = -ball.xSpeed) : "";
ball.y >= sketch.height || ball.y < 0 ? (ball.ySpeed = -ball.ySpeed) : "";
/*
if (ball.x > sketch.width || ball.x < 0) {
ball.xSpeed = ball.xSpeed * -1;
}
if (ball.y > sketch.height || ball.y < 0) {
ball.ySpeed = ball.ySpeed * -1;
}
*/
ball.x = ball.x + ball.xSpeed;
ball.y = ball.y + ball.ySpeed;
};
})
p5(sketch => {
// Set variables into an object
const ball = {
x: 300,
y: 200,
xSpeed: -3,
ySpeed: 4
};
// Built in p5.js functions
sketch.setup = function() {
sketch.createCanvas(width, 400);
//sketch.frameRate(8); // Change frame rates per second!
};
// Built in p5.js functions
sketch.draw = function() {
//sketch.background(0);
sketch.background(0, 80);
display();
move();
bounce();
};
// My own functions
function move() {
ball.x = ball.x + ball.xSpeed;
ball.y = ball.y + ball.ySpeed;
}
function bounce() {
ball.x >= sketch.width || ball.x < 0 ? (ball.xSpeed = -ball.xSpeed) : "";
ball.y >= sketch.height || ball.y < 0 ? (ball.ySpeed = -ball.ySpeed) : "";
}
function display() {
sketch.stroke(255);
sketch.strokeWeight(4);
sketch.noFill();
sketch.circle(ball.x, ball.y, 24);
}
})
p5(sketch => {
// Set variables into an object
const colorSheme = {
bkg: invert ? 0 : 255,
petals: invert ? 255 : 0
};
// Built in p5.js functions
sketch.setup = function() {
sketch.createCanvas(width, 400);
sketch.frameRate(5); // Change frame rates per second!
};
// Built in p5.js functions
sketch.draw = function() {
//sketch.background(0);
//sketch.background(colorSheme.bkg, 50);
// Draw functions
//for (let i = 0; i < 2; i++) {
//drawFlower(i, 5, sketch.random(3, 5));
//}
};
// My own functions
function drawFlower(x, y, nPetals) {
sketch.translate(x, y);
sketch.noStroke();
sketch.circle(0, 0, 10);
for (let i = 0; i < nPetals; i++) {
sketch.fill(colorSheme.petals, 100);
sketch.noStroke();
sketch.ellipse(0, 20, 10, 30);
sketch.rotate((sketch.PI * 2) / nPetals);
}
}
})
p5(sketch => {
// Built in p5.js functions
sketch.setup = function() {
sketch.createCanvas(width, 400);
sketch.frameRate(10); // Change frame rates per second!
};
// Built in p5.js functions
sketch.draw = function() {
//sketch.background(0);
//sketch.background(255, 50);
// Draw functions
drawFlower(200, 200, 5);
};
// My own functions
function drawFlower(x, y, nPetals) {
sketch.translate(x, y);
sketch.circle(0, 0, 10);
for (let i = 0; i < nPetals; i++) {
sketch.fill(0, 10);
sketch.ellipse(0, 20, 10, 30);
//sketch.rotate((sketch.PI * 2) / nPetals);
sketch.rotate((sketch.PI * 2) / nPetals);
}
}
})
// 24/36
// https://www.youtube.com/watch?v=T-HGdc8L-7w&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=24
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.
