Scanimation (p5.js)

In this example below you will see how to do a Scanimation (p5.js) with some HTML / CSS and Javascript

An attempt to create scanimation through code. The images come from random google searches and some variables are provided for fine tuning. It will never be perfect because of how I'm placing the image. But we can get pretty close for a fundamental understanding of the process.

Thumbnail
This awesome code was written by Nathan, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Nathan ©
  • HTML
  • CSS
  • JavaScript
    <div class="container">
  <div id="sketch-holder"></div>
</div>

/*Downloaded from https://www.codeseek.co/Twinbee/scanimation-p5js-BVKJJr */
    body {
  width: 100vw;
  height: 100vh;
  
  margin: 0;
  padding: 0;
  
  background: #222229;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

// A nice Frame
.container {
  height: 500px;
  width: 500px;
  
  margin: 0 0 20px;
  background: #fff;
  
  box-shadow: 0px 6px 20px #001;
  display: flex;
  justify-content: center;
  align-items: center;
}


/*Downloaded from https://www.codeseek.co/Twinbee/scanimation-p5js-BVKJJr */
    // Global Variable Declarations
let c = {
  "width": 400,
  "height": 400
};

let cx = c.width/2,
    cy = c.height/2,
    img,
    spacing = 10,
    weight = 9,
    speed=0;

function preload() {
  // img = loadImage('https://i0.wp.com/makezine.com/wp-content/uploads/2011/12/john-leungs-moire-magic-carpet.jpg?resize=1200%2C670&strip=all&ssl=1');
  img = loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Spinning_cube_moving_optical_illusion.jpg/220px-Spinning_cube_moving_optical_illusion.jpg');
}

// Setting up the Canvas
function setup() {
  let canvas = createCanvas(c.width, c.height);
  canvas.parent('sketch-holder');
}

// Where the Magic Happens (It draws)
function draw() {
  background(0);
  image(img, cx-250, cy-160, 500, 320);
  stroke(0);
  strokeWeight(weight);
  for (i=0; i<=42; i++) {
    line((spacing*i)+speed, 0, (spacing*i)+speed, height);
  }
  speed+=.2;
  if (speed >= 10) speed=0;
}

Comments