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.

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
Copyright Nathan ©
  • HTML
  • CSS
  • JavaScript
    <div class="container">
  <div id="sketch-holder"></div>

/*Downloaded from */
    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 */
    // Global Variable Declarations
let c = {
  "width": 400,
  "height": 400

let cx = c.width/2,
    cy = c.height/2,
    spacing = 10,
    weight = 9,

function preload() {
  // img = loadImage('');
  img = loadImage('');

// Setting up the Canvas
function setup() {
  let canvas = createCanvas(c.width, c.height);

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