31:[] 2f:{"title":"P1.1.2 Color circle","cells":[{"id":0,"value":"md`\n# P1.1.2 Color circle\n\nCreate a color circle. Coordinate the x mouse movement with a change in saturation and the y mouse movement with a change in brightness.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"p5(s => {\n let width = 360;\n let height = 360;\n let saturation = width;\n let brightness = height;\n let n = value;\n const R = 100;\n s.setup = function() {\n let canvas = s.createCanvas(width, height);\n canvas.mouseMoved(changeProperties);\n s.colorMode(s.HSB, width, height, 100);\n s.noStroke();\n s.smooth();\n };\n\n function changeProperties(event) {\n saturation = event.layerX;\n brightness = event.layerY;\n }\n\n s.draw = function() {\n let angleStep = 360 / n;\n s.beginShape(s.TRIANGLE_FAN);\n s.vertex(width / 2, height / 2);\n for (let i = 0; i <= 360; i += angleStep) {\n s.vertex(\n width / 2 + R * s.cos(s.radians(i)),\n height / 2 + R * s.sin(s.radians(i))\n );\n s.fill(i, saturation, brightness);\n }\n s.endShape();\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"md`## Steps`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"viewof value = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"import { p5 } from \"@tmcw/p5\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}