32:T8e4,p5(sketch => { // let system; let img; var colours = []; const tileCount_X = object.slice; const rectSize = width / tileCount_X; const tileCount_Y = height /rectSize; // different ways of ordering the dots function getSortOrder() { const setOfColours = colours; if(sortMode === 'SATURATION') { setOfColours.sort((a, b) => { return sketch.saturation(b.toString()) - sketch.saturation(a.toString()); }); } else if(sortMode === 'BRIGHTNESS') { setOfColours.sort((a, b) => { return sketch.brightness(b.toString()) - sketch.brightness(a.toString()); }); } else if(sortMode === 'HUE') { setOfColours.sort((a, b) => { return sketch.hue(b.toString()) - sketch.hue(a.toString()); }); } return setOfColours; } sketch.preload = function() { img = sketch.loadImage(image.src); } sketch.setup = function() { // load the pixels img.loadPixels(); img.resize(width, height); sketch.createCanvas(width, height); sketch.fill('#222'); sketch.rect(0, 0, width, height); colours = []; // get the colours for (let gridY = 0; gridY < tileCount_Y; gridY++) { // go through every row for (let gridX = 0; gridX < tileCount_X; gridX++) { // go through every column var px = sketch.int(gridX * rectSize); var py = sketch.int(gridY * rectSize); // get the values around px and py var i = (py * img.width + px) * 4; // do an average of the code var c = sketch.color(img.pixels[i], img.pixels[i + 1], img.pixels[i + 2], img.pixels[i + 3]); colours.push(c); } } }; sketch.draw = function() { const theseColours = getSortOrder(); let i = 0; // draw the pixels // go through every column for (let gridY = 0; gridY < tileCount_Y; gridY++) { // go through every row for (let gridX = 0; gridX < tileCount_X; gridX++) { sketch.stroke(theseColours[i].toString()); sketch.strokeWeight(1); sketch.ellipse((gridX * rectSize + rectSize / 2), (gridY * rectSize + rectSize / 2), rectSize); i++; } } } })33:[] 30:{"title":"Generative design Notebook 4: obtaining colour palettes from images","cells":[{"id":0,"value":"md`# Generative design Notebook 4: obtaining colour palettes from images`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`One of my 2020 goals is to do more Generative Design. This notebook is inspired by exercise \nP_1_2_2 from the book Generative Design by Benedikt Gross and Hartmut Bohnhacker.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"viewof object_paintings = {\n const paintings = html`\n

Select an image

\n \n \n `;\n\n paintings.onclick = event => {\n const painting = event.target.id;\n if (painting === 'MONA_LISA') {\n mutable selected_image = MONA_LISA;\n } else if (painting === 'INFANTA') {\n mutable selected_image = INFANTA;\n } else if (painting === 'VAN_GOGH') {\n mutable selected_image = VAN_GOGH;\n }\n };\n \n return paintings;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":463,"value":"viewof url_input = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"viewof send_imgs = {\n const sends = html`\n `;\n\n sends.onclick = event => {\n mutable selected_image = input_url;\n };\n \n return sends;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"viewof object = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"viewof O = {\n const types = html`\n

Choose how to arrange the colours

\n \n \n \n `;\n\n types.onclick = event => {\n const type = event.target.id;\n mutable sortMode = type;\n };\n \n return types;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"mutable selected_image = MONA_LISA;","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"MONA_LISA = \"https://gist.githubusercontent.com/mbostock/9511ae067889eefa5537eedcbbf87dab/raw/944b6e5fe8dd535d6381b93d88bf4a854dac53d4/mona-lisa.jpg\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"INFANTA = \"https://upload.wikimedia.org/wikipedia/commons/1/15/Diego_Vel%C3%A1zquez_030.jpg\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"VAN_GOGH = \"https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Vincent_van_Gogh_-_Self-Portrait_-_Google_Art_Project_%28454045%29.jpg/1280px-Vincent_van_Gogh_-_Self-Portrait_-_Google_Art_Project_%28454045%29.jpg\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"function fetchImage(src) {\n return new Promise((resolve, reject) => {\n const image = new Image;\n image.crossOrigin = \"anonymous\";\n image.src = src;\n image.onload = () => resolve(image);\n image.onerror = reject;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"ratio = image.height / image.width","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"height = width * ratio;","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"input_url = url_input.message","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"mutable sortMode = 'NULL';","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"md`How to fetch images outside Observable in https://observablehq.com/@mbostock/cross-origin-images`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"// add url at some point\nimage = fetchImage(selected_image);","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"import {p5} from \"@tmcw/p5\";","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}