22:null 23:["$","title",null,{"children":"Joy of Scribbles 🌀 (Recreating Bob Ross Paintings with 12 colors of bezier curves) | Matt Dzugan | Observable"}] 28:T4e2,viewof gif = { const gif = new GIF; var w = mywidth; var h = image.height*mywidth/image.width; var ss = 955/w; const canvas = DOM.canvas(w*ss, h*ss); const context = canvas.getContext("2d"); canvas.style = "width: "+w*ss+"px;"; context.fillStyle = "#ffffff"; context.fillRect(0,0,w*ss,h*ss); gif.addFrame(canvas, {copy: true, delay: 1000/3}); context.globalAlpha = 0.5; var mylinecanv = d3.line() .curve(d3["curveCardinal"]) //.defined(d => !isNaN(d)) .x(d => d[0]*ss) .y(d => d[1]*ss) .context(context); for(var ii=0; ii<5e2; ii++){ var stip = generateStipples(colorPalette, floydsteinberg.paletteData, mywidth, 0.01); var scrb = generateScribbles(stip, 16, 25) // stipples, ptsPerClust, maxLen for(var as of scrb){ context.beginPath(); mylinecanv(as.path); context.lineWidth = 0.5; context.strokeStyle = as.color; context.stroke(); } if(ii%10 == 0) gif.addFrame(canvas, {copy: true, delay: 1000/6}); yield context.canvas; } gif.addFrame(canvas, {copy: true, delay: 1000/1}); canvas.value = new Promise(resolve => gif.on("finished", resolve)); gif.render(); }29:Tbe3,floydsteinberg = { //* function diffuseError(mydata, r, c, error, factor){ var idx = rowcol2index(r, c, w, h); mydata[idx+0] = Math.max(Math.min(mydata[idx+0] + factor*error.r,255),0); mydata[idx+1] = Math.max(Math.min(mydata[idx+1] + factor*error.g,255),0); mydata[idx+2] = Math.max(Math.min(mydata[idx+2] + factor*error.b,255),0); return(mydata) } var w = mywidth; var h = Math.floor(image.height*mywidth/image.width); var context = DOM.context2d(w, h); var imgData = context.createImageData(w, h); var dithered = []; for (var ii=0; ii(1))){ dithered = diffuseError(dithered, myRow+0, myCol+1, quant_error, 7/48); // this is so f***ing cool dithered = diffuseError(dithered, myRow+0, myCol+2, quant_error, 5/48); // dithered = diffuseError(dithered, myRow+1, myCol-2, quant_error, 3/48); // basically we take the error dithered = diffuseError(dithered, myRow+1, myCol-1, quant_error, 5/48); // in how close we came dithered = diffuseError(dithered, myRow+1, myCol+0, quant_error, 7/48); // to approximating true color dithered = diffuseError(dithered, myRow+1, myCol+1, quant_error, 5/48); // and we add dithered = diffuseError(dithered, myRow+1, myCol+2, quant_error, 3/48); // (a portion of) that delta dithered = diffuseError(dithered, myRow+2, myCol-2, quant_error, 1/48); // to the nearby pixels dithered = diffuseError(dithered, myRow+2, myCol-1, quant_error, 3/48); // dithered = diffuseError(dithered, myRow+2, myCol+0, quant_error, 5/48); // how cool is that dithered = diffuseError(dithered, myRow+2, myCol+1, quant_error, 3/48); // dithered = diffuseError(dithered, myRow+2, myCol+2, quant_error, 1/48); // and it works } } // end of pixel by pixel FOR loop // for (var ii=0; ii0){ var clusters = kmeans(ps.stipples, Math.ceil(ps.stipples.length/ptsPerClust)); for (var clust of clusters.centroids){ // for each cluster var myStipples = clust.points; var route = solveTSP(myStipples) var currentStarting_ii = 0; var currentScribble = []; currentScribble.push(myStipples[route[0]]); for (var ii=0; ii<(route.length-1); ii++){ var ptA = myStipples[route[ii]]; var ptB = myStipples[route[ii+1]]; var upcomingDist = Math.sqrt(Math.pow(ptA[0]-ptB[0],2) + Math.pow(ptA[1]-ptB[1],2)); //return(upcomingDist) if ((upcomingDist>maxLen)|(ii == route.length-2)){ scribbles.push({path:currentScribble, color:ps.color}); currentStarting_ii = ii+1; currentScribble = []; currentScribble.push(myStipples[route[currentStarting_ii]]) }else{ currentScribble.push(ptB) } } // enf of TSP for loop } // end of each cluster within a color } // end of conditional (if any points per color) } // end of color loop // for each color // // do TSP // // calculate distance of each leg, if dist>x then increase scribble id number // // for each scribble id, scramble a few return(scribbles) }2b:T739,solveTSP = function(cities) { const ESPILON = -0.001; let distances = (() => { const dist = (a, b) => Math.sqrt( Math.pow(cities[a][0] - cities[b][0], 2) + Math.pow(cities[a][1] - cities[b][1], 2) ); let result = []; for (let i = 0; i < cities.length; i++) { let row = new Float32Array(cities.length); for (let j = 0; j < cities.length; j++) { row[j] = dist(i, j); } result.push(row); } return result; })(); function firstTwoOptImprovement(tour) { const next = current => (current + 1) % tour.length; const pick = d3.randomInt(tour.length - 2); function delta(i, j) { let ni = tour[next(i)]; let nj = tour[next(j)]; let ci = tour[i]; let cj = tour[j]; return ( distances[ci][cj] + distances[ni][nj] - distances[ci][ni] - distances[cj][nj] ); } function move(from, to) { let result = [...tour]; let count = to - from; for (let i = 0; i < count; i++) { result[from + 1 + i] = tour[to - i]; } return result; } for ( let times = 0, start = pick(); times < tour.length; times++, start = next(start) ) { for (let end = start + 2; end < tour.length; end++) { let variation = delta(start, end); if (variation < ESPILON) { return { tour: move(start, end), delta: variation }; } } } return { tour: tour, delta: 0 }; } const random = () => d3.shuffle(d3.range(cities.length)); let current = { tour: random(), delta: Number.MIN_SAFE_INTEGER }; // yield current.tour; console.log("delta " + current.delta); while (current.delta < 0) { //yield current.tour; current = firstTwoOptImprovement(current.tour); } return(current.tour); }2c:[] 26:{"id":"227276744a4eec25","slug":"joy-of-scribbles-recreating-bob-ross-paintings-with-12-colo","title":"Joy of Scribbles 🌀 (Recreating Bob Ross Paintings with 12 colors of bezier curves)","thumbnail":"69be8b9bac7e8b87744f311d9c28feb5e190cf165340775759c64dd471fdcc02","access_level":"public","create_time":"$D2020-12-20T20:17:41.000Z","update_time":"$D2021-01-19T06:49:36.354Z","view_time":null,"first_public_time":"$D2021-01-08T06:08:00.578Z","has_unpublished_edits":null,"fork":false,"stars":35,"starred":false,"owner":{"type":"team","id":"5d1c5c48a3939518","login":"mattdzugan","name":"Matt Dzugan","avatar_url":"https://avatars-next.observableusercontent.com/5e6f59dbd54952c1978225f1a7fdc6abf438d0beee68bf8df8be4f097380b46a","tier":"starter_2024","bio":""},"version":774,"publish_version":774,"role":null,"authored":false,"authors":[{"type":"individual","id":"e4c2116dac28a624","login":"mattdzugan","name":"Matt Dzugan","avatar_url":"https://avatars-next.observableusercontent.com/5e6f59dbd54952c1978225f1a7fdc6abf438d0beee68bf8df8be4f097380b46a","tier":null,"bio":""}],"members":[{"type":"individual","id":"e4c2116dac28a624","login":"mattdzugan","name":"Matt Dzugan","avatar_url":"https://avatars-next.observableusercontent.com/5e6f59dbd54952c1978225f1a7fdc6abf438d0beee68bf8df8be4f097380b46a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":{"id":"4b59f6295f5463d9","slug":"genuary-2021","title":"Genuary 2021","owner":{"id":"5d1c5c48a3939518","login":"mattdzugan","name":"Matt Dzugan"}},"type":"notebook","body":{"titling":"auto","title":"Joy of Scribbles 🌀 (Recreating Bob Ross Paintings with 12 colors of bezier curves)","cells":[{"id":0,"value":"md`\n# Joy of Scribbles 🌀 (Recreating Bob Ross Paintings with 12 colors of bezier curves)\n## Genuary 2021: Day 8 -- Curve only\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`I used this notebook to create my entry for [Day 8](https://genuary2021.github.io/prompts) of [Genuary](https://genuary2021.github.io/).\n\nThe prompt is: \\`Curve Only.\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"md`This notebook will take a Bob Ross painting, dither it using Bob's Palette, and then draw a bunch of scribbles, connecting various commonly-colored points of the dithered image to one another via a bezier curve. Over many iterations, the painting magically starts to become visible.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"viewof favTitle = select({\n title: \"Bob Ross Catalog\",\n description: \"Please pick your favorite Bob Ross painting.\",\n options: bobTable.map(x => x.painting_title),\n value: \"Soft Mountain Glow\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"PlotImageData(raw_rgba)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":715,"value":"md`### Let's restrict ourselves to only the paint-colors Bob had on his 🎨:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"drawColors(d3.shuffle(bobscolors))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"$28","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"mywidth = 300;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"image = {\n var found = bobTable.find(x => x.painting_title == favTitle)\n \n var path = \"https://raw.githubusercontent.com/jwilber/Bob_Ross_Paintings/master/data/paintings/painting\" + \n found.painting_index + \".png\"\n var image = d3.image(path, { crossOrigin: \"anonymous\" });\n return(image);\n}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"raw_rgba = {\n \n var w = mywidth;\n var h = image.height*w/image.width;\n //return(224.66666666667*300*4)\n //const context = DOM.context2d(w, h);\n const canvas = DOM.canvas(w, h);\n const context = canvas.getContext(\"2d\");\n canvas.style = \"width: \"+w+\"px;\";\n //context.resetTransform();\n //context.drawImage(image, 0, 0, image.width, image.height, 0, 0, w, h);\n context.drawImage(image, 0, 0, w, h);\n //context.resetTransform();\n //return(context.canvas)\n var {data: rgba} = context.getImageData(0, 0, w, h);\n //context.resetTransform();\n //return (context.canvas);\n return (rgba);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"md`## Undithered rendering`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"md`Here's what you get if for each pixel, you just snap it to the most similar color on Bob's palette.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"undithered_rgba = {\n \n var w = mywidth;\n var h = image.height*mywidth/image.width;\n var context = DOM.context2d(w, h);\n var imgData = context.createImageData(w, h);\n for (var ii=0; ii=0){ // TODO figure out why there are negatives\n var theseStipples = ps[colorIdx].stipples;\n if(d3.randomUniform()() LabDistance(d3.lab(x), d3.lab(Input)))\n //var diffVec = Palette.map(x => rgbDistance(d3.rgb(x), d3.rgb(Input)))\n var minIndex = d3.minIndex(diffVec);\n return(minIndex)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"function LabDistance(X, Y){\n return(Math.sqrt( Math.pow(X.l - Y.l, 2)+\n Math.pow(X.a - Y.a, 2)+\n Math.pow(X.b - Y.b, 2)));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"function rgbDistance(X, Y){\n return(Math.sqrt( Math.pow(X.r - Y.r, 2)+\n Math.pow(X.g - Y.g, 2)+\n Math.pow(X.b - Y.b, 2)));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"function rowcol2index(row, col, w, h){\n var index = (row*w+col)*4;\n return(index);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"index2rowcol = function(index, w, h){\n var myrow = Math.floor((index/4)/w);\n var mycol = Math.floor(index/4) % w;\n return({r: myrow, c: mycol});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"colorPalette = {\n var found = bobTable.find(x => x.painting_title == favTitle)\n return(eval(found.color_hex));\n}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"colorNames = {\n var found = bobTable.find(x => x.painting_title == favTitle)\n return(eval(found.colors));\n}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":658,"value":"bobscolors = {\n var b = [];\n for (var ii=0; ii Math.round(color.hsl()[0])))\n //console.log(colors.map(color => color.hex()))\n const size = 70;\n const N = colorpal.length;\n const perRow = Math.floor(width/size);\n const svg = DOM.svg(width, (size+10)*Math.ceil(N/perRow));\n const g = d3.select(svg).selectAll('g')\n .data(colorpal).enter().append('g')\n .attr('transform', (d, i) => {\n const x = (i % perRow + 0.5) * size;\n const y = (Math.floor(i / perRow) + 0.5) * size;\n return 'translate(' + [x, y] + ')';\n });\n\n g.append('circle')\n .attr('r', size / 4)\n .attr('fill', d => d.hex)\n .attr('stroke', \"#000000\");\n\n g.append('text')\n .attr('y', size / 4 + 15)\n .attr('text-anchor', 'middle')\n .attr('font-size', 9)\n .attr('font-family', 'Roboto-Black')\n .attr('dy', '.35em')\n .text((d, i) => `${d.name}`);\n \n return svg\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":752,"value":"GIF = {\n const [gif, workerScript] = await Promise.all([\n require(\"gif.js@0.2\"),\n require.resolve(\"gif.js@0.2/dist/gif.worker.js\")\n .then(fetch)\n .then(response => response.blob())\n .then(blob => URL.createObjectURL(blob, {type: \"text/javascript\"}))\n ]);\n return class extends gif {\n constructor(options) {\n super({workerScript, ...options});\n }\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2c","stdlib":"1"}} 27:"$26:body"