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); // Actual canvas
};
sketch.draw = function() {
sketch.background(50);
sketch.stroke(255);
sketch.strokeWeight(5);
sketch.noFill();
// Distance
//let d = sketch.dist(sketch.mouseX, sketch.mouseY, centerX, centerY);
//console.log(d);
if (sketch.mouseX > width / 2) {
sketch.fill(255, 0, 200);
}
sketch.circle(300, 200, 100);
};
})
p5(sketch => {
sketch.setup = function() {
sketch.createCanvas(width, 400); // Actual canvas
};
sketch.draw = function() {
//sketch.background(50);
sketch.background(0, 10); // Transparent background gives "delay" effect, as frames are transparent
sketch.stroke(255);
sketch.strokeWeight(5);
sketch.noFill();
// Distance
//let d = sketch.dist(sketch.mouseX, sketch.mouseY, centerX, centerY);
//console.log(d);
if (sketch.mouseX < sketch.width / 3) {
sketch.circle(sketch.width / 2, sketch.height / 2, 100);
} else if (
sketch.mouseX > sketch.width / 3 &&
sketch.mouseX < (2 * sketch.width) / 3
) {
sketch.rectMode(sketch.CENTER); // Reference system on the center
sketch.rect(sketch.width / 2, sketch.height / 2, 100);
} else {
//sketch.tiangleMode(sketch.CENTER); // Reference system on the center
sketch.triangle(
sketch.width / 2 - 50,
sketch.height / 2 + 50,
sketch.width / 2 + 50,
sketch.height / 2 + 50,
sketch.width / 2,
sketch.height / 2 - 50
);
}
};
})
p5(sketch => {
let x = 0;
let speed = 3;
sketch.setup = function() {
sketch.createCanvas(width, 400); // Actual canvas
};
sketch.draw = function() {
sketch.background(0);
sketch.stroke(255);
sketch.strokeWeight(5);
sketch.noFill();
sketch.circle(x, 200, 100);
if (x >= sketch.width) {
speed = -3;
} else if (x < 0) {
speed = 3;
}
x = x + speed;
};
})
p5(sketch => {
// Global variables
let x = 0;
let speed = 3;
sketch.setup = function() {
sketch.createCanvas(width, 400); // Actual canvas
};
sketch.draw = function() {
sketch.background(0);
sketch.stroke(255);
sketch.strokeWeight(5);
sketch.noFill();
sketch.circle(x, 200, 100);
if (x >= sketch.width || x < 0) {
speed = speed * -1; // Possitive to negative etc
}
x = x + speed;
};
})
viewof trail = Inputs.range([0, 100], { label: "Trail" })
p5(sketch => {
// Global variables
let x = 0;
let speed = 3;
sketch.setup = function() {
sketch.createCanvas(width, 400); // Actual canvas
};
sketch.draw = function() {
sketch.background(0, trail); // The background opacity gives the "trail" effect ❤
sketch.stroke(255);
sketch.strokeWeight(5);
sketch.noFill();
sketch.circle(x, 200, 100);
if (x >= sketch.width || x < 0) {
speed = speed * -1; // Possitive to negative etc
}
x = x + speed;
};
})
p5(sketch => {
sketch.setup = function() {
sketch.createCanvas(600, 400); // Actual canvas
};
sketch.draw = function() {
sketch.background(50);
sketch.stroke(255);
sketch.strokeWeight(5);
sketch.noFill();
if (
sketch.mouseX > 250 &&
sketch.mouseX < 350 &&
sketch.mouseY > 150 &&
sketch.mouseY < 250
) {
// check flag variable (true/false)
if (sketch.mouseIsPressed) {
sketch.background(0, 255, 0);
}
sketch.fill(255, 0, 200);
}
sketch.rectMode(sketch.CENTER);
sketch.rect(300, 200, 100);
};
})
p5(sketch => {
// Flag varible -> kind of "state" of the program
let lightIsOn = 0;
sketch.setup = function() {
sketch.createCanvas(600, 400); // Actual canvas
};
sketch.draw = function() {
lightIsOn ? sketch.background(0, 255, 0) : sketch.background(0);
sketch.noStroke();
sketch.fill(255);
const isInsideRect =
sketch.mouseX > 250 &&
sketch.mouseX < 350 &&
sketch.mouseY > 150 &&
sketch.mouseY < 250;
if (isInsideRect) {
sketch.fill(255, 0, 200);
}
sketch.rectMode(sketch.CENTER);
sketch.rect(300, 200, 100);
};
sketch.mousePressed = function() {
const isInsideRect =
sketch.mouseX > 250 &&
sketch.mouseX < 350 &&
sketch.mouseY > 150 &&
sketch.mouseY < 250;
if (isInsideRect) {
lightIsOn = !lightIsOn;
//console.log(lightIsOn);
}
};
})
p5(sketch => {
// Flag varible -> kind of "state" of the program
let lightIsOn = 0;
// Refactoring
function testIsInside(x, y) {
const answer = x > 250 && x < 350 && y > 150 && y < 250;
return answer;
}
sketch.setup = function() {
sketch.createCanvas(600, 400); // Actual canvas
};
sketch.draw = function() {
lightIsOn ? sketch.background(0, 255, 0) : sketch.background(0);
sketch.noStroke();
sketch.fill(255);
if (testIsInside(sketch.mouseX, sketch.mouseY)) {
sketch.fill(255, 0, 200);
}
sketch.rectMode(sketch.CENTER);
sketch.rect(300, 200, 100);
};
sketch.mousePressed = function() {
if (testIsInside(sketch.mouseX, sketch.mouseY)) {
lightIsOn = !lightIsOn;
//console.log(lightIsOn);
}
};
})
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.
