33:[] 32:{"title":"patterns","cells":[{"id":0,"value":"md`# patterns`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"viewof size = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"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":16,"value":"patterns = [p5, p6, p7, p8, p9, p10, p11, p12, p13, p14, p15, p16, p17, p18, p19, p20, p21, p22, p23, p24].map(p => {\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":8,"value":"height = width * 0.5 //height를 따로 만든다.","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"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":23,"value":"function p6(ctx, x, y, r) {\n ctx.beginPath();\n ctx.fillStyle = \"pink\";\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 = \"pink\";\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":71,"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 = 2;\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":105,"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":129,"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 = \"mediumspringgreen\";\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 = \"mediumspringgreen\";\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":156,"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":176,"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":198,"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":215,"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":234,"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":281,"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":328,"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":346,"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":367,"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":387,"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":425,"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":440,"value":"function p21(ctx, x, y, r) { \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":509,"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":536,"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":559,"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"}],"files":"$W33","stdlib":"1","titling":"auto"}