Pixel Deck: Blue Back

pixel-deck-blue-back.md

Pixel Deck

Results here: https://twitter.com/ippsketch/status/1389575309226348547?s=20

p5.js sketch code and image files below

pixelBack.js

// PERIOD when noise loops
var PERIOD = 1000;

let imgBack;
let imgBackPix;
function preload() {
  imgBack = loadImage('img/cardbackblue.png');
  imgBackPix = loadImage('img/cardbackpixblue.png');
}

let cardHeight;
let cardWidth;
let cardRadius;

//card is 2:3
let numW = 10;
let numH = 15;
let num = numH*numW;
let dw;
let dh;

let cropped = [];
let posx = [];
let posy = [];

function setup() {
  createCanvas(1040,1040);

  rectMode(RADIUS)
  background(0)

  cardHeight = height*.75;
  cardWidth = cardHeight*2.5/3.5;
  cardRadius = cardHeight*.125/3.5; 
  cardThickness = cardHeight*.2;

  dw = cardWidth/numW;
  dh = cardHeight/numH;

  // get cropped images
  let i = 0;
  for (let h=0; h<numH; h++){
    for (let w=0; w<numW; w++){
      let x = w*imgBackPix.width/numW;
      let y = h*imgBackPix.height/numH;
      posx[i] = x;
      posy[i] = y;
      cropped[i] = crop(imgBackPix, x, y, imgBackPix.width/numW, imgBackPix.height/numH) 
      i++;
    }
  }
}

function draw() {  
  var fc = ((frameCount-1)%PERIOD)/PERIOD;
  background(0)

  // go to top/left corner of the card
  translate((width-cardWidth)/2-50,(height-cardHeight)/2-75);
  
  image(imgBack,0,0,cardWidth,cardHeight)
  
  for (let i=0; i<num; i++){
    var y = dh*floor(i/numW);
    var x = dw*(i%numW);
    var rn = 10;
    var xd = rn*sin(TWO_PI*fc);
    var yd = rn*cos(TWO_PI*fc);
    var n = noise(x/100+xd,y/100+yd,0);
    if (n > .5) image(cropped[i],x,y,dw,dh);
  }
}


function crop(image, x, y, w, h) {
  var cropped = createImage(w, h);
  cropped.copy(image, x, y, x + w, y + h, 0, 0, x + w, y + h)
  return cropped;
}

pixelImages.md