Data visualisation at @civio, a non-profit journalism organisation specialising in public data and access to information.
Published
Edited
Jun 13, 2021
1 star
p5(sketch => {
sketch.setup = function() {
sketch.createCanvas(width, 400);
};
sketch.draw = function() {
sketch.background(0);
sketch.noStroke();
sketch.fill(255);
sketch.circle(sketch.mouseX, 150, 75);
};
})
p5(sketch => {
sketch.setup = function() {
sketch.createCanvas(width, 400);
};
sketch.draw = function() {
sketch.background(0);
sketch.noStroke();
sketch.fill(sketch.mouseX);
sketch.circle(200, sketch.mouseX, 75);
};
})
p5(sketch => {
// Hapens ONCE
sketch.setup = function() {
sketch.createCanvas(width, 400);
sketch.background(0);
};
// Happens IN A LOOP 60fps
sketch.draw = function() {
sketch.noStroke();
sketch.fill(255, 50);
sketch.circle(sketch.mouseX, sketch.mouseY, 20);
};
})
p5(sketch => {
// Hapens ONCE
sketch.setup = function() {
sketch.createCanvas(width, 400);
};
// Happens IN A LOOP 60fps
sketch.draw = function() {
sketch.noStroke();
sketch.fill(255, 50);
sketch.circle(sketch.mouseX, sketch.mouseY, 20);
};
// Happens just if there's mouse interaction
sketch.mousePressed = function() {
sketch.background(0);
};
})
p5(sketch => {
let circleX = 100;
// Hapens ONCE
sketch.setup = function() {
sketch.createCanvas(width, 400);
sketch.background(0);
};
// Happens IN A LOOP 60fps
sketch.draw = function() {
// Incremental shorthands
//circleX = circleX + 1;
//circleX += 1;
circleX++;
// Also with minus
//circleX--;
// Also with multiplier? Not working
//circleX *= 2;
sketch.noStroke();
sketch.fill(255, 50);
sketch.circle(circleX, sketch.mouseY, 20);
if (circleX > width) {
circleX = 0;
}
};
// Interactions
sketch.mousePressed = function() {
circleX = sketch.mouseX;
};
})
p5(sketch => {
sketch.setup = function() {
sketch.createCanvas(width, 200);
d3.range(100).map(function(d, i) {
let r = sketch.random(50);
sketch.stroke(r * 5);
// line(x1, y1, x2, y2)
sketch.line(0, i * 2, 200 + r, i * 2);
});
};
})
p5(sketch => {
sketch.setup = function() {
sketch.createCanvas(width, 100);
d3.range(100).map(function(d, i) {
let r = sketch.random(-50, 50);
sketch.stroke(r * 5);
sketch.line(50, i, 50 + r, i);
});
};
})
p5(sketch => {
const height = 400;
let squareSize;
let borderWidth;
// Happens ONCE
sketch.setup = function() {
sketch.createCanvas(width, height);
sketch.background(220);
};
// Happens IN A LOOP 60fps
sketch.draw = function() {
squareSize = sketch.random(4, height / 2);
borderWidth = sketch.random(4, 38);
sketch.rectMode(sketch.CENTER); // Reference system on the center
sketch.strokeWeight(borderWidth); // Random strokeWeight 60fps
sketch.stroke(0, 0, 255, 10);
sketch.fill(0, 255, 0, 10);
sketch.rect(width / 2, height / 2, squareSize);
};
})
p5(sketch => {
let radiusSize;
// Happens just ONCE
sketch.setup = function() {
sketch.createCanvas(width, 400);
};
// Happens IN A LOOP 60fps
sketch.draw = function() {
radiusSize = sketch.random(1, 50);
sketch.circle(sketch.mouseX, sketch.mouseY, radiusSize);
};
})
p5(sketch => {
let radiusSize, myOpacity;
// Happens just ONCE
sketch.setup = function() {
sketch.createCanvas(width, 400);
};
// Happens IN A LOOP 60fps
sketch.draw = function() {
radiusSize = sketch.random(100); // Random with 1 arg, returns a number from 0 up to that number (not included)
myOpacity = sketch.random(100);
sketch.noStroke();
sketch.fill(0, 0, 0, myOpacity);
sketch.circle(sketch.mouseX, sketch.mouseY, radiusSize);
};
})
p5(sketch => {
let x, y, r, g, b, myRad;
//const height = 400;
// Built in variables: width, height, windowHeight, windowWidth
// Happens just ONCE
sketch.setup = function() {
sketch.createCanvas(width, 400);
sketch.background(0);
};
// Happens IN A LOOP 60fps
sketch.draw = function() {
// Testing blending modes?
sketch.blendMode(sketch.SCREEN);
r = sketch.random(255);
g = 0;
b = sketch.random(255);
x = sketch.random(sketch.width); // Built in variables
y = sketch.random(sketch.height); // Built in variables
myRad = sketch.random(2, 25);
sketch.noStroke();
sketch.fill(r, g, b, 100);
sketch.circle(x, y, myRad);
};
})
p5(sketch => {
let radiusSize, myOpacity;
let r, g, b;
// Happens just ONCE
sketch.setup = function() {
sketch.createCanvas(width, 400);
sketch.background(0);
};
// Happens IN A LOOP 60fps
sketch.draw = function() {
radiusSize = sketch.random(20, 80);
myOpacity = activateOpacity ? sketch.random(100) : 1000;
r = sketch.random(255);
g = 0;
b = sketch.random(255);
// Testing blending modes?
sketch.blendMode(sketch.SCREEN);
sketch.noStroke();
sketch.fill(r, g, b, myOpacity);
sketch.circle(sketch.mouseX, sketch.mouseY, radiusSize);
};
})
p5(sketch => {
let backgrounColorBN = 0;
sketch.setup = function() {
sketch.createCanvas(width, 400);
};
sketch.draw = function() {
backgrounColorBN = sketch.map(sketch.mouseX, 0, width, 0, 255);
sketch.background(backgrounColorBN);
sketch.noStroke();
sketch.fill("red");
sketch.circle(sketch.mouseX, 150, 75);
};
})
p5(sketch => {
let r = 0;
let b = 255;
sketch.setup = function() {
sketch.createCanvas(width, 400);
};
sketch.draw = function() {
r = sketch.map(sketch.mouseX, 0, width, 0, 255);
sketch.background(r, 0, b);
sketch.noStroke();
sketch.fill(0);
sketch.circle(sketch.mouseX, 150, 75);
};
})
p5(sketch => {
let r = 0;
let b = 255;
sketch.setup = function() {
sketch.createCanvas(width, 400);
};
sketch.draw = function() {
r = sketch.map(sketch.mouseX, 0, width, 0, 255);
b = sketch.map(sketch.mouseX, 0, width, 255, 0);
sketch.background(r, 0, b);
sketch.noStroke();
sketch.fill(0);
sketch.circle(sketch.mouseX, 150, 75);
};
})
p5(sketch => {
let x = 200;
let y = 200;
sketch.setup = function() {
sketch.createCanvas(width, 400);
sketch.background(0);
};
sketch.draw = function() {
// No trails
//sketch.background(0);
x += sketch.random(-5, 5);
y += sketch.random(-5, 5);
//sketch.fill(255, 20);
sketch.noFill();
sketch.stroke(255, 10);
sketch.rectMode(sketch.CENTER);
sketch.rect(x, y, 40, 40);
if (sketch.mouseIsPressed) {
sketch.fill(255, 200);
sketch.noStroke();
sketch.circle(sketch.mouseX, sketch.mouseY, 50);
}
};
})
p5(sketch => {
let x = 200;
let y = 200;
let extraCanvas;
sketch.setup = function() {
sketch.createCanvas(width, 400); // Actual canvas
sketch.frameRate(20); // Change frame rates per second!
extraCanvas = sketch.createGraphics(width, 400); // Graphcis object
//extraCanvas.background(255, 0, 0); // red
extraCanvas.clear(); // completely transparent
sketch.background(0);
};
sketch.draw = function() {
//sketch.background(0, 10);
// No trails
//sketch.background(0);
x += sketch.random(-10, 10);
y += sketch.random(-10, 10);
sketch.fill(myColor);
//sketch.noFill();
//sketch.stroke(255);
sketch.noStroke();
sketch.rectMode(sketch.CENTER);
sketch.rect(x, y, 40, 40);
// Trails
if (sketch.mouseIsPressed) {
extraCanvas.fill(255, 200);
extraCanvas.noStroke();
extraCanvas.circle(sketch.mouseX, sketch.mouseY, 50);
}
sketch.image(extraCanvas, 0, 0);
};
})
p5(sketch => {
let x = 200;
let y = 200;
let extraCanvas;
sketch.setup = function() {
sketch.createCanvas(width, 400); // Actual canvas
extraCanvas = sketch.createGraphics(width, 400); // Graphcis object
//extraCanvas.background(255, 0, 0); // red
extraCanvas.clear(); // completely transparent
//sketch.background(0);
};
sketch.draw = function() {
sketch.background(0, 10);
// No trails
//sketch.background(0);
x += sketch.random(-5, 5);
y += sketch.random(-5, 5);
// Trails
if (sketch.mouseIsPressed) {
extraCanvas.fill(255, 200);
extraCanvas.noStroke();
extraCanvas.circle(sketch.mouseX, sketch.mouseY, 50);
}
sketch.image(extraCanvas, 0, 0);
// Painting underneath
sketch.fill(255, 0, 0);
sketch.noStroke();
sketch.rectMode(sketch.CENTER);
sketch.rect(x, y, 40, 40);
};
})
p5(sketch => {
let x = 200;
let y = 200;
let extraCanvas;
sketch.setup = function() {
sketch.createCanvas(width, 400); // Actual canvas
extraCanvas = sketch.createGraphics(width, 400); // Graphcis object
//extraCanvas.background(255, 0, 0); // red
extraCanvas.clear(); // completely transparent
sketch.background(0);
};
sketch.draw = function() {
// No trails
//sketch.background(0);
x += sketch.random(-5, 5);
y += sketch.random(-5, 5);
// Trails
extraCanvas.fill(255, 200);
extraCanvas.noStroke();
let startX = sketch.random(sketch.width);
let startY = sketch.random(sketch.height);
extraCanvas.circle(startX, startY, 10);
sketch.image(extraCanvas, 0, 0);
// Painting underneath
sketch.fill(255, 0, 0);
sketch.noStroke();
sketch.rectMode(sketch.CENTER);
sketch.rect(x, y, 40, 40);
};
})
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.
