{"id":456,"date":"2021-09-08T11:44:08","date_gmt":"2021-09-08T15:44:08","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/?page_id=456"},"modified":"2021-09-22T10:52:47","modified_gmt":"2021-09-22T14:52:47","slug":"3-foundation","status":"publish","type":"page","link":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/offerings\/3-foundation\/","title":{"rendered":"#3: Lines"},"content":{"rendered":"<p><em>For Next Wednesday, September 15th, this set of prompts has three parts: some skimming, reading, and exercises.<\/em><\/p>\n<hr \/>\n<h3>1. Skimming: Other&#8217;s Practices<\/h3>\n<p><em>Briefly skim<\/em> these four articles to learn about how various creators think about and describe their processes of working with code and plotters. These articles are essentially introductory technical walk-throughs, with &#8220;tips&#8221; and suggestions; you will notice considerable diversity in the artists&#8217; approaches.<\/p>\n<ul>\n<li><em>Skim<\/em> &#8220;<a href=\"https:\/\/tylerxhobbs.com\/essays\/2018\/executing-generative-art-with-a-plotter\">9 Tips to Execute Generative Art with a Plotter<\/a>&#8221; by Tyler Hobbs<\/li>\n<li><em>Skim<\/em> &#8220;<a href=\"https:\/\/liciahe.medium.com\/300-days-with-plotters-14159ab64034\">300 Days with Plotters<\/a>&#8221; by Licia He<\/li>\n<li><em>Skim<\/em> &#8220;Pen Plotter Art &amp; Algorithms,&#8221; <a href=\"https:\/\/mattdesl.svbtle.com\/pen-plotter-1\">Part 1<\/a> and <a href=\"https:\/\/mattdesl.svbtle.com\/pen-plotter-2\">Part 2<\/a> by Matt Deslauriers<\/li>\n<li><em>Skim<\/em> &#8220;<a href=\"https:\/\/medium.com\/@fogleman\/pen-plotter-programming-the-basics-ec0407ab5929\">Pen Plotter Programming: the Basics<\/a>&#8221; by Michael Fogleman<\/li>\n<\/ul>\n<p>N0w,<\/p>\n<ul>\n<li><strong>Create<\/strong> a blog post on this site. <strong>Categorize<\/strong> your post, <em>03-PlotterSkimming<\/em>, and <strong>title<\/strong> it <em>Nickname-PlotterSkimming<\/em>.<\/li>\n<li>Briefly <strong>report<\/strong> on something from one of the above articles that you found interesting and\/or helpful. Two sentences should suffice: a description of what you learned, and why you found it interesting or helpful.<\/li>\n<\/ul>\n<hr \/>\n<h3>2. Reading: <em>Computational Drawing<\/em><\/h3>\n<p><a href=\"http:\/\/lostritto.com\/drawing\">Carl Lostritto<\/a> is a professor of Architecture at RISD whose creative practice centers on the use of pen plotters.<strong>\u00a0Read<\/strong> &#8220;<em>Chapter 1: Definitions&#8221;<\/em> from his book, <em>Computational Drawing,<\/em> from the PDF linked here: <strong><a href=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/lostritto_chapter1.pdf\">lostritto_chapter1.pdf<\/a><\/strong>. <em>Now<\/em>,<\/p>\n<ul>\n<li><strong>Create<\/strong> a blog post on this site. <strong>Categorize<\/strong> it <em>03-LostrittoReading<\/em> and <strong>title<\/strong> it <em>Nickname-LostrittoReading.<\/em><\/li>\n<li><strong>Write<\/strong> 100-150 words of reflection (about a paragraph) on something that struck you from this reading.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/lostritto_chapter1.pdf\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-474 size-large\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/A1kPVSWa3lL-804x1024.jpg\" alt=\"\" width=\"804\" height=\"1024\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/A1kPVSWa3lL-804x1024.jpg 804w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/A1kPVSWa3lL-377x480.jpg 377w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/A1kPVSWa3lL-768x979.jpg 768w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/A1kPVSWa3lL-1205x1536.jpg 1205w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/A1kPVSWa3lL-1607x2048.jpg 1607w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/A1kPVSWa3lL-1200x1529.jpg 1200w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/A1kPVSWa3lL.jpg 2009w\" sizes=\"(max-width: 804px) 85vw, 804px\" \/><\/a><\/p>\n<hr \/>\n<h3>3. Line Exercises<\/h3>\n<p>The purpose of this set of exercises is to ensure that you have a foundation of basic skills in data management and computational geometry. In your preferred programming environment, please do the following eight exercises. <em><strong>Note that two of them (items G and H) require you to export an SVG<\/strong>.<\/em> <em>Now<\/em>:<\/p>\n<ul>\n<li><strong>Create<\/strong> a blog post on this site. <strong>Categorize<\/strong> it <em>03-LineExercises<\/em> and <strong>title<\/strong> it <em>Nickname-LineExercises.<\/em><\/li>\n<li><strong>Include<\/strong> screenshots of each of your exercises. For the two exercises that request it (G and H), please also <strong>include\/embed<\/strong> an SVG.<\/li>\n<li><strong>Embed or link<\/strong>\u00a0your code.<\/li>\n<\/ul>\n<p><strong><span style=\"text-decoration: underline;\">A. Dashed Line<\/span><br \/>\n<\/strong>Write a program that generates a dashed line between two points. (You may not use a \u201cready-made\u201d dashed line, if it exists in your toolkit.) The dashes that comprise your line should always have a fixed length, such as 10 pixels, so that longer lines require more dashes.<\/p>\n<ul>\n<li><strong>Hint<\/strong>: You might find the <a href=\"https:\/\/processing.org\/reference\/map_.html\">map()<\/a> and <a href=\"https:\/\/processing.org\/reference\/lerp_.html\">lerp()<\/a> functions in Processing\/p5 to be helpful.<\/li>\n<li><strong>Extra challenge<\/strong>: can you make a dashed <em>curve<\/em>? The <a href=\"https:\/\/processing.org\/reference\/curvePoint_.html\">curvePoint()<\/a> function could be helpful.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-08-at-12.37.38-PM.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-489\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-08-at-12.37.38-PM.png\" alt=\"\" width=\"297\" height=\"295\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-08-at-12.37.38-PM.png 297w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-08-at-12.37.38-PM-150x150.png 150w\" sizes=\"(max-width: 297px) 85vw, 297px\" \/><\/a><strong><span style=\"text-decoration: underline;\">B. Living Line<\/span><br \/>\n<\/strong>Create an interaction that stores the past 100 mouse positions, and displays them as a polyline. (The oldest points should disappear as new ones are added.) Please write code to store the mouse data in <em>three different ways<\/em>: in two 1D arrays (one for X, one for Y); in one 2D array; and in one 1D array of Objects (such as PVectors).<\/p>\n<p><a href=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-08-at-12.38.54-PM-1.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-488\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-08-at-12.38.54-PM-1.png\" alt=\"\" width=\"295\" height=\"298\" \/><\/a><\/p>\n<p><strong><span style=\"text-decoration: underline;\">C. Spicy Line<\/span><br \/>\n<\/strong>Create a polyline using the past 100 mouse positions, as above. Spice up your polyline by progressively adding some randomness to each point. Over time, the line should become increasingly chaotic. Here&#8217;s a hint: <em>p[i].x += random(-1,1);<\/em><\/p>\n<p><a href=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-08-at-12.39.58-PM.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-482\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-08-at-12.39.58-PM.png\" alt=\"\" width=\"300\" height=\"301\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-08-at-12.39.58-PM.png 300w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-08-at-12.39.58-PM-150x150.png 150w\" sizes=\"(max-width: 300px) 85vw, 300px\" \/><\/a><\/p>\n<p><strong><span style=\"text-decoration: underline;\">D. One Circle, Two Ways<\/span><br \/>\n<\/strong>Plot a circle (from scratch) at least two different ways. For example, you could use the trigonometric functions <em>sin<\/em>() and <em>cos<\/em>() to plot a series of points; approximate a circle with four B\u00e9zier curves; use the square root relationship [e.g. <em>y = sqrt(r\u00b2-x\u00b2)&#8230;.<\/em>]; or construct a circle with \u201cturtle graphics,\u201d using a series of alternating forward steps and small rotations. <em>You may not use a readymade ellipse(), circle(), or arc() command.<\/em><\/p>\n<p><a href=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-08-at-12.48.34-PM.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-478\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-08-at-12.48.34-PM.png\" alt=\"\" width=\"300\" height=\"304\" \/><\/a><\/p>\n<p><strong><span style=\"text-decoration: underline;\">E. Spiral<\/span><br \/>\n<\/strong>Write a program that draws a spiral. Before you begin, research different types of spirals (<a href=\"https:\/\/mathworld.wolfram.com\/Spiral.html\">for example at Mathworld<\/a>), such as <a href=\"https:\/\/mathworld.wolfram.com\/ArchimedesSpiral.html\">Archimedes\u2019s spiral<\/a> (the radius of which grows arithmetically) and the <a href=\"https:\/\/mathworld.wolfram.com\/LogarithmicSpiral.html\">logarithmic or equiangular spiral<\/a> (whose radius grows geometrically). Consider different implementations, such as explicitly plotting your spiral using polar equations, implicitly rendering it by summing small differences (e.g., go forward, turn slightly, repeat), or approximating it piecewise with circular arcs. It may be possible to accomplish this project by modifying one of your circles, from above.<\/p>\n<p><a href=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-08-at-12.50.40-PM.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-480\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-08-at-12.50.40-PM.png\" alt=\"\" width=\"300\" height=\"298\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-08-at-12.50.40-PM.png 300w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-08-at-12.50.40-PM-150x150.png 150w\" sizes=\"(max-width: 300px) 85vw, 300px\" \/><\/a><\/p>\n<p><span style=\"text-decoration: underline;\"><strong>F. Parallel Polyline (Offset Curve)<\/strong><\/span><br \/>\nWrite a program that stores cursor points while a user draws. Connect these points with a polyline (shown in black, below). Use geometry to calculate another polyline, which is offset everywhere from the user\u2019s drawing by a distance of 50 pixels. (<em>How does your code manage the condition in which the user draws a sharp concave angle?<\/em>)<\/p>\n<p><a href=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-08-at-12.58.50-PM-1.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-492\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-08-at-12.58.50-PM-1.png\" alt=\"\" width=\"293\" height=\"300\" \/><\/a><\/p>\n<p><strong><span style=\"text-decoration: underline;\">G. Lines of Different Weights<\/span><br \/>\n<\/strong>Using your hand, paper, and a pen with a uniform (non-chiseled) nib, draw some lines with different weights. Explore how you did this. Now, create a program that produces lines of different weights. Your program should <strong>generate SVGs<\/strong> of those lines, such that the lines will appear to have different weights, <em>when plotted using a pen with a fixed width nib<\/em>, by an AxiDraw plotter. <em>Note: There&#8217;s no one right way to do this, but you will emphatically not be helped by trying to use the Processing\/p5 strokeWeight() command! <\/em>Here are a few (non-exhaustive) suggestions for how you could create lines of different weights:<\/p>\n<ul>\n<li>Draw a dense zig-zag<\/li>\n<li>Draw slightly-offset parallel lines that are closely spaced<\/li>\n<li>Draw a line <em>very slowly<\/em> or <em>very quickly<\/em>, with a pen that bleeds ink<\/li>\n<\/ul>\n<p><a href=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Scan.jpeg\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-large wp-image-495\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Scan-1024x377.jpeg\" alt=\"\" width=\"840\" height=\"309\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Scan-1024x377.jpeg 1024w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Scan-640x236.jpeg 640w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Scan-768x283.jpeg 768w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Scan-1200x442.jpeg 1200w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Scan.jpeg 1300w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n<p><span style=\"text-decoration: underline;\"><strong>H. Calligraphic Polyline<\/strong><\/span><br \/>\nCreate a sketch that stores the past 100 mouse positions. Connect these with a polyline of sorts\u2014but make the apparent thickness (weight) of this polyline inversely proportional to the distance between each pair of recorded cursor points, so that faster movements produce thinner regions of the polyline. <strong><em>Generate an SVG <\/em><\/strong>suitable for plotting with an AxiDraw on letter-size paper.<\/p>\n<p><a href=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-08-at-1.04.40-PM.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-494\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-08-at-1.04.40-PM.png\" alt=\"\" width=\"298\" height=\"288\" \/><\/a><\/p>\n<p>Some helpful Processing (Java) template code:<\/p>\n<pre>\/\/ Processing (Java) program\r\n\/\/ When the user clicks, creates a \r\n\/\/ random squiggle and exports an SVG.\r\n\r\nimport processing.svg.*;\r\nvoid setup() {\r\n  size(800, 800);\r\n}\r\n\r\nvoid draw() {\r\n  background(250);\r\n  int now = millis();\r\n  randomSeed(now);\r\n  beginRecord(SVG, \"foo_\" + now + \".svg\");\r\n  strokeWeight(3);\r\n  noFill();\r\n\r\n  beginShape();\r\n  for (int i=0; i&lt;12; i++) {\r\n    float px = width * random(0.1, 0.9);\r\n    float py = height * random(0.1, 0.9);\r\n    curveVertex(px, py);\r\n  }\r\n  endShape();\r\n  endRecord();\r\n  noLoop();\r\n}\r\n\r\nvoid mousePressed() {\r\n  loop();\r\n}\r\n<\/pre>\n<p>Some helpful p5.js template code:<\/p>\n<pre>\/\/ Tester template for interactive SVG export.\r\n\/\/ Uses https:\/\/github.com\/zenozeng\/p5.js-svg to export SVG.\r\nfunction setup() {\r\n  createCanvas(600, 600, SVG);\r\n}\r\n\r\nfunction draw() {\r\n  clear();\r\n  noFill();\r\n  stroke(0);\r\n  strokeWeight(2);\r\n\r\n  beginShape();\r\n  for (var i = 0; i &lt; 25; i++) {\r\n    var px = random(0, width);\r\n    var py = random(0, height);\r\n    vertex(px, py);\r\n  }\r\n  endShape();\r\n  noLoop();\r\n}\r\n\r\nfunction keyPressed() {\r\n  var now = nf(hour(),2) + nf(minute(),2) + nf(second(),2);\r\n  saveSVG(\"random_lines_\" + now + \".svg\");\r\n}\r\n\r\nfunction mousePressed() {\r\n  loop();\r\n}\r\n<\/pre>\n<p>\u2014<\/p>\n","protected":false},"excerpt":{"rendered":"<p>For Next Wednesday, September 15th, this set of prompts has three parts: some skimming, reading, and exercises. 1. Skimming: Other&#8217;s Practices Briefly skim these four articles to learn about how various creators think about and describe their processes of working with code and plotters. These articles are essentially introductory technical walk-throughs, with &#8220;tips&#8221; and suggestions; &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/offerings\/3-foundation\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;#3: Lines&#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\/456"}],"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=456"}],"version-history":[{"count":14,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/pages\/456\/revisions"}],"predecessor-version":[{"id":1068,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/pages\/456\/revisions\/1068"}],"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=456"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}