Skip to content

Commit

Permalink
better demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@meodai
meodai committed May 10, 2024
1 parent 3e03810 commit 806005b
Showing 1 changed file with 1 addition and 1 deletion.
2 changes: 1 addition & 1 deletion demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
href="https://fonts.cdnfonts.com/css/apple-garamond"
rel="stylesheet"
/>
<script type="module" crossorigin>(function(){const r=document.createElement("link").relList;if(r&&r.supports&&r.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))n(e);new MutationObserver(e=>{for(const s of e)if(s.type==="childList")for(const c of s.addedNodes)c.tagName==="LINK"&&c.rel==="modulepreload"&&n(c)}).observe(document,{childList:!0,subtree:!0});function o(e){const s={};return e.integrity&&(s.integrity=e.integrity),e.referrerPolicy&&(s.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?s.credentials="include":e.crossOrigin==="anonymous"?s.credentials="omit":s.credentials="same-origin",s}function n(e){if(e.ep)return;e.ep=!0;const s=o(e);fetch(e.href,s)}})();const X=[[253/255,246/255,237/255],[227/255,36/255,33/255],[243/255,230/255,0],[240/255,142/255,28/255],[22/255,153/255,218/255],[120/255,34/255,170/255],[0,142/255,91/255],[29/255,28/255,28/255]],U=[[253/255,246/255,237/255],[247/255,45/255,41/255],[253/255,203/255,0/255],[250/255,102/255,13/255],[17/255,97/255,170/255],[101/255,57/255,138/255],[70/255,139/255,73/255],[29/255,28/255,28/255]],K=[[1,1,1],[1,1,0],[1,0,0],[1,.5,0],[.163,.373,.6],[0,.66,.2],[.5,0,.5],[.2,.094,0]],W=[[245/255,238/255,226/255],[170/255,14/255,1/255],[224/255,178/255,0/255],[217/255,104/255,5/255],[18/255,107/255,145/255],[103/255,15/255,128/255],[88/255,133/255,30/255],[44/255,37/255,30/255]],Z=[[254/255,250/255,226/255],[237/255,55/255,58/255],[255/255,233/255,111/255],[250/255,102/255,13/255],[33/255,112/255,163/255],[238/255,131/255,154/255],[59/255,155/255,83/255],[24/255,10/255,1/255]],D=[[255/255,255/255,255/255],[218/255,105/255,104/255],[255/255,244/255,122/255],[232/255,154/255,113/255],[73/255,138/255,186/255],[97/255,96/255,178/255],[144/255,191/255,140/255],[8/255,8/255,8/255]],Q=[[240/255,234/255,214/255],[204/255,50/255,53/255],[253/255,222/255,20/255],[230/255,152/255,92/255],[1/255,88/255,140/255],[107/255,51/255,111/255],[51/255,138/255,92/255],[55/255,39/255,23/255]],ee=[[249/255,232/255,209/255],[216/255,43/255,59/255],[231/255,175/255,2/255],[224/255,89/255,31/255],[92/255,123/255,145/255],[77/255,58/255,78/255],[107/255,129/255,53/255],[14/255,8/255,7/255]],te=[[239/255,235/255,225/255],[182/255,53/255,55/255],[253/255,203/255,0/255],[222/255,69/255,20/255],[95/255,157/255,191/255],[83/255,70/255,98/255],[58/255,90/255,66/255],[8/255,9/255,13/255]],re=[[228/255,218/255,197/255],[181/255,65/255,60/255],[229/255,193/255,81/255],[220/255,137/255,61/255],[59/255,143/255,171/255],[121/255,97/255,134/255],[13/255,170/255,114/255],[46/255,44/255,38/255]],ne=[[237/255,213/255,177/255],[167/255,33/255,28/255],[245/255,181/255,18/255],[204/255,93/255,46/255],[71/255,122/255,141/255],[99/255,79/255,93/255],[109/255,143/255,118/255],[44/255,44/255,37/255]],oe=[[221/255,219/255,211/255],[196/255,82/255,69/255],[196/255,167/255,80/255],[200/255,123/255,70/255],[74/255,104/255,167/255],[94/255,89/255,161/255],[86/255,139/255,70/255],[38/255,38/255,38/255]],i=new Map;i.set("itten",{title:"Johannes Itten: Chromatic Circle",year:1961,reference:"farbkreis_extended.png",cube:X});i.set("itten-normalized",{title:"Johannes Itten: Chromatic Circle (Normalized)",year:1961,reference:"Johannes-Itten-The-chromatic-circle-some-exercises-on-the-contrast-of-pure-colors.webp",cube:U});i.set("itten-neutral",{title:"Johannes Itten: Nathan Gossett & Baoquan Chen",year:1961,reference:"itten-ryb.pdf",cube:K});i.set("bezold",{title:"Wilhelm von Bezold: Farbentafel",year:1874,reference:"Bezold_Farbentafel_1874.jpg",cube:W});i.set("boutet",{title:"Claude Boutet: Twelve-color color circles ",year:1708,reference:"Boutet_1708_color_circles.jpg",cube:Z});i.set("hett",{title:"J. A. H. Hett: RGV Color Wheel",year:1908,reference:"RGV_color_wheel_1908",cube:D});i.set("schiffermueller",{title:"Ignaz Schiffermüller: Versuch eines Farbensystems",year:1772,reference:"020_schiffermueller1.jpg",cube:Q});i.set("harris",{title:"Harris: The Natural System of Colours",year:1766,reference:"Moses_Harris_The_Natural_System_of_Colours.jpg",cube:ee});i.set("goethe",{title:"Goethe: Farbenkreis",year:1809,reference:"Goethe_Farbenkreis_zur_Symbolisierung_des_menschlichen_Geistes-_und_Seelenlebens_1809.jpg",cube:te});i.set("munsell",{title:"Munsell Color System",year:1905,reference:"munsell-atlas-11.jpg",cube:re});i.set("hayer",{title:"Charles Hayter: New Practical Treatise on the Three Primitive Colours",year:1826,reference:"Color_diagram_Charles_Hayter.jpg",cube:ne});i.set("ippsketch",{title:"Ippsketch: Imposter Syndrome",year:2021,reference:"ippsketch.png",cube:oe});i.set("rgb",{title:"James Clerk Maxwell: Inverted RGB",year:1860,reference:"rgb-cube.png",cube:[[1,1,1],[1,0,0],[1,1,0],[1,.5,0],[0,0,1],[1,0,1],[0,1,0],[0,0,0]]});const F=t=>t*t*(3-2*t),_=(t,r,o)=>t+o*(r-t),z=(t,r,o,n,e,s)=>_(_(t,r,e),_(o,n,e),s),S=(t,r,o,n,e,s,c,u,m,a,f)=>_(z(t,r,o,n,m,a),z(e,s,c,u,m,a),f);function w(t,{cube:r=X,easingFn:o=F}={}){const n=o(t[0]),e=o(t[1]),s=o(t[2]),c=r.map(a=>a[0]),u=r.map(a=>a[1]),m=r.map(a=>a[2]);return[S(...c,n,e,s),S(...u,n,e,s),S(...m,n,e,s)]}function se(t){return(t%360+360)%360}function ce(t){let[r,o,n]=t;r=se(r||0);let e=n+o*(n<.5?n:1-n),s=e-(e-n)*2*Math.abs(r/60%2-1),c;switch(Math.floor(r/60)){case 0:c=[e,s,2*n-e];break;case 1:c=[s,e,2*n-e];break;case 2:c=[2*n-e,e,s];break;case 3:c=[2*n-e,s,e];break;case 4:c=[s,2*n-e,e];break;case 5:c=[e,2*n-e,s];break;default:c=[2*n-e,2*n-e,2*n-e]}return c}function E(t,{cube:r=X,easingFn:o=F,invertLightness:n=!0}={}){const e=n?1-t[2]:t[2],s=ce([t[0],t[1],e]);return w(s,{cube:r,easingFn:o})}let l=i.get("itten-normalized").cube;const le=t=>{console.log("Customized RYB_CUBE"),console.log(t.map(r=>r.map(o=>o*255+"/255")))},d=t=>`rgb(${Math.round(t[0]*255)} ${Math.round(t[1]*255)} ${Math.round(t[2]*255)})`,C=t=>{const r=parseInt(t.slice(1),16),o=r>>16&255,n=r>>8&255,e=r&255;return[o/255,n/255,e/255]},p=t=>`#${t.map(r=>Math.round(r*255).toString(16).padStart(2,"0")).join("")}`,h=(t=12,r=1,o=.5,n=s=>s,e=!1)=>new Array(t).fill(0).map((s,c)=>{const u=e?n(1-c/t)*360+120:n((c+1)/t)*360;return d(E([u,r,o],{cube:l}))}),ae=["Zero","I","II","III","IV","V","VI","VII","VIII","IX","X","XI","XII","XIII","XIV","XV","XVI","XVII","XVIII","XIX","XX","XXI","XXII","XXIII","XXIV","XXV","XXVI","XXVII","XXVIII","XXIX","XXX"],ue=async(t=18,r=9)=>{const o=new Array(t-1).fill(0).map((u,m)=>{const a=m/(t-1);return new Array(r).fill(0).map((g,$)=>{const k=($+1)/(r+1);return p(E([a*360,1,1-k],{cube:l}))})});o.push(new Array(r).fill(0).map((u,m)=>{const a=(m+1)/(r+1);return p(w([a,a,a],{cube:l}))}));const n=o.flat().map(u=>u.slice(1)),e=await fetch(`https://api.color.pizza/v1/?values=${n.join()}&list=bestOf&noduplicates=true`,{method:"GET"}).then(u=>u.json()).then(u=>u.colors),s=n.reduce((u,m)=>{const a=`#${m}`,f=e.find(g=>g.requestedHex===a);return u[a]=(f==null?void 0:f.name)||"unknown",u},{}),c=document.querySelector("[data-ramps]");c.innerHTML=o.map((u,m)=>`<div class="ramp">
<script type="module" crossorigin>(function(){const r=document.createElement("link").relList;if(r&&r.supports&&r.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))n(e);new MutationObserver(e=>{for(const s of e)if(s.type==="childList")for(const c of s.addedNodes)c.tagName==="LINK"&&c.rel==="modulepreload"&&n(c)}).observe(document,{childList:!0,subtree:!0});function o(e){const s={};return e.integrity&&(s.integrity=e.integrity),e.referrerPolicy&&(s.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?s.credentials="include":e.crossOrigin==="anonymous"?s.credentials="omit":s.credentials="same-origin",s}function n(e){if(e.ep)return;e.ep=!0;const s=o(e);fetch(e.href,s)}})();const X=[[253/255,246/255,237/255],[227/255,36/255,33/255],[243/255,230/255,0],[240/255,142/255,28/255],[22/255,153/255,218/255],[120/255,34/255,170/255],[0,142/255,91/255],[29/255,28/255,28/255]],U=[[253/255,246/255,237/255],[247/255,45/255,41/255],[253/255,203/255,0/255],[250/255,102/255,13/255],[17/255,97/255,170/255],[101/255,57/255,138/255],[70/255,139/255,73/255],[29/255,28/255,28/255]],K=[[1,1,1],[1,0,0],[1,1,0],[1,.5,0],[.163,.373,.6],[.5,0,.5],[0,.66,.2],[.2,.094,0]],W=[[245/255,238/255,226/255],[170/255,14/255,1/255],[224/255,178/255,0/255],[217/255,104/255,5/255],[18/255,107/255,145/255],[103/255,15/255,128/255],[88/255,133/255,30/255],[44/255,37/255,30/255]],Z=[[254/255,250/255,226/255],[237/255,55/255,58/255],[255/255,233/255,111/255],[250/255,102/255,13/255],[33/255,112/255,163/255],[238/255,131/255,154/255],[59/255,155/255,83/255],[24/255,10/255,1/255]],D=[[255/255,255/255,255/255],[218/255,105/255,104/255],[255/255,244/255,122/255],[232/255,154/255,113/255],[73/255,138/255,186/255],[97/255,96/255,178/255],[144/255,191/255,140/255],[8/255,8/255,8/255]],Q=[[240/255,234/255,214/255],[204/255,50/255,53/255],[253/255,222/255,20/255],[230/255,152/255,92/255],[1/255,88/255,140/255],[107/255,51/255,111/255],[51/255,138/255,92/255],[55/255,39/255,23/255]],ee=[[249/255,232/255,209/255],[216/255,43/255,59/255],[231/255,175/255,2/255],[224/255,89/255,31/255],[92/255,123/255,145/255],[77/255,58/255,78/255],[107/255,129/255,53/255],[14/255,8/255,7/255]],te=[[239/255,235/255,225/255],[182/255,53/255,55/255],[253/255,203/255,0/255],[222/255,69/255,20/255],[95/255,157/255,191/255],[83/255,70/255,98/255],[58/255,90/255,66/255],[8/255,9/255,13/255]],re=[[228/255,218/255,197/255],[181/255,65/255,60/255],[229/255,193/255,81/255],[220/255,137/255,61/255],[59/255,143/255,171/255],[121/255,97/255,134/255],[13/255,170/255,114/255],[46/255,44/255,38/255]],ne=[[237/255,213/255,177/255],[167/255,33/255,28/255],[245/255,181/255,18/255],[204/255,93/255,46/255],[71/255,122/255,141/255],[99/255,79/255,93/255],[109/255,143/255,118/255],[44/255,44/255,37/255]],oe=[[221/255,219/255,211/255],[196/255,82/255,69/255],[196/255,167/255,80/255],[200/255,123/255,70/255],[74/255,104/255,167/255],[94/255,89/255,161/255],[86/255,139/255,70/255],[38/255,38/255,38/255]],i=new Map;i.set("itten",{title:"Johannes Itten: Chromatic Circle",year:1961,reference:"farbkreis_extended.png",cube:X});i.set("itten-normalized",{title:"Johannes Itten: Chromatic Circle (Normalized)",year:1961,reference:"Johannes-Itten-The-chromatic-circle-some-exercises-on-the-contrast-of-pure-colors.webp",cube:U});i.set("itten-neutral",{title:"Johannes Itten: Nathan Gossett & Baoquan Chen",year:1961,reference:"itten-ryb.pdf",cube:K});i.set("bezold",{title:"Wilhelm von Bezold: Farbentafel",year:1874,reference:"Bezold_Farbentafel_1874.jpg",cube:W});i.set("boutet",{title:"Claude Boutet: Twelve-color color circles ",year:1708,reference:"Boutet_1708_color_circles.jpg",cube:Z});i.set("hett",{title:"J. A. H. Hett: RGV Color Wheel",year:1908,reference:"RGV_color_wheel_1908",cube:D});i.set("schiffermueller",{title:"Ignaz Schiffermüller: Versuch eines Farbensystems",year:1772,reference:"020_schiffermueller1.jpg",cube:Q});i.set("harris",{title:"Harris: The Natural System of Colours",year:1766,reference:"Moses_Harris_The_Natural_System_of_Colours.jpg",cube:ee});i.set("goethe",{title:"Goethe: Farbenkreis",year:1809,reference:"Goethe_Farbenkreis_zur_Symbolisierung_des_menschlichen_Geistes-_und_Seelenlebens_1809.jpg",cube:te});i.set("munsell",{title:"Munsell Color System",year:1905,reference:"munsell-atlas-11.jpg",cube:re});i.set("hayer",{title:"Charles Hayter: New Practical Treatise on the Three Primitive Colours",year:1826,reference:"Color_diagram_Charles_Hayter.jpg",cube:ne});i.set("ippsketch",{title:"Ippsketch: Imposter Syndrome",year:2021,reference:"ippsketch.png",cube:oe});i.set("rgb",{title:"James Clerk Maxwell: Inverted RGB",year:1860,reference:"rgb-cube.png",cube:[[1,1,1],[1,0,0],[1,1,0],[1,.5,0],[0,0,1],[1,0,1],[0,1,0],[0,0,0]]});const F=t=>t*t*(3-2*t),_=(t,r,o)=>t+o*(r-t),z=(t,r,o,n,e,s)=>_(_(t,r,e),_(o,n,e),s),S=(t,r,o,n,e,s,c,u,m,a,f)=>_(z(t,r,o,n,m,a),z(e,s,c,u,m,a),f);function w(t,{cube:r=X,easingFn:o=F}={}){const n=o(t[0]),e=o(t[1]),s=o(t[2]),c=r.map(a=>a[0]),u=r.map(a=>a[1]),m=r.map(a=>a[2]);return[S(...c,n,e,s),S(...u,n,e,s),S(...m,n,e,s)]}function se(t){return(t%360+360)%360}function ce(t){let[r,o,n]=t;r=se(r||0);let e=n+o*(n<.5?n:1-n),s=e-(e-n)*2*Math.abs(r/60%2-1),c;switch(Math.floor(r/60)){case 0:c=[e,s,2*n-e];break;case 1:c=[s,e,2*n-e];break;case 2:c=[2*n-e,e,s];break;case 3:c=[2*n-e,s,e];break;case 4:c=[s,2*n-e,e];break;case 5:c=[e,2*n-e,s];break;default:c=[2*n-e,2*n-e,2*n-e]}return c}function E(t,{cube:r=X,easingFn:o=F,invertLightness:n=!0}={}){const e=n?1-t[2]:t[2],s=ce([t[0],t[1],e]);return w(s,{cube:r,easingFn:o})}let l=i.get("itten-normalized").cube;const le=t=>{console.log("Customized RYB_CUBE"),console.log(t.map(r=>r.map(o=>o*255+"/255")))},d=t=>`rgb(${Math.round(t[0]*255)} ${Math.round(t[1]*255)} ${Math.round(t[2]*255)})`,C=t=>{const r=parseInt(t.slice(1),16),o=r>>16&255,n=r>>8&255,e=r&255;return[o/255,n/255,e/255]},p=t=>`#${t.map(r=>Math.round(r*255).toString(16).padStart(2,"0")).join("")}`,h=(t=12,r=1,o=.5,n=s=>s,e=!1)=>new Array(t).fill(0).map((s,c)=>{const u=e?n(1-c/t)*360+120:n((c+1)/t)*360;return d(E([u,r,o],{cube:l}))}),ae=["Zero","I","II","III","IV","V","VI","VII","VIII","IX","X","XI","XII","XIII","XIV","XV","XVI","XVII","XVIII","XIX","XX","XXI","XXII","XXIII","XXIV","XXV","XXVI","XXVII","XXVIII","XXIX","XXX"],ue=async(t=18,r=9)=>{const o=new Array(t-1).fill(0).map((u,m)=>{const a=m/(t-1);return new Array(r).fill(0).map((g,$)=>{const k=($+1)/(r+1);return p(E([a*360,1,1-k],{cube:l}))})});o.push(new Array(r).fill(0).map((u,m)=>{const a=(m+1)/(r+1);return p(w([a,a,a],{cube:l}))}));const n=o.flat().map(u=>u.slice(1)),e=await fetch(`https://api.color.pizza/v1/?values=${n.join()}&list=bestOf&noduplicates=true`,{method:"GET"}).then(u=>u.json()).then(u=>u.colors),s=n.reduce((u,m)=>{const a=`#${m}`,f=e.find(g=>g.requestedHex===a);return u[a]=(f==null?void 0:f.name)||"unknown",u},{}),c=document.querySelector("[data-ramps]");c.innerHTML=o.map((u,m)=>`<div class="ramp">
<h2>${ae[m+1]}</h2>
${u.map(a=>`<div class="ramp__step" style="--c: ${a}; --rnd: ${-1+Math.random()*2}; --rnd2: ${Math.random()};">
<div class="ramp__inner">
Expand Down

0 comments on commit 806005b

Please sign in to comment.