28:null 29:["$","title",null,{"children":"Thumbnail generator | Lionel Radisson | Observable"}] 2e:T6fe,thumbnail = svg``2f:[] 2c:{"id":"9e80d1eb5bdcd0e0","slug":"thumbnail-generator","title":"Thumbnail generator","thumbnail":"4e9bf596c63a7b7b6a17868f376b7d258ae524d5e3250d24153c91cbefc05a76","access_level":"public","create_time":"$D2021-02-09T19:10:03.027Z","update_time":"$D2021-11-19T00:46:16.007Z","view_time":null,"first_public_time":"$D2021-02-10T23:13:54.265Z","has_unpublished_edits":null,"fork":true,"stars":26,"starred":false,"owner":{"type":"team","id":"33d0c3f28420ec9c","login":"makio135","name":"Lionel Radisson","avatar_url":"https://avatars-next.observableusercontent.com/1ebff675951134ccb48ffd1faaeabdecafe0daf8d168685c768f506435e400f0","tier":"starter_2024"},"version":716,"publish_version":716,"role":null,"authored":false,"authors":[{"type":"individual","id":"cae924adff874d09","login":"makio135","name":"Lionel Radisson","avatar_url":"https://avatars-next.observableusercontent.com/1ebff675951134ccb48ffd1faaeabdecafe0daf8d168685c768f506435e400f0","tier":null}],"members":[{"type":"individual","id":"cae924adff874d09","login":"makio135","name":"Lionel Radisson","avatar_url":"https://avatars-next.observableusercontent.com/1ebff675951134ccb48ffd1faaeabdecafe0daf8d168685c768f506435e400f0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"title":"Thumbnail generator","cells":[{"id":13,"value":"md`# Thumbnail generator`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"shadersThumbnails","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"md`___\n### Select images`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"viewof files = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":612,"value":"md`### Adjust settings`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"dimensions = [600, 400]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"viewof offset = Range([-dimensions[0], dimensions[0]], { value: 100, step: 1, label: \"Offset\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"viewof shadowDx = Range([0, dimensions[0]/images.length], { value: 18, step: 1, label: \"Shadow DX\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"viewof shadowDeviation = Range([0, 50], { value: 15, step: 1, label: \"Shadow Standard Deviation\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"viewof additionalZoom = Range([0, 1], { value: 0, label: \"Additionnal Zoom\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"order = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":"DOM.download(() => rasterize(thumbnail), undefined, \"Save as PNG\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"md`___\n## Variables`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"w = dimensions[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"h = dimensions[1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"nw = (w + 2 * Math.abs(offset)) / indices.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"targetWidth = nw + Math.abs(offset) * 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"targetHeight = dimensions[1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"md`___\n## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"import {Range} from '@observablehq/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"import {rasterize} from '@mbostock/saving-svg'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"import {shadersThumbnails} from '@makio135/creative-coding'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"