{"id":504,"date":"2021-02-15T00:02:41","date_gmt":"2021-02-15T05:02:41","guid":{"rendered":"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/?page_id=504"},"modified":"2021-02-22T14:03:41","modified_gmt":"2021-02-22T19:03:41","slug":"deliverables-03","status":"publish","type":"page","link":"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/deliverables\/deliverables-03\/","title":{"rendered":"Deliverables 03"},"content":{"rendered":"<p>This set of Deliverables is due at the beginning of class on <strong>Wednesday, February 24 <\/strong><em>(REVISED DUE DATE).<\/em> It has the following parts:<\/p>\n<ol>\n<li>Five Small Technical Exercises<\/li>\n<li>Readings + Response: Color<\/li>\n<li>Generative Pattern (Wallpaper)<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-723\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/bar.png\" alt=\"\" width=\"840\" height=\"25\" srcset=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/bar.png 840w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/bar-640x19.png 640w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/bar-768x23.png 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/p>\n<h3>1. Five Small Technical Exercises<\/h3>\n<p><em>The purpose of the following 5 exercises is to ensure that you have mastered certain technical skills, and that you are familiar with specific commands and\/or code structures. Kindly follow the instructions as carefully as possible. Time will be reserved during class work-sessions to work on this.<\/em><\/p>\n<ul>\n<li><strong>Create<\/strong> one single blog post to collectively document all of the exercises in this section.<\/li>\n<li><strong>Title<\/strong> this blog post, <em>Nickname-Exercises03<\/em>.<\/li>\n<li><strong>Categorize<\/strong> this blog post, <em>03-Exercises<\/em>.<\/li>\n<li>There are 5 small exercises:<\/li>\n<li>Iteration: Seven Circles<\/li>\n<li>Variables: A Parametric Triangle<\/li>\n<li>Transformations + Functions: Critter<\/li>\n<\/ul>\n<hr \/>\n<h5>1A. Iteration: Seven Circles<\/h5>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-508\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/7circles-1.png\" alt=\"\" width=\"400\" height=\"200\" \/><\/p>\n<p><em>The purpose of this exercise is to ensure that you are familiar with basic iteration. In a sketch at <a href=\"https:\/\/editor.p5js.or\">editor.p5js.org<\/a>, reproduce the figure above, as follows:<\/em><\/p>\n<ul>\n<li>The canvas has dimensions of <strong>400 x 200<\/strong> pixels, and is filled with a &#8220;lightgray&#8221; background.<\/li>\n<li>All figures are drawn with a black, 3-pixel-thick stroke and a white fill.<\/li>\n<li>There are seven circles, which are each 40 pixels in diameter. They should be rendered iteratively, using a structure such as a <em>for<\/em>\u00a0loop. You can find out more about <em>for<\/em> loops in this <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/for\">reference<\/a>; this <a href=\"https:\/\/happycoding.io\/tutorials\/p5js\/for-loops\">tutorial<\/a>; and this <a href=\"https:\/\/www.youtube.com\/watch?v=cnRD9o6odjk&amp;t=1s\">Coding Train video<\/a> (14m).<\/li>\n<li>If you are already familiar with <em>for<\/em> loops, then use a <em>while<\/em> or <em>do\/while<\/em> loop, as discussed in <a href=\"https:\/\/p5js.org\/learn\/program-flow.html\">this tutorial<\/a>\u00a0or <a href=\"https:\/\/www.youtube.com\/watch?v=cnRD9o6odjk\">this Coding Train video<\/a>.<\/li>\n<li>The centers of the circles are positioned (vertically) at half the height of the canvas. This should always remain true, even if the dimensions of the canvas are changed.<\/li>\n<li>The centers of the circles are spaced (horizontally) every 50 pixels, starting at 50 pixels across. There should not be any circle overlapping the edge of the canvas.<\/li>\n<li>In your blog post, <strong>embed<\/strong> a screen capture of your sketch, and <strong>embed<\/strong> a link to your Editor code.<\/li>\n<\/ul>\n<hr \/>\n<h5>1B. Variables: A Parametric Triangle<\/h5>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-520\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/variable.png\" alt=\"\" width=\"400\" height=\"400\" srcset=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/variable.png 400w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/variable-150x150.png 150w\" sizes=\"auto, (max-width: 400px) 85vw, 400px\" \/> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-521\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/triangle-variables.gif\" alt=\"\" width=\"400\" height=\"400\" \/><\/p>\n<p><em>The purpose of this exercise is to ensure that you are familiar with declaring a variable, and how to use it to create a simple parametric form (e.g., a triangle articulated by a single variable). In a sketch at <a href=\"https:\/\/editor.p5js.or\">editor.p5js.org<\/a>, reproduce the figure in the above left, as follows:<\/em><\/p>\n<ul>\n<li>The canvas has dimensions of <strong>400 x 400<\/strong> pixels, and is filled with a &#8220;lightgray&#8221; background.<\/li>\n<li>A triangle is drawn with a black, 3-pixel-thick stroke, a white fill, <em>and rounded corners<\/em>.<\/li>\n<li>You are <em>not<\/em> asked to draw the red elements; they are a &#8220;debug view&#8221; to help you understand the problem.<\/li>\n<li>Declare a variable called D, and assign it the value of a random number between 75 and 125. This variable D should be the only user-defined variable in your program. If you would like to learn more about variables, see the following: <a href=\"https:\/\/p5js.org\/examples\/data-variables.html\">Example<\/a>;\u00a0<a href=\"https:\/\/www.youtube.com\/watch?v=Bn_B3T_Vbxs\">Coding Train video<\/a>\u00a0(12m);\u00a0<a href=\"https:\/\/happycoding.io\/tutorials\/p5js\/creating-variables\">Tutorial 1<\/a>,\u00a0<a href=\"https:\/\/happycoding.io\/tutorials\/p5js\/using-variables\">Tutorial 2<\/a>.<\/li>\n<li>The vertices of the triangle should be located according to the red elements in the diagram above, which shows their relationships. (<em>Note<\/em>: the left edge of the triangle is purely vertical.). Your triangle should retain these relationships to the edges of he canvas, even if the dimensions of the canvas were modified.<\/li>\n<li>In your blog post, <strong>embed<\/strong> a screen capture image of your sketch, and <strong>embed<\/strong> a link to your Editor code.<\/li>\n<\/ul>\n<hr \/>\n<h5>1C. Transformations + Functions: Critter<\/h5>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-547\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/critter-stamps.gif\" alt=\"\" width=\"400\" height=\"400\" \/><\/p>\n<p><em>The purpose of this exercise is to ensure that you are familiar with creating your own functions, and to give you more practice using graphic transformations. In a sketch at <a href=\"https:\/\/editor.p5js.or\">editor.p5js.org<\/a>, reproduce the figure above, as follows:<\/em><\/p>\n<ul>\n<li>At the p5.js Editor, create a sketch whose dimensions are <strong>400 x 400<\/strong> pixels.<\/li>\n<li>In your sketch,<strong> create a function<\/strong> called <em>drawCreature<\/em>. It should render a simple creature consisting of a 150 x 50 pixel rectangle, with an eye and mouth at one end. (These eye and mouth features will help ensure that the creature is facing in the correct direction). I&#8217;m using a 3-pixel thick black line, and a white fill, but you don&#8217;t have to.<\/li>\n<li>You may find it helpful to use the <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/rectMode\">rectMode<\/a>(CENTER) command, though you are not required to do so. Here&#8217;s the rectMode() <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/rectMode\">reference<\/a>; and here&#8217;s a 2-minute <a href=\"https:\/\/www.youtube.com\/watch?v=F7iRdN50jf8\">demo video<\/a>.<\/li>\n<li>Modify your function so that it takes three arguments, respectively: the (x,y) pixel location of the center of the creature, and a rotation angle (in <em>radians<\/em>), which will govern the amount that the creature is rotated about its center point.<\/li>\n<li>Call your function so that it draws three copies of the creature, at the locations shown in the red overlays above. The <em>draw()<\/em> function of your sketch should look <em>exactly<\/em> like the code shown below: nothing less, and nothing more. (You are <em>not<\/em> expected to draw the red overlay; that&#8217;s a &#8220;debug view&#8221; to clarify the task.)\n<pre>function setup(){\r\n  createCanvas(400, 400);\r\n}\r\n\r\nfunction draw() {\r\n  background (220);\r\n  drawCreature (100, 100, radians(0));\r\n  drawCreature (300, 100, radians(-45));\r\n  drawCreature (200, 300, radians(10));\r\n}\r\n\r\nfunction drawCreature ( ? ? ? ? ? ? ...<\/pre>\n<\/li>\n<li>In your blog post, <strong>embed<\/strong> a screen capture image of your sketch, and <strong>embed<\/strong> a link to your Editor code.<\/li>\n<\/ul>\n<hr \/>\n<h5>1D. Nested Iteration With Functions: Repeated Motif<\/h5>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-531\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/iteration_with_functions-1.png\" alt=\"\" width=\"400\" height=\"400\" srcset=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/iteration_with_functions-1.png 400w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/iteration_with_functions-1-150x150.png 150w\" sizes=\"auto, (max-width: 400px) 85vw, 400px\" \/><\/p>\n<p><em>The purpose of this exercise is to ensure that you are familiar with nested iteration, and to give you more practice creating your own functions.\u00a0<\/em><\/p>\n<ul>\n<li>At the p5.js Editor, create a sketch whose dimensions are <strong>400 x 400<\/strong> pixels.<\/li>\n<li><strong>Write a function<\/strong> that encapsulates the code to render a simple visual motif, such as a leaf, face, car, strawberry, etc. You may use any colors and shapes you please; you do <em>not<\/em> need to copy the face motif shown here. (<em>For more information on creating your own functions, you may refer to <a href=\"https:\/\/www.youtube.com\/watch?v=wRHAitGzBrg\">Coding Train video 1<\/a> (12m),\u00a0<a href=\"https:\/\/www.youtube.com\/watch?v=zkc417YapfE\">Coding Train video 2<\/a> (10m), this <a href=\"https:\/\/p5js.org\/examples\/structure-functions.html\">Example<\/a>, or this <a href=\"https:\/\/happycoding.io\/tutorials\/p5js\/creating-functions\">Tutorial<\/a>.<\/em>)<\/li>\n<li><strong>Give your function arguments<\/strong> that determine where the element will be positioned when the function is invoked. Using iteration, call your function to display a grid of these elements.<\/li>\n<li>In your blog post, <strong>embed<\/strong> a screen capture image of your sketch, and <strong>embed<\/strong> a link to your Editor code.<\/li>\n<\/ul>\n<hr \/>\n<h5>1E. Nested Iteration + Randomness Gradient: Recoding <em>Schotter<\/em> (1968)<\/h5>\n<p><em>The purpose of this integrative assignment is to combine problems in nested iteration and graphical transformations, and introduce experience developing a gradient.\u00a0<\/em><\/p>\n<pre style=\"padding-left: 40px;\">Perhaps you are wondering why artists copy paintings in museums, as I am doing. The answer is to study, to learn, and to find inspiration from the great masters of the past. Copying directly from works of art gives the artists insight into the creative process \u2014 insights which cannot be learned from any other source. \u2014Gerald King<\/pre>\n<p>In February 1965, Georg Nees (1926\u20132016) became the first person to ever exhibit artwork created with a computer. His programs were written on punched paper tape before being physically generated by a drawing machine, the Zuse Graphomat Z64. (His exhibit &#8220;aroused much controversy.&#8221;)<\/p>\n<p>In this exercise, we will hone our skills by copying a masterwork. You are are asked to recreate Nees&#8217; artwork <em>Schotter<\/em> (&#8220;Gravel&#8221;, 1968), <a href=\"http:\/\/collections.vam.ac.uk\/item\/O221321\/schotter-print-nees-georg\/\" target=\"_blank\" rel=\"noopener\">in the collection<\/a> of the Victoria &amp; Albert Museum, London. In this work, Nees presents a grid of 12 by 22 squares which delineate a gradient from <em>order<\/em>\u00a0to\u00a0<em>disorder<\/em>. As the drawing of the squares progresses from top to bottom, the position and rotation of the squares become increasingly disordered.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-552\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/9dca5e05790353271449f64e505ad0dee00d8f8e-1875x2500-1-768x1024.jpg\" alt=\"\" width=\"768\" height=\"1024\" srcset=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/9dca5e05790353271449f64e505ad0dee00d8f8e-1875x2500-1-768x1024.jpg 768w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/9dca5e05790353271449f64e505ad0dee00d8f8e-1875x2500-1-360x480.jpg 360w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/9dca5e05790353271449f64e505ad0dee00d8f8e-1875x2500-1-1152x1536.jpg 1152w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/9dca5e05790353271449f64e505ad0dee00d8f8e-1875x2500-1-1536x2048.jpg 1536w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/9dca5e05790353271449f64e505ad0dee00d8f8e-1875x2500-1-1200x1600.jpg 1200w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/9dca5e05790353271449f64e505ad0dee00d8f8e-1875x2500-1.jpg 1875w\" sizes=\"auto, (max-width: 768px) 85vw, 768px\" \/><\/p>\n<ul>\n<li>At the p5.js Editor, <strong>create a sketch<\/strong> whose dimensions are 680 x 1000.<\/li>\n<li>To the best of your abilities, <strong>write a program<\/strong> which recreates the logic and aesthetics of <em>Schotter<\/em>. Pay attention to details like the number and size of squares, their amount of displacement, and the proportions of the margins. (Note: you are <em>not<\/em> expected to reproduce the specific positions and rotations of each square in Nees&#8217; artwork).<\/li>\n<li>In your blog post, <strong>embed<\/strong> a screen capture image of your sketch, and <strong>embed<\/strong> a link to your Editor code.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-723\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/bar.png\" alt=\"\" width=\"840\" height=\"25\" srcset=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/bar.png 840w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/bar-640x19.png 640w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/bar-768x23.png 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/p>\n<h3>2. Readings &amp; Response: Color<\/h3>\n<p>Please read the following two brief articles about color in generative art:<\/p>\n<ul>\n<li>Tyler Hobbs, <a href=\"https:\/\/tylerxhobbs.com\/essays\/2021\/color-arrangement-in-generative-art\"><em>Color in Generative Art<\/em><\/a><\/li>\n<li>Rune Madsen, <a href=\"https:\/\/programmingdesignsystems.com\/color\/color-models-and-color-spaces\/index.html\"><em>Color Models and Color Spaces<\/em><\/a><\/li>\n<\/ul>\n<p>Now:<\/p>\n<ul>\n<li><strong>Create<\/strong> a blog post entitled <em>Nickname-Readings03<\/em>, and categorized <em>03-Readings<\/em><\/li>\n<li>In 50-100 words, <strong>briefly discuss<\/strong> one thing which struck you as helpful new information.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-723\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/bar.png\" alt=\"\" width=\"840\" height=\"25\" srcset=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/bar.png 840w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/bar-640x19.png 640w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/bar-768x23.png 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/p>\n<h3>3. Generative Pattern (Wallpaper)<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-662\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-16-at-6.57.07-PM.png\" alt=\"\" width=\"200\" height=\"200\" srcset=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-16-at-6.57.07-PM.png 200w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-16-at-6.57.07-PM-150x150.png 150w\" sizes=\"auto, (max-width: 200px) 85vw, 200px\" \/> \u00a0 <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-663\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-16-at-6.56.50-PM.png\" alt=\"\" width=\"200\" height=\"200\" srcset=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-16-at-6.56.50-PM.png 200w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-16-at-6.56.50-PM-150x150.png 150w\" sizes=\"auto, (max-width: 200px) 85vw, 200px\" \/>\u00a0 \u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-664\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-16-at-6.59.03-PM.png\" alt=\"\" width=\"200\" height=\"200\" srcset=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-16-at-6.59.03-PM.png 200w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-16-at-6.59.03-PM-150x150.png 150w\" sizes=\"auto, (max-width: 200px) 85vw, 200px\" \/>\u00a0 \u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-665\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-16-at-6.59.30-PM.png\" alt=\"\" width=\"200\" height=\"200\" srcset=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-16-at-6.59.30-PM.png 200w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-16-at-6.59.30-PM-150x150.png 150w\" sizes=\"auto, (max-width: 200px) 85vw, 200px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-666\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-16-at-7.00.25-PM.png\" alt=\"\" width=\"200\" height=\"200\" srcset=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-16-at-7.00.25-PM.png 200w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-16-at-7.00.25-PM-150x150.png 150w\" sizes=\"auto, (max-width: 200px) 85vw, 200px\" \/> \u00a0 <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-667\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-16-at-7.00.45-PM.png\" alt=\"\" width=\"200\" height=\"200\" srcset=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-16-at-7.00.45-PM.png 200w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-16-at-7.00.45-PM-150x150.png 150w\" sizes=\"auto, (max-width: 200px) 85vw, 200px\" \/> \u00a0 <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-668\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-16-at-7.03.06-PM.png\" alt=\"\" width=\"200\" height=\"200\" srcset=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-16-at-7.03.06-PM.png 200w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-16-at-7.03.06-PM-150x150.png 150w\" sizes=\"auto, (max-width: 200px) 85vw, 200px\" \/> \u00a0 <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-669\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-16-at-7.02.36-PM.png\" alt=\"\" width=\"200\" height=\"200\" srcset=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-16-at-7.02.36-PM.png 200w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-16-at-7.02.36-PM-150x150.png 150w\" sizes=\"auto, (max-width: 200px) 85vw, 200px\" \/><\/p>\n<p><em>Images by <a href=\"https:\/\/sasj.nl\/portfolio\/\">Saskia Freeke<\/a>.<\/em><\/p>\n<div class=\"page\" title=\"Page 26\">\n<div class=\"layoutArea\">\n<div class=\"column\">\n<p><em>Pattern is the starting point from which we perceive and impose order in the world. Examples of functional, decorative, and expressive pattern-making date from ancient times and take the form of mosaics, calendars, tapestry, quilting, jewelry, calligraphy, furniture, and architecture. There is an intimate connection between pattern design, visual rhythm, geometry, mathematics, and iterative algorithms. This assignment invites you to hone your understanding of these relationships in formal terms.<\/em><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>Write code to generate &#8220;infinite&#8221; variations of a tiling pattern or repetitive textural composition, as for wallpaper or fabric. Your pattern should be designed so that it could be infinitely tiled or extended. Design something you would like to put on the walls or floor of your home, or that you could imagine yourself wearing. Export your pattern in a high-resolution format with provided code.<\/p>\n<h5>Suggestions<\/h5>\n<p><em>Give consideration to:<\/em><\/p>\n<ul>\n<li>Symmetry, whether achieved through reflection or rotation. Experiment with 2D graphics transformations, such as rotation, scaling, and mirror reflections<\/li>\n<li>Rhythm. Try using nested iteration to develop 2D patterns or other gridlike structures<\/li>\n<li>Positive vs. negative space<\/li>\n<li>Foreground, middle-ground, and background \u201clayers\u201d<\/li>\n<li>Detail at multiple scales, i.e., variation at the macro-scale, meso-scale, and micro-scale<\/li>\n<li>The potential for surprise through the placement of infrequent features<\/li>\n<li>Give attention to <em>color:<\/em> feel free to use a <a href=\"https:\/\/color.adobe.com\/create\/color-wheel\">palette creator<\/a>, or a <a href=\"https:\/\/coolors.co\/c3f73a-95e06c-68b684-094d92-1c1018\">different palette creator<\/a>, or a <a href=\"https:\/\/color.adobe.com\/create\/image\">palette extraction tool<\/a>\u00a0or\u00a0<a href=\"https:\/\/color.adobe.com\/explore\">surf through here<\/a> until you find a color scheme you like<\/li>\n<li>Precise control of organic and\/or geometric shapes. Create a helper function to abstract the way<br \/>\nin which a complex visual element (such as a flower, animal, fruit, or fleur-de-lis) is rendered throughout your design.<\/li>\n<li>Randomness. Give consideration to the depth of variation in your pattern, and how impactfully randomness shapes the design. After how many viewings does your pattern become predictable? How might you forestall this as long as possible? At least 5 different parameters must be subject to variation.<\/li>\n<\/ul>\n<h5>Submission Details<\/h5>\n<p><em>Now<\/em>:<\/p>\n<ul>\n<li><strong>Check out<\/strong> these <a href=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/daily-notes\/pattern\/\">inspirations<\/a>.<\/li>\n<li><strong>Sketch<\/strong> first on paper.<\/li>\n<li><strong>Create<\/strong> your pattern at the P5 Editor.<\/li>\n<li><strong>Export<\/strong> 2 high-resolution images (4000-5000 pixels wide) using the code (see below).<\/li>\n<li><strong>Create<\/strong> a blog post, entitled <em>Nickname-Wallpaper<\/em>\u00a0and categorized <em>03-Wallpaper<\/em><\/li>\n<li><strong>Write<\/strong> 100-200 words narrating your development process.<\/li>\n<li><strong>Embed<\/strong> images of your project that link to the high-resolution results. Be patient uploading big images to WordPress.<\/li>\n<li>Also <strong>include<\/strong> some scans or photos of your paper sketches.<\/li>\n<\/ul>\n<h5>Helpful Code Template<\/h5>\n<p>The template code below exports a high-resolution version of your project when you press the &#8216;e&#8217; key. There are a couple things to note about this code:<\/p>\n<ul>\n<li>Most of the code you shouldn&#8217;t touch. Your code to design your pattern should go in <em>drawMyDesign()<\/em>. Don&#8217;t touch the <em>draw()<\/em> function.<\/li>\n<li>Inside <em>drawMyDesign<\/em>(), put <strong><em>myScaledCanvas.<\/em><\/strong> just before any drawing commands, such as: myScaledCanvas.fill(&#8220;red&#8221;);. This will allow you to add graphics to the high-resolution output image.<\/li>\n<\/ul>\n<pre>\/\/ Exports a high-resolution image when 'e' key is pressed.\r\n\r\nlet outputScale = 5;\r\nlet currentScale;\r\nlet myScaledCanvas;\r\nlet canvas;\r\n\r\n\/\/=================================================================\r\nfunction setup() { \/\/ setup\r\n  canvas = createCanvas(800, 800);\r\n  myScaledCanvas = createGraphics(800, 800);\r\n  currentScale = 1; \/\/ initialize to 1; don't touch\r\n}\r\n\r\nfunction draw() {\r\n  \/\/ Don't touch the contents of the draw loop!\r\n  \/\/ Instead, modify the guts of the drawMyDesign() function.\r\n  myScaledCanvas.clear();\r\n  myScaledCanvas.push();\r\n  myScaledCanvas.scale(currentScale);\r\n  drawMyDesign();\r\n  myScaledCanvas.pop();\r\n  image(myScaledCanvas, 0, 0); \/\/ Show on the main canvas\r\n  noLoop();\r\n}\r\n\r\n\/\/ Scale up graphics before exporting\r\nfunction exportHighResolution() {\r\n  currentScale = outputScale; \/\/ High-Res Export\r\n  myScaledCanvas = createGraphics(currentScale * 800, currentScale * 800);\r\n  draw();\r\n  save(myScaledCanvas, \"highResImage\", 'png');\r\n  currentScale = 1; \/\/ Reset to default scale 1:1\r\n  myScaledCanvas = createGraphics(800, 800);\r\n  draw();\r\n}\r\n\r\nfunction keyReleased() { if (key == 'e') exportHighResolution(); }\r\nfunction mousePressed() { loop(); }\r\n\r\n\/\/=================================================================\r\nfunction drawMyDesign() {\r\n  \/\/ Draw your design in this function -- into the scaled canvas.\r\n  \/\/ Notice how all drawing functions begin with \"myScaledCanvas.\"\r\n  \r\n  myScaledCanvas.background(\"pink\");\r\n  for (var i = 0; i &lt; 20; i++) {\r\n    var px = random(0, width);\r\n    var py = random(0, height);\r\n    myScaledCanvas.circle(px, py, width * 0.15);\r\n  }\r\n}\r\n<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This set of Deliverables is due at the beginning of class on Wednesday, February 24 (REVISED DUE DATE). It has the following parts: Five Small Technical Exercises Readings + Response: Color Generative Pattern (Wallpaper) 1. Five Small Technical Exercises The purpose of the following 5 exercises is to ensure that you have mastered certain technical &hellip; <a href=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/deliverables\/deliverables-03\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Deliverables 03&#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-504","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-json\/wp\/v2\/pages\/504","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=504"}],"version-history":[{"count":10,"href":"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-json\/wp\/v2\/pages\/504\/revisions"}],"predecessor-version":[{"id":860,"href":"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-json\/wp\/v2\/pages\/504\/revisions\/860"}],"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=504"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}