Pixel Deck
Results here: https://twitter.com/ippsketch/status/1389575309226348547?s=20
p5.js sketch code and image files below
Last active
May 4, 2021 14:09
-
-
Save ippsketch/649d548fe155edfa6675b532ef4e7104 to your computer and use it in GitHub Desktop.
Pixel Deck: Blue Back
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment