2c:null 2d:["$","title",null,{"children":"Art Tools, Part 1: Overview | Anjana Vakil | Observable"}] 32:[{"id":"12dc88963a319d12b5a031c5224c3c38c17a49980ae3e44efc911ca79d868a84cf197f189cdc9262abb8456e6f44be6fb4c78b614c13c77bd231e4d2e5c3a4b4","href":"https://static.observableusercontent.com/files/12dc88963a319d12b5a031c5224c3c38c17a49980ae3e44efc911ca79d868a84cf197f189cdc9262abb8456e6f44be6fb4c78b614c13c77bd231e4d2e5c3a4b4","name":"art_diagram.png","type":"image/png","lastModified":1632179809875.236,"size":88463},{"id":"0b2c5840535ae56edfc91f917d61336d373372b59b655746a78d361b1dfda8112ac6f8ee39e6e296112c0a2bfa864e331fdba462975c33abe283de10038cbc5d","href":"https://static.observableusercontent.com/files/0b2c5840535ae56edfc91f917d61336d373372b59b655746a78d361b1dfda8112ac6f8ee39e6e296112c0a2bfa864e331fdba462975c33abe283de10038cbc5d","name":"pen_plotting.png","type":"image/png","lastModified":1632179809875.236,"size":5947818},{"id":"c5e08815fc6af6a75faf741948dab6de73e95d13a0a7d37dac4fc7fa04807b781972d26dd2e14ad9c3a25efe4db0ec77606a9f9e32042e1c8178577d1e63f775","href":"https://static.observableusercontent.com/files/c5e08815fc6af6a75faf741948dab6de73e95d13a0a7d37dac4fc7fa04807b781972d26dd2e14ad9c3a25efe4db0ec77606a9f9e32042e1c8178577d1e63f775","name":"triangulate.png","type":"image/png","lastModified":1632179809875.236,"size":1613048}] 30:{"id":"01662c1339932568","slug":"art-tools-part-1-overview","title":"Art Tools, Part 1: Overview","thumbnail":"6b9bb398f4fe6ff446e2127397a9379db2f138505a8b52c9ab6fc21cfe807f85","access_level":"public","create_time":"$D2021-09-20T23:16:49.875Z","update_time":"$D2021-09-30T14:03:32.400Z","view_time":null,"first_public_time":"$D2021-09-30T14:04:23.653Z","has_unpublished_edits":null,"fork":{"id":"8502acbbcf1cd931","slug":"part-1-overview","title":"Part 1: Overview","owner":{"id":"5a7641f443a5ac2c","login":"mkfreeman","name":"Mike Freeman"}},"stars":6,"starred":false,"owner":{"type":"team","id":"8cc6a24956698638","login":"anjana","name":"Anjana Vakil","avatar_url":"https://avatars-next.observableusercontent.com/75f0346d6c6908da9b546556f8d223eceb871857b81263c0d62ed549cc492936","tier":"starter_2024"},"version":392,"publish_version":392,"role":null,"authored":false,"authors":[{"type":"individual","id":"d7d614fa2258860d","login":"anjana","name":"Anjana Vakil","avatar_url":"https://avatars-next.observableusercontent.com/75f0346d6c6908da9b546556f8d223eceb871857b81263c0d62ed549cc492936","tier":null}],"members":[{"type":"individual","id":"d7d614fa2258860d","login":"anjana","name":"Anjana Vakil","avatar_url":"https://avatars-next.observableusercontent.com/75f0346d6c6908da9b546556f8d223eceb871857b81263c0d62ed549cc492936","tier":null,"role":"editor"},{"type":"individual","id":"49edaef976412aba","login":"mkfreeman","name":"Mike Freeman","avatar_url":"https://avatars-next.observableusercontent.com/c41d269cc7b9f5bea7adf2ca109c2b20486a5af02a59df0b162b2fbb33b44a17","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"c7f05ec6ff3b45e0","slug":"building-generative-art-tools-with-observable","title":"Building Generative Art Tools with Observable","owner":{"id":"8cc6a24956698638","login":"anjana","name":"Anjana Vakil"}},"type":"notebook","body":{"titling":"auto","title":"Art Tools, Part 1: Overview","cells":[{"id":0,"value":"md`# Art Tools, Part 1: Overview`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"slide.md(\"intro\")`\n# Building Generative Art Tools with Observable\nMichael Freeman (@mf_viz)\n& \nAnjana Vakil (@AnjanaVakil)\n
\nObservable\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"slide.md(\"bullets\")`\n# Outline\n- **Part I**: Overview\n- **Part II**: Observable + SVG Basics\n- **Part III**: Foundations Practice\n- **Part IV**: Noise and Animation\n- **Part V**: Generating Tools\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"slide.md(\"intro\")`\n# Introductions\n\n- What should we call you? (name, pronouns)\n- Where are you based?\n- What brings you to this workshop?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"slide.md(\"callout\")`\n# Generative art systems are functions that accept user inputs and generate a single output (art).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"slide.html(\"feature\")`\n

Building Generative Art...

\n ${displayImage(pen_plotting_logo, 600, \"Pen Plotting by Mike Freeman\")}\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"slide.html(\"feature\")`\n

...Tools...

\n ${displayImage(\n triangulate_logo,\n 600,\n `Triangulate by Mike Freeman`\n )}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"slide.html(\"feature\")`\n

...with Observable

\n ${displayImage(\n \"https://computationalcreativity.net/tutorials/buildingarttools-iccc20/imgs/molnar.jpg\",\n (width * 9) / 16 / 1.5,\n `Structure de Quadrilatères, 1986.
Vera Molnár`\n )}\n \n

\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"slide.html(\"feature\")`\n ${displayImage(art_diagram, 600, \"Generative Art Systems\")}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"slide.md(\"bullets\")`# Steps for Building Tools\n1. **Start Simple**: Choose a shape (or set of shapes) that you want to render\n2. **Add controls**: Identify different visual attributes of the shapes and create *input* elements to control them\n3. **Inject Randomness**: Allow an attribute of the shapes to be controlled by *randomness*\n4. **Add animation**: Continually update a visual element of your shape.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"slide.md(\"intro\")`\n# Why Observable?\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"slide.md(\"bullets\")`# _Casual Creators_\n#### Kate Compton & Michael Mateas, [2015](https://computationalcreativity.net/iccc2015/proceedings/10_2Compton.pdf)\nDesign patterns for Casual Creator tools:\n- **Modding, hacking, teaching**: all notebooks are editable\n- **Instant feedback** via reactivity\n- **Limit actions to encourage exploration** via parametrized input controls\n- **No blank canvas**: forkable templates & community examples\n- **Hosted community** you can [explore](https://observablehq.com/explore)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"slide.html(\"feature\")``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"slide.html(\"feature\")``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"slide.html(\"feature\")``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"slide.md(\"callout\")`\n## Let's go make some art!\n[**Part IIA**: Observable Basics](https://observablehq.com/d/cc7ca819bfa17f8d)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`-----------\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"displayImage = function (imgUrl, height = 500, caption = \"\") {\n return html`\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"import {\n slide,\n notes,\n style,\n keyBindings,\n divider_color\n} from \"@mkfreeman/slides\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"keyBindings","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"customStyle = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`### Files`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"triangulate_logo = await FileAttachment(\"triangulate.png\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"pen_plotting_logo = await FileAttachment(\"pen_plotting.png\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"art_diagram = await FileAttachment(\"art_diagram.png\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"fullscreen_icon = ``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"