/** * 211120 - Super happy faces at zebra places 🦓🌈 * -------------------------------------------------- * https://metamoar.notion.site/342788e1abb64123a913127d6bcd0fc1 */ let zOff = 0 let phase = 0 // HSL let colors = [[344,100,69],[37,100,50],[50,100,49],[104,100,32],[174,62,47],[252,86,58]] let friends = [ '😺', '🐵', '🐶', '🐺', '🐱', '🦁', '🐯', '🦊', '🦝', '🐮', '🐷', '🐗', '🐭', '🐹', '🐰', '🐻', '🐻‍❄️', '🐨', '🐼', '🐸' ] let emojis = [] /** * 🧰 Settings * -------------------------------------------------- * These can also be configured through ?queryString params ✨ * @todo Add these to right click menu */ function preload () { params = Object.assign({ fps: 30, noiseMax: 3, recordTime: 14, recordWidth: windowWidth, recordHeight: windowHeight }, getURLParams()) // ccapture if (+params.record) { window.capturer = new CCapture({ format: 'webm', framerate: +params.fps, verbose: true, display: true, timeLimit: +params.recordTime }) } // Pacemaker period = +params.fps * +params.recordTime } /** * 🎨 Main draw loop */ function draw () { // Pacemaker progress = (frameCount % period) / period // Record if (frameCount === 1 && +params.record) { capturer.start() } // Checkered pattern noStroke() let count = 0 let columns = 20 let w = width / columns let h = w for (let y = -2; y < h * 1.5; y ++) { for (let x = 0; x < columns; x++) { let yShift = h * 2 * progress * 2 if ((++count + y) % 2 === 0) { fill(255) } else { fill(0) } rect(w * x, y * h + yShift - h * 2, w, h) } } // Circles offscreen.clear() offscreen.drawingContext.globalCompositeOperation = 'source-over' offscreen.noStroke() offscreen.strokeWeight(2) offscreen.noFill() offscreen.push() offscreen.translate(width / 2, height / 2) let size = min(width, height) * .7 let ringWidth = size / (colors.length * 2) let numRings = size / ringWidth - 3 for (let n = 0; n < numRings; n++) { // let color = [...colors[wrap(n + floor(colors.length * 4 * progress), 0, colors.length)]] let color = [...colors[wrap(n, 0, colors.length)]] offscreen.fill(color) // color[2] -= 10 // stroke(color) offscreen.beginShape() for (let a = 0; a < TWO_PI; a += radians(1)) { let xOff = map(cos(a + phase), -1, 1, 0, +params.noiseMax) let yOff = map(sin(a + phase), -1, 1, 0, +params.noiseMax) let r = map(noise(xOff, yOff, zOff), 0, 1, size * .7, size * 1) r = r - n * ringWidth let x = r * cos(a) let y = r * sin(a) offscreen.vertex(x, y) } offscreen.endShape(CLOSE) } offscreen.pop() // Masks offscreen.fill(0) offscreen.noStroke() offscreen.drawingContext.globalCompositeOperation = 'destination-out' // Top Left Quadrant Mask offscreen.beginShape() offscreen.vertex(width, 0) offscreen.vertex(width/2, 0) let detail = 20 let len = height/2 / detail // Vertical for (let y = 0; y < detail; y ++) { let xOff = map(noise(y, zOff), -1, 1, -width / 20, width / 20) offscreen.curveVertex(width/2 + xOff, y * len) } // Horizontal len = width/2 / detail for (let x = 0; x < detail; x ++) { let yOff = map(noise(x, zOff), -1, 1, -height / 20, height / 20) offscreen.curveVertex(width/2 + x * len, height/2 + yOff) } offscreen.vertex(width, height/2) offscreen.endShape(CLOSE) // Bottom Right Quadrant Mask offscreen.beginShape() offscreen.vertex(0, height) offscreen.vertex(width/2, height) len = height/2 / detail // Vertical for (let y = 0; y < detail - 2; y ++) { let xOff = map(noise(y, zOff), -1, 1, -width / 20, width / 20) offscreen.curveVertex(width/2 - len*2 + xOff, height - y * len) } // Horizontal len = width/2 / detail for (let x = 0; x < detail; x ++) { let yOff = map(noise(x, zOff), -1, 1, -height / 20, height / 20) offscreen.curveVertex(width/2 - x * len, height/2 + yOff) } offscreen.vertex(0, height/2 + detail*2) offscreen.vertex(0, height) offscreen.endShape(CLOSE) // Overlay image(offscreen, 0, 0) image(noiseOverlay, 0, 0) // Smileys textAlign(CENTER, CENTER) textSize(width / 20) emojis.forEach(emoji => { emoji.pos.add(emoji.move) if (emoji.pos.dist(createVector(width/2, height/2)) > min(width/4, height/4)) { emoji.move.mult(-1) } text(emoji.emoji, emoji.pos.x, emoji.pos.y) // Draw chord // stroke(255) // strokeWeight(3) // line(emoji.chordA.x, emoji.chordA.y, emoji.chordB.x, emoji.chordB.y) }) // Record if (+params.record) { capturer.capture(canvas) } // Update offsets if (+params.record || +params.loop) { if (progress < .5) { phase += 0.003 zOff += 0.05 } else { phase -= 0.003 zOff -= 0.05 } } else { phase += 0.003 zOff += 0.05 } } /** * Represents a smiley * @param {*} skipObjects */ class Emoji { constructor () { // Create chord by calculating two points on the circle this.len = 0 while (this.len < min(width/4, height/4)) { let r = min(width/4, height/4) let a = random() * TWO_PI this.chordA = createVector(cos(a) * r + width/2, sin(a) * r + height/2) a = random() * TWO_PI this.chordB = createVector(cos(a) * r + width/2, sin(a) * r + height/2) // Determine the chord length this.len = this.chordA.dist(this.chordB) this.a = sin(this.len) // Create the move vector this.pos = this.chordA.copy() this.move = this.chordB.copy().sub(this.chordA) this.move.normalize() this.move.mult(this.len * 2 / period) // Start along the chord this.pos.add(this.move.copy().mult(random(this.len) / 6)) this.move.mult(random() > .5 ? 1 : -1) } this.emoji = friends[floor(random(friends.length))] } } /** * Setup scene */ function setupScene (skipObjects = false) { _renderer.position(width / 2 - width / 2, height / 2 - height / 2, 'fixed') offscreen.position(width / 2 - width / 2, height / 2 - height / 2, 'fixed') noiseOverlay.position(width / 2 - width / 2, height / 2 - height / 2, 'fixed') // Setup noise overlay noiseOverlay.pixelDensity(1) noiseOverlay.loadPixels() for (let i = 0; i < noiseOverlay.pixels.length; i += 4 * 6) { noiseOverlay.pixels[i] = 255 noiseOverlay.pixels[i+1] = 255 noiseOverlay.pixels[i+2] = 255 noiseOverlay.pixels[i+3] = random(60) noiseOverlay.pixels[i+4] = 255 noiseOverlay.pixels[i+5] = 255 noiseOverlay.pixels[i+6] = 255 noiseOverlay.pixels[i+7] = random(60) } noiseOverlay.updatePixels() // Without this the sketch will freeze! noiseOverlay.pixels = [] // Emojis emojis = [] for (let i = 0; i < random(200, 400); i++) { // for (let i = 0; i < 3; i++) { emojis.push(new Emoji()) } // Recreate objects if (!skipObjects) { } } /** * Sketch entry point */ function setup () { !+params.record && params.fps && frameRate(params.fps) let w = windowWidth let h = windowHeight if (+params.record || +params.loop) { w = +params.recordWidth h = +params.recordHeight } createCanvas(w, h) offscreen = createGraphics(width, height) noiseOverlay = createGraphics(width, height) if (+params.record || +params.loop) { pixelDensity(1) offscreen.pixelDensity(1) noiseOverlay.pixelDensity(1) } colorMode(HSL, 360, 100, 100, 100) offscreen.colorMode(HSL, 360, 100, 100, 100) setupScene() } /** * Tap with two fingers to recreate sketch */ function touchStarted () { if (touches.length > 1) { keyPressed() } } /** * Handle keypressed across multiple files */ function windowResized () { let w = windowWidth let h = windowHeight if (+params.record || +params.loop) { w = +params.recordWidth h = +params.recordHeight } resizeCanvas(w, h) offscreen.resizeCanvas(width, height) noiseOverlay.resizeCanvas(width, height) setupScene(false) } /** * Handle keypressed across multiple files */ function keyPressed () { frameCount = 0 setupScene() }

#Perlin noise