31:[{"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}] 2f:{"title":"Art Tools, Part 1: Overview","cells":[{"id":0,"value":"md`# Art Tools, Part 1: Overview`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":82,"value":"slide.html(\"feature\")`\n ${displayImage(art_diagram, 600, \"Generative Art Systems\")}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":311,"value":"slide.md(\"intro\")`\n# Why Observable?\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":359,"value":"slide.html(\"feature\")``","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"slide.html(\"feature\")``","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"slide.html(\"feature\")``","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":4,"value":"md`-----------\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"displayImage = function (imgUrl, height = 500, caption = \"\") {\n return html`\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":28,"value":"keyBindings","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"style","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"customStyle = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`### Files`","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"triangulate_logo = await FileAttachment(\"triangulate.png\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"pen_plotting_logo = await FileAttachment(\"pen_plotting.png\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"art_diagram = await FileAttachment(\"art_diagram.png\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"fullscreen_icon = ``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}