31:T6fe,thumbnail = svg``32:[] 2f:{"title":"Thumbnail generator","cells":[{"id":13,"value":"md`# Thumbnail generator`","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"shadersThumbnails","pinned":false,"hidden":false,"mode":"ojs"},{"id":694,"value":"md`When writing my [creative coding journey](/@makio135/creative-coding), I created a few thumbnails grouping multiple images as the one above 👆 \nSince some users here (👋 [Matt Dzugan](/@mattdzugan) & [Ricky Reusser](/@rreusser)) were inspired by these thumbnails, here is a small generator :) \n\nRicky Reusser also created an generator using shaders and regl: \n👉 https://observablehq.com/@rreusser/makio135-inspired-thumbnail-creator\n\nThanks [Fabian Iwand](/@mootari) for the help.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":616,"value":"md`___\n### Select images`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"viewof files = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"viewof images = {\n const grid = html`

`\n grid.value = [];\n [...files].forEach(file => {\n const img = new Image()\n img.style.maxWidth = '100%'\n const reader = new FileReader()\n reader.onload = () => {\n img.src = reader.result\n grid.appendChild(img)\n grid.value.push(img)\n grid.dispatchEvent(new CustomEvent('input'))\n }\n reader.readAsDataURL(file)\n })\n\n return grid\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":612,"value":"md`### Adjust settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"dimensions = [600, 400]","pinned":true,"hidden":false,"mode":"ojs"},{"id":119,"value":"viewof offset = Range([-dimensions[0], dimensions[0]], { value: 100, step: 1, label: \"Offset\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"viewof shadowDx = Range([0, dimensions[0]/images.length], { value: 18, step: 1, label: \"Shadow DX\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"viewof shadowDeviation = Range([0, 50], { value: 15, step: 1, label: \"Shadow Standard Deviation\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"viewof additionalZoom = Range([0, 1], { value: 0, label: \"Additionnal Zoom\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"md`Optionnally, reorder images or specify which ones to use using their indices \n(\\`order = [1, 0, 2]\\` for example).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"order = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"DOM.download(() => rasterize(thumbnail), undefined, \"Save as PNG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"md`___\n## Variables`","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"indices = order.length ? order.filter(d => d < files.length) : new Array(files.length).fill(0).map((d, i) => i)","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"w = dimensions[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"h = dimensions[1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"nw = (w + 2 * Math.abs(offset)) / indices.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":568,"value":"targetWidth = nw + Math.abs(offset) * 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":573,"value":"targetHeight = dimensions[1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"md`___\n## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"import {Range} from '@observablehq/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":647,"value":"import {rasterize} from '@mbostock/saving-svg'","pinned":false,"hidden":false,"mode":"ojs"},{"id":674,"value":"import {shadersThumbnails} from '@makio135/creative-coding'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}