{"id":111,"date":"2021-09-01T12:44:55","date_gmt":"2021-09-01T16:44:55","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/?page_id=111"},"modified":"2021-09-08T11:39:57","modified_gmt":"2021-09-08T15:39:57","slug":"2-generating-svgs","status":"publish","type":"page","link":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/offerings\/2-generating-svgs\/","title":{"rendered":"#2 Generating SVGs"},"content":{"rendered":"<p><em>This set of three Offerings will be discussed on Wednesday, September 8th at the beginning of class.<\/em><\/p>\n<hr \/>\n<h3>2A. Looking Outwards: #PlotterTwitter<\/h3>\n<p><em>(<strong>30 minutes<\/strong>) The purpose of this prompt is to enhance your familiarity with global practices and an international community of creative people using code to control plotters.<\/em><\/p>\n<p>Over the past few years, a vibrant community of artists, hobbyists, and enthusiasts have begun to publish computationally-generated plotter drawings on Twitter, using the hashtag <em><a href=\"https:\/\/twitter.com\/hashtag\/plottertwitter\">#PlotterTwitter<\/a><\/em>. (These creators have simultaneously been empowered by, and also helped spur the success of, AxiDraw plotters.) Please spend at least 20 minutes browsing the posts in this stream to get a sense of how various people are combining computation and plotter devices. <em>Now<\/em>,<\/p>\n<ul>\n<li><strong>Create<\/strong> a blog post on our course website. <strong>Title<\/strong> your blog post <em>Nickname-PlotterTwitter, <\/em>and <strong>Categorize<\/strong> it <a href=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/category\/02-plottertwitter\/\"><em>02-PlotterTwitter<\/em><\/a>.<\/li>\n<li><strong>Write<\/strong> a few sentences summarizing the kinds of work you saw on <a href=\"https:\/\/twitter.com\/hashtag\/plottertwitter\">#PlotterTwitter<\/a>. What was interesting to you? What was disappointing?<\/li>\n<li><strong>Identify<\/strong> a single (specific) project you liked from the #PlotterTwitter stream. In your blog post, <strong>embed<\/strong> its tweet (and\/or embed an image from a tweet, along with a link to the original tweet).<\/li>\n<li>In another sentence or two, <strong>write<\/strong> what you appreciated about this particular project. Be sure to provide the creator&#8217;s real name and\/or Twitter username.<\/li>\n<\/ul>\n<hr \/>\n<h3>2B. Vera Moln\u00e1r Re-Code<\/h3>\n<p>(<strong><em>1-2 hours<\/em><\/strong>) <em>Copying a masterwork is an established method by which artists learn their practice. The purposes of this prompt are to strengthen your familiarity with a creative coding toolkit (such as p5.js or Processing); to ensure that you are able to generate SVG images (which is an essential skill for nearly all of our work this semester); to exercise your powers of observation and analysis; and to deepen your appreciation for computer art made more than a half-century ago.\u00a0<\/em><\/p>\n<p>Skim <a href=\"https:\/\/www.surfacemag.com\/articles\/vera-molnar-in-thinking-machines-at-moma\/\">this article<\/a> about computer arts pioneer, Vera Moln\u00e1r. In 1970, she created a computationally generated plotter print, <em>A la Recherche de Paul Klee<\/em> (&#8220;Searching for Paul Klee&#8221;), which is now in the The Anne and Michael Spalter Digital Art Collection. Here is the artwork:<\/p>\n<p><a href=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/molnar-klee.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-129\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/molnar-klee.jpg\" alt=\"\" width=\"1779\" height=\"1731\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/molnar-klee.jpg 1779w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/molnar-klee-493x480.jpg 493w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/molnar-klee-1024x996.jpg 1024w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/molnar-klee-768x747.jpg 768w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/molnar-klee-1536x1495.jpg 1536w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/molnar-klee-1200x1168.jpg 1200w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n<p>And here is a detail (<em>click to magnify<\/em>):<\/p>\n<p><a href=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/vera-molnar-paul-klee-plotter1-2000x1333-1.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-130\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/vera-molnar-paul-klee-plotter1-2000x1333-1.jpg\" alt=\"\" width=\"2000\" height=\"1333\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/vera-molnar-paul-klee-plotter1-2000x1333-1.jpg 2000w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/vera-molnar-paul-klee-plotter1-2000x1333-1-640x427.jpg 640w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/vera-molnar-paul-klee-plotter1-2000x1333-1-1024x682.jpg 1024w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/vera-molnar-paul-klee-plotter1-2000x1333-1-768x512.jpg 768w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/vera-molnar-paul-klee-plotter1-2000x1333-1-1536x1024.jpg 1536w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/vera-molnar-paul-klee-plotter1-2000x1333-1-1200x800.jpg 1200w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n<p><em>Now:\u00a0<\/em><\/p>\n<ul>\n<li>Spend some time <em>carefully<\/em> <strong>examining<\/strong> Molnar&#8217;s artwork.<\/li>\n<li>From your observations, <strong>write<\/strong> down at least ten factual assertions that you can make about the work. Here are some example observations:\n<ol>\n<li><em>The artwork consists of an axis-aligned grid of square and rectangular cells<\/em><\/li>\n<li><em>Some cells are empty, and some have diagonal lines<\/em><\/li>\n<li><em>The diagonal lines are black<\/em><\/li>\n<li><em>The diagonal lines within a cell are parallel<\/em><\/li>\n<li><em>The diagonal lines within a cell are equally spaced<\/em><\/li>\n<li><em><em>Etcetera&#8230;<\/em><\/em><\/li>\n<\/ol>\n<\/li>\n<li>Using Java, JavaScript, or Python code, <strong>re-create<\/strong> this work (<em>or more precisely<\/em>: Create a generative system that produces images <em>similar to<\/em> Moln\u00e1r&#8217;s, with what you believe are the same design logics). You will find it helpful to use a toolkit such as Processing, p5.js, vpype\/vsketch, Drawbot, etc. Your program <strong>must generate SVG images<\/strong>; more information on generating SVGs is <a href=\"https:\/\/github.com\/golanlevin\/DrawingWithMachines\/tree\/main\/generating_svg\">available here<\/a>.<\/li>\n<li><strong>Create<\/strong> a blog post on this site. <strong>Title<\/strong> it <em>Nickname-MolnarRecode<\/em> and <strong>Categorize<\/strong> it, <em>02-MolnarRecode<\/em>.<\/li>\n<li>In your blog post, <strong>include<\/strong> your 10 observations about the original artwork.<\/li>\n<li>In your blog post, <strong>embed<\/strong> your SVG file.<\/li>\n<li>In your blog post, <strong>embed<\/strong> a (pixel) screenshot of your work as well.<\/li>\n<li>In your blog post, <strong>write<\/strong> a few sentences evaluating your work and discussing your experience.<\/li>\n<li>In your blog post, <strong>embed<\/strong> your code. Use the <a href=\"https:\/\/www.w3schools.com\/tags\/tag_pre.asp\">HTML pre tag<\/a> to ensure good formatting.<\/li>\n<\/ul>\n<hr \/>\n<h3>2C. Taking A Line for A Walk.<\/h3>\n<p><em>(2-5 hours) In this prompt, I&#8217;m knowingly throwing you out into the deep end of the pool. Your responses to this prompt will help me better understand your creative and technical skills. The learning objectives of this prompt are to exercise your conceptual, aesthetic, and computational skills in governing a &#8216;basic&#8217; graphical form (a single line).\u00a0<\/em><\/p>\n<p>You will recall <a href=\"https:\/\/monoskop.org\/images\/0\/07\/Klee_Paul_Pedagogical_Sketchbook_1953.pdf\">Paul Klee&#8217;s <em>Pedagogical Sketchbook<\/em><\/a> (PDF; 1925), in which he proposed that &#8220;a line is a dot that went for a walk&#8221;.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/klee1.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-451\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/klee1.jpg\" alt=\"\" width=\"1240\" height=\"790\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/klee1.jpg 1240w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/klee1-640x408.jpg 640w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/klee1-1024x652.jpg 1024w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/klee1-768x489.jpg 768w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/klee1-1200x765.jpg 1200w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n<p>Klee&#8217;s statement has been very influential, and has become a common prompt for students, such as this assignment for grade-schoolers:<\/p>\n<p><iframe loading=\"lazy\" title=\"Take a Line for a Walk | Step-By-Step Lesson (1st grade, 2nd grade, 3rd grade, 4th grade)\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/2kPu7ndVZEo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<p>The artwork\u00a0<em><a href=\"http:\/\/www.liaworks.com\/theprojects\/sum05\/\">Sum05<\/a><\/em>\u00a0by Austrian software artist (2005), Lia (at left) and the artwork\u00a0<em><a href=\"http:\/\/reas.com\/path_p\/\">Path_P<\/a><\/em>\u00a0by Casey Reas (2001), are examples of this.<\/p>\n<p><a href=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/walks.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-453\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/walks.jpg\" alt=\"\" width=\"1024\" height=\"402\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/walks.jpg 1024w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/walks-640x251.jpg 640w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/walks-768x302.jpg 768w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n<p>Here, you are invited to make an Offering in which you take a line for a walk. <strong>Please write code that takes a line on a walk, and exports an SVG image. <\/strong><\/p>\n<p><em>We will plot these SVGs using 0.7mm black pens on letter-sized white paper on Wednesday September 8. There is no color in this project. <\/em><\/p>\n<p><em>Now:<\/em><\/p>\n<ul>\n<li><strong>Write<\/strong> code to take a line on an interesting walk. Your code may be written in any programming language you prefer (e.g. Java, JS, Python, etc.) and should export an SVG that consists of exactly one line. This line could be zig-zag, wavy, curly, wiggly, noisy, etcetera. (<em>Unlike the video above, you may choose to start and end your line at the same point, or start and end your line at opposite corners of the page. Unlike the video above, you may also choose to allow your line to cross itself, or not.<\/em>)<\/li>\n<li><strong>Create<\/strong> a blog post on this site. <strong>Title<\/strong> it <em>Nickname-LineWalk<\/em>, and <strong>Categorize<\/strong> it, <em>02-LineWalk<\/em>.<\/li>\n<li>In your blog post, <strong>export<\/strong> an SVG and <strong>embed<\/strong> your SVG into your blog post.<\/li>\n<li>In your blog post, <strong>embed<\/strong> a screenshot of your project.<\/li>\n<li>In your blog post, <strong>write<\/strong> a few sentences that describe your approach, what you struggled with, and what you learned.<\/li>\n<li>In your blog post, <strong>embed<\/strong> your code. Use the HTML pre tag to ensure good formatting.<\/li>\n<\/ul>\n<p><em>It should be clear that there is no correct answer to this prompt. <\/em>There are an infinity of possible approaches to generate an interesting line, and there is absolutely no preferred or recommended method. The <em>Coding Train<\/em> offers some possible starting points, which I neither endorse nor reject:<\/p>\n<p><iframe loading=\"lazy\" title=\"Coding Challenge #52: Random Walker\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/l__fEY1xanY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"Coding Challenge #53: Random Walker with Vectors and L\u00e9vy Flight\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/bqF9w9TTfeo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"Coding Challenge 162: Self-Avoiding Walk\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/m6-cm6GZ1iw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"Coding Challenge #35.1: Traveling Salesperson\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/BAejnwN4Ccw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"Coding Challenge 51.1: A* Pathfinding Algorithm - Part 1\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/aKYlikFAV4k?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This set of three Offerings will be discussed on Wednesday, September 8th at the beginning of class. 2A. Looking Outwards: #PlotterTwitter (30 minutes) The purpose of this prompt is to enhance your familiarity with global practices and an international community of creative people using code to control plotters. Over the past few years, a vibrant &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/offerings\/2-generating-svgs\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;#2 Generating SVGs&#8221;<\/span><\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"parent":19,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/pages\/111"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/comments?post=111"}],"version-history":[{"count":13,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/pages\/111\/revisions"}],"predecessor-version":[{"id":454,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/pages\/111\/revisions\/454"}],"up":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/pages\/19"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/media?parent=111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}