{"id":965,"date":"2021-02-24T04:54:24","date_gmt":"2021-02-24T09:54:24","guid":{"rendered":"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/?page_id=965"},"modified":"2021-03-07T16:31:14","modified_gmt":"2021-03-07T21:31:14","slug":"deliverables-04","status":"publish","type":"page","link":"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/deliverables\/deliverables-04\/","title":{"rendered":"Deliverables 04"},"content":{"rendered":"<p><em>This set of Deliverables has four parts, with the following due date structure:<\/em><\/p>\n<ul>\n<li>0. Read the Assignments \u2014 due <em>before<\/em> Monday March 1<\/li>\n<li>1. Reading\/Viewing (Groger) \u2014 due by Monday March 1<\/li>\n<li>2. Viewing\/Research (Artists) \u2014 due by Monday March 1<\/li>\n<li>3. Very Simple Looping Exercise \u2014 due by Monday March 1<\/li>\n<li>4a. Looping GIF \u2014 rough code sketch(es) due Wednesday March 3<\/li>\n<li>4b. Looping GIF \u2014 final due at start of class, Monday March 8.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1013\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/bar-1.png\" alt=\"\" width=\"840\" height=\"25\" srcset=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/bar-1.png 840w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/bar-1-640x19.png 640w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/bar-1-768x23.png 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/p>\n<h3>0. Read the Assignments<\/h3>\n<p>(<strong><em>10 minutes<\/em><\/strong>) I have noticed more than one of you struggling to understand and\/or fulfill the assignments, and then when I asked whether you carefully read the assignment, you were like, &#8220;<em>Umm&#8230; actually&#8230;no<\/em>&#8220;. So this time, students, your first assignment is to &#8230;read the assignments. Carefully. TY.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1013\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/bar-1.png\" alt=\"\" width=\"840\" height=\"25\" srcset=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/bar-1.png 840w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/bar-1-640x19.png 640w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/bar-1-768x23.png 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/p>\n<h3>1. Reading\/Viewing: Loops as Visualizations<\/h3>\n<p><iframe loading=\"lazy\" title=\"THAT&#039;S THE POWER OF LOOPS   Lena Groeger\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/zd0YQAgu3dI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p><strong>(<em>30 minutes<\/em>)<\/strong> Lena V. Groeger is a journalist and designer at ProPublica. According to your preferences, either watch her fun <a href=\"https:\/\/www.youtube.com\/watch?v=zd0YQAgu3dI\">OpenVis conference lecture<\/a>, <strong><em>or<\/em><\/strong> read her article \u201c<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>\u201d, which considers the<em> explanatory power of loops as visualizations<\/em>. (The content of the video and article are essentially the same.)<\/p>\n<p><strong><em>Now:<\/em><\/strong><\/p>\n<ul>\n<li>In a brief blog post of just 2 or 3 sentences, <strong>cite and discuss<\/strong> your favorite part of Groeger&#8217;s presentation. (<em>What did you find interesting, and why?<\/em>)<\/li>\n<li><strong>Include an image<\/strong> if possible and appropriate.<\/li>\n<li><strong>Title<\/strong> your blog post <em>Nickname-LoopReading<\/em>.<\/li>\n<li><strong>Categorize<\/strong> your blog post <em>04-LoopReading<\/em>.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1013\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/bar-1.png\" alt=\"\" width=\"840\" height=\"25\" srcset=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/bar-1.png 840w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/bar-1-640x19.png 640w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/bar-1-768x23.png 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/p>\n<h3>2. Viewing\/Research: Loops As Art<\/h3>\n<p><strong>(<em>30 minutes<\/em>)<\/strong> In this exercise, you are asked to spend time examining GIF projects by Dave Whyte (Bees and Bombs), Cindy Suen, and Andreas Wannerstedt. Please spend 5-10 minutes per artist. You can find their work at these links:<\/p>\n<ul>\n<li>Bees and Bombs (David Whyte): <a href=\"https:\/\/www.instagram.com\/davebeesbombs\/\">Instagram<\/a> \u2022 <a href=\"https:\/\/twitter.com\/beesandbombs\">Twitter<\/a> \u2022 <a href=\"https:\/\/beesandbombs.tumblr.com\/\">Tumblr<\/a><\/li>\n<li>Cindy Suen: <a href=\"https:\/\/cargocollective.com\/cindysuen\">Website<\/a> \u2022 <a href=\"https:\/\/cindysuen.tumblr.com\/\">Tumblr<\/a><\/li>\n<li>Andreas Wannerstedt: <a href=\"https:\/\/andreaswannerstedt.se\/projects\">Website<\/a><\/li>\n<\/ul>\n<p><strong><em>Now:<\/em><\/strong><\/p>\n<ul>\n<li>In a brief blog post, <strong>embed<\/strong> one project by each artist (three embeds total) that caught your attention. Don&#8217;t just pick the first thing you come across, it breaks my heart.<\/li>\n<li>In just a single sentence or two, please <strong>write<\/strong>: <em>What did you find interesting\/successful, and why?<\/em><\/li>\n<li><strong>Title<\/strong> your blog post <em>Nickname-LoopResearch<\/em><\/li>\n<li><strong>Categorize<\/strong> your blog post <em>04-LoopResearch<\/em>.<\/li>\n<\/ul>\n<blockquote class=\"instagram-media\" style=\"background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width: 540px; min-width: 326px; padding: 0; width: calc(100% - 2px);\" data-instgrm-permalink=\"https:\/\/www.instagram.com\/p\/B3dHAHCHSrv\/?utm_source=ig_embed&amp;utm_campaign=loading\" data-instgrm-version=\"13\">\n<div style=\"padding: 16px;\">\n<p>&nbsp;<\/p>\n<div style=\"display: flex; flex-direction: row; align-items: center;\">\n<div style=\"background-color: #f4f4f4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;\"><\/div>\n<div style=\"display: flex; flex-direction: column; flex-grow: 1; justify-content: center;\">\n<div style=\"background-color: #f4f4f4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;\"><\/div>\n<div style=\"background-color: #f4f4f4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;\"><\/div>\n<\/div>\n<\/div>\n<div style=\"padding: 19% 0;\"><\/div>\n<div style=\"display: block; height: 50px; margin: 0 auto 12px; width: 50px;\"><\/div>\n<div style=\"padding-top: 8px;\">\n<div style=\"color: #3897f0; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: 550; line-height: 18px;\">View this post on Instagram<\/div>\n<\/div>\n<div style=\"padding: 12.5% 0;\"><\/div>\n<div style=\"display: flex; flex-direction: row; margin-bottom: 14px; align-items: center;\">\n<div>\n<div style=\"background-color: #f4f4f4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(0px) translateY(7px);\"><\/div>\n<div style=\"background-color: #f4f4f4; height: 12.5px; transform: rotate(-45deg) translateX(3px) translateY(1px); width: 12.5px; flex-grow: 0; margin-right: 14px; margin-left: 2px;\"><\/div>\n<div style=\"background-color: #f4f4f4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(9px) translateY(-18px);\"><\/div>\n<\/div>\n<div style=\"margin-left: 8px;\">\n<div style=\"background-color: #f4f4f4; border-radius: 50%; flex-grow: 0; height: 20px; width: 20px;\"><\/div>\n<div style=\"width: 0; height: 0; border-top: 2px solid transparent; border-left: 6px solid #f4f4f4; border-bottom: 2px solid transparent; transform: translateX(16px) translateY(-4px) rotate(30deg);\"><\/div>\n<\/div>\n<div style=\"margin-left: auto;\">\n<div style=\"width: 0px; border-top: 8px solid #F4F4F4; border-right: 8px solid transparent; transform: translateY(16px);\"><\/div>\n<div style=\"background-color: #f4f4f4; flex-grow: 0; height: 12px; width: 16px; transform: translateY(-4px);\"><\/div>\n<div style=\"width: 0; height: 0; border-top: 8px solid #F4F4F4; border-left: 8px solid transparent; transform: translateY(-4px) translateX(8px);\"><\/div>\n<\/div>\n<\/div>\n<div style=\"display: flex; flex-direction: column; flex-grow: 1; justify-content: center; margin-bottom: 24px;\">\n<div style=\"background-color: #f4f4f4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 224px;\"><\/div>\n<div style=\"background-color: #f4f4f4; border-radius: 4px; flex-grow: 0; height: 14px; width: 144px;\"><\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<p style=\"color: #c9c8cd; font-family: Arial,sans-serif; font-size: 14px; line-height: 17px; margin-bottom: 0; margin-top: 8px; overflow: hidden; padding: 8px 0 7px; text-align: center; text-overflow: ellipsis; white-space: nowrap;\"><a style=\"color: #c9c8cd; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none;\" href=\"https:\/\/www.instagram.com\/p\/B3dHAHCHSrv\/?utm_source=ig_embed&amp;utm_campaign=loading\" target=\"_blank\" rel=\"noopener\">A post shared by Dave Whyte (@davebeesbombs)<\/a><\/p>\n<\/div>\n<\/blockquote>\n<p><script async src=\"\/\/www.instagram.com\/embed.js\"><\/script><\/p>\n<p>E.g. by Cindy Suen:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1006\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/cindy-suen-cubes.gif\" alt=\"\" width=\"400\" height=\"400\" \/><\/p>\n<p>E.g. by Andreas Wannerstedt:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1012\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/andreas_wannerstedt_pendulum.gif\" alt=\"\" width=\"400\" height=\"400\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1013\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/bar-1.png\" alt=\"\" width=\"840\" height=\"25\" srcset=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/bar-1.png 840w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/bar-1-640x19.png 640w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/bar-1-768x23.png 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/p>\n<h3>3. Very Simple Looping Exercise<\/h3>\n<p><strong>(<em>30 minutes max, or <span style=\"text-decoration: underline;\">ASK FOR HELP!<\/span><\/em>)<\/strong>. In this exercise you are asked to reproduce the following animated GIF. You should only need to write <em>just two or three lines of code<\/em>, \u2014 especially since you have been provided with a code template that does everything else for you! You should complete this exercise by Monday, March 1.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1023\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/looping_rounded_rect.gif\" alt=\"\" width=\"400\" height=\"400\" \/><\/p>\n<p>To do this exercise:<\/p>\n<ul>\n<li><strong>Create a &#8220;Duplicate&#8221;<\/strong> (using the p5.js Editor&#8217;s <em>File-&gt;Duplicate<\/em> function, in the upper left menu) of my <a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/KrO8sHSRe\">blank template sketch<\/a>, available here: <a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/KrO8sHSRe\">https:\/\/editor.p5js.org\/golan\/sketches\/KrO8sHSRe<\/a>.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-1078\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-24-at-5.13.42-PM-1024x416.png\" alt=\"\" width=\"840\" height=\"341\" srcset=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-24-at-5.13.42-PM-1024x416.png 1024w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-24-at-5.13.42-PM-640x260.png 640w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-24-at-5.13.42-PM-768x312.png 768w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-24-at-5.13.42-PM-1536x624.png 1536w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-24-at-5.13.42-PM-2048x832.png 2048w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-24-at-5.13.42-PM-1200x488.png 1200w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/li>\n<li><strong>Note<\/strong> that this sketch has been <em>specially configured<\/em> to include the following &#8220;p5.createloop&#8221; add-on library, which automatically generates looping GIFs for us!: <a href=\"https:\/\/www.npmjs.com\/package\/p5.createloop\">https:\/\/www.npmjs.com\/package\/p5.createloop<\/a>. Documentation for that cool library is <a href=\"https:\/\/www.npmjs.com\/package\/p5.createloop#user-content-documentation\">here<\/a>, by the way.<\/li>\n<li>When it&#8217;s time to actually generate the GIF, you&#8217;ll need to<strong> set <em>gif:true<\/em><\/strong> in line 10.<\/li>\n<li>Once you have reproduced the animated GIF, <strong>create<\/strong> a blog post.<\/li>\n<li><strong>Embed<\/strong> your GIF in the blog post and link to your sketch at the Editor.<\/li>\n<li><strong>Title<\/strong> your post<em> Nickname-Exercise04<\/em><\/li>\n<li><strong>Categorize<\/strong> your post <em>04-Exercise<\/em>.<\/li>\n<li>No writing is necessary.<\/li>\n<\/ul>\n<p><strong>Here are some important hints to reproduce this design, oh wow I sure hope you read this:<\/strong><\/p>\n<ul>\n<li>Draw a <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/rect\">rect<\/a>, centered on the canvas,<\/li>\n<li>whose width and height are 200 pixels<\/li>\n<li>The radius of the rect&#8217;s corners is changing over time<\/li>\n<li>(somehow) based on a <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/sin\">sinusoidal function<\/a><\/li>\n<li>of the <em>animLoop.theta<\/em> variable (which is given to you by the add-on library)<\/li>\n<li>so that the rect shape animates from a pure circle to a pure square.<\/li>\n<li>Don&#8217;t forget that the sin() function produces numbers between -1 and 1!<\/li>\n<\/ul>\n<p><a href=\"https:\/\/openprocessing.org\/sketch\/1112902\">This sketch<\/a> (click link to see the code) shows how you can use a sinusoidal function to control a visual property of something, such as position, size, color, or rotation. All that&#8217;s going on here is just mapping the result of a sin() function (whose output goes from -1 to 1) to a new range \u2014 such as 0-255 for grayscale, or -45\u00b0 to 45\u00b0 for rotation.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/openprocessing.org\/sketch\/1112902\/embed\/?plusEmbedHash=N2I1NjhhZGJmMDYxMWFhMTcxOTZlZDc4OGRmNjI3MDg1YmY0OTMzMzhlMTJkMzRhMjFlZWY3MzQ3ZjFlNDVkZGEzOTE1ZmMwMmUxMjlkOWRlNWQ0NjNlZTVlMjcwMDY0ZTAzYTY3NGRmNGNhOGEyZDhjYzdhZThiYzQxNTM3ZDhBODFvY1hNNTFQY09xbkNTVkc5UE85cXZhZVBiWENFOEdOdmVreWZQTmZ4WmJQVlJsVU0yNjhVekVmNFhmbVpMWmZEeUtkZktpb1p0MzdTZUdETzhUUT09&amp;plusEmbedTitle=true\" width=\"840\" height=\"270\"><\/iframe><\/p>\n<p>If you&#8217;d like to understand sine and cosine better, check out this Coding Train video:<\/p>\n<p><iframe loading=\"lazy\" title=\"3.5 Simple Harmonic Motion - Nature of Code\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/m463X1cqV6s?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1013\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/bar-1.png\" alt=\"\" width=\"840\" height=\"25\" srcset=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/bar-1.png 840w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/bar-1-640x19.png 640w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/bar-1-768x23.png 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/p>\n<h3>4. A Seamlessly Looping, Animated, Computationally Generated GIF<\/h3>\n<p><strong>(<em>6 Hours<\/em>)<\/strong><em> In this project, you will create a looping, animated GIF using computationally generated graphics. A preliminary, rough coded sketch for this should be showable (for in-class discussion) by <strong>Wednesday March 3rd<\/strong>, and the final version is due on <strong>Monday, March 8th<\/strong>. <\/em><\/p>\n<p><em>There are several important constraints:<\/em><\/p>\n<ul>\n<li>Your looping gif must be <em>seamless<\/em>. Temporal hiccups or stutters will not be tolerated. Ideally, it should be impossible to determine where your loop &#8220;begins&#8221;.<\/li>\n<li>Your canvas must be <em>square<\/em>, with dimensions of exactly 640&#215;640 pixels.<\/li>\n<li>You are restricted to using <em>no more than 4 colors<\/em>. (You may use fewer if you wish.) I leave unanswered the question as to whether the use of opacity or blend modes produces &#8220;more colors&#8221;. But keep in mind that all GIFs are technologically constrained to using a maximum of 256 colors. Generally, the fewer colors you use, the better the GIF turns out.<\/li>\n<li>You are strictly limited to using the p5.js <em><a href=\"https:\/\/p5js.org\/reference\/#\/p5\/rect\">rect<\/a><\/em>() command. (You may <em>not<\/em> use any other p5.js drawing commands, such as line, arc, triangle, etc.) Keep in mind that the rect() command is quite versatile, owing to its corner-rounding options. Remember that you can also make it skinny (to create line-like shapes), and rotate it into other orientations. Here&#8217;s a (live) demonstration <a href=\"https:\/\/openprocessing.org\/sketch\/1112659\">sketch<\/a>; <span style=\"text-decoration: underline;\"><em>all<\/em><\/span> of these shapes were made exclusively with the <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/rect\"><em>rect<\/em><\/a>() command:<\/li>\n<\/ul>\n<p><iframe loading=\"lazy\" src=\"https:\/\/openprocessing.org\/sketch\/1112659\/embed\/?plusEmbedHash=OWMzMTk2YWQ4ZmI2NGQyYjA3NDI0YmYxZWUzYzA1Mzg3NzkwZWJjNzg0NTNhMWVjOGYwYzMyMzI4ZmNlNWU1ODcyYzZiOWEyZDczMzYwYzJkNzhkOWQ4MTNhODFmNGM5ZmExMWNlOTk3NDNhYjI0Y2EwMTYxMjM5OTA3MmUwZjF3SjdjY2pVdVZpRm5YaEFRWmgzUG9NMEtxK1ZJRGtQbDdtYTlpUEpoYmhvdkFQelBpb3NSYjhJMzdpNFUvY1JYQnMxZmtvUVhEQTNqWTVrdUtWV0wvUT09&amp;plusEmbedTitle=true\" width=\"840\" height=\"330\"><\/iframe><\/p>\n<p><em>Now<\/em>:<\/p>\n<ol>\n<li><strong>SKETCH FIRST!<\/strong>\u00a0Before doing\u00a0<em>anything<\/em>, do some visual thinking in your notebook. Try to develop a <em>graphic concept<\/em>. <em>Another way to get started is to tinker with some sample code, such as the Very Simple Looping Exercise that you already completed!<\/em><\/li>\n<li><strong>Write code<\/strong> which generates a seamlessly looping animation. Be sure to use the p5.createloop addon to make your life easier. The templates below will be helpful.<\/li>\n<li>You are<strong> encouraged to limit the duration<\/strong>\u00a0of your GIF to approximately 30-300 frames long (~1-10 seconds).<\/li>\n<li><em><span style=\"text-decoration: underline;\"><strong>OPTIONAL<\/strong><\/span><\/em>: You are <strong>encouraged 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>.) If you can, select an easing function from <a href=\"https:\/\/idmnyu.github.io\/p5.js-func\/\">p5-func<\/a> (p5.js\/JavaScript).\u00a0These easing functions take a number from 0&#8230;1, and return an\u00a0<em>altered<\/em> number from 0&#8230;1, which has a different character or quality. Note, you&#8217;ll need to add the p5-func library to your sketch.<\/li>\n<li><strong>Export<\/strong> your GIF using the provided code structure.\u00a0<em>Do NOT use a screencapture program to make your GIF!<\/em>\u00a0Also:\n<ul>\n<li><strong>be sure<\/strong> that your GIF loops <em>infinitely<\/em>, with a duration of\u00a0<em>forever.<\/em>\u00a0Make sure it loops\u00a0without a &#8220;hiccup&#8221;.<\/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>In a blog post,\u00a0<strong>upload and embed<\/strong>\u00a0your animated GIF. Important: Embed the GIF at the original resolution of 640&#215;640 pixels.\u00a0<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 on the web are <em>not acceptable.<\/em><\/li>\n<li><strong>Write<\/strong> a paragraph about the experience of creating the piece. <strong>Critique<\/strong> your work: in what ways do 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, and <strong>link<\/strong> to it from your blog.<\/li>\n<li><strong>Include<\/strong>\u00a0a scan or photo of your pen-and-paper sketches.<\/li>\n<li><strong>Categorize<\/strong>\u00a0your blog post with the Category,\u00a0<em>04-Loop<\/em>.<\/li>\n<li><strong>Title<\/strong>\u00a0your blog post,\u00a0<em>nickname-Loop.<\/em><\/li>\n<\/ol>\n<p>For some ideas about how to get started, be sure to look at the <a href=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/daily-notes\/03-03-shaping\/\">simple template projects<\/a> from last week&#8217;s lecture notes.<\/p>\n<p>Here&#8217;s a <a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/KAF80owRC\">template project for a seamless noise loop<\/a>:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1240\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/03\/ad98f619-d906-46d8-8f63-fc2e21e69b3f.gif\" alt=\"\" width=\"640\" height=\"640\" \/><\/p>\n<p>Here&#8217;s a template for <a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/iTE-QYKLZ\">a Lissajous-inspired loop using sin() and cos()<\/a>:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1241\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/03\/65c14805-d42a-4c77-af1f-33e16754f780.gif\" alt=\"\" width=\"640\" height=\"640\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This set of Deliverables has four parts, with the following due date structure: 0. Read the Assignments \u2014 due before Monday March 1 1. Reading\/Viewing (Groger) \u2014 due by Monday March 1 2. Viewing\/Research (Artists) \u2014 due by Monday March 1 3. Very Simple Looping Exercise \u2014 due by Monday March 1 4a. Looping GIF &hellip; <a href=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/deliverables\/deliverables-04\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Deliverables 04&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":15,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-965","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-json\/wp\/v2\/pages\/965","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-json\/wp\/v2\/comments?post=965"}],"version-history":[{"count":10,"href":"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-json\/wp\/v2\/pages\/965\/revisions"}],"predecessor-version":[{"id":1308,"href":"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-json\/wp\/v2\/pages\/965\/revisions\/1308"}],"up":[{"embeddable":true,"href":"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-json\/wp\/v2\/pages\/15"}],"wp:attachment":[{"href":"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-json\/wp\/v2\/media?parent=965"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}