{"id":607,"date":"2017-09-25T11:31:26","date_gmt":"2017-09-25T11:31:26","guid":{"rendered":"http:\/\/cmuems.com\/2017\/60210b\/?page_id=607"},"modified":"2025-03-24T12:57:00","modified_gmt":"2025-03-24T12:57:00","slug":"iteration-for-loops","status":"publish","type":"page","link":"https:\/\/mycours.es\/digitalmedia\/iteration-for-loops\/","title":{"rendered":"p5: Iteration (for loops)"},"content":{"rendered":"<p><iframe loading=\"lazy\" title=\"p5: for loops\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/dFt9k1FvBqQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p><a href=\"https:\/\/openprocessing.org\/sketch\/1106215\">Interactive tutorial here<\/a><\/p>\n<p><a href=\"http:\/\/mycours.es\/digitalmedia\/files\/2020\/09\/Image-018.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2057\" src=\"http:\/\/mycours.es\/digitalmedia\/files\/2020\/09\/Image-018.png\" alt=\"\" width=\"402\" height=\"446\" srcset=\"https:\/\/mycours.es\/digitalmedia\/files\/2020\/09\/Image-018.png 673w, https:\/\/mycours.es\/digitalmedia\/files\/2020\/09\/Image-018-270x300.png 270w\" sizes=\"auto, (max-width: 402px) 85vw, 402px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Nested loop structure<\/p>\n<p><a href=\"http:\/\/mycours.es\/digitalmedia\/files\/2020\/09\/nested.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2060 size-full\" src=\"http:\/\/mycours.es\/digitalmedia\/files\/2020\/09\/nested-e1600958796844.png\" alt=\"\" width=\"509\" height=\"419\" srcset=\"https:\/\/mycours.es\/digitalmedia\/files\/2020\/09\/nested-e1600958796844.png 509w, https:\/\/mycours.es\/digitalmedia\/files\/2020\/09\/nested-e1600958796844-300x247.png 300w\" sizes=\"auto, (max-width: 509px) 85vw, 509px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Another interactive <a href=\"https:\/\/happycoding.io\/tutorials\/p5js\/for-loops\">lesson on for loops here<\/a><\/p>\n<p>A better, longer explanation of nested loops<\/p>\n<p><iframe loading=\"lazy\" title=\"4.2: Nested Loops - p5.js Tutorial\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/1c1_TMdf8b8?start=308&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<h2>Exercises<\/h2>\n<p>Save them in your openprocessing account and be prepared to post them at the beginning of the next session.<\/p>\n<p>If you have some coding experience you can to do the advanced exercises down below.<\/p>\n<p>Reproduce the drawing below using one for loop:<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/mycours.es\/digitalmedia\/files\/2020\/09\/wavesncircles-2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2100\" src=\"http:\/\/mycours.es\/digitalmedia\/files\/2020\/09\/wavesncircles-2.jpg\" alt=\"\" width=\"799\" height=\"799\" srcset=\"https:\/\/mycours.es\/digitalmedia\/files\/2020\/09\/wavesncircles-2.jpg 1000w, https:\/\/mycours.es\/digitalmedia\/files\/2020\/09\/wavesncircles-2-300x300.jpg 300w, https:\/\/mycours.es\/digitalmedia\/files\/2020\/09\/wavesncircles-2-150x150.jpg 150w, https:\/\/mycours.es\/digitalmedia\/files\/2020\/09\/wavesncircles-2-768x768.jpg 768w\" sizes=\"auto, (max-width: 799px) 85vw, 799px\" \/><\/a><br \/>\n10 lines, 500\u00d7500 px canvas.<\/p>\n<p><strong>Tips:<\/strong><br \/>\n&#8211; Don\u2019t start coding! Break down the problem on paper first<br \/>\n&#8211; Consider using a variable for the lines coordinates like startX, startY and endX, endY.<br \/>\n&#8211; Try to draw parallel lines first<\/p>\n<h3>Exercise 2<\/h3>\n<p>Reproduce the dynamic sketch captured below:<\/p>\n<p><a href=\"http:\/\/mycours.es\/digitalmedia\/files\/2024\/02\/lines.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3848\" src=\"http:\/\/mycours.es\/digitalmedia\/files\/2024\/02\/lines.gif\" alt=\"\" width=\"541\" height=\"565\" \/><\/a><\/p>\n<p style=\"text-align: center;\">20 lines on each side, 500\u00d7500 px canvas.<\/p>\n<h3>Exercise 3<\/h3>\n<p>Reproduce the drawing below using nested for loops:<\/p>\n<p><a href=\"http:\/\/mycours.es\/digitalmedia\/files\/2020\/09\/wavesncircles-4.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2098\" src=\"http:\/\/mycours.es\/digitalmedia\/files\/2020\/09\/wavesncircles-4.jpg\" alt=\"\" width=\"1000\" height=\"1000\" srcset=\"https:\/\/mycours.es\/digitalmedia\/files\/2020\/09\/wavesncircles-4.jpg 1000w, https:\/\/mycours.es\/digitalmedia\/files\/2020\/09\/wavesncircles-4-300x300.jpg 300w, https:\/\/mycours.es\/digitalmedia\/files\/2020\/09\/wavesncircles-4-150x150.jpg 150w, https:\/\/mycours.es\/digitalmedia\/files\/2020\/09\/wavesncircles-4-768x768.jpg 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n<p>9\u00d79 circles. 50px of distance between the centers, 500\u00d7500 px canvas.<br \/>\nThe circles gradually fade to black.<\/p>\n<p><strong>Tips:<\/strong><br \/>\n. break down the problem in different sub-problems<br \/>\n. make a tiling of identical circles first<br \/>\n. implement a variable diameter and figure out a relation with the index variable<br \/>\n. do the same with the alpha channel<\/p>\n<h2>Advanced Exercises<\/h2>\n<p>If you have some coding experience you want to do these instead<\/p>\n<h3>Exercise 4<\/h3>\n<p>Reproduce the drawing below using nested for loops and appropriate variables for every quantity (eg. number of concentric circles):<\/p>\n<p><a href=\"http:\/\/mycours.es\/digitalmedia\/files\/2020\/09\/wavesncircles-5.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2097\" src=\"http:\/\/mycours.es\/digitalmedia\/files\/2020\/09\/wavesncircles-5.jpg\" alt=\"\" width=\"1000\" height=\"1000\" srcset=\"https:\/\/mycours.es\/digitalmedia\/files\/2020\/09\/wavesncircles-5.jpg 1000w, https:\/\/mycours.es\/digitalmedia\/files\/2020\/09\/wavesncircles-5-300x300.jpg 300w, https:\/\/mycours.es\/digitalmedia\/files\/2020\/09\/wavesncircles-5-150x150.jpg 150w, https:\/\/mycours.es\/digitalmedia\/files\/2020\/09\/wavesncircles-5-768x768.jpg 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n<p>Canvas 500x500px. Rows 4, columns 4, target diameter 80px, distance between centers 100px, target inner circles: 10.<\/p>\n<h3>Exercise 5<\/h3>\n<p>Reproduce the pattern using nested loops and random:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2096\" src=\"http:\/\/mycours.es\/digitalmedia\/files\/2020\/09\/wavesncircles-6.jpg\" alt=\"\" width=\"522\" height=\"522\" srcset=\"https:\/\/mycours.es\/digitalmedia\/files\/2020\/09\/wavesncircles-6.jpg 1000w, https:\/\/mycours.es\/digitalmedia\/files\/2020\/09\/wavesncircles-6-300x300.jpg 300w, https:\/\/mycours.es\/digitalmedia\/files\/2020\/09\/wavesncircles-6-150x150.jpg 150w, https:\/\/mycours.es\/digitalmedia\/files\/2020\/09\/wavesncircles-6-768x768.jpg 768w\" sizes=\"auto, (max-width: 522px) 85vw, 522px\" \/><\/p>\n<figure id=\"attachment_568\" class=\"wp-caption alignleft\" aria-labelledby=\"figcaption_attachment_568\"><figcaption id=\"figcaption_attachment_568\" class=\"wp-caption-text\">Based on Anni Albers&#8217; Second Movement \u2013 1978<\/figcaption><\/figure>\n<h3>Exercise 6<\/h3>\n<p>Reproduce this animation by psychedelic gif artist\u00a0dvdp. You\u2019ll need arc(), degrees() and radians() may help:<\/p>\n<p><a href=\"http:\/\/mycours.es\/digitalmedia\/files\/2024\/02\/circles.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3850\" src=\"http:\/\/mycours.es\/digitalmedia\/files\/2024\/02\/circles.gif\" alt=\"\" width=\"429\" height=\"424\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Interactive tutorial here &nbsp; Nested loop structure &nbsp; Another interactive lesson on for loops here A better, longer explanation of nested loops &nbsp; Exercises Save them in your openprocessing account and be prepared to post them at the beginning of the next session. If you have some coding experience you can to do the advanced &hellip; <a href=\"https:\/\/mycours.es\/digitalmedia\/iteration-for-loops\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;p5: Iteration (for loops)&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":23,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-607","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mycours.es\/digitalmedia\/wp-json\/wp\/v2\/pages\/607","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mycours.es\/digitalmedia\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mycours.es\/digitalmedia\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mycours.es\/digitalmedia\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mycours.es\/digitalmedia\/wp-json\/wp\/v2\/comments?post=607"}],"version-history":[{"count":16,"href":"https:\/\/mycours.es\/digitalmedia\/wp-json\/wp\/v2\/pages\/607\/revisions"}],"predecessor-version":[{"id":3851,"href":"https:\/\/mycours.es\/digitalmedia\/wp-json\/wp\/v2\/pages\/607\/revisions\/3851"}],"wp:attachment":[{"href":"https:\/\/mycours.es\/digitalmedia\/wp-json\/wp\/v2\/media?parent=607"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}