Data visualisation at @civio, a non-profit journalism organisation specialising in public data and access to information.
Published
Edited
Jun 7, 2021
1 fork
3 stars
p5(sketch => {
// Happens just ONCE
sketch.setup = function() {
// 2d (p5.Renderer is not set)
sketch.createCanvas(width, 400);
// 3d mode (Setting a p5.Renderer: WEBGL/P2D)
//sketch.createCanvas(width, 400, sketch.WEBGL);
};
// Happens IN A LOOP 60fps
sketch.draw = function() {
sketch.background(220);
sketch.circle(60, 100, 40);
//sketch.rectMode(sketch.CENTER); // Reference system on the center
sketch.rect(100, 200, 40);
};
})
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
p5(sketch => {
// Happens just ONCE
sketch.setup = function() {
sketch.createCanvas(width, 400);
};
// Happens IN A LOOP 60fps
sketch.draw = function() {
if (sketch.mouseIsPressed) {
sketch.fill(0); // One argument -> greyscale
} else {
sketch.fill(255); // One argument -> greyscale
}
sketch.ellipse(sketch.mouseX, sketch.mouseY, 80, 80);
};
})
p5(sketch => {
// Happens just ONCE
sketch.setup = function() {
sketch.createCanvas(width, 400);
};
// Happens IN A LOOP
sketch.draw = function() {
if (sketch.mouseIsPressed) {
sketch.fill(0);
} else {
sketch.fill(255);
}
sketch.circle(sketch.mouseX, sketch.mouseY, 80);
sketch.rect(sketch.mouseX + 50, sketch.mouseY, 40);
//sketch.line(sketch.mouseX + 50, sketch.mouseY, 40, 100);
};
})
p5(sketch => {
sketch.setup = function() {
sketch.createCanvas(width, 400);
sketch.background(220);
// Set colors
//sketch.fill(`rgba(0, 250, 20, ${opacity})`);
sketch.fill(myColor);
sketch.stroke(127, 63, 120);
// Basic shapes
sketch.noStroke();
sketch.rect(40, 120, 120, 40);
sketch.circle(240, 240, 80);
//sketch.stroke(50);
sketch.triangle(300, 100, 320, 100, 310, 80);
// Flower
sketch.translate(580, 200);
/*
for (let i = 0; i < 10; i++) {
sketch.ellipse(0, 30, 20, 80);
sketch.rotate(sketch.PI / 5);
}
*/
const petals = d3.range(10);
petals.map(function() {
sketch.ellipse(0, 30, 20, 80);
sketch.rotate(sketch.PI / 5);
});
};
//sketch.draw = function() {};
})
p5(sketch => {
sketch.setup = function() {
sketch.createCanvas(width, 400);
sketch.background(220);
};
sketch.draw = function() {
// Set colors
sketch.fill(`rgba(0, 250, 20, 0.1)`);
sketch.stroke(127, 63, 120); // 3 arguments -> RGB
// Basic shapes
sketch.noStroke();
sketch.rect(40, 120, 120, 40);
sketch.circle(240, 240, 80);
//sketch.stroke(50);
sketch.triangle(300, 100, 320, 100, 310, 80);
// Flower
sketch.translate(580, 200);
/*
for (let i = 0; i < 10; i++) {
sketch.ellipse(0, 30, 20, 80);
sketch.rotate(sketch.PI / 5);
}
*/
const petals = d3.range(10);
petals.map(function() {
sketch.ellipse(0, 30, 20, 80);
sketch.rotate(sketch.PI / 5);
});
};
})
p5(sketch => {
let r, g, b;
sketch.setup = function() {
sketch.createCanvas(width, 400);
// Pick colors randomly
r = sketch.random(255);
g = sketch.random(255);
b = sketch.random(255);
};
const centerX = 360;
const centerY = 200;
sketch.draw = function() {
sketch.background(220);
// Circle
sketch.strokeWeight(20);
sketch.stroke(r, g, b);
sketch.fill(r, g, b, 50); // 4 arguments -> RGBA
sketch.circle(centerX, centerY, 200);
};
// Interactions
sketch.mousePressed = function() {
// Check if mouse is inside the circle
let d = sketch.dist(sketch.mouseX, sketch.mouseY, centerX, centerY);
//console.log(d);
if (d < 100) {
// Pick new random color values
r = sketch.random(255);
g = sketch.random(255);
b = sketch.random(255);
}
};
})
p5(sketch => {
const centerX = 360;
const centerY = 200;
sketch.setup = function() {
sketch.createCanvas(width, 400);
// hue, saturation, and brightness
sketch.colorMode(sketch.HSB, 255);
sketch.background(220);
// Circle
sketch.strokeWeight(20);
sketch.stroke(slider, 255, 255);
sketch.fill(slider, 255, 255, 127);
sketch.circle(centerX, centerY, 200);
};
sketch.draw = function() {};
})
p5(sketch => {
const centerX = 360;
const centerY = 200;
let slider;
sketch.setup = function() {
sketch.createCanvas(width, 400);
// hue, saturation, and brightness
sketch.colorMode(sketch.HSB, 255);
//sketch.print("hello");
//console.log("hello");
// slider has a range between 0 and 255 with a starting value of 127
slider = sketch.createSlider(0, 255, 127);
};
sketch.draw = function() {
sketch.background(220);
// Circle
sketch.strokeWeight(20);
sketch.stroke(slider.value(), 255, 255);
sketch.fill(slider.value(), 255, 255, 127);
sketch.circle(centerX, centerY, 200);
};
})
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.
