Run cell ⇧↩

31:T450,Part of the ease of working with Observable is that when a cell is updated, _every other cell referencing it is re-evaluated automatically_, much like cells in a spreadsheet (See [How Observable Runs](https://observablehq.com/@observablehq/how-observable-runs) for more details). Try changing the value of the `city` cell, then re-evaluating the cell by clicking the _play_ button ( ) or using the keyboard shortcut `Shift+Enter`. Watch how the text above automatically updates! We'll use this functionality to control our generative art tools that we build.32:[{"id":"0b260c0857c820d078c7628d0d1858e72500cfc39ad28fa772efff9b042e27e585f0411a6aa912f2d139228917deb359e95d755981e025e466c79f609c4051cf","href":"https://static.observableusercontent.com/files/0b260c0857c820d078c7628d0d1858e72500cfc39ad28fa772efff9b042e27e585f0411a6aa912f2d139228917deb359e95d755981e025e466c79f609c4051cf","name":"image.png","type":"image/png","lastModified":1632436390184.966,"size":4033}] 2f:{"title":"Art Tools, Part 2A: Observable Basics","cells":[{"id":0,"value":"# Art Tools, Part 2A: Observable Basics","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"## Observable\nThis tutorial assumes basic JavaScript familiarity, but no familiarity with Observable's reactive JS notebook environment. It takes a bit of getting used to, and we won't have time to cover everything, but we'll cover the basics. As a supplement, you may want to see the [Five Minute Introduction](https://observablehq.com/@observablehq/five-minute-introduction) notebook and the rest of the [Notebook Fundamentals](https://observablehq.com/collection/@observablehq/notebook-fundamentals) collection.\n\nObservable notebooks are live, editable documents powered by chunks of code called cells. You can edit & tinker with any code you see, even without an account! But to save your work, sign in & **fork** the notebook to make your own copy.","pinned":false,"hidden":false,"mode":"md"},{"id":345,"value":"### Cell Modes\n\nWhen you create a new cell (+), you'll be given a choice of the [cell mode](https://observablehq.com/@observablehq/cell-modes), i.e. language, of that cell. Click or use the left/right arrow keys to select the mode you want. \n\n![image.png](${await FileAttachment(\"image.png\").url()})\n\nObservable currently supports four modes: JavaScript, Markdown, HTML, and TeX. We won't be using TeX mode today, but let's take a look at the other 3.\n","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"#### Markdown\n\nMarkdown mode lets you quickly add text content to your notebook. See the [Markdown quick reference](https://observablehq.com/@observablehq/markdown-quick-reference) for details.","pinned":true,"hidden":false,"mode":"md"},{"id":33,"value":"

HTML

\n Similarly, HTML mode lets you directly add arbitrary \n HTML \n snippets to your notebooks. We'll use this mode to create SVGs.\n

","pinned":true,"hidden":false,"mode":"html"},{"id":44,"value":"#### JavaScript\nThe primary coding language of Observable notebooks is JavaScript. To create a \"global\" variable, assign a value\nto a variable name in any cell (no need for `const` or `let`):\n","pinned":false,"hidden":false,"mode":"md"},{"id":48,"value":"// Create a globally scoped \"city\" of the city you are currently in\ncity = \"St. Louis\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":368,"value":"Expressions also work:","pinned":false,"hidden":false,"mode":"md"},{"id":357,"value":"year = 2000 + 21","pinned":true,"hidden":false,"mode":"ojs"},{"id":382,"value":"For longer chunks of imperative code, wrap regular old JS code in curly braces (`{}`) and `return` a value:","pinned":false,"hidden":false,"mode":"md"},{"id":394,"value":"hello = {\n const hello = \"hello\";\n let world = \"world\";\n world += \"!\";\n // Return the desired value, because behind the scenes, each JS cell is secretly a function!\n return [hello, world].join(\", \");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":454,"value":"For more details about writing JS code in Observable cells, see [Introduction to Code](https://observablehq.com/@observablehq/introduction-to-code?collection=@observablehq/notebook-fundamentals).","pinned":false,"hidden":false,"mode":"md"},{"id":104,"value":"### Mix and Match\nOne of the powerful aspects of Observable notebooks is the ability to _insert_ JavaScript variables into your Markdown & HTML cells, which under the hood are powered by [JS template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) and support the dollar-sign-curly-braces syntax (`$\\{...}`) for inserting JS expressions. \n\nFor example, see how the variables we defined above are inserted in the cells below.","pinned":false,"hidden":false,"mode":"md"},{"id":52,"value":"I'm currently in ${city} in ${year}...","pinned":true,"hidden":false,"mode":"md"},{"id":421,"value":"

...and I just want to say:\n ${hello}\n

","pinned":true,"hidden":false,"mode":"html"},{"id":62,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":970,"value":"displayCaution(`CHALLENGE\n
\n

Create a new JS cell called \\`name\\` with a string value of your first name\n

Create a new Markdown cell that references \\`name\\` to say \"My name is [your name]\", e.g. \"My name is Anjana\"\n`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":979,"value":"// Create your new cells below","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"### Builtins","pinned":false,"hidden":false,"mode":"md"},{"id":573,"value":"Observable comes out of the box with a [standard library](https://observablehq.com/@observablehq/stdlib?collection=@observablehq/libraries) full of handy built-in utilities you can use from every notebook. \n\nFor example, the `width` variable gives you the current cell width:","pinned":false,"hidden":false,"mode":"md"},{"id":591,"value":"width // Try resizing your browser window & watch it change!","pinned":true,"hidden":false,"mode":"ojs"},{"id":594,"value":"And `now` gives you the current value of `Date.now()`:","pinned":false,"hidden":false,"mode":"md"},{"id":600,"value":"now // This can be useful for animation - we'll see how later!","pinned":true,"hidden":false,"mode":"ojs"},{"id":784,"value":"### Libraries","pinned":false,"hidden":false,"mode":"md"},{"id":641,"value":"Observable also includes some [useful JS libraries](https://observablehq.com/@observablehq/recommended-libraries?collection=@observablehq/libraries) out of the box. These are mostly aimed at wrangling & visualizing data, but some can be useful for art too!\n\nFor example, [Lodash](https://lodash.com/docs) ( `_` ) is handy for working with array data:","pinned":false,"hidden":false,"mode":"md"},{"id":134,"value":"// Create an array of numbers between 0 and 128 with a step size of 10\nrange = _.range(0, 128, 10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":562,"value":"Another often-used builtin library is D3, a powerful data visualization library which can be great for art as well! We won't cover it today, but see [Learn D3](https://observablehq.com/@d3/learn-d3?collection=@d3/learn-d3) to learn more.","pinned":false,"hidden":false,"mode":"md"},{"id":549,"value":"circles = d3\n .create(\"svg\")\n .call((svg) =>\n svg\n .selectAll(\"circle\")\n .data(range)\n .join(\"circle\")\n .attr(\"fill\", d3.scaleSequential(d3.interpolateViridis).domain([128, 0]))\n .attr(\"r\", (d) => 128 - d)\n )\n .node()","pinned":true,"hidden":false,"mode":"ojs"},{"id":568,"value":"### Interactive inputs","pinned":false,"hidden":false,"mode":"md"},{"id":835,"value":"One of the most useful pieces of the standard library is the set of [interactive Inputs](https://observablehq.com/@observablehq/inputs) that come with Observable. When used with the `viewof` keyword, `Inputs` give you a quick way to create HTML input widgets allowing the notebook reader to interactively change a cell's value. \n\nFor example, `Inputs.range()` creates a slider that lets you choose a numeric value within a given range. Here is one named `slider`:","pinned":false,"hidden":false,"mode":"md"},{"id":527,"value":"viewof slider = Inputs.range([0, 10], { step: 1, label: \"Change this value:\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":125,"value":"You can now reference the value of the slider in other cells, like any other cell value (note the automatic updates!):","pinned":false,"hidden":false,"mode":"md"},{"id":578,"value":"slider","pinned":true,"hidden":false,"mode":"ojs"},{"id":582,"value":"*The slider value is currently **${slider}***","pinned":true,"hidden":false,"mode":"md"},{"id":931,"value":"`Inputs.text()` is another handy input that allows you to create text fields like so:","pinned":false,"hidden":false,"mode":"md"},{"id":936,"value":"viewof name = Inputs.text({ placeholder: \"Type your name here\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":939,"value":"\"Hello, \" + name","pinned":true,"hidden":false,"mode":"ojs"},{"id":941,"value":"You can also pass a `type` to `Inputs.text()` for more specific input validation, like a hex color value (very useful for art-ing!):","pinned":false,"hidden":false,"mode":"md"},{"id":865,"value":"viewof color = Inputs.text({\n type: \"color\",\n value: \"#008080\",\n label: \"Pick a color\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":946,"value":"${color} is the prettiest color","pinned":true,"hidden":false,"mode":"html"},{"id":854,"value":"You can open the snippets pane (the ${htl.html``} icon to the right) for a handy way to browse `Inputs` and other commonly used cells and insert them into your notebook.","pinned":false,"hidden":false,"mode":"md"},{"id":995,"value":"displayCaution(`CHALLENGE\n
\n

Create two different range (slider) input cells below \n

Create a third cell whose value is the sum of both sliders\n
\nHint: don't forget viewof!`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1001,"value":"// Create the first slider here","pinned":true,"hidden":false,"mode":"ojs"},{"id":1002,"value":"// Create the second slider here","pinned":true,"hidden":false,"mode":"ojs"},{"id":1004,"value":"// Add their values together here","pinned":true,"hidden":false,"mode":"ojs"},{"id":332,"value":"## Next step\n\n[**Part IIB:** SVG Basics](https://observablehq.com/d/ba772bd123d566d7)","pinned":false,"hidden":false,"mode":"md"},{"id":75,"value":"----------------\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":78,"value":"import { code_styles, displayCaution } from \"@info474/utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"import { display_blobs } from \"@mkfreeman/animated-svg-bezier-blobs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"import { concentric } from \"@mkfreeman/generating-svgs/2\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"code_styles","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":801,"value":"import { svgCoords, viewof cx, viewof cy } from \"22822bf854aba22d\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}