31:T5a0,displayColors = function (img, colors) { return html`

${img}

Dominant Color

Color Palette

` }32:[{"id":"d794ab75ff179f71df0aa53764ae3bed45016da72d9703e4d7bf40957402435e8bd9d325ed91fe4a11e2df33972249131bea126a87bf1631f661d8e3be043303","href":"https://static.observableusercontent.com/files/d794ab75ff179f71df0aa53764ae3bed45016da72d9703e4d7bf40957402435e8bd9d325ed91fe4a11e2df33972249131bea126a87bf1631f661d8e3be043303","name":"5.JPG","type":"image/jpeg","lastModified":1580668978185.909,"size":278696},{"id":"875cce4eda057aa7dd0b095cf93636a7fbf86a4401a1365bf0da2eac40a8df0b52f8fa328d944ea49ca26cc9a71ec2fe932c5c636af5d83e2bca5d29c9052b59","href":"https://static.observableusercontent.com/files/875cce4eda057aa7dd0b095cf93636a7fbf86a4401a1365bf0da2eac40a8df0b52f8fa328d944ea49ca26cc9a71ec2fe932c5c636af5d83e2bca5d29c9052b59","name":"4.JPG","type":"image/jpeg","lastModified":1580668978185.909,"size":317102},{"id":"d91c766a5ac10298c176167e5c41e36f7f7bbac53a509b9c2f8315cfac62a888d9754dcad367be121fe97d198240326a670ce5e45dd28d6650968139c7af6a9e","href":"https://static.observableusercontent.com/files/d91c766a5ac10298c176167e5c41e36f7f7bbac53a509b9c2f8315cfac62a888d9754dcad367be121fe97d198240326a670ce5e45dd28d6650968139c7af6a9e","name":"3.JPG","type":"image/jpeg","lastModified":1580668978185.909,"size":458365},{"id":"809a019970dc9afae01385ac33ec9e2ba7e52a446318da11974f309f6b892161a68f4562dfad279dcb7585fa9fabb427e8c9803cbdbc26aa5d0dbcfd507eacfb","href":"https://static.observableusercontent.com/files/809a019970dc9afae01385ac33ec9e2ba7e52a446318da11974f309f6b892161a68f4562dfad279dcb7585fa9fabb427e8c9803cbdbc26aa5d0dbcfd507eacfb","name":"2.JPG","type":"image/jpeg","lastModified":1580668978185.909,"size":683820},{"id":"e8dec101ab89b8592b0bdbbd07c9c5067ea0644aacba654634935e411601c7a9cf23d9f6586508871445eab89671c94d9703e5bf3d4f9ad1f41d6b36191d9aac","href":"https://static.observableusercontent.com/files/e8dec101ab89b8592b0bdbbd07c9c5067ea0644aacba654634935e411601c7a9cf23d9f6586508871445eab89671c94d9703e5bf3d4f9ad1f41d6b36191d9aac","name":"1.JPG","type":"image/jpeg","lastModified":1580668978185.909,"size":140961}] 2f:{"title":"Color Sampling Test - ColorThief","cells":[{"id":0,"value":"md`# Color Sampling Test - ColorThief`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"md`Capturing the colors of a set of images. Implementing [Color Thief](https://lokeshdhakar.com/projects/color-thief/). We will use a sample set of 5 images from a recent trip. Those are uploaded here as file attachments.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"image_urls = [\n await FileAttachment('1.JPG').url(),\n await FileAttachment('2.JPG').url(),\n await FileAttachment('3.JPG').url(),\n await FileAttachment('4.JPG').url(),\n await FileAttachment('5.JPG').url(),\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":892,"value":"md`#### Austin, TX`","pinned":false,"hidden":false,"mode":"ojs"},{"id":870,"value":"getColorInfo(image_urls[0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":902,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":899,"value":"md`#### Somewhere on the Siuslaw River, OR`","pinned":false,"hidden":false,"mode":"ojs"},{"id":897,"value":"getColorInfo(image_urls[1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":865,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":908,"value":"md`#### Just south of Brookings, OR`","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"getColorInfo(image_urls[2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":906,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":929,"value":"md`#### Another from Brookings, B&W`","pinned":false,"hidden":false,"mode":"ojs"},{"id":925,"value":"getColorInfo(image_urls[3])","pinned":false,"hidden":false,"mode":"ojs"},{"id":934,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":937,"value":"md`#### Taken from Greenwood Terrace, North Berkeley`","pinned":false,"hidden":false,"mode":"ojs"},{"id":932,"value":"getColorInfo(image_urls[4])","pinned":false,"hidden":false,"mode":"ojs"},{"id":922,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"md`### Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":826,"value":"function loadImage(src) {\n return new Promise((resolve, reject) => {\n const img = new Image();\n img.addEventListener(\"load\", () => resolve(img));\n img.addEventListener(\"error\", err => reject(err));\n img.src = src;\n img.crossOrigin = \"anonymous\";\n });\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":854,"value":"getColorInfo = function(url) {\n return loadImage(url)\n .then(img => displayColors(img, { \n dominant: colorThief.getColor(img),\n palette: colorThief.getPalette(img, 6)\n })\n ).catch(err => console.error(err));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":604,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"function rgbString (array) {\n return 'rgb(' + array.join(', ') + ')';\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":667,"value":"getHex = function (array) {\n let rgbToHex = (r, g, b) => '#' + [r, g, b].map(x => {\n const hex = x.toString(16)\n return hex.length === 1 ? '0' + hex : hex\n }).join('').toUpperCase();\n return rgbToHex(array[0], array[1], array[2]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"md`### Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`### Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"colorThief = new ColorThief();","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"ColorThief = require('https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}