This jam is now over. It ran from 2020-03-13 16:00:00 to 2020-03-31 03:59:59. View results

<input type="range" min="1" max="6" step="1" id="step" value="1"> <section>

YoU SmElL FuNnY

</section> <style> body { margin: 0; overflow: hidden; display: flex; height: 100vh; background: black; } canvas { margin: auto; touch-action: none; } @mixin track { box-sizing: border-box; height: 6px; background: #fff; -webkit-appearance: none; appearance: none; } @mixin thumb { box-sizing: border-box; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid black; -webkit-appearance: none; appearance: none; cursor: grab; } input { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); width: 80%; height: 34px; max-width: 400px; background: transparent; -webkit-appearance: none; appearance: none; &:active { cursor: grabbing; } &::-webkit-slider-runnable-track {@include track } &::-moz-range-track { @include track } &::-ms-track { @include track } &::-webkit-slider-thumb {margin-top: -12px;@include thumb} &::-moz-range-thumb { @include thumb } &::-ms-thumb {margin-top:0px;@include thumb} } section { box-sizing: border-box; font-size: 30px; color: white; position: fixed; left: 0; top: 20px; width: 100%; text-align: center; padding: 10px 10%; z-index: 10; pointer-events: none; text-shadow: 0 0 3px black, 0 0 4px black, 0 0 5px black; background: rgba(0, 0, 0, 0.7); p { margin: 0; } @media (max-width: 500px) { font-size: 24px; } } </style> <script> let img; const detail = 6; let particles = []; let grid = []; let particleImage; let ctx; function preload() { img = loadImage('https://s3-us-west-2.amazonaws.com/s.cdpn.io/127738/Meisje_met_de_parel.jpg?3'); } class Particle { constructor (x, y) { this.x = x || random(width); this.y = y || random(height); this.prevX = this.x; this.speed = 0; this.v = random(0, 0.7); } update (speed) { if (grid.length) { this.speed = grid[floor(this.y / detail)][floor(this.x / detail)] * 0.97; } this.x += (1 - this.speed) * 3 + this.v; if (this.x > width) { this.x = 0; } } draw () { image(particleImage, this.x, this.y); } } /* ====== STEP 1 ====== */ function step1 () { clear(); noLoop(); image(img, 0, 0, width, height); noFill(); stroke(120); strokeWeight(1); strokeCap(SQUARE); ctx.globalAlpha = 1; for (let y = 0; y < height; y+=detail) { for (let x = 0; x < width; x+=detail) { rect(x + 0.5, y + 0.5, detail, detail); } } } /* ====== STEP 2 ====== */ function step2 () { clear(); ctx.globalAlpha = 1; noLoop(); image(img, 0, 0, width, height); loadPixels(); noStroke(); for (let y = 0; y < height; y+=detail) { for (let x = 0; x < width; x+=detail) { const r = pixels[(y * width + x) * 4]; const g = pixels[(y * width + x) * 4 + 1]; const b = pixels[(y * width + x) * 4 + 2]; const _color = color(r, g, b); const _brightness = floor(brightness(_color) / 100 * 255); fill(_brightness); rect(x, y, detail, detail); } } } /* ====== STEP 3 ====== */ function goToStep3 () { ctx.globalAlpha = 1; loop(); grid = []; particles = []; for (let i = 0; i < 20; i++) { particles.push(new Particle(null, (i/20) * height)); } } function step3 () { clear(); particles.forEach(p => { p.update(); p.draw(); }); } /* ====== STEP 4 ====== */ function goToStep4 () { clear(); ctx.globalAlpha = 1; loop(); image(img, 0, 0, width, height); loadPixels(); clear(); noStroke(); grid = []; for (let y = 0; y < height; y+=detail) { let row = []; for (let x = 0; x < width; x+=detail) { const r = pixels[(y * width + x) * 4]; const g = pixels[(y * width + x) * 4 + 1]; const b = pixels[(y * width + x) * 4 + 2]; const _color = color(r, g, b); const _brightness = brightness(_color) / 100; fill(_brightness * 255); rect(x, y, detail, detail); row.push(_brightness); } grid.push(row); } particles = []; for (let i = 0; i < 3000; i++) { particles.push(new Particle(null, (i/3000) * height)); } } function step4 () { clear(); particles.forEach(p => { p.update(); p.draw(); }); } /* ====== STEP 5 ====== */ function goToStep5 () { clear(); ctx.globalAlpha = 1; loop(); image(img, 0, 0, width, height); loadPixels(); clear(); noStroke(); grid = []; for (let y = 0; y < height; y+=detail) { let row = []; for (let x = 0; x < width; x+=detail) { const r = pixels[(y * width + x) * 4]; const g = pixels[(y * width + x) * 4 + 1]; const b = pixels[(y * width + x) * 4 + 2]; const _color = color(r, g, b); const _brightness = brightness(_color) / 100; fill(_brightness * 255); rect(x, y, detail, detail); row.push(_brightness); } grid.push(row); } particles = []; for (let i = 0; i < 3000; i++) { particles.push(new Particle(null, (i/3000) * height)); } } function step5 () { clear(); particles.forEach(p => { p.update(); ctx.globalAlpha = p.speed * 0.3; p.draw(); }); } /* ====== STEP 6 ====== */ function goToStep6 () { clear(); ctx.globalAlpha = 1; loop(); image(img, 0, 0, width, height); loadPixels(); clear(); noStroke(); grid = []; for (let y = 0; y < height; y+=detail) { let row = []; for (let x = 0; x < width; x+=detail) { const r = pixels[(y * width + x) * 4]; const g = pixels[(y * width + x) * 4 + 1]; const b = pixels[(y * width + x) * 4 + 2]; const _color = color(r, g, b); const _brightness = brightness(_color) / 100; row.push(_brightness); } grid.push(row); } particles = []; for (let i = 0; i < 3000; i++) { particles.push(new Particle(null, (i/3000) * height)); } } function step6 () { ctx.globalAlpha = 0.05; fill(0); rect(0,0,width,height); ctx.globalAlpha = 0.2; particles.forEach(p => { p.update(); ctx.globalAlpha = p.speed * 0.3; p.draw(); }); } function setup () { const canvas = createCanvas(100,100); ctx = canvas.drawingContext; pixelDensity(1); particleImage = createGraphics(8, 8); particleImage.fill(255); particleImage.noStroke(); particleImage.circle(4, 4, 4); windowResized(); document.querySelector('#step').addEventListener('input', () => { if (window['goToStep' + step.value]) { window['goToStep' + step.value](); } draw(); }); } function windowResized () { const imgRatio = img.width/img.height; if (windowWidth/windowHeight > imgRatio) { resizeCanvas(floor(windowHeight * imgRatio), floor(windowHeight)); } else { resizeCanvas(floor(windowWidth), floor(windowWidth / imgRatio)); } noiseSeed(random(100)); if (window['goToStep' + step.value]) { window['goToStep' + step.value](); } draw(); } const texts = document.querySelectorAll('section p'); function draw () { window['step' + step.value](); texts.forEach(text => text.style.display = 'none'); texts[step.value - 1].style.display = 'block'; } </script>