Moiree Lines 02 - OpenProcessing

mySketch
xxxxxxxxxx
 
// define number of frames and raster width
// please adapt the numbers
let frames = 3;
let whitespace = 2;
​
​
let rasterpos = 0;
let frame = 1;
​
// defining offscreen graphics buffers
// add frames f*
let f, blk;
​
function setup() {
  createCanvas(windowWidth, windowHeight);
  pixelDensity(1);
  noSmooth();
  background(255);
  
  OPC.slider('whitespace', 2, 1, 20, 1);
​
  // creating offscreen graphics buffer
  // add frame if needed
  f = new Array(0);
  for (i=0; i<frames; i++) {
    f.push(createGraphics(width, height));
  }
​
  // draw first frame in an offscreen graphics buffer
  f[0].clear();
  f[0].fill(0);
  f[0].textSize(height / 1.5);
  f[0].textAlign(CENTER, CENTER);
  f[0].text("one", width / 2, height / 2);
  whiteraster(f[0], 1);
​
  // draw second frame in an offscreen graphics buffer
  f[1].clear();
  f[1].fill(0);
  f[1].textSize(height / 1.5);
  f[1].textAlign(CENTER, CENTER);
  f[1].text("two", width / 2, height / 2);
  whiteraster(f[1], 2);
​
  // draw third frame in an offscreen graphics buffer
  f[2].clear();
  f[2].fill(0);
  f[2].textSize(height / 1.5);
  f[2].textAlign(CENTER, CENTER);
  f[2].text("three", width / 2, height / 2);
  whiteraster(f[2], 3);
​
​
  // create black raster overlay in an offscreen graphics buffer
  blk = createGraphics(width, height);
  blk.fill(0);
  blk.noStroke();
  blk.translate(frame * whitespace, 0);
  for (i = 0; i < width; i += whitespace * frames) {
    blk.rect(i, 0, whitespace * (frames - 1), height);
  }
}
​
function draw() {
  background(255);
​
  // first frame
  fill(0);
  if (frame == 1 || frame == 0) {
    image(f[0], 0, 0);
  }
  if (frame == 2 || frame == 0) {
    image(f[1], 0, 0);
  }
  if (frame == 3 || frame == 0) {
    image(f[2], 0, 0);
  }
  
  //image(blk, rasterpos, 0);
}
​
function whiteraster(ctx, frm) {
  for (x = 0; x < width; x += whitespace * (frames)) {
    for (y = 0; y < height; y++) {
      for (w = 0; w < whitespace * (frames - 1); w++) {
        ctx.set((frm * whitespace) + x + w, y, color(0, 0, 0, 0));
      }
    }
  }
  ctx.updatePixels();
}
​
function keyPressed() {
  if (int(key) <= 9)
    frame = int(key);
  if (keyCode == RIGHT_ARROW)
    rasterpos += whitespace;
  if (keyCode == LEFT_ARROW)
    rasterpos -= whitespace;
  if (key == 's') {
    save("frames.png");
    /*for (i=0; i<frames; i++) {
      f[i].save("frame"+i+".png");
    }*/
    blk.save("black.png");
  }
}