{"id":4473,"date":"2020-09-02T12:37:59","date_gmt":"2020-09-02T16:37:59","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/?page_id=4473"},"modified":"2022-02-09T01:02:39","modified_gmt":"2022-02-09T06:02:39","slug":"2-loops-due-9-9","status":"publish","type":"page","link":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/deliverables\/2-loops-due-9-9\/","title":{"rendered":"#2 Living Wallpaper"},"content":{"rendered":"<p>This set of deliverables has 3 parts, and is due Wednesday 9\/9 at the beginning of class:<\/p>\n<ul>\n<li>An optional fun reading about loops;<\/li>\n<li>A brief reading-response;<\/li>\n<li>A brief Looking Outwards<\/li>\n<li>A looping GIF using arcs.<\/li>\n<\/ul>\n<hr \/>\n<h3>0. Optional Fun Reading about Loops<\/h3>\n<p>Check out the article &#8220;<a href=\"https:\/\/www.propublica.org\/nerds\/on-repeat-how-to-use-loops-to-explain-anything\">On Repeat: How to Use Loops to Explain Anything<\/a>&#8221; by Lena V. Groeger, a journalist\/developer\/information-designer at ProPublica. This article is purely for your edification\/entertainment; there&#8217;s no deliverable. It should take about 10-15 minutes to view this elegant stack.<\/p>\n<hr \/>\n<h3>1. Looking Outwards #02: Generative Art Deep Dive<\/h3>\n<p>For each of the following 4 computational artists, spend a solid 5 minutes (each) looking at their generative projects:<\/p>\n<ol>\n<li data-wpview-marker=\"https%3A%2F%2Fwww.instagram.com%2Fhelena.sarin%2F\">Helena Sarin, <a href=\"https:\/\/www.instagram.com\/helena.sarin\/\">instagram<\/a> \u2022 <a href=\"https:\/\/twitter.com\/glagolista\">twitter<\/a><\/li>\n<li>Zachary Lieberman, <a href=\"https:\/\/www.instagram.com\/zach.lieberman\/\">instagram<\/a><\/li>\n<li>Manolo Gamboa Naon, <a href=\"https:\/\/www.behance.net\/manoloide\">behance<\/a><\/li>\n<li>Sofia Crespo, <a href=\"https:\/\/www.instagram.com\/soficrespo91\/\">instagram<\/a><\/li>\n<\/ol>\n<p><em>Now:<\/em><\/p>\n<ul>\n<li><strong>Create<\/strong> a blog post titled <em>nickname-LookingOutwards0<\/em>2<\/li>\n<li><strong>Select<\/strong> one artwork by one of the above three artists that you find appealing or intriguing.<\/li>\n<li><strong>Grab<\/strong> an image of the artwork (use a screengrab if necessary); <strong>embed<\/strong> this image in the post.<\/li>\n<li><strong>Write<\/strong> a sentence about why you selected this project.<\/li>\n<li><strong>Include<\/strong> a link to the project&#8217;s URL.<\/li>\n<li><strong>Categorize<\/strong> your blog post <em>LookingOutwards-02<\/em><\/li>\n<\/ul>\n<hr \/>\n<h3>2. Reading #02: <em>First Word Art, Last Word Art<\/em><\/h3>\n<p>Please read the one-page essay, &#8220;<strong><a href=\"http:\/\/www.naimark.net\/writing\/firstword.html\">First Word Art \/ Last Word Art<\/a><\/strong>&#8221; by Michael Naimark. A backup PDF of this article can be found\u00a0<a href=\"http:\/\/cmuems.com\/2019\/60212\/wp-content\/uploads\/2019\/09\/naimark_reading.pdf\">here<\/a>. You are asked to write a brief (two-paragraph) response to this essay.<\/p>\n<p>Please contemplate\u00a0<em>technical novelty in relation to the arts<\/em>. The author of this reading, Michael Naimark, is a new-media artist who has been active in experimental cinema and virtual reality since the mid-1970s.\u00a0The duality Naimark describes\u00a0is one attempt to understand how culture accommodates new technologies, delineating a spectrum from the well-understood to the utterly novel.<\/p>\n<p>Make a new blog post in this WordPress site. In your\u00a0blog post, please write about 150-200 words reflecting on Naimark&#8217;s\u00a0article. Some possible starting points for your reflection\u00a0could\u00a0include (but are not limited to):<\/p>\n<ul>\n<li>Where do you locate your interests along this spectrum?<\/li>\n<li>What are some ways in which new technologies shape culture?<\/li>\n<li>What are some ways in which culture shapes technological development?<\/li>\n<li>We might aspire to make stuff of lasting importance, but when our work is technologically novel, it doesn&#8217;t always age well. Discuss.<\/li>\n<\/ul>\n<p>When you are done, please give your blog post the\u00a0<strong>title<\/strong>:<em> nickname-Reading02,<\/em>\u00a0and\u00a0<strong>categorize<\/strong>\u00a0your\u00a0blog post with the WordPress category,\u00a0<em>02-Reading<\/em>.<\/p>\n<hr \/>\n<h3>3. Living Wallpaper: A Looping, Animated Environment for Zoom.<\/h3>\n<p>This is the &#8220;main&#8221; part of Deliverables #2, and will be the only part of this week&#8217;s assignment which is critiqued in class. In this project, you will create a looping, animated graphic, and produce this in<strong> two versions<\/strong>:<\/p>\n<ol>\n<li>An animated GIF, uploaded to this site<\/li>\n<li>A video loop which will be used as your background in Zoom during Wednesday&#8217;s class<\/li>\n<\/ol>\n<p><strong><em>Your GIF must be uploaded to this site before the beginning of class Wednesday, 9\/9<\/em><\/strong>. So:<\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li><strong>SKETCH FIRST!<\/strong>\u00a0Before doing\u00a0<em>anything<\/em>, make some (real) sketches in your notebook. Try to develop a\u00a0<em>graphic concept<\/em>.<\/li>\n<li><strong>Your canvas must have 16:9 dimensions. <\/strong>It is recommended that your canvas be <strong>1280&#215;720<\/strong>. <em>Be aware that Zoom has a minimum background size of 640&#215;360.<\/em><\/li>\n<li><strong>Write code<\/strong> which generates a (seamlessly) looping animation. You may use the code template below to get started.<\/li>\n<li>It is recommended that you\u00a0<strong>restrict<\/strong>\u00a0yourself to just a few, well-chosen colors. Remember, an animated GIF must represent all of its frames with a single a palette of just 256 colors. You may find this resource helpful:\u00a0<a href=\"http:\/\/blog.invisionapp.com\/7-tips-for-designing-awesome-gifs\/\">tips for making animated GIFs<\/a>.<\/li>\n<li><strong>Limit the duration<\/strong>\u00a0of your GIF to approximately 30-300 frames long (~1-10 seconds).<\/li>\n<li><strong>Export<\/strong>\u00a0your animation frames from your code computationally (i.e. from code), and then use a tool (such as one of\u00a0<a href=\"http:\/\/cmuems.com\/2019\/60212\/resources\/making-animated-gifs\/\">these<\/a>) to assemble the animated GIF from the frames.\u00a0<em>It is strongly recommended that you NOT use a screencapture program to make your GIF!<\/em>\u00a0Also:\n<ul>\n<li><strong>be sure<\/strong> to design your GIF so that it loops <em>infinitely<\/em>, with a duration of\u00a0<em>forever.<\/em> Make sure it loops without a &#8220;hiccup&#8221;. Please note: If your loop has a hiccup, you will get an &#8220;F&#8221;. Did you read that?<\/li>\n<li><strong>be sure<\/strong>\u00a0to create your GIF so that it plays back at least 20 frames per second (preferably 30 FPS). These are options you can set with proper GIF creation tools. You may need to specify the frame rate using milliseconds per frame (e.g. 30 FPS = 33 ms\/f).<\/li>\n<li><strong>be sure<\/strong>\u00a0your GIF is under 10MB in filesize, preferably under 5MB. You can optimize (compress) your GIF with a tool like\u00a0<a href=\"https:\/\/ezgif.com\/\">https:\/\/ezgif.com\/<\/a>.<\/li>\n<\/ul>\n<\/li>\n<li><strong><em>OH HEY WAIT<\/em>.<\/strong>\u00a0You are\u00a0<strong>required to use<\/strong>\u00a0an\u00a0<em>easing\u00a0function\u00a0<\/em>to create a nuanced articulation of animated form. (Why? because you&#8217;ll learn a\u00a0<em>ton<\/em>.) Select an easing function from\u00a0<a href=\"https:\/\/idmnyu.github.io\/p5.js-func\/\">p5-func<\/a> (p5.js\/JavaScript) 0r the <a href=\"https:\/\/github.com\/golanlevin\/Pattern_Master\">Pattern_Master<\/a> grab-bag (Processing\/Java). These easing functions take a number from 0&#8230;1, and return an <em>altered<\/em>\u00a0number from 0&#8230;1, which has a different character or quality.<\/li>\n<li>In a blog post,\u00a0<strong>upload and embed<\/strong> your animated GIF. Important: Embed the GIF at its original resolution. <em>Be sure not to embed any version that has been automatically resized by WordPress; it will not be animated!<\/em>\u00a0Also important: please upload your GIF\u00a0<strong>directly to\u00a0<em>this WordPress site.\u00a0<\/em><\/strong>GIFs embedded from Giphy or elsewhere in the cloud are\u00a0<em>not acceptable and will receive zero credit.<\/em><\/li>\n<li><strong>Write<\/strong>\u00a0a paragraph about the experience of creating the piece. Which easing function did you select, and why?\u00a0<strong>Critique<\/strong>\u00a0your work: where you feel you succeeded, where you feel you fell short of what you&#8217;d hoped to achieve.<\/li>\n<li>Make sure your project is uploaded to the online editor.p5js.org.<\/li>\n<li><strong>Include<\/strong>\u00a0a scan or photo of your pen-and-paper sketches.<\/li>\n<li><strong>Label<\/strong>\u00a0your blog post with the Category,\u00a0<em>02-LivingWallpaper<\/em>.<\/li>\n<li><strong>Title<\/strong>\u00a0your blog post,\u00a0<em>nickname-LivingWallpaper.<\/em><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<h3><a href=\"https:\/\/github.com\/golanlevin\/LoopTemplates\">Some Help: Code Templates for Generating Looping GIFs<\/a><\/h3>\n<p>Below is a p5.js template for exporting frames to make an animated GIF loop. If you decide to use the template code, you&#8217;ll need to rewrite the <strong>renderMyDesign()<\/strong>\u00a0method, which takes a percentage from 0..1 (<em>NOTE<\/em>: this is not a frame number!) as its argument.<\/p>\n<ul>\n<li><strong><a href=\"https:\/\/github.com\/golanlevin\/LoopTemplates\/tree\/master\/animgif_p5js\">Code template for GIF loop generation, in p5.js at Github<\/a>\u00a0<\/strong>(JavaScript) or at the\u00a0<strong><a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/Skb4OoZdm\">p5.Editor<\/a><\/strong><\/li>\n<\/ul>\n<p>If you&#8217;re using the JavaScript version, in order to export the frames, you&#8217;ll need to set\u00a0<em>bEnableExport<\/em> to true, and you will probably need to be running a local server; for help, see <a href=\"https:\/\/github.com\/processing\/p5.js\/wiki\/Local-server\">this explanation\/instruction Wiki<\/a>\u00a0and this\u00a0<a href=\"https:\/\/www.youtube.com\/watch?v=UCHzlUiDD10\">Shiffman video<\/a>.<\/p>\n<p>The template below exports individual frames. You will need to be resourceful about finding a way to convert these frames into a GIF and into a video for Zoom. EZGif.com has tools to help, such as an <a href=\"https:\/\/ezgif.com\/maker\">image-batch-to-GIF<\/a> maker, and a <a href=\"https:\/\/ezgif.com\/gif-to-mp4\">GIF-to-MP4 converter<\/a>.<\/p>\n<p>Here is an animated GIF, and the code template (in JS and Java) that produced it. Observe how the small pink square is moving\u00a0<em>nonlinearly<\/em>, using one of the\u00a0<a href=\"https:\/\/github.com\/golanlevin\/Pattern_Master\">Pattern_Master<\/a>\u00a0functions. It has some\u00a0<em>character<\/em>!<\/p>\n<p><a href=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2022\/02\/nickname_processing_loop.gif\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-8432\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2022\/02\/nickname_processing_loop.gif\" alt=\"\" width=\"500\" height=\"200\" \/><\/a><\/p>\n<pre>\/\/ This is a template for creating a looping animation in p5.js (JavaScript). \r\n\/\/ When you press the 'F' key, this program will export a series of images into\r\n\/\/ your default Downloads folder. These can then be made into an animated gif. \r\n\/\/ This code is known to work with p5.js version 0.6.0\r\n\/\/ Prof. Golan Levin, 28 January 2018\r\n\r\n\/\/ INSTRUCTIONS FOR EXPORTING FRAMES (from which to make a GIF): \r\n\/\/ 1. Run a local server, using instructions from here:\r\n\/\/    https:\/\/github.com\/processing\/p5.js\/wiki\/Local-server\r\n\/\/ 2. Set the bEnableExport variable to true.\r\n\/\/ 3. Set the myNickname variable to your name.\r\n\/\/ 4. Run the program from Chrome, press 'f'. \r\n\/\/    Look in your 'Downloads' folder for the generated frames.\r\n\/\/ 5. Note: Retina screens may export frames at twice the resolution.\r\n\r\n\r\n\/\/===================================================\r\n\/\/ User-modifiable global variables. \r\nvar myNickname = \"nickname\";\r\nvar nFramesInLoop = 120;\r\nvar bEnableExport = false;\r\n\r\n\/\/ Other global variables you don't need to touch.\r\nvar nElapsedFrames;\r\nvar bRecording;\r\nvar theCanvas;\r\n\r\n\/\/===================================================\r\nfunction setup() {\r\n  theCanvas = createCanvas(500, 200);\r\n  bRecording = false;\r\n  nElapsedFrames = 0;\r\n}\r\n\r\n\/\/===================================================\r\nfunction keyTyped() {\r\n  if (bEnableExport) {\r\n    if ((key === 'f') || (key === 'F')) {\r\n      bRecording = true;\r\n      frameRate(2); \/\/ while we're exporting\r\n      nElapsedFrames = 0;\r\n    }\r\n  }\r\n}\r\n\r\n\/\/===================================================\r\nfunction draw() {\r\n\r\n  \/\/ Compute a percentage (0...1) representing where we are in the loop.\r\n  var percentCompleteFraction = 0;\r\n  if (bRecording) {\r\n    percentCompleteFraction = float(nElapsedFrames) \/ float(nFramesInLoop);\r\n  } else {\r\n    percentCompleteFraction = float(frameCount % nFramesInLoop) \/ float(nFramesInLoop);\r\n  }\r\n\r\n  \/\/ Render the design, based on that percentage. \r\n  \/\/ This function renderMyDesign() is the one for you to change. \r\n  renderMyDesign(percentCompleteFraction);\r\n\r\n  \/\/ If we're recording the output, save the frame to a file. \r\n  \/\/ Note that the output images may be 2x large if you have a Retina mac. \r\n  \/\/ You can compile these frames into an animated GIF using a tool like: \r\n  if (bRecording &amp;&amp; bEnableExport) {\r\n    var frameOutputFilename = myNickname + \"_frame_\" + nf(nElapsedFrames, 4) + \".png\";\r\n    print(\"Saving output image: \" + frameOutputFilename);\r\n    saveCanvas(theCanvas, frameOutputFilename, 'png');\r\n    nElapsedFrames++;\r\n\r\n    if (nElapsedFrames &gt;= nFramesInLoop) {\r\n      bRecording = false;\r\n      frameRate(60);\r\n    }\r\n  }\r\n}\r\n\r\n\/\/===================================================\r\nfunction renderMyDesign(percent) {\r\n  \/\/\r\n  \/\/ THIS IS WHERE YOUR ART GOES. \r\n  \/\/ This is an example of a function that renders a temporally looping design. \r\n  \/\/ It takes a \"percent\", between 0 and 1, indicating where we are in the loop. \r\n  \/\/ Use, modify, or delete whatever you prefer from this example. \r\n  \/\/ This example uses several different graphical techniques. \r\n  \/\/ Remember to SKETCH FIRST!\r\n\r\n  \/\/----------------------\r\n  \/\/ here, I set the background and some other graphical properties\r\n  background(180);\r\n  smooth();\r\n  stroke(0, 0, 0);\r\n  strokeWeight(2);\r\n\r\n  \/\/----------------------\r\n  \/\/ Here, I assign some handy variables. \r\n  var cx = 100;\r\n  var cy = 100;\r\n\r\n  \/\/----------------------\r\n  \/\/ Here, I use trigonometry to render a rotating element.\r\n  var radius = 80;\r\n  var rotatingArmAngle = percent * TWO_PI;\r\n  var px = cx + radius * cos(rotatingArmAngle);\r\n  var py = cy + radius * sin(rotatingArmAngle);\r\n  fill(255);\r\n  line(cx, cy, px, py);\r\n  ellipse(px, py, 20, 20);\r\n\r\n  \/\/----------------------\r\n  \/\/ Here, I use graphical transformations to render a rotated square. \r\n  \/\/ Notice the use of push(), pop(), translate(), etc. \r\n  push();\r\n  translate(cx, cy);\r\n  var rotatingSquareAngle = percent * TWO_PI * -0.25;\r\n  rotate(rotatingSquareAngle);\r\n  fill(255, 128);\r\n  rect(-40, -40, 80, 80);\r\n  pop();\r\n\r\n  \/\/----------------------\r\n  \/\/ Here's a linearly-moving square\r\n  var squareSize = 20;\r\n  var topY = 0 - squareSize - 2;\r\n  var botY = height + 2;\r\n  var sPercent = (percent + 0.5) % 1.0; \/\/ shifted by a half-loop\r\n  var yPosition = map(sPercent, 0, 1, topY, botY);\r\n  fill(255, 255, 255);\r\n  rect(230, yPosition, 20, 20);\r\n\r\n  \/\/----------------------\r\n  \/\/ Here's a sigmoidally-moving pink square!\r\n  \/\/ This uses the \"Double-Exponential Sigmoid\" easing function \r\n  \/\/ ripped from From: https:\/\/idmnyu.github.io\/p5.js-func\/\r\n  \/\/ Really, you should just include this library!!\r\n  var eased = doubleExponentialSigmoid(percent, 0.7);\r\n  eased = (eased + 0.5) % 1.0; \/\/ shifted by a half-loop, for fun\r\n  var yPosition2 = map(eased, 0, 1, topY, botY);\r\n  fill(255, 200, 200);\r\n  rect(260, yPosition2, 20, 20);\r\n\r\n  \/\/----------------------\r\n  \/\/ Here's a pulsating ellipse\r\n  var ellipsePulse = sin(3.0 * percent * TWO_PI);\r\n  var ellipseW = map(ellipsePulse, -1, 1, 20, 50);\r\n  var ellipseH = map(ellipsePulse, -1, 1, 50, 30);\r\n  var ellipseColor = map(ellipsePulse, -1, 1, 128, 255);\r\n  fill(255, ellipseColor, ellipseColor);\r\n  ellipse(350, cy, ellipseW, ellipseH);\r\n\r\n  \/\/----------------------\r\n  \/\/ Here's a traveling sine wave\r\n  stroke(0, 0, 0);\r\n  for (var sy = 0; sy &lt;= height; sy += 4) {\r\n    var t = map(sy, 0, height, 0.0, 0.25);\r\n    var sx = 450 + 25.0 * sin((t + percent) * TWO_PI);\r\n    ellipse(sx, sy, 1, 1);\r\n  }\r\n\r\n  \/\/----------------------\r\n  \/\/ Include some visual feedback. \r\n  fill(255, 0, 0);\r\n  noStroke();\r\n  textAlign(CENTER);\r\n  var percentDisplayString = \"\" + nf(percent, 1, 3);\r\n  text(percentDisplayString, cx, cy - 15);\r\n}\r\n\r\n\r\n\/\/ Symmetric double-element sigmoid function ('_a' is the slope)\r\n\/\/ See https:\/\/github.com\/IDMNYU\/p5.js-func\/blob\/master\/lib\/p5.func.js\r\n\/\/ From: https:\/\/idmnyu.github.io\/p5.js-func\/\r\n\/\/===================================================\r\nfunction doubleExponentialSigmoid(_x, _a) {\r\n  if (!_a) _a = 0.75; \/\/ default\r\n\r\n  var min_param_a = 0.0 + Number.EPSILON;\r\n  var max_param_a = 1.0 - Number.EPSILON;\r\n  _a = constrain(_a, min_param_a, max_param_a);\r\n  _a = 1 - _a;\r\n\r\n  var _y = 0;\r\n  if (_x &lt;= 0.5) {\r\n    _y = (pow(2.0 * _x, 1.0 \/ _a)) \/ 2.0;\r\n  } else {\r\n    _y = 1.0 - (pow(2.0 * (1.0 - _x), 1.0 \/ _a)) \/ 2.0;\r\n  }\r\n  return (_y);\r\n}\r\n<\/pre>\n<p>To get this working, you may find the following video helpful:<\/p>\n<p><iframe title=\"How to export frames (to make an animated GIF loop) from p5.js\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/-HPjv-KVUe0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This set of deliverables has 3 parts, and is due Wednesday 9\/9 at the beginning of class: An optional fun reading about loops; A brief reading-response; A brief Looking Outwards A looping GIF using arcs. 0. Optional Fun Reading about Loops Check out the article &#8220;On Repeat: How to Use Loops to Explain Anything&#8221; by &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/deliverables\/2-loops-due-9-9\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;#2 Living Wallpaper&#8221;<\/span><\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"parent":79,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/pages\/4473"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/comments?post=4473"}],"version-history":[{"count":14,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/pages\/4473\/revisions"}],"predecessor-version":[{"id":8433,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/pages\/4473\/revisions\/8433"}],"up":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/pages\/79"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-json\/wp\/v2\/media?parent=4473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}