33:T476,{ 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 = colors.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 }34:T482,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 = "darkred"; 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 = "darkred"; ctx.fillStyle = "darkred"; ctx.lineWidth = "r * 0.1"; ctx.arc(x, y, r / 6, 0, 2.0 * Math.PI); ctx.fill(); ctx.stroke(); ctx.closePath(); }35:[] 32:{"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, p14, p15, p16, p17, p18, p19, p20, p21, p22, p23, p24].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":"colors = patterns.map(p => getAvgColor(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 * 2 + y);\n for(let i = 0; i < patterns.length; i++) {\n var p = patterns[i];\n var c = colors[i];\n ctx.drawImage(p, x + (size) * i, y, size, size);\n ctx.fillStyle = `rgb(${c[0]|0},${c[1]|0},${c[2]|0})`;\n ctx.fillRect(x + (size) * i, y + size, size, size);\n }\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"$33","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":"$34","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 = \"red\";\n ctx.fillStyle = \"red\";\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":626,"value":"function p14(ctx, x, y, r) {\n for(let l =0; l<= 5; l++){\n var dx = Math.cos(60 * l / 180 * Math.PI) * r/2;\n var dy = Math.sin(60 * l / 180 * Math.PI) * r/2;\n\n ctx.beginPath();\n ctx.fillStyle = \"aqua\";\t\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(40 * i / 180 * Math.PI) * r/2.5;\n var dy = Math.sin(40 * i / 180 * Math.PI) * r/2.5;\n\n ctx.beginPath();\n ctx.strokeStyle = \"#1E90FF\";\n ctx.lineWidth = r * 0.05;\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":634,"value":"function p15(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 = \"midnightblue\";\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<= 11; i++){\n var dx = Math.cos(30 * i / 180 * Math.PI) * r/1.5;\n var dy = Math.sin(30 * i / 180 * Math.PI) * r/1.5;\n\n ctx.beginPath();\n ctx.strokeStyle = \"lightsteelblue\";\t\n ctx.lineWidth = r * 0.05;\n ctx.moveTo(x, y);\n ctx.lineTo(x + dx, y + dy);\n ctx.stroke();\n ctx.closePath(); \n }\n \n for(let l =0; l<= 5; l++){\n var dx = Math.cos(60 * l / 180 * Math.PI) * r/1.5;\n var dy = Math.sin(60 * l / 180 * Math.PI) * r/1.5;\n\n ctx.beginPath();\n ctx.strokeStyle = \"lightsteelblue\";\t\n ctx.lineWidth = r * 0.05;\n ctx.moveTo(x, y);\n ctx.lineTo(x + dx, y + dy);\n ctx.stroke();\n ctx.closePath(); \n }\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":643,"value":"function p16(ctx, x, y, r) { \n \n for(let i =0; i<= 11; 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\n ctx.beginPath();\n ctx.fillStyle = \"#228B22\";\n ctx.arc(x + dx, y + dy, r/3, 0, 2.0 * Math.PI);\n ctx.fill();\n ctx.closePath(); \n \n }\n \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 = \"mediumseagreen\";\n ctx.arc(x + dx, y + dy, r/4, 0, 2.0 * Math.PI);\n ctx.fill();\n ctx.closePath(); \n }\n \n for(let l =0; l<= 5; l++){\n var dx = Math.cos(60 * l / 180 * Math.PI) * r/3;\n var dy = Math.sin(60 * l / 180 * Math.PI) * r/3;\n\n ctx.beginPath();\n ctx.strokeStyle = \"#006400\";\t\n ctx.lineWidth = r * 0.05;\n ctx.moveTo(x, y);\n ctx.lineTo(x + dx, y + dy);\n ctx.stroke();\n ctx.closePath(); \n }\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"function p17(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 = \"#7CFC00\";\n ctx.arc(x + dx, y + dy, r/4, 0, 2.0 * Math.PI);\n ctx.fill();\n ctx.closePath(); \n \n }\n for(let i =0; i<= 11; 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.strokeStyle = \"#7FFFD4\";\n ctx.lineWidth = r * 0.05;\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":649,"value":"function p18(ctx, x, y, r) { \n for(let i =0; i<= 6; i++){\n var dx = Math.cos(60 * i / 180 * Math.PI) * r/1.5;\n var dy = Math.sin(60 * i / 180 * Math.PI) * r/1.5;\n\n ctx.beginPath();\n ctx.fillStyle = \"limegreen\";\n ctx.arc(x + dx, y + dy, r/4, 0, 2.0 * Math.PI);\n ctx.fill();\n ctx.closePath(); \n \n }\n for(let i =0; i<= 11; 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.strokeStyle = \"lightgreen\";\n ctx.lineWidth = r * 0.05;\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":654,"value":"function p19(ctx, x, y, r) { \n for(let i =0; i<= 9; i++){\n var dx = Math.cos(40 * i / 180 * Math.PI) * r/2;\n var dy = Math.sin(40 * i / 180 * Math.PI) * r/2;\n\n ctx.beginPath();\n ctx.strokeStyle = \"mediumpurple\";\n ctx.lineWidth = r * 0.05;\n ctx.arc(x + dx, y + dy, r/2.5, 0, 2.0 * Math.PI);\n ctx.stroke();\n ctx.closePath(); \n \n }\n for(let i =0; i<= 7; i++){\n var dx = Math.cos(45 * i / 180 * Math.PI) * r/4;\n var dy = Math.sin(45 * i / 180 * Math.PI) * r/4;\n\n ctx.beginPath();\n ctx.strokeStyle = \"blueviolet\";\n ctx.lineWidth = r * 0.05;\n ctx.arc(x + dx, y + dy, r/3, 0, 2.0 * Math.PI);\n ctx.stroke();\n ctx.closePath(); \n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":657,"value":"function p20(ctx, x, y, r) { \n for(let i =0; i<= 8; i++){\n var dx = Math.cos(40 * i / 180 * Math.PI) * r/2;\n var dy = Math.sin(40 * i / 180 * Math.PI) * r/2;\n\n ctx.beginPath();\n ctx.fillStyle = \"plum\";\n ctx.arc(x + dx, y + dy, r/2.5, 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(40 * i / 180 * Math.PI) * r/2;\n var dy = Math.sin(40 * i / 180 * Math.PI) * r/2;\n\n ctx.beginPath();\n ctx.strokeStyle = \"indigo\";\n ctx.lineWidth = r * 0.05;\n ctx.arc(x + dx, y + dy, r/2.5, 0, 2.0 * Math.PI);\n ctx.stroke();\n ctx.closePath();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":678,"value":"function p21(ctx, x, y, r) { \n// for(let i =0; i<= 8; i++){\n// var dx = Math.cos(40 * i / 180 * Math.PI) * r/2;\n// var dy = Math.sin(40 * i / 180 * Math.PI) * r/2;\n\n// ctx.beginPath();\n// ctx.fillStyle = \"plum\";\n// ctx.arc(x + dx, y + dy, r/2.5, 0, 2.0 * Math.PI);\n// ctx.fill();\n// ctx.closePath(); \n// }\n for(let i =0; i<= 17; i++){\n var dx = Math.cos(20 * i / 180 * Math.PI) * r/2;\n var dy = Math.sin(20 * i / 180 * Math.PI) * r/2;\n\n ctx.beginPath();\n ctx.strokeStyle = \"#FFD700\";\n ctx.lineWidth = r * 0.05;\n ctx.arc(x + dx, y + dy, r/2.5, 0, 2.0 * Math.PI);\n ctx.stroke();\n ctx.closePath();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":686,"value":"function p22(ctx, x, y, r) {\n ctx.beginPath();\n ctx.fillStyle = \"#008080\";\n // ctx.lineWidth = r * 0.05;\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<= 8; i++){\n var dx = Math.cos(45 * i / 180 * Math.PI) * r/3;\n var dy = Math.sin(45 * i / 180 * Math.PI) * r/3;\n\n ctx.beginPath();\n ctx.strokeStyle = \"cyan\";\n ctx.lineWidth = r * 0.05;\n ctx.arc(x + dx, y + dy, r/3, 0, 2.0 * Math.PI);\n ctx.stroke();\n ctx.closePath();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":691,"value":"function p23(ctx, x, y, r) { \n for(let i =0; i<= 11; 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\n ctx.beginPath();\n ctx.strokeStyle = \"#FF1493\";\n ctx.lineWidth = r * 0.05;\n ctx.arc(x + dx, y + dy, r/2, 0, 2.0 * Math.PI);\n ctx.stroke();\n ctx.closePath();\n }\n for(let i =0; i<= 8; i++){\n var dx = Math.cos(40 * i / 180 * Math.PI) * r/3;\n var dy = Math.sin(40 * i / 180 * Math.PI) * r/3;\n\n ctx.beginPath();\n ctx.strokeStyle = \"#FF69B4\";\n ctx.lineWidth = r * 0.05;\n ctx.arc(x + dx, y + dy, r/2.5, 0, 2.0 * Math.PI);\n ctx.stroke();\n ctx.closePath();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":698,"value":"function p24(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\n ctx.beginPath();\n ctx.fillStyle = \"#8000FF\";\n ctx.arc(x + dx, y + dy, r/3, 0, 2.0 * Math.PI);\n ctx.fill();\n ctx.closePath();\n }\n for(let i =0; i<= 8; i++){\n var dx = Math.cos(40 * i / 180 * Math.PI) * r/2;\n var dy = Math.sin(40 * i / 180 * Math.PI) * r/2;\n\n ctx.beginPath();\n ctx.strokeStyle = \"white\";\n ctx.lineWidth = r * 0.05;\n ctx.arc(x + dx, y + dy, r/3, 0, 2.0 * Math.PI);\n ctx.stroke();\n ctx.closePath();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"function getAvgColor(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]\n for(let i = 0; i < data.length / 4; i++) {\n const r = data[i * 4 + 0];\n const g = data[i * 4 + 1];\n const b = data[i * 4 + 2];\n const a = data[i * 4 + 3];\n sums[0] += a === 255 ? r : 255;\n sums[1] += a === 255 ? g : 255;\n sums[2] += a === 255 ? b : 255;\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://mondrian.mashable.com/uploads%252Fcard%252Fimage%252F829044%252Ff1a11a98-59ed-46a9-a2df-bf2a6997ee31.jpg%252F950x534__filters%253Aquality%252890%2529.jpg?signature=RrPci3GH-I_L_lLLrMTuazG5jXc=&source=https%3A%2F%2Fblueprint-api-production.s3.amazonaws.com')\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"}],"files":"$W35","stdlib":"1","titling":"auto"}