30:T477,{ const ctx = DOM.context2d(image.width * size, image.height * size) const ocanvas = document.createElement('canvas') ocanvas.width = image.width ocanvas.height = image.height const octx = ocanvas.getContext('2d') octx.drawImage(image, 0, 0, image.width, image.height) const data = octx.getImageData(0, 0, image.width, image.height).data for(let y = 0; y < image.height; y++) { for(let x = 0; x < image.width; x++) { // 각 점의 r,g,b 구하기 let i = (y * image.width + x) * 4 let r = data[i + 0] let g = data[i + 1] let b = data[i + 2] // 제일 비슷한 색상의 도장 찾기 let distances = brights.map(br => ((br[0] - r) ** 2 + (br[1] - g) ** 2 + (br[2] - b) ** 2) ** 0.5) let minDistance = 255 ** 3 let minIndex = 0 for(let j = 0; j < distances.length; j++) { if(minDistance > distances[j]) { minDistance = distances[j] minIndex = j } } let pattern = patterns[minIndex] // 도장 찍기 ctx.drawImage(pattern, x * size, y * size, size, size) } } return ctx.canvas }31:T480,function p2(ctx, x, y, r) { const bones = 8; const bell = true; for(let i = 0; i < bones; i++) { var dx = Math.cos(Math.PI * (i / bones)) * r * 0.9; var dy = Math.sin(Math.PI * (i / bones)) * r * 0.9; var x1 = x - dx; var y1 = y - dy; var x2 = x + dx; var y2 = y + dy; ctx.beginPath(); ctx.strokeStyle = "pink"; ctx.lineWidth = "r * 0.1"; ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); ctx.closePath(); if(bell) { ctx.beginPath(); ctx.fillStyle = "orange"; ctx.arc(x1, y1, r/10, 0, Math.PI * 2); ctx.fill(); ctx.arc(x2, y2, r/10, 0, Math.PI * 2); ctx.fill(); ctx.closePath(); } } ctx.beginPath(); ctx.strokeStyle = "skyblue"; ctx.lineWidth = "r * 0.1"; ctx.arc(x, y, r / 1.7, 0, 2.0 * Math.PI); ctx.arc(x, y, r / 2, 0, 2.0 * Math.PI); ctx.arc(x, y, r / 2.3, 0, 2.0 * Math.PI); ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.strokeStyle = "orange"; ctx.fillStyle = "orange"; ctx.lineWidth = "r * 0.1"; ctx.arc(x, y, r / 6, 0, 2.0 * Math.PI); ctx.fill(); ctx.stroke(); ctx.closePath(); }32:[] 2e:{"title":"","cells":[{"id":337,"value":"viewof size = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"patterns = [p0, p1, p2, p3, p4, p5, p6, p7, p8, p9, p10, p11, p12, p13].map(p => {\n const size = 50;\n const ctx = DOM.context2d(size * 2, size * 2)\n p(ctx, size, size, size)\n return ctx.canvas\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"brights = patterns.map(p => getAvgBrightness(p))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"viewof canvas = {\n let x = 10;\n let y = 10;\n const ctx = DOM.context2d(size * patterns.length + x, size + y);\n for(let i = 0; i < patterns.length; i++) {\n var p = patterns[i];\n ctx.drawImage(p, x + (size) * i, y, size, size);\n }\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`# pattern`","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"function p0(ctx, x, y, r) {\n for(let i = 0; i <= 6; i++) {\n var dx = Math.cos(30 * i / 180 * Math.PI) * r;\n var dy = Math.sin(30 * i / 180 * Math.PI) * r;\n var x1 = x - dx;\n var y1 = y - dy;\n var x2 = x + dx;\n var y2 = y + dy;\n\n ctx.beginPath();\n ctx.strokeStyle = \"pink\";\n ctx.lineWidth = \"r * 0.1\";\n ctx.moveTo(x1, y1);\n ctx.lineTo(x2, y2);\n ctx.stroke();\n ctx.closePath();\n \n ctx.beginPath();\n ctx.strokeStyle = \"skyblue\";\n ctx.lineWidth = \"r * 0.2\";\n ctx.arc(x, y, r / 1.5, 0, 2.0 * Math.PI);\n ctx.arc(x, y, r / 2, 0, 2.0 * Math.PI);\n ctx.arc(x, y, r / 3, 0, 2.0 * Math.PI);\n ctx.stroke();\n ctx.closePath();\n \n ctx.beginPath();\n ctx.strokeStyle = \"orange\";\n ctx.fillStyle = \"orange\";\n ctx.lineWidth = \"r * 0.1\";\n ctx.arc(x, y, r / 5, 0, 2.0 * Math.PI);\n ctx.fill();\n ctx.stroke();\n ctx.closePath();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"function p1(ctx, x, y, r){\n ctx.beginPath();\n ctx.strokeStyle = \"lightpink\";\n ctx.fillStyle = \"lightpink\";\n ctx.rect(x - r * 0.5, y - r * 0.5, r, r); \n ctx.stroke();\n ctx.fill();\n ctx.closePath();\n \nfor(let i = 0; i <= 4; i++) {\n var dx = Math.cos(45 * i / 180 * Math.PI) * r;\n var dy = Math.sin(45 * i / 180 * Math.PI) * r;\n var x1 = x - dx;\n var y1 = y - dy;\n var x2 = x + dx;\n var y2 = y + dy;\n\n ctx.beginPath();\n ctx.strokeStyle = \"white\";\n ctx.lineWidth = \"r * 0.1\";\n ctx.moveTo(x1, y1);\n ctx.lineTo(x2, y2);\n ctx.stroke();\n ctx.closePath(); \n }\n ctx.beginPath();\n ctx.strokeStyle = \"lightpink\";\n ctx.moveTo(x - r, y);\n ctx.lineTo(x, y - r);\n ctx.lineTo(x + r, y);\n ctx.lineTo(x, y + r);\n ctx.lineTo(x - r, y);\n ctx.stroke();\n ctx.closePath();\n \n ctx.beginPath();\n ctx.strokeStyle = \"white\";\n ctx.arc(x, y, r / 4, 0, 2.0 * Math.PI);\n ctx.stroke();\n ctx.closePath();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"function p3(ctx, x, y, r) {\n for(let i =0; i<= 8; i++){\n var dx = Math.cos(45 * i / 180 * Math.PI) * r * 0.7;\n var dy = Math.sin(45 * i / 180 * Math.PI) * r * 0.7;\n\n ctx.beginPath();\n ctx.strokeStyle = \"skyblue\";\n ctx.fillStyle = \"skyblue\";\n ctx.lineWidth = \"1\";\n ctx.arc(x + dx, y + dy, r / 4, 0, 2.0 * Math.PI);\n ctx.stroke();\n ctx.fill();\n ctx.closePath(); \n \n ctx.beginPath();\n ctx.strokeStyle = \"white\";\n ctx.fillStyle = \"white\";\n ctx.lineWidth = \"1\";\n ctx.rect(x - (r / 10) + dx, y - (r / 10) + dy, r / 5, r / 5);\n ctx.fill();\n ctx.stroke();\n ctx.closePath(); \n\n }\n\n ctx.beginPath();\n ctx.fillStyle = \"orangered\";\n ctx.arc(x, y, r / 2.5, 0, 2.0 * Math.PI);\n ctx.fill();\n ctx.closePath(); \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"function p4(ctx, x, y, r) {\n for(let i =0; i<= 4; i++){\n var dx = Math.cos(90 * i / 180 * Math.PI) * r/3;\n var dy = Math.sin(90 * i / 180 * Math.PI) * r/3;\n\n ctx.beginPath();\n ctx.strokeStyle = \"orange\";\n ctx.lineWidth = \"1\";\n ctx.arc(x + dx, y + dy, r / 3, 0, 2.0 * Math.PI);\n ctx.stroke();\n ctx.closePath(); \n\n ctx.beginPath();\n ctx.strokeStyle = \"orange\";\n ctx.lineWidth = \"1\";\n ctx.arc(x + dx, y + dy, r / 1.5, 0, 2.0 * Math.PI);\n ctx.stroke();\n ctx.closePath(); \n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"function p5(ctx, x, y, r) {\n for(let i =0; i<= 4; i++){\n var dx = Math.cos(90 * i / 180 * Math.PI) * r/2;\n var dy = Math.sin(90 * i / 180 * Math.PI) * r/2;\n\n ctx.beginPath();\n ctx.fillStyle = \"orange\";\n ctx.lineWidth = \"1\";\n ctx.arc(x + dx, y + dy, r/2, 0, 2.0 * Math.PI);\n ctx.fill();\n ctx.closePath(); \n }\n\n for(let l =0; l<= 12; l++){\n var dx = Math.cos(30 * l / 180 * Math.PI) * r/2;\n var dy = Math.sin(30 * l / 180 * Math.PI) * r/2;\n\n ctx.beginPath();\n ctx.strokeStyle = \"white\";\n ctx.lineWidth = \"1\";\n ctx.arc(x + dx, y + dy, r/2, 0, 2.0 * Math.PI);\n ctx.stroke();\n ctx.closePath(); \n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"function p6(ctx, x, y, r) {\n ctx.beginPath();\n ctx.fillStyle = \"red\";\n ctx.rect(x - (r * 0.75), y - (r * 0.75), r * 1.5, r * 1.5);\n ctx.fill();\n ctx.closePath(); \n \n ctx.beginPath();\n ctx.strokeStyle = \"red\";\n ctx.rect(x - r, y - r, r * 2, r * 2);\n ctx.lineWidth = 1;\n ctx.stroke();\n ctx.closePath(); \n \n for(let l =0; l<= 5; l++){\n var dx = Math.cos(60 * l / 180 * Math.PI) * r/2.5;\n var dy = Math.sin(60 * l / 180 * Math.PI) * r/2.5;\n\n ctx.beginPath();\n ctx.fillStyle = \"white\";\n ctx.arc(x + dx, y + dy, r/4, 0, 2.0 * Math.PI);\n ctx.fill();\n ctx.closePath(); \n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"function p7(ctx, x, y, r) {\n ctx.beginPath();\n ctx.fillStyle = \"purple\";\n ctx.rect(x - (r * 0.75), y - (r * 0.75), r * 1.5, r * 1.5);\n ctx.fill();\n ctx.closePath(); \n \n for(let i =0; i<= 4; i++){\n var dx = Math.cos(90 * i / 180 * Math.PI) * r/3;\n var dy = Math.sin(90 * i / 180 * Math.PI) * r/3;\n\n ctx.beginPath();\n ctx.strokeStyle = \"pink\";\n ctx.lineWidth = r * 0.1;\n ctx.arc(x + dx, y + dy, r/1.5, 0, 2.0 * Math.PI);\n ctx.stroke();\n ctx.closePath(); \n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"function p8(ctx, x, y, r) {\n for(let i =0; i<= 8; i++){\n var dx = Math.cos(40 * i / 180 * Math.PI) * r/4;\n var dy = Math.sin(40 * i / 180 * Math.PI) * r/4;\n\n ctx.beginPath();\n ctx.strokeStyle = \"#1E90FF\";\n ctx.lineWidth = r * 0.05;\n ctx.arc(x + dx, y + dy, r/1.5, 0, 2.0 * Math.PI);\n ctx.stroke();\n ctx.closePath(); \n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":515,"value":"function p9(ctx, x, y, r) {\n for(let i =0; i<= 12; i++){\n var dx = Math.cos(30 * i / 180 * Math.PI) * r/2;\n var dy = Math.sin(30 * i / 180 * Math.PI) * r/2;\n ctx.beginPath();\n ctx.strokeStyle = \"lightseagreen\";\n ctx.lineWidth = r * 0.03;\n ctx.arc(x + dx, y + dy, r / 2.5, 0, 2.0 * Math.PI);\n ctx.stroke();\n ctx.closePath(); \n }\n ctx.beginPath();\n ctx.strokeStyle = \"lightseagreen\";\n ctx.lineWidth = r * 0.03;\n ctx.arc(x, y, r / 2.5, 0, 2.0 * Math.PI);\n ctx.stroke();\n ctx.closePath();\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"function p10(ctx, x, y, r) {\n for(let i =0; i<= 6; i++){\n var dx = Math.cos(60 * i / 180 * Math.PI) * r/2;\n var dy = Math.sin(60 * i / 180 * Math.PI) * r/2;\n\n ctx.beginPath();\n ctx.fillStyle = \"darkblue\";\n ctx.arc(x + dx, y + dy, r/2, 0, 2.0 * Math.PI);\n ctx.fill();\n ctx.closePath(); \n }\n\n for(let l =0; l<= 18; l++){\n var dx = Math.cos(20 * l / 180 * Math.PI) * r/2;\n var dy = Math.sin(20 * l / 180 * Math.PI) * r/2;\n\n ctx.beginPath();\n ctx.strokeStyle = \"white\";\n ctx.lineWidth = \"r * 0.08\";\n ctx.arc(x + dx, y + dy, r/2, 0, 2.0 * Math.PI);\n ctx.stroke();\n ctx.closePath(); \n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"function p11(ctx, x, y, r) {\n ctx.beginPath();\n ctx.fillStyle = \"Yellow\";\n ctx.arc(x, y, r, 0, 2.0 * Math.PI);\n ctx.fill();\n ctx.closePath(); \n \n\n for(let l =0; l<= 18; l++){\n var dx = Math.cos(20 * l / 180 * Math.PI) * r/1.5;\n var dy = Math.sin(20 * l / 180 * Math.PI) * r/1.5;\n\n ctx.beginPath();\n ctx.strokeStyle = \"lightsalmon\";\n ctx.lineWidth = \"r * 0.08\";\n ctx.arc(x + dx, y + dy, r/5, 0, 2.0 * Math.PI);\n ctx.stroke();\n ctx.closePath(); \n }\n \n ctx.beginPath();\n ctx.fillStyle = \"lightsalmon\";\n ctx.arc(x, y, r/5, 0, 2.0 * Math.PI);\n ctx.fill();\n ctx.closePath(); \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":550,"value":"function p12(ctx, x, y, r) {\n for(let l =0; l<= 8; l++){\n var dx = Math.cos(45 * l / 180 * Math.PI) * r/2;\n var dy = Math.sin(45 * l / 180 * Math.PI) * r/2;\n\n ctx.beginPath();\n ctx.fillStyle = \"mediumseagreen\";\n ctx.arc(x + dx, y + dy, r/3, 0, 2.0 * Math.PI);\n ctx.fill();\n ctx.closePath(); \n }\n \n for(let i =0; i<= 4; i++){\n var dx = Math.cos(90 * i / 180 * Math.PI) * r/2;\n var dy = Math.sin(90 * i / 180 * Math.PI) * r/2;\n\n ctx.beginPath();\n ctx.fillStyle = \"limegreen\";\n ctx.arc(x + dx, y + dy, r/3, 0, 2.0 * Math.PI);\n ctx.fill();\n ctx.closePath(); \n }\n ctx.beginPath();\n ctx.fillStyle = \"yellow\";\n ctx.arc(x, y, r/5, 0, 2.0 * Math.PI);\n ctx.fill();\n ctx.closePath(); \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":557,"value":"function p13(ctx, x, y, r) {\n for(let l =0; l<= 16; l++){\n var dx = Math.cos(30 * l / 180 * Math.PI) * r/2;\n var dy = Math.sin(30 * l / 180 * Math.PI) * r/2;\n\n ctx.beginPath();\n ctx.fillStyle = \"cadetblue\";\n ctx.arc(x + dx, y + dy, r/3, 0, 2.0 * Math.PI);\n ctx.fill();\n ctx.closePath(); \n }\n \n for(let i =0; i<= 8; i++){\n var dx = Math.cos(60 * i / 180 * Math.PI) * r/3;\n var dy = Math.sin(60 * i / 180 * Math.PI) * r/3;\n\n ctx.beginPath();\n ctx.fillStyle = \"powderblue\";\n ctx.arc(x + dx, y + dy, r/3, 0, 2.0 * Math.PI);\n ctx.fill();\n ctx.closePath(); \n }\n ctx.beginPath();\n ctx.fillStyle = \"white\";\n ctx.arc(x, y, r/3, 0, 2.0 * Math.PI);\n ctx.fill();\n ctx.closePath(); \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"function getAvgBrightness(canvas) {\n const w = canvas.width\n const h = canvas.height\n const data = canvas.getContext('2d').getImageData(0, 0, w, h).data\n let sums = [0, 0, 0, 0]\n data.forEach((d, i) => {\n sums[i % 4] += d\n })\n const avgs = sums.map(sum => sum / (w * h))\n return avgs\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"height = width * 0.5 //height를 따로 만든다.","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"image = {\n const img = await fetchImage('https://images.unsplash.com/photo-1487222444179-52db5bc15efe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80')\n img.width = 70\n img.height = 35\n \n return img\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"import {fetchImage} from '@mbostock/cross-origin-images'","pinned":false,"hidden":false,"mode":"ojs"},{"id":444,"value":"[r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a]\n\n(w, h)\n\nx:0,y:1,b\n\n(y * w + x) * 4 + 0\n(y * w + x) * 4 + 1\n(y * w + x) * 4 + 2\n\nrgba rgba\nrgba rgba","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}