Skip to content

Instantly share code, notes, and snippets.

@andrew-ayers

andrew-ayers/vertigo-harmonograph.js

Forked from limzykenneth/vertigo-harmonograph.js
Created May 2, 2018 21:27
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.
Download ZIP

Revisions

  1. @limzykenneth limzykenneth created this gist Feb 16, 2017.
    57 changes: 57 additions & 0 deletions vertigo-harmonograph.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,57 @@
    // 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();
    }
    }