43:null 44:["$","title",null,{"children":"P1.1.2 Color circle | Raluca Nicola | Observable"}] 4a:[] 48:{"id":"c4c5d5fd8b2cee6a","slug":"p1-1-2-color-circle","title":"P1.1.2 Color circle","thumbnail":"6999d1c5d93c4bb31d105636a0f96d41b0270f4be1643c46388a8e0d0f1dd70b","access_level":"public","create_time":"$D2021-02-27T16:21:28.444Z","update_time":"$D2021-02-27T17:23:37.166Z","view_time":null,"first_public_time":"$D2021-02-27T16:48:52.252Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"899933c31454ad1c","login":"ralucanicola","name":"Raluca Nicola","avatar_url":"https://avatars-next.observableusercontent.com/839d06d3385ad8aa30f43827d91fccdd11b268607bece561425c81dd5a8e3e99","tier":"starter_2024","bio":"Web Cartographer at Esri","following":false},"version":41,"publish_version":41,"role":null,"authored":false,"authors":[{"type":"individual","id":"517f21b36ba85f6d","login":"ralucanicola","name":"Raluca Nicola","avatar_url":"https://avatars-next.observableusercontent.com/839d06d3385ad8aa30f43827d91fccdd11b268607bece561425c81dd5a8e3e99","tier":null,"bio":"Web Cartographer at Esri","following":false}],"members":[{"type":"individual","id":"517f21b36ba85f6d","login":"ralucanicola","name":"Raluca Nicola","avatar_url":"https://avatars-next.observableusercontent.com/839d06d3385ad8aa30f43827d91fccdd11b268607bece561425c81dd5a8e3e99","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"6cfc1fbd2c6f1a2d","slug":"generative-design","title":"Generative design","owner":{"id":"899933c31454ad1c","login":"ralucanicola","name":"Raluca Nicola"}},"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"md`## Steps`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"viewof value = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import { p5 } from \"@tmcw/p5\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 49:"$48:body"