31:T6ba,# Brain JS 5 colour recommendation. ## Current setup is for *machine learning* (ML) training so a Brain model can be generated. This is focused on Training the brain. [Jump down to here](https://observablehq.com/@hellonearthis/brain-js-5-colour-recommendation#cell-6005) to great generated colours. ### The training. A colour palette is randomly generated so you can rate them as bad (1 star) or great (10 stars). When you submit a rating A new random colour is created. The random colour palette can be adjusted by clicking on the editor palettes buttons **hue-/+**, **saturation-/+**, **brightness-/+** controls. Or A new random colour can be got by clicking on the colour. ![image.png](${await FileAttachment("image.png").url()}) After rating one or more palettes you can click the **[Generate some colours](https://observablehq.com/@hellonearthis/brain-js-5-colour-recommendation#cell-6005)** button to make some random palettes. Clicking on a generated palette copies it into the main colour palette so you see how it looks in the graphs and rate it. You can also change the colour to something more desirable and rate that as well. This process will help with the machine learning workout what are good and bad colours palettes to you. Thanks goes out to [Coding with Fire, Ian & EJ](https://www.twitch.tv/enjalot) and [Shirley Wu](https://www.twitch.tv/sxywu) for inspiring this project. Based on [hackernoon/how-to-make-a-machine-learning-recommendation-system-from-scratch](Based on https://medium.com/hackernoon/how-to-make-a-machine-learning-recommendation-system-from-scratch-d747be801ce9) [ * **github repo.** *](https://github.com/Pradyuman7/Theme-Recommender/blob/master/index.js)32:Tb23,viewof dis = { let tfun = ['hue-','hue+','sat-','sat+','darken','lighten'] let tcol = ['#40618f','#6295db','#e7c605','#ffff07','#00992b','#00ff52' ] // need better colours randomize; currentColours; const svg = d3.create('svg') .attr('width', width) .attr('height', 160); const gro = svg.append('g'); let w = ~~(width/5) for(let i=0;i<5;i++){ gro.append('rect') .attr('id',`i${i}`) .attr('x', i*w+1) .attr('y', 0) .attr('width', w) .attr('height', 80) .attr('stroke', '#fff') .attr('fill', currentColours[i]) .on("click", colorChange); const control = gro.append('g'); control.append('rect') // tool background rect .attr('id',`control${i}`) .attr('x', i*w+1) .attr('y', 80) .attr('width', w) .attr('height', 80) .attr('stroke', '#000') .attr('fill', '#FFF888') .on("click", clicked); function clicked(event, d) { let clipColour = (JSON.stringify(`${d3.color(currentColours[i]).formatHex()}`)); // was planning on saving colour to clipboard d3.select(this).transition() .attr("fill", "red") .transition() .attr("fill", '#FFF888'); } control.append("text") // show colour in #hex .attr('x', i*w+20) .attr('y', 100) .attr('stroke','#000') .attr('font-family','Noto Sans JP') .attr('font-size', "18px") .attr('text-anchor','start') .attr('alignment-baseline','auto') .attr('pointer-events','none') // stops clicking on text generating a pointer event. .attr('id',`cText_${i}`) .text(`${d3.color(currentColours[i]).formatHex()}`); // loop 6 times to add colour controls boxes for HSL control of palette let toolWidth = w/6 let poz = i*w+1 for(let it=0;it<6;it++){ control.append('rect') // make the tool box .attr('id',`tool_${i}_${it}`) .attr('x', poz+(toolWidth*it)) .attr('y', 110) .attr('width', toolWidth) .attr('height', 50) .attr('stroke', '#000') .attr('fill', tcol[it]) .on("click", toolTime); // add pointer event too the tool box control.append("text") .attr('pointer-events','none') // stops text generating a pointer event when clicked. .attr('x', poz+(toolWidth*it)+3) .attr('y', 140) .attr('stroke','#000') .attr('font-family','Noto Sans JP') .attr('text-anchor','start') .attr('alignment-baseline','auto') .attr('font-size', "12px") .attr('text-shadow', '6px 6px 10px white') .text(`${tfun[it]}`); } } return svg.node(); }33:Tc91,// needs to generate star size and text depending on width viewof SVGstars = { let nStars = 10 let starSize = 42 let w = ~~(width/nStars) let starScale = ~~(w/starSize) const svg = d3.create('svg') .attr('width', width) .attr('height', width/10); const g = svg.append('g') .attr('id','gStars'); let selectedStar = 0 for(let i=0;i> make and array containing each RGB value divide by 255 and drop the colour Alpha channel let flatpackedColours = _.values(currentColours).map((RGBcolourArrays) => { let packedColours = []; _.dropRight(_.values(RGBcolourArrays)).forEach(RGBcolour => packedColours.push(RGBcolour/255)); return packedColours; }); let newBrainEntery = {'input':_.flattenDeep(flatpackedColours),'output':[starClicked]} // Validation the new entry. if( newBrainEntery.input.length > 15){ console.log(newBrainEntery,'lenght is ',newBrainEntery.input.length) // problems is this is displayed console.log('newBrainEntery',newBrainEntery.input) } else { teBrainData.push(newBrainEntery) localStorage.setItem("trainingData", JSON.stringify(teBrainData)); // save the training data } // generate new random colours { mutable currentColours = {...mutable currentColours, 0: getRandomRGB()}; } { mutable currentColours = {...mutable currentColours, 1: getRandomRGB()}; } { mutable currentColours = {...mutable currentColours, 2: getRandomRGB()}; } { mutable currentColours = {...mutable currentColours, 3: getRandomRGB()}; } { mutable currentColours = {...mutable currentColours, 4: getRandomRGB()}; } }); let ten = (i==9)?w/4:w/3 g.append('text') .attr('transform', `translate(${i*w+(ten)},${w/2}) scale(${starScale})`) .style('fill','#0dd16b') .style('font-family','Noto Sans JP') .style('font-size', `${starSize/3}px`) .attr('text-anchor','start') .attr('alignment-baseline','auto') .attr('pointer-events','none') // stops clicking on text generating a pointer event. .text(`${i+1}`); } return svg.node(); }34:T614,showPrediction = { let coloursToDisplayX = 5 let coloursToDisplayY = 5 let cpad = 30 let w = ~~(width/coloursToDisplayX) let h = 110 if(!teBrainData.length) return 'No Training data'; // not correct way as has no lenght let svg=d3.create('svg') .attr('width',width) .attr('height',h*coloursToDisplayX); for(let xc=0;xc 3 ?) const colours = randomColours() // returns 5 r,g,b colours in an array in brain.js style of numbers between 0-1 let [score] = net.run(colours) // predict the score results.push({ colours, score}) } let sortedResults = _.orderBy(results, ['score'],['desc']); return sortedResults }37:T18b5,// hue-/+, sat-/+, light-/+ // color.formatHsl() <> {h: 103.00578034682081, s: 0.7004048582995952, l: 0.3910079622264361, opacity: 1} // hue = 0 - 360 // saturation 0 - 1 (black - white) // lightness 0 - 1 function toolTime(){ let shade = 0.2 let c ={} switch(this.id){ case 'tool_0_0': c = d3.hsl(currentColours[0]); c.h+=4; { mutable currentColours = {...mutable currentColours, 0: currentColours[0]=d3.color(c)}; } // this rebuilding of the array is a way to make observable trigger an update when an entry is the array is changed. break; case 'tool_0_1': c = d3.hsl(currentColours[0]); c.h-=4; { mutable currentColours = {...mutable currentColours, 0: currentColours[0]=d3.color(c)}; } break; case 'tool_0_2': c = d3.hsl(currentColours[0]); c.s-=0.1; { mutable currentColours = {...mutable currentColours, 0: currentColours[0]=d3.color(c)}; } break; case 'tool_0_3': c = d3.hsl(currentColours[0]); c.s+=0.1; { mutable currentColours = {...mutable currentColours, 0: currentColours[0]=d3.color(c)}; } break; case 'tool_0_4': c = d3.hsl(currentColours[0]); c.l-=0.01; { mutable currentColours = {...mutable currentColours, 0: currentColours[0]=d3.color(c)};} break; case 'tool_0_5': c = d3.hsl(currentColours[0]); c.l+=0.01; { mutable currentColours = {...mutable currentColours, 0: currentColours[0]=d3.color(c)}; } break; //--------------------------------- case 'tool_1_0': c = d3.hsl(currentColours[1]); c.h+=4; { mutable currentColours = {...mutable currentColours, 1: currentColours[1]=d3.color(c)}; } break; case 'tool_1_1': c = d3.hsl(currentColours[1]); c.h-=4; { mutable currentColours = {...mutable currentColours, 1: currentColours[1]=d3.color(c)}; } break; case 'tool_1_2': c = d3.hsl(currentColours[1]); c.s-=0.1; { mutable currentColours = {...mutable currentColours, 1: currentColours[1]=d3.color(c)}; } break; case 'tool_1_3': c = d3.hsl(currentColours[1]); c.s+=0.1; { mutable currentColours = {...mutable currentColours, 1: currentColours[1]=d3.color(c)}; } break; case 'tool_1_4': c = d3.hsl(currentColours[1]); c.l-=0.01; { mutable currentColours = {...mutable currentColours, 1: currentColours[1]=d3.color(c)}; } break; case 'tool_1_5': c = d3.hsl(currentColours[1]); c.l+=0.01; { mutable currentColours = {...mutable currentColours, 1: currentColours[1]=d3.color(c)}; } break; //--------------------------------- case 'tool_2_0': c = d3.hsl(currentColours[2]); c.h+=4; { mutable currentColours = {...mutable currentColours, 2: currentColours[2]=d3.color(c)}; } break; case 'tool_2_1': c = d3.hsl(currentColours[2]); c.h-=4; { mutable currentColours = {...mutable currentColours, 2: currentColours[2]=d3.color(c)}; } break; case 'tool_2_2': c = d3.hsl(currentColours[2]); c.s-=0.1; { mutable currentColours = {...mutable currentColours, 2: currentColours[2]=d3.color(c)}; } break; case 'tool_2_3': c = d3.hsl(currentColours[2]); c.s+=0.1; { mutable currentColours = {...mutable currentColours, 2: currentColours[2]=d3.color(c)}; } break; case 'tool_2_4': c = d3.hsl(currentColours[2]); c.l-=0.01; { mutable currentColours = {...mutable currentColours, 2: currentColours[2]=d3.color(c)}; } break; case 'tool_2_5': c = d3.hsl(currentColours[2]); c.l+=0.01; { mutable currentColours = {...mutable currentColours, 2: currentColours[2]=d3.color(c)}; } break; //--------------------------------- case 'tool_3_0': c = d3.hsl(currentColours[3]); c.h+=4; { mutable currentColours = {...mutable currentColours, 3: currentColours[3]=d3.color(c)}; } break; case 'tool_3_1': c = d3.hsl(currentColours[3]); c.h-=4; { mutable currentColours = {...mutable currentColours, 3: currentColours[3]=d3.color(c)}; } break; case 'tool_3_2': c = d3.hsl(currentColours[3]); c.s-=0.1; { mutable currentColours = {...mutable currentColours, 3: currentColours[3]=d3.color(c)}; } break; case 'tool_3_3': c = d3.hsl(currentColours[3]); c.s+=0.1; { mutable currentColours = {...mutable currentColours, 3: currentColours[3]=d3.color(c)}; } break; case 'tool_3_4': c = d3.hsl(currentColours[3]); c.l-=0.01; { mutable currentColours = {...mutable currentColours, 3: currentColours[3]=d3.color(c)}; } break; case 'tool_3_5': c = d3.hsl(currentColours[3]); c.l+=0.01; { mutable currentColours = {...mutable currentColours, 3: currentColours[3]=d3.color(c)}; } break; //--------------------------------- case 'tool_4_0': c = d3.hsl(currentColours[4]); c.h+=4; { mutable currentColours = {...mutable currentColours, 4: currentColours[4]=d3.color(c)}; } break; case 'tool_4_1': c = d3.hsl(currentColours[4]); c.h-=4; { mutable currentColours = {...mutable currentColours, 4: currentColours[4]=d3.color(c)}; } break; case 'tool_4_2': c = d3.hsl(currentColours[4]); c.s-=0.1; { mutable currentColours = {...mutable currentColours, 4: currentColours[4]=d3.color(c)}; } break; case 'tool_4_3': c = d3.hsl(currentColours[4]); c.s+=0.1; { mutable currentColours = {...mutable currentColours, 4: currentColours[4]=d3.color(c)}; } break; case 'tool_4_4': c = d3.hsl(currentColours[4]); c.l-=0.01; { mutable currentColours = {...mutable currentColours, 4: currentColours[4]=d3.color(c)}; } break; case 'tool_4_5': c = d3.hsl(currentColours[4]); c.l+=0.01; { mutable currentColours = {...mutable currentColours, 4: currentColours[4]=d3.color(c)}; } break; } } // there could be ways of doing this with looks but I like how simple it currenly is even if it basically has duplicate code. (could refactor later)38:T6b1,## Colour references sites: *These are sites that are interesting and insperational me making this project.* https://colorable.jxnblk.com/001b66/00ffa2 two colours, text and background compatiable palette for disabilities. https://palettte.app/ Interesting palette editor. HSV https://mycolor.space/ makes graident palettes. https://colorsinspo.com/ collection of colour palettes - has brand colours but not in code colours and colour copies only does 1 at a time. https://cssgradient.io/ mostly gradients but has some single colour stuff. https://coolors.co/ has a structure that puts the colours in a url, it's the cleanest export. Palette generator. https://colormixer.web.app/02007115ff623007ff9bc91b64440301ffff7c5f55610300/Sunset https://picular.co/ colours that match to words https://colorhunt.co/ collection of colour palettes. Sets of 4 colours, export colours as image https://maketintsandshades.com/ tints as shardes of pasted in colours https://color.review/ accessable colour review http://khroma.co/ select 50 colours and ML makes a paletter for ya. make 4 colour combinations. https://projects.susielu.com/viz-palette a colour exporer. nice chart views and accessibility colour comparassion. https://www.canva.com/colors/color-palettes/ palette collection 4 colours, palette from picture, interesting complementry colour and colour wheel. https://icolorpalette.com/ palete generator / editor, colour collect 5 colours. export is not impossible. http://khroma.co/generator/ https://observablehq.com/@d3/color-schemes ### text wrapping https://www.w3.org/TR/SVG11/text.html https://stackoverflow.com/questions/24784302/wrapping-text-in-d3/24785497 39:T58c,# Main todo is: ADD **WCAG Ratio** testing. To test if the random colours have a fail or AAA rating. This could be automated as a core of the training and would fix issues around two colours the same. https://vis4.net/chromajs/ [chroma.contrast(color1, color2)](https://gka.github.io/chroma.js/#chroma-contrast) Computes the WCAG contrast ratio between two colors. A minimum contrast of 4.5:1 is recommended to ensure that text is still readable against a background color. This has issues because two colours could be different but have similar contrast. The result could end up with gray scale colour ranges. Getting all to be a 3 is difficult. https://coolors.co/contrast-checker/112a46-acc8e5 two colours http://colorsafe.co/ two colours https://dev.to/alvaromontoro/building-your-own-color-contrast-checker-4j7o https://observablehq.com/@shastabolicious/color-contrast-checker https://benmyers.dev/blog/fix-low-contrast-text/ https://reasonable.work/colors/ https://blog.logrocket.com/exploring-css-color-module-level-5/ https://htmlcolorcodes.com/ [and the things to try out](https://observablehq.com/d/c5b991d5ad0110b9#cell-306) https://colorcolor.in/ --- // linear interpolation chroma.scale(['yellow', 'red', 'black']); // bezier interpolation chroma.bezier(['yellow', 'red', 'black']); chroma.bezier(['yellow', 'red', 'black']) .scale() .colors(5); 3a:Tecf,# Todo and bugs: update to how css works on the new input buttons --input-width or --label-width "hue -hue+ sat- sat+ darken lighten" need nicer background colours. **other buttons to add.** colour temperature -/+. A tint is created by adding white to a base hue, lightening the color. This can make a color less intense, and is useful when balancing more vivid color combinations. https://css-tricks.com/snippets/sass/tint-shade-functions/ If I add more buttons then **I should add a 2nd row** and have the + buttons on the top and the - buttons under it. That would mean 4 button width with a tint button, two less than current. I want to add an undo of last click, to remove the last entry from the local storage. Add a button to copy palette to clipboard in the prediction palettes and in the clipboard code to the palette editor. Copy input to clipboard. *function copyToClipboard(inputID){ navigator.clipboard.writeText(document.querySelector(inputID).value); }* https://davidwalsh.name/navigator-clipboard-api *await navigator.clipboard.writeText("Yo")* *await navigator.clipboard.writeText("Howdy, partner!");* Add a button to turn on copy palette to clipboard when ranking colour. https://observablehq.com/@observablehq/input-toggle In the import colours work with url format used by https://coolors.co/a9ffcb-b6eea6-c0b298-a4778b-aa4586. Also add import support for Palette sites listed on https://observablehq.com/@makio135/give-me-colors like from https://colors.muz.li/palette/e74645/fb7756/facd60/fdfa66/1ac0c6 or import from makio's notebook... https://github.com/BlakeRMills/MetBrewer https://fffuel.co/pppalette/ Export and Import and clear the training data. To allow the loading and saving of the Brain train Data. I would like to have different sets of training data, one for unique colours and another for gradiants... other palates for training. https://99designs.com/blog/creative-inspiration/color-combinations/ In the predicted palette, mix a platte of complementry colours. ## colour palette ideas. The below uses hsv 360 colour circle to divide into 3 and 4 segments, could it work with 5 or 6 Triadic Three colors that are evenly spaced on the color wheel. This provides a high contrast color scheme, but less so than the complementary color combination — making it more versatile. This combination creates bold, vibrant color palettes. Tetradic Four colors that are evenly spaced on the color wheel. Tetradic color schemes are bold and work best if you let one color be dominant, and use the others as accents. The more colors you have in your palette, the more difficult it is to balance, Pentadic (?) Five colours that are evenly spaced on the color wheel. Need way to view the palette as colour blind people would: *Protanopia, Deuteranopia, Tritanopia, Achromatopsia, Protanomaly, Deuteranomaly, Tritanomaly, Achromatomaly*. That could be added to the predicition palette along with complemetry colours and half bright colours. Might need a control pannel for that too. ## refactoring ideas to save space in local storage I could save the colour values as hex codes and then convert them when I needed to interact with brain.js (if space becomes an issue) 109 training data entried = 41k and 205 entries = 84k **local storage is 2 MB to 10 MB** so no worries. ## questions to me Do I need to train the brain each time, or once at load time or if need pallets are added to the training data. I wonder if I put the text behind the rects in the editor tool box, if the rects have an opacity value of 50%. That could fix the text being selected while clicking. ** features ** The training data seems to tech that the colours are red, blue yellow... shuffeling the traing data didn't really fix that. 3b:T439,other_palettes = ["#69d2e7", "#fa6000", "#79f888", "#ff847c", "#ffe181", "#c06c84", "#7c5b7b", "#355cad", "#fab87f", "#b28774", "#7aa11c", "#574951", "#83988e", "#fc354c", "#5932af", "#0a9fbc", "#a5c500", "#cdb380", "#036564", "#A39649", "#a7d5bd", "#7a78c7", "#ffa000", "#f7a541", "#f0f020", '#d53e4f', '#f46d43', '#fdae61', '#fee08b', '#e6f598', '#abdda4', '#de77ae', '#f1b6da', '#fde0ef', '#e6f5d0', '#b8e186', '#7fbc41', '#4d9221', '#762a83', '#9970ab', '#c2a5cf', '#e7d4e8', '#d9f0d3', '#a6dba0', '#5aae61', '#1b7837', '#b35806', '#e08214', '#fdb863', '#fee0b6', '#d8daeb', '#b2182b','#d6604d','#f4a582','#fddbc7','#d1e5f0','#92c5de','#4393c3','#2166ac', '#b2182b','#d6604d','#f4a582','#fddbc7','#e0e0e0','#bababa','#878787','#4d4d4d', '#d73027','#f46d43','#fdae61','#fee090','#e0f3f8','#abd9e9','#74add1','#4575b4', '#d73027','#f46d43','#fdae61','#fee08b','#d9ef8b','#a6d96a','#66bd63','#1a9850', '#d53e4f','#f46d43','#fdae61','#fee08b','#e6f598','#abdda4','#66c2a5','#3288bd', '#8c510a','#bf812d','#dfc27d','#f6e8c3','#c7eae5','#80cdc1','#35978f','#01665e']3c:[{"id":"a730807aa2e24ea8e90e2c15525d57be9fa7496be91ccf9671548a181f6f24e0abc646f3a659d523a1d1492e3449d8332f83a3fabf8c313e9b3c181901bb4ef6","href":"https://static.observableusercontent.com/files/a730807aa2e24ea8e90e2c15525d57be9fa7496be91ccf9671548a181f6f24e0abc646f3a659d523a1d1492e3449d8332f83a3fabf8c313e9b3c181901bb4ef6","name":"te_Brain_Data.json","type":"application/json","lastModified":1612531832419.864,"size":37781},{"id":"31b83af358f2339189737f47b6d9ec4f334ddc425854918acaec45498b64261a244c4c5de92507d66dae00510906680cb16e6defae0e1645bcfcf4be22e569af","href":"https://static.observableusercontent.com/files/31b83af358f2339189737f47b6d9ec4f334ddc425854918acaec45498b64261a244c4c5de92507d66dae00510906680cb16e6defae0e1645bcfcf4be22e569af","name":"image.png","type":"image/png","lastModified":1655400601032.588,"size":33394}] 2f:{"title":"Brain JS 5 colour recommendation.","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":6108,"value":"---\n### TODO List:\nhttps://observablehq.com/@hellonearthis/brain-js-5-colour-recommendation#cell-6034","pinned":false,"hidden":false,"mode":"md"},{"id":6028,"value":"# Data Training Calibrator\nBelow, you rate the five colour below on a scale of 1 to 10 (bad to good). \nTo make a color palette scoll do to the **generate palette button**. ","pinned":false,"hidden":false,"mode":"md"},{"id":2906,"value":"## *PALETTE EDITOR:* You can change a colour below by clicking on it.\n*This is used to view and modify the training data.*","pinned":false,"hidden":false,"mode":"md"},{"id":2172,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":3749,"value":"viewof randomize = Button(\"randomize\", {label: \"Rearrange the colours in the bar chart below to see how they look.\", width:300})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6159,"value":"chroma.contrast(currentColours[0] , currentColours[1] )","pinned":true,"hidden":false,"mode":"ojs"},{"id":6177,"value":"chroma.contrast(currentColours[0] , currentColours[2] )","pinned":true,"hidden":false,"mode":"ojs"},{"id":6179,"value":"chroma.contrast(currentColours[0] , currentColours[3] )","pinned":true,"hidden":false,"mode":"ojs"},{"id":6181,"value":"chroma.contrast(currentColours[0] , currentColours[4] )","pinned":true,"hidden":false,"mode":"ojs"},{"id":6165,"value":"chroma.contrast(currentColours[1] , currentColours[2] )","pinned":true,"hidden":false,"mode":"ojs"},{"id":6185,"value":"chroma.contrast(currentColours[1] , currentColours[3] )","pinned":true,"hidden":false,"mode":"ojs"},{"id":6187,"value":"chroma.contrast(currentColours[1] , currentColours[4] )","pinned":true,"hidden":false,"mode":"ojs"},{"id":6167,"value":"chroma.contrast(currentColours[2] , currentColours[3] )","pinned":true,"hidden":false,"mode":"ojs"},{"id":6195,"value":"chroma.contrast(currentColours[2] , currentColours[4] )\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":6189,"value":"chroma.contrast(currentColours[3] , currentColours[4] )","pinned":true,"hidden":false,"mode":"ojs"},{"id":3566,"value":" viewof col = {\n randomize;\n let h = 300\n let w = width/40\n let c = 5\n let b = h/c\n let pad = 0\n let p = w*1.5\n let nc = 27 // width/(w+p)\n \n const svg = d3.create('svg')\n .attr('width', width)\n .attr('height', h); \n \n for (let cols = 0; cols< nc;cols++){\n const grup = svg.append('g');\n\n let ypad = 0\n let sizes = [];\n let total = h\n let n = 0;\n for(let i=0;i<(c-1);i++)\n {\n n = d3.randomInt(20, total/2)()\n sizes.push(n)\n total=total-n\n }\n sizes.push(total)\n \n for(let i=0;iGenerate some colours`\nviewof makeColours = {\n const button = html``;\n const control = html`${button} this can take a few seconds to respond
Clicking on a row below of colours copies them into the palette editor.`;\n button.onclick = e => {\n e && e.preventDefault(); // to avoid dispatching the 'click' event outside\n control.dispatchEvent(new CustomEvent('input'));\n };\n control.value = button.value;\n return control;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4860,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":6008,"value":"Below you can paste in colour palettes. \nAs long as they have the #RRGGBB or #RGB formatting this will find the colour and ignore the other characters. \nIf less that 5 are input then random colours will be added. \nClicking *Import* will copy the colours into the palette editor above.","pinned":false,"hidden":false,"mode":"md"},{"id":5576,"value":"viewof coloursPasted = textarea({\n title: \"HEX colour importer. The first 5 colours will be imported into the Palette Editor.\", \n placeholder: \"Paste in some hex colours...\", \n spellcheck: false,\n width: \"90%\",\n rows: 5,\n submit: \"Import Colours\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5578,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":5917,"value":"---\n## this is where the training happens","pinned":false,"hidden":false,"mode":"md"},{"id":4796,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":6154,"value":"star = 'M22,2,25.8268343236509,12.761204674887132,36.14213562373095,7.857864376269051,31.238795325112868, 18.1731656763491,42,22,31.238795325112868,25.8268343236509,36.14213562373095,36.14213562373095, 25.8268343236509,31.238795325112868,22,42,18.173165676349104,31.238795325112868,7.857864376269051, 36.14213562373095,12.761204674887132,25.8268343236509,2,22.000000000000004,12.76120467488713, 18.173165676349107,7.857864376269045,7.857864376269051,18.173165676349104,12.761204674887132Z'","pinned":true,"hidden":false,"mode":"ojs"},{"id":5405,"value":"# the current active colour palette","pinned":false,"hidden":false,"mode":"md"},{"id":3778,"value":"mutable currentColours = \n{\n let c = []\n c.push(getRandomRGB())\n c.push(getRandomRGB())\n c.push(getRandomRGB())\n c.push(getRandomRGB())\n c.push(getRandomRGB())\n return c\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5234,"value":"# te Brain training data","pinned":false,"hidden":false,"mode":"md"},{"id":4720,"value":"teBrainData = {\n let data \n if(localStorage.getItem(\"trainingData\")==null){\n data = await FileAttachment(\"te_Brain_Data.json\").json() // load in my hiddy colours\n } else {\n data = JSON.parse(localStorage.getItem(\"trainingData\"));\n }\nreturn data \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4726,"value":"# The Brain.js data\nThe brain data is loaded from local storage on startup and if it's not there then make an empty array. \nIt's not reactive as it doesnt need to be.","pinned":false,"hidden":false,"mode":"md"},{"id":4533,"value":"## Brain.js object format:\n\nThe *brain.js* object has two elements **input:** and **output** both of type array. \nThe **input** array for the palate colours (divided by 255) to convert the colour value to be between 0 and 1. \nThe **output** array contains the score||rating of the colour palatte which also has a value between 0 and 1.\n\nexample entry:\n

\n{\n  input:  [ 0.5725490196078431, 0.7137254901960784, 0.3411764705882353,\n            0.5333333333333333, 0.23529411764705882, 0.39215686274509803,\n            0.14901960784313725, 0.8549019607843137, 0.23529411764705882,\n            0.592156862745098, 0.8392156862745098, 0.20392156862745098,\n            0.45098039215686275, 0.7686274509803922, 0.4 ],\n  output: [ 0.75 ]\n}\n

\n","pinned":false,"hidden":false,"mode":"md"},{"id":5335,"value":"# Brain.js config structure\n\n

\nconfig = \n{\n  // Defaults values --> expected validation\n  iterations: 20000, // the maximum times to iterate the training data --> number greater than 0\n  errorThresh: 0.005, // the acceptable error percentage from training data --> number between 0 and 1\n  log: false, // true to use console.log, when a function is supplied it is used --> Either true or a function\n  logPeriod: 10, // iterations between logging out --> number greater than 0\n  learningRate: 0.3, // scales with delta to effect training rate --> number between 0 and 1\n  momentum: 0.1, // scales with next layer's change value --> number between 0 and 1\n  callback: null, // a periodic call back that can be triggered while training --> null or function\n  callbackPeriod: 10, // the number of iterations through the training data between callback calls --> number greater than 0\n  timeout: Infinity, // the max number of milliseconds to train for --> number greater than 0\n});

\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":4164,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":3851,"value":"function colorChange(){\n switch(this.id){\n case 'i0': \n { mutable currentColours = {...mutable currentColours, 0: getRandomRGB()}; }\n break;\n case 'i1': \n { mutable currentColours = {...mutable currentColours, 1: getRandomRGB()}; }\n break;\n case 'i2': \n { mutable currentColours = {...mutable currentColours, 2: getRandomRGB()}; }\n break;\n case 'i3': \n { mutable currentColours = {...mutable currentColours, 3: getRandomRGB()}; }\n break;\n case 'i4': \n { mutable currentColours = {...mutable currentColours, 4: getRandomRGB()}; }\n break;\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4928,"value":"// copy the colours from the clicked on predicted colours into the current colours\nfunction copyPalatte(){\n let these_colours = this.id.substring(0, this.id.length - 1)\n let these_rects = d3.selectAll(`rect[id^='${these_colours}']`)\n let teColours = []\n these_rects.each(function(d,i) {\n teColours.push(d3.color(d3.select(this).attr(\"fill\")))\n \n })\n { mutable currentColours = {...mutable currentColours, 0: teColours[0]}; }\n { mutable currentColours = {...mutable currentColours, 1: teColours[1]}; }\n { mutable currentColours = {...mutable currentColours, 2: teColours[2]}; }\n { mutable currentColours = {...mutable currentColours, 3: teColours[3]}; }\n { mutable currentColours = {...mutable currentColours, 4: teColours[4]}; }\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"net = new brain.NeuralNetwork();","pinned":true,"hidden":false,"mode":"ojs"},{"id":269,"value":"## Random Colour function:\n\n**getRandomRGB()** returns: [d3.color object](https://github.com/d3/d3-color#d3-color) \n\nexample: **getRandomRGB() ** *returns* **${getRandomRGB()}**\n","pinned":false,"hidden":false,"mode":"md"},{"id":2577,"value":"getRandomRGB = () => ( d3.color(`rgb(${d3.randomInt(0, 255)()}, ${d3.randomInt(0, 255)()}, ${d3.randomInt(0, 255)()})`))","pinned":true,"hidden":false,"mode":"ojs"},{"id":6121,"value":"getRandomRGB()","pinned":true,"hidden":false,"mode":"ojs"},{"id":6116,"value":"getRandomRGB2 = () => ( chroma.random().hex()) // toString()","pinned":true,"hidden":false,"mode":"ojs"},{"id":6124,"value":"getRandomRGB2()","pinned":true,"hidden":false,"mode":"ojs"},{"id":4846,"value":"// generate an array containing 15 r g b values to make up 5 colour palettes.\nfunction randomColours(){\n let pc=[]\n for(let i=0;i<5;i++){\n _.dropRight(_.values(getRandomRGB())).forEach(RGBcolour => pc.push(RGBcolour/255));\n }\n return pc\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6127,"value":"randomColours()","pinned":true,"hidden":false,"mode":"ojs"},{"id":318,"value":"$38","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"# Appendix\n\n \nhttps://talk.observablehq.com/t/does-mutable-work-with-objects/399/5\n\nhttps://github.com/d3/d3-selection/blob/master/README.md#d3-selection\n\nI use https://observablehq.com/@mbostock/safe-local-storage for local storage \nhttps://github.com/d3/d3-selection/blob/v2.0.0/README.md#local-variables \n\n\nhttps://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript \nhttps://stackblitz.com/edit/svg-star-generator\n\nChroma https://gka.github.io/chroma.js/\n","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"brain = require('brain.js')\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1034,"value":"chroma = require('chroma-js@2.4.2/chroma.js') ","pinned":true,"hidden":false,"mode":"ojs"},{"id":5573,"value":"import {textarea} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":2912,"value":"# *Local Storage:*\n\n### This is an object that contains data objects for each entry.\n\nneed to reformat this test to explain arguments, ie \nArguments: array (Array): The array to iterate over. \nReturns: Returns the maximum value.\n\n
\n**localStorage.length** \nreturns the number of entries in local storage.\n\n**localStorage.key(0)** \nreturns: String of the *key* object name. \nIn this case the first entry in local storage.\n\n**localStorage.*key*.length** \n*key* is a string on the name of the local storage entry. \nreturns: memory size of the entery.\n\n**localStorage.getItem(*key*)** \n*key* is a string on the name of the local storage entry. \nreturns: data String of stored entry.\n\n**localStorage.setItem(*key*, value)** \n*key* is a string on the name of the local storage entry. \nvalue: A string containing the data to be stored.\n\n**localStorage.removeIten(*key*)** \n*key*: Name of the entry to be removed.\n\n**localStorage.clear()** \ndeletes **all** local Storage entries.\n","pinned":false,"hidden":false,"mode":"md"},{"id":43,"value":"import {localStorage} from \"@mbostock/safe-local-storage\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2919,"value":"localStorage","pinned":true,"hidden":false,"mode":"ojs"},{"id":4387,"value":"Basic clipboard copy, **needs rewriting to function**. \nI need to change it so I can parse the svg text with the ID cText_0 or should I use a class colorText so I can do a select all.","pinned":false,"hidden":false,"mode":"md"},{"id":4386,"value":"function copyColourToClipboard(text) {\n var input = document.createElement('textarea');\n input.innerHTML = text;\n document.body.appendChild(input);\n input.select();\n var result = document.execCommand('copy');\n document.body.removeChild(input);\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5991,"value":"import {Button} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":6034,"value":"$39","pinned":true,"hidden":false,"mode":"md"},{"id":5508,"value":"$3a","pinned":false,"hidden":false,"mode":"md"},{"id":6015,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs"},{"id":6045,"value":"# COLOUR IMPORTS\n\nThanks to https://openprocessing.org/sketch/1543501","pinned":false,"hidden":false,"mode":"md"},{"id":6047,"value":"colors = {\n let colours = [];\n[ 'https://coolors.co/palette/caf0f8-ade8f4-90e0ef-48cae4-00b4d8-0096c7-0077b6',\n 'https://coolors.co/palette/d8f3dc-b7e4c7-95d5b2-74c69d-52b788-40916c-2d6a4f',\n 'https://coolors.co/palette/ffedd8-f3d5b5-e7bc91-d4a276-bc8a5f-a47148-8b5e34',\n 'https://coolors.co/palette/ffba08-faa307-f48c06-e85d04-dc2f02-d00000-9d0208', ].forEach((url) => {\n colours.push(createCols(url));\n });\n return colours\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6049,"value":"// Take some Colors from coolors URL\nfunction createCols(url) {\n let slaIndex = url.lastIndexOf('/');\n let colStr = url.slice(slaIndex + 1);\n let colArr = colStr.split('-');\n for (let i = 0; i < colArr.length; i++) colArr[i] = '#' + colArr[i];\n return colArr;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W3c","stdlib":"1","titling":"auto"}