2c:null 2d:["$","title",null,{"children":"Part 2: Observable + SVG Basics | Mike Freeman | Observable"}] 32:[{"id":"f27765b32374ddd08315bcb50a6671a17588ed15b7a1493697abae287f65659d3852bc3574a520fbc1cfaf6f5affc0ee90ca935fd029f93c37fba03ad3368834","href":"https://static.observableusercontent.com/files/f27765b32374ddd08315bcb50a6671a17588ed15b7a1493697abae287f65659d3852bc3574a520fbc1cfaf6f5affc0ee90ca935fd029f93c37fba03ad3368834","name":"molnar.jpg","type":"image/jpeg","lastModified":1599332905561.348,"size":484759}] 30:{"id":"fec0be53ea5a918f","slug":"part-2-observable-svg-basics","title":"Part 2: Observable + SVG Basics","thumbnail":"cfc98464b976f552b6e18a6df853021c6ba59ca3cc0fd3692fbb2dcfaf4e6237","access_level":"public","create_time":"$D2020-09-02T00:57:23.914Z","update_time":"$D2020-10-05T02:18:37.369Z","view_time":null,"first_public_time":"$D2020-09-02T02:26:35.649Z","has_unpublished_edits":null,"fork":false,"stars":16,"starred":false,"owner":{"type":"team","id":"5a7641f443a5ac2c","login":"mkfreeman","name":"Mike Freeman","avatar_url":"https://avatars-next.observableusercontent.com/c41d269cc7b9f5bea7adf2ca109c2b20486a5af02a59df0b162b2fbb33b44a17","tier":"starter_2024"},"version":337,"publish_version":337,"role":null,"authored":false,"authors":[{"type":"individual","id":"49edaef976412aba","login":"mkfreeman","name":"Mike Freeman","avatar_url":"https://avatars-next.observableusercontent.com/c41d269cc7b9f5bea7adf2ca109c2b20486a5af02a59df0b162b2fbb33b44a17","tier":null}],"members":[{"type":"individual","id":"49edaef976412aba","login":"mkfreeman","name":"Mike Freeman","avatar_url":"https://avatars-next.observableusercontent.com/c41d269cc7b9f5bea7adf2ca109c2b20486a5af02a59df0b162b2fbb33b44a17","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":{"id":"8e36a8f0cf2fd4c1","slug":"building-art-tools","title":"Building Art Tools","owner":{"id":"5a7641f443a5ac2c","login":"mkfreeman","name":"Mike Freeman"}},"type":"notebook","body":{"titling":"auto","title":"Part 2: Observable + SVG Basics","cells":[{"id":0,"value":"md`# Part 2: Observable + SVG Basics `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`## Observable\nThis tutorial assumes basic JavaScript familiarity, but there are some particularities about how Observable JavaScript notebooks work that need to be covered. It takes a bit of getting used to, but they're incredibly powerful, and radically simplify data loading, interactivity, and other JavaScript challenges. As a suppliment, you may want to see their [Five Minute Introduction](https://observablehq.com/@observablehq/five-minute-introduction) notebook.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`### Markdown\nAn Observable cell allows you to write Markdown by simply starting the cell with the letters md, and then wrapping all of your markdown content in backtics (technically a _template literal_). For example:\n\nmd\\\\\\`Write your markdown in between these backtics in any cell.\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"md`### HTML\nSimilarly to Markdown, you can initiate any cell with the HTML tag \\`html\\`:\n\nhtml\\\\\\`Write your <tags></tags> in between backtics in any cell.\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"md`### JavaScript\nAs JavaScript Notebooks, Observable not surprisingly supports writing JavaScript. To create a \"global\" variable, simply assign a value to a variable name in any cell (without an assertion like \\`const\\` or \\`let\\`):\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"// Create a globally scoped \"city\" of the city you are currently in\ncity = \"Toronto\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"md`### Mix and Match\nOne of the powerful aspects of Observable notebooks is the ability to _mix in_ your defined JavaScript variables into your HTML template literals. For example, see how the variable \\`city\\` is used in the cell below.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"md`I'm currently in ${city}.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"md`Part of the ease of working with Observable is that _A cell referencing another cell is re-evaluated automatically when the referenced value changes_ ([source](https://observablehq.com/@observablehq/five-minute-introduction)). So, try changing the variable \\`city\\` and see how your sentence automatically updates (we'll use this functionality to control our generative art tools that we build).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"md`Observable simplifies code resuse through the use of **imports** (see [here](https://observablehq.com/@observablehq/introduction-to-imports) for more details). As an example, we'll make use of several utilities from this [inputs notebook](https://observablehq.com/@jashkenas/inputs):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"// Here's an example of storing a *value* in a variable created by a slider:\nviewof slider_value = slider({\n min: 0,\n max: 100,\n step: 1,\n value: 10,\n title: \"Slider Title\",\n description: \"Description of the slider\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"md`You can reference the value of the slider in a template literal using this syntax (note the automatic updates!): ${slider_value}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"md`### Require\nIf you want to use a standard JavaScript library, you can use the **require** statement (see [documentation](https://observablehq.com/@observablehq/introduction-to-require) for details)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"// Load the lodash library\n_ = require(\"lodash\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"// Create an array from 0 to 10 using the range function\n_.range(10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"md`### File attachments\nIt's often helpful to upload a file, for example, a dataset or an image. To do so, you can use the **File Attachment** functionality, as detailed [here](https://observablehq.com/@observablehq/file-attachments).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"// Load a file that has been uploaded to this notebook\nsample_img = await FileAttachment(\"molnar.jpg\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"// Display the image\nmd`

_Structure de Quadrilatères_, Vera Molnár. [Source](https://www.artsy.net/artwork/vera-molnar-structure-de-quadrilateres-14)

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"md`## SVG\nIn this tutorial, we'll render our work as [Scalable Vector Graphics](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Introduction). As an introduction, let's see how we can draw some [basic shapes](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes) (for more advanced curvature, see the [documentation](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths) for \\`\\` elements):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"// Create a string to describe the line path for the polyline above\nline_path = _.range(400)\n .map(d => `${d}, ${Math.cos(d / 10) * 20}`)\n .join(' ')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"md`While the above shapes are basic, they can be manipulated to create complex figures ([source](https://observablehq.com/@luukschipperheyn/animated-svg-bezier-blobs)):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"display_blobs","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"md`Mastering such nuances allows the creation of incredible work, such as this ([source](https://observablehq.com/@makio135/generating-svgs/10)):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"concentric","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"md`## Connecting Inputs to SVGs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"md`As you may have guessed at this point, the key to building generative art tools is creating user interface inputs that control SVG outputs. In the next step, we'll add randomness, but for now, we'll see how to controls SVG elements through inputs:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"// Here's an example of storing a *value* in a variable created by a slider:\nviewof num_circles = slider({\n min: 1,\n max: 50,\n step: 1,\n value: 10,\n title: \"Number of circles to render\",\n description: \"Choose a number of circles to render in the SVG element below\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"md`Recall, in context, we're moving through these steps:`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"steps","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"import { code_styles, displayCaution } from \"@info474/utilities\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"import { display_blobs } from \"@mkfreeman/animated-svg-bezier-blobs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"import { concentric } from \"@mkfreeman/generating-svgs/2\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"code_styles","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"import { steps } from \"@mkfreeman/part-5-building-tools\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"