2b:null 2c:["$","title",null,{"children":"Getting to know canvas (A Tutorial) | Chris Ried | Observable"}] 31:T4e4,{ const ctx = DOM.context2d(WIDTH, HEIGHT); let frame; // Creates the rectangle vides let circles = (x, y, r, t, clr) => { return { x: x, y: y, r: r, t: t, clr: clr }; }; // Create our objects let cir = []; let t = Math.random() < 0.5 ? 1 : 2; for (let i = 0; i < NUM; i++) { t = Math.random() < 0.5 ? 1 : 2; cir[i] = circles( Math.random() * WIDTH, Math.random() * HEIGHT, 1 + 10 * Math.random(), t, get_color() ); } let draw = () => { ctx.fillStyle = "white"; ctx.fillRect(0, 0, WIDTH, HEIGHT); for (let i = 0; i < cir.length; i++) { circle( ctx, cir[i].x, cir[i].y, cir[i].r, cir[i].r, Math.PI / 2, 0, 2 * Math.PI, cir[i].t, cir[i].clr ); } }; let update = () => { for (let i = 0; i < cir.length; i++) { cir[i].x += Math.sin(Date.now() * Math.random()); cir[i].y += Math.sin(Date.now() * Math.random()); } }; (function tick() { if (on_off_b) { draw(); update(); frame = requestAnimationFrame(tick); } else { draw(); } })(); invalidation.then(() => cancelAnimationFrame(frame)); return ctx.canvas; }32:T4e7,{ const ctx = DOM.context2d(WIDTH, HEIGHT); let frame; // Creates the rectangle vides let circles = (x, y, r, t, clr) => { return { x: x, y: y, r: r, t: t, clr: clr }; }; // Create our objects let cir = []; let t = Math.random() < 0.5 ? 1 : 2; for (let i = 0; i < NUM; i++) { t = Math.random() < 0.5 ? 1 : 2; cir[i] = circles( Math.random() * WIDTH, Math.random() * HEIGHT, 1 + 10 * Math.random(), t, get_color() ); } let draw = () => { ctx.fillStyle = "white"; // ctx.fillRect(0, 0, WIDTH, HEIGHT); for (let i = 0; i < cir.length; i++) { circle( ctx, cir[i].x, cir[i].y, cir[i].r, cir[i].r, Math.PI / 2, 0, 2 * Math.PI, cir[i].t, cir[i].clr ); } }; let update = () => { for (let i = 0; i < cir.length; i++) { cir[i].x += Math.sin(Date.now() * Math.random()); cir[i].y += Math.sin(Date.now() * Math.random()); } }; (function tick() { if (on_off_c) { draw(); update(); frame = requestAnimationFrame(tick); } else { draw(); } })(); invalidation.then(() => cancelAnimationFrame(frame)); return ctx.canvas; }33:[] 2f:{"id":"23903a5872bbeefd","slug":"getting-to-know-canvas","title":"Getting to know canvas (A Tutorial)","thumbnail":"817e0ed06d2abe8c6d42c0c3435b614ddd4eb4f6d2e3975933d98aa4ec656999","access_level":"public","create_time":"$D2022-04-24T05:41:38.862Z","update_time":"$D2022-10-20T04:45:50.522Z","view_time":null,"first_public_time":"$D2022-09-21T02:42:30.159Z","fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"b021585f8dd574ac","login":"cdr6934","name":"Chris Ried","avatar_url":"https://avatars-next.observableusercontent.com/79ffdb5b29f55f658282d26aa24a67562ae37cdf1cefc1287a1fb37076740f6a","tier":"starter_2024"},"version":590,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2b08471af969fd79","login":"cdr6934","name":"Chris Ried","avatar_url":"https://avatars-next.observableusercontent.com/79ffdb5b29f55f658282d26aa24a67562ae37cdf1cefc1287a1fb37076740f6a","tier":null}],"members":[{"type":"individual","id":"2b08471af969fd79","login":"cdr6934","name":"Chris Ried","avatar_url":"https://avatars-next.observableusercontent.com/79ffdb5b29f55f658282d26aa24a67562ae37cdf1cefc1287a1fb37076740f6a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"f6aa5c9d8ff1bb4b","slug":"creative-coding","title":"Creative Coding / Generative Art","owner":{"id":"b021585f8dd574ac","login":"cdr6934","name":"Chris Ried"}},"type":"notebook","body":{"title":"Getting to know canvas (A Tutorial)","cells":[{"id":0,"value":"# Getting to know canvas (A Tutorial)\nWelcome to my realm working with canvas. The following implementation of canvas is simple, but a very powerful API and is the foundation on which p5js have been written. P5JS on its own is great for its ease of use and built-in capabilities. But who doesn't enjoy the opportunity to use the local APIs and implement features that might take longer for it to show up in the form. \n\nIf you haven't used Observable, there are a few things: \n* All you will find that the notebooks aren't purely Javascript but a slight subset of it\n* I use some controls, check out [this](https://observablehq.com/@observablehq/inputs) notebook to help better understand their capabilities.\n\n* Also, if you are looking for a canvas cheatsheet -- this [one](https://simon.html5.org/dump/html5-canvas-cheat-sheet.html) is pretty nice ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":537,"value":"## To Cover \n* ```fillRect(x, y, width, height)``` - Draws a filled rectangle\n* ```strokeRect(x, y, width, height)``` - Draws a rectangular outline\n* ```Math.random()``` - provides a random number between 0 - 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":129,"value":"viewof WIDTH = Inputs.text({ label: \"Width (px):\", value: 1000 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":41,"value":"The following canvas experiments all come from the following [link](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes). However, trying to understand how the base layer of drawing in the canvas works, I've used Observable to enable the ability to compute in the webpage and to use the controls to help play with the beautiful pieces. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":27,"value":"viewof color = Inputs.color({ label: \"Favorite color\", value: \"#4682b4\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"## Drawing Rectangles ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":318,"value":"## This is a square...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":323,"value":"{\n const canvas = DOM.canvas(WIDTH, HEIGHT);\n const ctx = canvas.getContext(\"2d\");\n const n = 8;\n\n // adds\n ctx.fillStyle = color; // \"rgba(0,0,200,0.5)\";\n ctx.fillRect(WIDTH * 0.4, HEIGHT * 0.4, 50, 50);\n return canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":327,"value":"## And this is a grid of squares...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":8,"value":"{\n const canvas = DOM.canvas(WIDTH, HEIGHT);\n const ctx = canvas.getContext(\"2d\");\n const n = 8;\n\n // adds\n ctx.fillStyle = color; // \"rgba(0,0,200,0.5)\";\n\n for (let i = 0; i < n * 4; i++) {\n for (let j = 0; j < n; j++) {\n ctx.fillRect(30 * i, 30 * j, 25, 25);\n }\n }\n return canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"## Drawing with Randomness\nThe following functions are great to remember and implement when introducing randomness to your work\n* Math.random() - provides a number between 0 - 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":55,"value":"{\n const canvas = DOM.canvas(WIDTH, HEIGHT);\n const ctx = canvas.getContext(\"2d\");\n\n // adds\n ctx.fillStyle = \"rgba(0,0,200,0.5)\";\n\n for (let i = 0; i < 10; i++) {\n for (let j = 0; j < 10; j++) {\n ctx.fillRect(Math.random() * WIDTH, Math.random() * HEIGHT, 25, 25);\n }\n }\n return canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":91,"value":"Great, now we can see how we might change the color of every single one of the boxes that are being created. This of course will change and not save the state of any of the squares. \n\nHere is one way you might randomly generate the colors. (I'd recommend looking at creating a palette of colors which you will find later)\n```{javascript}\n var clr = \"rgba(\" + 255 * Math.random() +\",\" + 255 * Math.random() +\",\" +255 * Math.random() +\",0.5)\";\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":84,"value":"{\n\n const canvas = DOM.canvas(WIDTH, HEIGHT);\n const ctx = canvas.getContext(\"2d\");\n\n // adds\n\n for (let i = 0; i < 10; i++) {\n for (let j = 0; j < 10; j++) {\n var clr =\n \"rgba(\" +\n 255 * Math.random() +\n \",\" +\n 255 * Math.random() +\n \",\" +\n 255 * Math.random() +\n \",0.5)\";\n ctx.fillStyle = clr;\n ctx.fillRect(Math.random() * WIDTH, Math.random() * HEIGHT, 25, 25);\n }\n }\n return canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":176,"value":"We haven't made too many changes to the code on purpose. For one, understands how to code a random set of squares. But what if we want the squares to be \"customized\" and show different results. Here I have started by writing a small new function for the point rectangle called ```rects()``` We should be able to use this to help build a larger code base that will help us create something new and exciting that goes beyond other frameworks such as p5.js. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":160,"value":"{\n const canvas = DOM.canvas(WIDTH, HEIGHT);\n const ctx = canvas.getContext(\"2d\");\n // Creates the rectangle vides\n const rects = (ctx, x, y, w, h, diff) => {\n ctx.fillStyle = color;\n for (let i = 0; i < w; i += diff) {\n for (let j = 0; j < h; j += diff) {\n ctx.fillRect(x + i, y + j, 1, 1);\n }\n }\n };\n\n for (let i = 0; i < 10; i++) {\n for (let j = 0; j < 10; j++) {\n rects(\n ctx,\n (WIDTH * i) / 10.0,\n (j / 10.0) * HEIGHT,\n Math.random() * 50,\n 20,\n 1\n );\n }\n }\n return canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":234,"value":"The powerful thing about being able to use vanilla JS, is you can find yourself making some powerful interactive pieces that can be implemented into the work that could occur. \n\nTake for instance, we have now taken our previous random side bar graph simulation and did something very interesting. We implemented a custom rectangle that is filled with a percentage of the fill with pixel detail. \nOn top of that, we have also added a form that will help us make slight changes to the current output that we have created. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":217,"value":"viewof form = Inputs.form({\n color: Inputs.color({ label: \"Favorite color\", value: \"#4682b4\" }),\n fill: Inputs.range([0, 1], { label: \"Fill Percentage\" })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":211,"value":"{\n const ctx = DOM.context2d(WIDTH, HEIGHT);\n // Creates the rectangle vides\n\n for (let i = 0; i < 10; i++) {\n for (let j = 0; j < 10; j++) {\n rects(\n ctx,\n (WIDTH * i) / 10.0,\n (j / 10.0) * HEIGHT,\n Math.random() * 50,\n 20,\n 1\n );\n }\n }\n return ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":250,"value":"## Drawing an ellipse\n* ```ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle)``` - Draws a circle ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":246,"value":"{\n const ctx = DOM.context2d(WIDTH, HEIGHT);\n // Creates the rectangle vides\n\n for (let i = 0; i < 1000; i++) {\n const ln = 1 + 10 * Math.random();\n circle(\n ctx,\n Math.random() * WIDTH,\n Math.random() * HEIGHT,\n ln,\n ln,\n Math.PI / 2,\n 0,\n 2 * Math.PI,\n 1,\n form.color\n );\n }\n return ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":330,"value":"Crazy as it sounds, there are alot of things that can be done with just squares and circles. \n## Animating an ellipse\nCareful you might start seizures if you stare at it too long.. There are a number of different ways on how to implementing a loop. Here is a very usable [notebook](https://observablehq.com/@observablehq/animation-loops) that provides extra detail. \n\nFor now we are implementing a timer loop and there are a few requirements to keep in mind. \n\n* Create a tick function and wrap around your draw() function\n* Implement a frame variable which will hold `requestAnimationFrame` - this will recursively call on itself to run a new canvas.\n* Add a time handle so that when the loop breaks the cell will be invalidated.\n * ``` invalidation.then(() => cancelAnimationFrame(frame)) ```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":436,"value":"viewof on_off = Inputs.toggle({label: \"On / Off\", value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":334,"value":"{\n const ctx = DOM.context2d(WIDTH, HEIGHT);\n let frame;\n // Creates the rectangle vides\n\n let draw = () => {\n ctx.fillStyle = \"white\";\n ctx.fillRect(0, 0, WIDTH, HEIGHT);\n for (let i = 0; i < 1000; i++) {\n const ln = 1 + 10 * Math.random();\n circle(\n ctx,\n Math.random() * WIDTH,\n Math.random() * HEIGHT + 10 * Math.sin(Date.now() / 1000),\n ln,\n ln,\n Math.PI / 2,\n 0,\n 2 * Math.PI,\n 1,\n form.color\n );\n }\n };\n\n (function tick() {\n if (on_off) {\n draw();\n frame = requestAnimationFrame(tick);\n } else {\n draw();\n }\n })();\n\n invalidation.then(() => cancelAnimationFrame(frame));\n return ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":377,"value":"We have created as basic of a piece of generative drawing but it does need to be a little more than randomly bouncing across the screen and thus an object is born that will keep track of our little shimmering stars. Also, you can change the number of circles show up in the screen by changing the number here. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":407,"value":"viewof NUM = Inputs.range([0, 10000], { label: \"Fill Percentage\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":385,"value":"{\n const ctx = DOM.context2d(WIDTH, HEIGHT);\n let frame;\n // Creates the rectangle vides\n let circles = (x, y, r, t) => {\n return { x: x, y: y, r: r, t: t };\n };\n\n // Create our objects\n let cir = [];\n let t = Math.random() < 0.5 ? 1 : 2;\n for (let i = 0; i < NUM; i++) {\n t = Math.random() < 0.5 ? 1 : 2;\n cir[i] = circles(\n Math.random() * WIDTH,\n Math.random() * HEIGHT,\n 1 + 10 * Math.random(),\n t\n );\n }\n\n (function tick() {\n ctx.fillStyle = \"white\";\n ctx.fillRect(0, 0, WIDTH, HEIGHT);\n for (let i = 0; i < cir.length; i++) {\n circle(\n ctx,\n cir[i].x,\n cir[i].y,\n cir[i].r,\n cir[i].r,\n Math.PI / 2,\n 0,\n 2 * Math.PI,\n cir[i].t,\n form.color\n );\n }\n frame = requestAnimationFrame(tick);\n })();\n\n invalidation.then(() => cancelAnimationFrame(frame));\n return ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":459,"value":"Now only one color isn't going to do it, we can actually create a palette of colors from all sorts of places. A great place for default color palettes are [Coolers](www.coolors.co) though I would recommend understanding the theory behind it to get a better sense of how to choose the colors that resonate for yourself. So below you will find a `get_color()` which takes a random color out of the palette. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":463,"value":"{\n const ctx = DOM.context2d(WIDTH, HEIGHT);\n let frame;\n // Creates the rectangle vides\n let circles = (x, y, r, t, clr) => {\n return { x: x, y: y, r: r, t: t, clr: clr };\n };\n\n // Create our objects\n let cir = [];\n let t = Math.random() < 0.5 ? 1 : 2;\n for (let i = 0; i < NUM; i++) {\n t = Math.random() < 0.5 ? 1 : 2;\n cir[i] = circles(\n Math.random() * WIDTH,\n Math.random() * HEIGHT,\n 1 + 10 * Math.random(),\n t,\n get_color()\n );\n }\n\n (function tick() {\n \n ctx.fillStyle = \"white\";\n ctx.fillRect(0, 0, WIDTH, HEIGHT);\n for (let i = 0; i < cir.length; i++) {\n circle(\n ctx,\n cir[i].x,\n cir[i].y,\n cir[i].r,\n cir[i].r,\n Math.PI / 2,\n 0,\n 2 * Math.PI,\n cir[i].t,\n cir[i].clr\n );\n }\n frame = requestAnimationFrame(tick);\n })();\n\n invalidation.then(() => cancelAnimationFrame(frame));\n return ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":485,"value":"Now we can take this beautiful array and give it just subtle motion. We use some of the concepts learned from Processing by taking and creating draw and update functions that can be used to draw all of the interesting elements inside of the loop and then we get a much subtle effect of motion. Of course this isn't anything new but learning to really explore and play with the parameters are a great way of finding ways to really give yourself permission for creativity. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":574,"value":"viewof on_off_b = Inputs.toggle({ label: \"On / Off\", value: true })\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":489,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":513,"value":"Even leaving out a background will give you the sense a more painterly appearance, let alone if you start directing how it might point by not simply choosing random walks like we have here... ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":579,"value":"viewof on_off_c = Inputs.toggle({ label: \"On / Off\", value: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":510,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":559,"value":"## Adding Text\nAnother aspect to canvas is the ability to add text. This naturally has a number of different opport\n\n* *`fillText(text, x,y)`\n\n This again gives us the opportunity to add text to any canvas element in the DOM. It is of n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":563,"value":"{\n let cnt = 0;\n const ctx = DOM.context2d(WIDTH, HEIGHT);\n let frame;\n let x = WIDTH / 2;\n let y = HEIGHT / 2;\n let sent = \"A\";\n let draw = () => {\n ctx.fillText(sent, 10, 50);\n sent;\n };\n\n let update = () => {\n sent += \"another\";\n cnt++;\n };\n\n (function tick() {\n if (cnt > 10) {\n draw();\n } else {\n draw();\n update();\n frame = requestAnimationFrame(tick);\n }\n })();\n\n invalidation.then(() => cancelAnimationFrame(frame));\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":100,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":418,"value":"circle = (ctx, x, y, radiusX, radiusY, rotation, startAngle, endAngle, t, color) => {\n switch(t) {\n case 1:\n ctx.fill();\n ctx.fillStyle = color;\n break;\n case 2:\n ctx.stroke();\n ctx.strokeStyle = color;\n break;\n }\n ctx.beginPath();\n ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":520,"value":"rects = (ctx, x, y, w, h, diff) => {\n ctx.fillStyle = form.color;\n for (let i = 0; i < w; i += diff) {\n for (let j = 0; j < h; j += diff) {\n if (Math.random() < form.fill) {\n ctx.fillRect(x + i, y + j, 1, 1);\n }\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":108,"value":"HEIGHT = 250","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":146,"value":"rn = Math.random()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":456,"value":"color_palette = [\"#db5461\", \"#686963\", \"#8aa29e\", \"#3d5467\", \"#f1edee\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":465,"value":"get_color = () => {\n var rand = color_palette[(Math.random() * color_palette.length) | 0]\n return rand\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"