{"id":145,"date":"2021-02-07T16:02:26","date_gmt":"2021-02-07T21:02:26","guid":{"rendered":"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/?page_id=145"},"modified":"2021-02-09T17:25:37","modified_gmt":"2021-02-09T22:25:37","slug":"deliverables-02","status":"publish","type":"page","link":"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/deliverables\/deliverables-02\/","title":{"rendered":"Deliverables 02"},"content":{"rendered":"<p>This set of Deliverables has <strong>4 parts<\/strong>, with the following deadlines:<\/p>\n<ol>\n<li><strong><a href=\"#lo2\">Looking Outwards D02<\/a><\/strong>. <em>Due Monday 2\/15; ~45 minutes<\/em>.<\/li>\n<li><strong><a href=\"#reading02\">Reading D02<\/a><\/strong>. <em>Due Monday 2\/15; ~45 minutes<\/em>.<\/li>\n<li><strong><a href=\"#basic-shapes\">Drawing Basic Shapes With Code<\/a><\/strong>. <span style=\"color: #ff0000;\"><strong><em>Due Wednesday 2\/10;<\/em><\/strong><span style=\"color: #000000;\"><em> ~2 Hours<\/em><\/span><\/span><span style=\"color: #000000;\">. This exercise has the following four parts: <\/span>\n<ul>\n<li><span style=\"color: #000000;\">3.a. Reproduce this Composition Precisely<\/span><\/li>\n<li><span style=\"color: #000000;\">3.b. One with Everything<\/span><\/li>\n<li>3.c. Construct Your Initials<\/li>\n<li>3.d. Heart Shape<\/li>\n<\/ul>\n<\/li>\n<li><strong><a href=\"#valentine\">Generative Valentine<\/a><\/strong>. <em>Send to recipients before 11:59pm on Valentine&#8217;s Day (Sunday 2\/14); documentation due Monday 2\/15. Estimated time: 2 hours<\/em>.<\/li>\n<\/ol>\n<p><strong>You are STRONGLY ENCOURAGED to review these helpful tools and resources I&#8217;ve prepared for you:<\/strong><\/p>\n<ul>\n<li><a href=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/deliverables\/deliverables-02\/helpful-tools-and-samples\/#coordinates\">Locating Pixel Coordinates<\/a><\/li>\n<li><a href=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/deliverables\/deliverables-02\/helpful-tools-and-samples\/#colors\">Choosing Colors<\/a><\/li>\n<li><a href=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/deliverables\/deliverables-02\/helpful-tools-and-samples\/#fonts\">Using Google Fonts in p5.js<\/a><\/li>\n<li><a href=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/deliverables\/deliverables-02\/helpful-tools-and-samples\/#saving\">Saving Out Images in p5.js<\/a><\/li>\n<\/ul>\n<table style=\"background-color: #ffffa0;\">\n<tbody>\n<tr>\n<td><strong><em>Do you want additional information? Try these:<\/em><br \/>\n<\/strong><\/p>\n<ul>\n<li>p5.js (webpage) <a href=\"https:\/\/p5js.org\/get-started\/\">getting started tutorial<\/a><\/li>\n<li>Coding Train (video): <a href=\"https:\/\/www.youtube.com\/watch?v=yPWkPOfnGsw&amp;list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&amp;index=2\">intro to p5.js<\/a><\/li>\n<li>Coding Train (video): <a href=\"https:\/\/www.youtube.com\/watch?v=MXs1cOlidWs&amp;list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&amp;index=3\">the p5.js editor<\/a><\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><a name=\"lo2\"><\/a><\/p>\n<hr \/>\n<h2>1. Looking Outwards D02: Generative Art<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-198\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/manoloide-1024x556.jpg\" alt=\"\" width=\"840\" height=\"456\" srcset=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/manoloide-1024x556.jpg 1024w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/manoloide-640x347.jpg 640w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/manoloide-768x417.jpg 768w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/manoloide-1536x833.jpg 1536w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/manoloide-1200x651.jpg 1200w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/manoloide.jpg 1600w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/p>\n<p><em>Due Monday 2\/15; ~45 minutes.<\/em> For each of the following 5 computational artists, please spend a solid 5 minutes (each) looking at their generative projects.<\/p>\n<ul>\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> or <a href=\"https:\/\/twitter.com\/glagolista\">twitter<\/a><\/li>\n<li>Zachary Lieberman: <a href=\"https:\/\/www.instagram.com\/zach.lieberman\/\">instagram<\/a> \u2014 <em>please look beyond the first couple of pages!<\/em><\/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<li>Alida Sun: <a href=\"https:\/\/www.instagram.com\/alidasun\/\">instagram<\/a><\/li>\n<\/ul>\n<p><em>Now:<\/em><\/p>\n<ol>\n<li><strong>Create<\/strong>\u00a0a blog post titled\u00a0<em>nickname-LookingOutwardsD0<\/em>2<\/li>\n<li><strong>Select<\/strong>\u00a0<em>one<\/em> artwork by one of the above artists that you find appealing or intriguing.<\/li>\n<li><strong>Grab<\/strong>\u00a0an image of the artwork (use a screengrab if necessary);\u00a0<strong>embed<\/strong>\u00a0this image in the post.<\/li>\n<li><strong>Write<\/strong>\u00a0a sentence about why you selected this project.<\/li>\n<li><strong>Include<\/strong>\u00a0a link to the project\u2019s URL.<\/li>\n<li><strong>Categorize<\/strong> your blog post with the WordPress Category, <em>02-LookingOutwards.<\/em><\/li>\n<\/ol>\n<p><a name=\"reading02\"><\/a><\/p>\n<hr \/>\n<h2>2. Reading-D02: <em>Galaxykate&#8217;s Oatmeal<\/em><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-199\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/tumblr_inline_o2xr2hsBwu1r5f8z1_540.png\" alt=\"\" width=\"800\" height=\"212\" \/><\/p>\n<p><em>Due Monday 2\/15; ~45 minutes.<\/em> Read the article \u201c<a href=\"https:\/\/galaxykate0.tumblr.com\/post\/139774965871\/so-you-want-to-build-a-generator\">So You Want to Build A Generator<\/a>\u201d by <a href=\"http:\/\/www.galaxykate.com\/\">Kate Compton<\/a> (@galaxykate). <em>Now<\/em>:<\/p>\n<ul>\n<li><strong>Create<\/strong> a blog post titled <em>nickname-Reading02<\/em><\/li>\n<li>In this blog post, <strong>write<\/strong> about 100-200 words (1-2 paragraphs). You are asked to <strong>re-explain<\/strong> Compton\u2019s \u201c10,000 Bowls of Oatmeal Problem\u201d in your own words. Can you think of a scenario in which this might be a problem, and another in which it isn\u2019t? What are some artistic or technical strategies for overcoming this problem?<\/li>\n<li><strong>Categorize<\/strong> your blog post with the Category,\u00a0<em>02-Reading<\/em>.<\/li>\n<\/ul>\n<p><a name=\"basic-shapes\"><\/a><\/p>\n<hr \/>\n<h2>3. Drawing Basic Shapes With Code<\/h2>\n<p>In this set of four small exercises, you will become familiar with your graphics toolset. You will:<\/p>\n<ul>\n<li><strong>Create<\/strong> a blog post, titled <em>nickname-BasicShapes<\/em><\/li>\n<li><strong>Code<\/strong> each of the exercises below in separate sketches stored in your account at <a href=\"https:\/\/editor.p5js.org\/\">editor.p5js.org<\/a>.<\/li>\n<li>In your blog post, <strong>include a screenshot<\/strong>\u00a0of each exercise, and <strong>include a link<\/strong> to each sketch.<\/li>\n<li><strong>Categorize<\/strong> your blog post with the WordPress Category, <em>02-BasicShapes<\/em><em>.<\/em><\/li>\n<\/ul>\n<table style=\"background-color: #ffffa0;\">\n<tbody>\n<tr>\n<td><strong><em>Do you want additional information? Try these:<\/em><br \/>\n<\/strong><\/p>\n<ul>\n<li>p5.js (webpage) <a href=\"https:\/\/p5js.org\/learn\/color.html\">tutorial on color<\/a><\/li>\n<li>p5.js (webpage) <a href=\"https:\/\/p5js.org\/learn\/coordinate-system-and-shapes.html\">tutorial on coordinates and shapes<\/a><\/li>\n<li>p5.js (webpage) <a href=\"https:\/\/p5js.org\/learn\/curves.html\">tutorial on curves<\/a><\/li>\n<li>Coding Train (video): <a href=\"https:\/\/www.youtube.com\/watch?v=c3TeLi6Ns1E&amp;list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&amp;index=4&amp;t=18s\">2D Shapes &amp; Drawing<\/a><\/li>\n<li>Coding Train (video): <a href=\"https:\/\/www.youtube.com\/watch?v=riiJTF5-N7c&amp;list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&amp;index=5\">Color<\/a><\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>3.a. Reproduce this Composition Precisely<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-166\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-07-at-9.46.28-PM.png\" alt=\"\" width=\"796\" height=\"796\" srcset=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-07-at-9.46.28-PM.png 796w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-07-at-9.46.28-PM-480x480.png 480w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-07-at-9.46.28-PM-150x150.png 150w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-07-at-9.46.28-PM-768x768.png 768w\" sizes=\"auto, (max-width: 796px) 85vw, 796px\" \/><\/p>\n<p>You are asked to reproduce the image above using p5.js code, as precisely as you can. You may find it helpful to use the commands: <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/background\">background<\/a>, <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/fill\">fill<\/a>, <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/stroke\">stroke<\/a>, <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/strokeWeight\">strokeWeight<\/a>, <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/rect\">rect<\/a>, and <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/circle\">circle<\/a> or <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/ellipse\">ellipse<\/a>, among others. This exercise should require about ~20 lines of code.<\/p>\n<ul>\n<li>Working in a sketch at <a href=\"https:\/\/editor.p5js.org\/\">editor.p5js.org<\/a>: create a canvas whose dimensions are 400&#215;400 pixels, with a light blue background.<\/li>\n<li>In the foreground of this canvas is a rectangle. It is filled with a pink color, and has a purple border which is 15 pixels thick. The top-left corner of this rectangle is located 50 pixels from the left edge of the canvas, and 150 pixels from the top edge of the canvas. This rectangle is 100 pixels wide and 200 pixels tall.<\/li>\n<li>Just behind the pink rectangle is a white, slightly-transparent circle. This circle has a black outline that is 5 pixels thick. The center of this circle is located at (200, 150), and the diameter of this circle is half the width of the canvas.<\/li>\n<li>Just slightly visible through the circle is another rectangle. This rectangle is filled with an orange color, and has a blue outline that is 25 pixels thick. The top left corner of this rectangle is located at (200,100); it is 150 pixels wide, and 100 pixels high.<\/li>\n<\/ul>\n<p><em>Now<\/em>, in your blog post,<\/p>\n<ul>\n<li><strong>include a screenshot<\/strong> of your composition.<\/li>\n<li><strong>include a link<\/strong> to your project at editor.p5js.org.<\/li>\n<\/ul>\n<h3>3.b. One with Everything<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-165\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/one_with_everything.png\" alt=\"\" width=\"800\" height=\"800\" srcset=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/one_with_everything.png 800w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/one_with_everything-480x480.png 480w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/one_with_everything-150x150.png 150w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/one_with_everything-768x768.png 768w\" sizes=\"auto, (max-width: 800px) 85vw, 800px\" \/><br \/>\nIn a sketch at <a href=\"https:\/\/editor.p5js.org\/\">editor.p5js.org<\/a>: Explore the p5.js graphics toolset by creating a static composition in which you draw one of each of the following types of graphical primitives: <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/line\">line segment<\/a>, <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/rect\">rectangle<\/a>, <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/rect\">rounded rect<\/a>, <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/ellipse\">ellipse<\/a>, <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/arc\">filled arc<\/a> (pac-man), <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/point\">point<\/a> (dot), <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/triangle\">triangle<\/a>, <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/bezier\">Be\u0301zier curve<\/a>, <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/beginShape\">polyline<\/a>, and <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/beginShape\">polygon<\/a>. Experiment with their options and parameters, such as fill and stroke colors, line weight, etc. <em>You do not need to reproduce the above composition.<\/em><\/p>\n<h3>3.c. Construct Your Initials<\/h3>\n<ul>\n<li>In a new sketch in your account at <a href=\"https:\/\/editor.p5js.org\/\">editor.p5js.org<\/a><\/li>\n<li>Using exactly two colors of your choice,<\/li>\n<li>Exclusively using <a href=\"https:\/\/p5js.org\/reference\/#group-Shape\">basic graphical shapes<\/a> (no fonts)<\/li>\n<li>Create a graphic of your initials.<\/li>\n<li>In your blog post, <strong>include<\/strong> a screenshot and <strong>include<\/strong> a link to your sketch.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-174\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/gl-initials.gif\" alt=\"\" width=\"390\" height=\"390\" \/><\/p>\n<p>For your reference, here&#8217;s <a href=\"https:\/\/editor.p5js.org\/golan\/sketches\/gBfUOHuD_\">the code for my example<\/a>, above.<\/p>\n<h3>3.d. Heart Shape<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-163\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-07-at-8.58.52-PM.png\" alt=\"\" width=\"792\" height=\"792\" srcset=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-07-at-8.58.52-PM.png 792w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-07-at-8.58.52-PM-480x480.png 480w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-07-at-8.58.52-PM-150x150.png 150w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-07-at-8.58.52-PM-768x768.png 768w\" sizes=\"auto, (max-width: 792px) 85vw, 792px\" \/><\/p>\n<p>In a new sketch in your account at <a href=\"https:\/\/editor.p5js.org\/\">editor.p5js.org<\/a>, using <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/beginShape\">beginShape()<\/a> and <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/endShape\">endShape()<\/a>, <strong>write code to produce a heart shape<\/strong>. You will find it helpful to refer to the reference for commands including <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/vertex\">vertex()<\/a>, <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/bezierVertex\">bezierVertex()<\/a>, and <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/curveVertex\">curveVertex()<\/a>, <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/beginShape\">beginShape()<\/a> and <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/endShape\">endShape()<\/a>. Your shape does not need to precisely resemble the one I made \u2014 but your heart shape must be constructed from a <em>single piece<\/em> (you may not create a heart by drawing a triangle and two semi-circles).<\/p>\n<p>I encourage you to construct your heart-shape from <strong><em>curve<\/em><\/strong> segments, but if you&#8217;re having a difficult time, just construct your heart-shape as a <strong><em>flat-edged polygon<\/em><\/strong> using straight line segments. It might be janky but at least you&#8217;ll have a project. On the other hand, if you would like an additional challenge, write code to render a <a href=\"https:\/\/www.google.com\/search?q=heart+shaped+pizza&amp;tbm=isch&amp;source=iu\">heart-shaped pizza<\/a>.<\/p>\n<p>In your <em>BasicShapes<\/em> blog post:<\/p>\n<ul>\n<li><strong>include a screenshot<\/strong> of your heart shape<\/li>\n<li><strong>include a link<\/strong> to your project at editor.p5js.org<\/li>\n<li>optionally, include any process sketches, remarks, or comments about your heart shape.<\/li>\n<\/ul>\n<p><a name=\"valentine\"><\/a><\/p>\n<hr \/>\n<h2>4. Generative Valentine Cards<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-179 aligncenter\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/tumblr_8c2d9a9424db95495c0888fd8c94b615_7ddc5850_500.png\" alt=\"\" width=\"500\" height=\"471\" \/><\/p>\n<p style=\"text-align: center;\">(Above: <a href=\"https:\/\/aiweirdness.com\/post\/190825122292\/this-time-i-didnt-train-a-neural-net-to-generate\"><em>Generative Candy Hearts<\/em><\/a> by Janelle Shane)<\/p>\n<p>It&#8217;s common in school settings to ask a group of students to create Valentine cards for each other. <strong>In this assignment, you are asked to write a program to generate an edition of unique Valentine cards for your classmates.<\/strong> Each Valentine card must be slightly different from all the others, but generated by the same program. For example, you could use randomness to vary the colors, sizes, positions, and shapes of the graphics in your Valentine. (See the p5.js reference for the <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/random\">random()<\/a> function!)<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-154\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/kids-making-valentines-1024x340.jpg\" alt=\"\" width=\"840\" height=\"279\" srcset=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/kids-making-valentines-1024x340.jpg 1024w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/kids-making-valentines-640x213.jpg 640w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/kids-making-valentines-768x255.jpg 768w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/kids-making-valentines-1536x510.jpg 1536w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/kids-making-valentines-1200x398.jpg 1200w, http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/kids-making-valentines.jpg 2048w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/p>\n<p><strong><em>Naturally<\/em>, your Valentine cards must include at least one heart-shape or heart-shaped polygon.<\/strong> You must generate your heart-shape(s) exclusively using code and shape primitives. To fulfill this requirement, you are not permitted to load pre-made heart-shaped assets such as emojis, JPG\/GIF\/PNG images, or SVG graphics. It is expected that you will re-use the heart-shape that you created for exercise <strong>3.d<\/strong>. above. (For clarification: if you wish, you may use emoji and other image assets etc. <em>in addition to<\/em>, but <em>not instead of<\/em>, this heart-shape.)<\/p>\n<p><strong>Your Valentine must also contain some appropriate text<\/strong> (such as &#8220;Let&#8217;s Be Friends&#8221;, &#8220;Happy Valentine&#8217;s Day&#8221;, etc.). You are encouraged to experiment with typography, making deliberate choices about typefaces, font size, text positioning, etc. Refer to the reference for useful commands like <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/text\">text()<\/a>, <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/loadFont\">loadFont()<\/a>, <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/textFont\">textFont()<\/a>, <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/textSize\">textSize()<\/a>, and <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/textAlign\">textAlign()<\/a>. <a href=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/deliverables\/deliverables-02\/helpful-tools-and-samples\/#fonts\">You have been provided with some additional instructions<\/a> for loading Google Fonts, of which there are <a href=\"https:\/\/fonts.google.com\/\"><em>many<\/em><\/a>. (<em><strong>Please Note:<\/strong> <\/em>keeping in mind our course <a href=\"https:\/\/github.com\/golanlevin\/lectures\/blob\/master\/syllabi\/60-210.md#code-of-conduct\">Code of Conduct<\/a>, kindly be sure to keep your text &#8220;<em>appropriate<\/em>&#8220;.)<\/p>\n<p><a href=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/deliverables\/deliverables-02\/helpful-tools-and-samples\/#saving\">Here is some template code<\/a> that exports an image each time your program&#8217;s draw() loop is executed. (I&#8217;d prefer that you use this, but if you&#8217;re having problems, you could also use screenshots.) <strong>Use your program to generate 10 unique Valentine images<\/strong>, and, in private Discord messages, <strong>send these cards to your 10 classmates<\/strong> before the end of Valentine&#8217;s Day (Sunday 2\/14).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-152\" src=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-content\/uploads\/2021\/02\/valentine.gif\" alt=\"\" width=\"390\" height=\"390\" \/><\/p>\n<p>Above is a GIF in which you can see a screen-recording from my own simple attempt to make such a generator. It may be helpful to think of this GIF as depicting the &#8220;minimum viable assignment&#8221;.<\/p>\n<p><strong><em>Optionally, for some additional challenges:<\/em><\/strong><\/p>\n<ul>\n<li>Use a <a href=\"https:\/\/p5js.org\/reference\/#\/p5\/for\">for() loop<\/a> to draw <em>lots<\/em> of hearts.<\/li>\n<li>Using any means you prefer, add additional visual elements of your choice. For example, some Valentine cards have decorative borders, rainbows, balloons, clouds, unicorns, flowers, cupids, etc. Your additional visual elements these could be as simple as abstract shapes.<\/li>\n<li>If you happen to understand <a href=\"https:\/\/www.w3schools.com\/js\/js_arrays.asp\">how to use arrays<\/a>: consider storing a few different Valentine phrases in an array, and choosing a random phrase for each card. Alternatively, you could store the names of your classmates in an array, and display one of these names in each of the cards you generate.<\/li>\n<\/ul>\n<p><em>Now:\u00a0<\/em><\/p>\n<ul>\n<li>In a new sketch on the <a href=\"https:\/\/editor.p5js.org\/\">p5 Editor<\/a>, <strong>create<\/strong> your Valentine Generator.<\/li>\n<li><strong>Generate<\/strong> 10 unique Valentine&#8217;s cards (i.e. images), using your custom software.<\/li>\n<li><strong>Send<\/strong> one each of these images to your 10 classmates, via direct messages on our class Discord.<\/li>\n<li><strong>Create<\/strong> a blog post for this project, with the title <em>nickname-Valentine<\/em><\/li>\n<li>In your blog post, <strong>include<\/strong> images of <span style=\"text-decoration: underline;\"><em>three<\/em><\/span> different examples of your software&#8217;s output.<\/li>\n<li>In your blog post, <strong>embed<\/strong> photographs of any paper sketches you may have made.<\/li>\n<li>In your blog post, in ~100 words, <strong>discuss<\/strong> your process\u2014 how did you develop your project?<\/li>\n<li>In your blog post, in ~100 words, <strong>evaluate<\/strong> your project within the framework of Kate Compton&#8217;s \u201c10,000 Bowls of Oatmeal Problem\u201d.<\/li>\n<li><strong>Categorize<\/strong> your blog post with the WordPress category, <em>02-Valentine.<\/em><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>This set of Deliverables has 4 parts, with the following deadlines: Looking Outwards D02. Due Monday 2\/15; ~45 minutes. Reading D02. Due Monday 2\/15; ~45 minutes. Drawing Basic Shapes With Code. Due Wednesday 2\/10; ~2 Hours. This exercise has the following four parts: 3.a. Reproduce this Composition Precisely 3.b. One with Everything 3.c. Construct Your &hellip; <a href=\"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/deliverables\/deliverables-02\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Deliverables 02&#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-145","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-json\/wp\/v2\/pages\/145","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=145"}],"version-history":[{"count":10,"href":"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-json\/wp\/v2\/pages\/145\/revisions"}],"predecessor-version":[{"id":266,"href":"http:\/\/www.courses.art.cmu.edu\/2021s\/60210a\/wp-json\/wp\/v2\/pages\/145\/revisions\/266"}],"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=145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}