Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save andrew-ayers/4da5c31eaf4b780e15eefe2b1030f15f to your computer and use it in GitHub Desktop.
Save andrew-ayers/4da5c31eaf4b780e15eefe2b1030f15f to your computer and use it in GitHub Desktop.
Vertigo poster graphics generator written in p5.js. Translated to p5.js from https://www.johndcook.com/blog/2017/02/14/recreating-the-vertigo-poster/
// Stop after how many frames
var iterations = 4000;
// The higher the damping the less the pendulum will shift its position
// ie. damping of 1000 or more will just draw concentric spirals
var damping = 400;
function setup() {
// Create canvas
var canvas = createCanvas(500, 500);
// Give canvas an id in order to style it with CSS later
canvas.id("vertigo");
// Approximate background colour of the original poster
background("#d44424");
}
function draw() {
// Redraw the background each frame, replacing what's already drawn
background("#d44424");
// White strokes in line with the original poster
stroke("#ffffff");
// Draw lines only, don't fill in shapes
noFill();
// Begin drawing the shape
beginShape();
// To get the effect of the pattern drawing, every frame only `frameCount` number of frames
// are drawn on the canvas
for (var i=0; i < frameCount; i++){
// Algorithm for harmonograph (https://en.wikipedia.org/wiki/Harmonograph)
// Taken from https://www.johndcook.com/blog/2017/02/14/recreating-the-vertigo-poster/
// x1 and y1 are two pendulums with amplitude (1.0 and 1.4) slightly offset from one another
// Changing the divisor of the argument of sin and cos will change the frequency at which the
// drawing occurs. Lower number = higher frequency
var x1 = 1.0 * cos(i/8) * exp(-i/2500);
var y1 = 1.4 * sin(i/8) * exp(-i/2500);
var d = damping;
var vx = sin(i/d) * x1 - cos(i/d) * y1;
var vy = cos(i/d) * x1 + sin(i/d) * y1;
// Mapping the value of the algorithms output to canvas coordinates
var px = map(vx, -1.5, 1.5, 0, 500);
var py = map(vy, -1.3, 1.3, 0, 500);
// Define the vertex
vertex(px, py);
}
// End shape and draw it on screen
endShape();
// Stop main loop after all iterations are done
if(frameCount >= iterations){
noLoop();
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment