{"id":617,"date":"2017-09-25T11:50:54","date_gmt":"2017-09-25T11:50:54","guid":{"rendered":"http:\/\/cmuems.com\/2017\/60210b\/?page_id=617"},"modified":"2025-03-24T12:57:00","modified_gmt":"2025-03-24T12:57:00","slug":"conditionals-if","status":"publish","type":"page","link":"https:\/\/mycours.es\/digitalmedia\/conditionals-if\/","title":{"rendered":"p5: conditionals \/ if statements"},"content":{"rendered":"<p><a href=\"http:\/\/mycours.es\/ems2\/files\/2020\/10\/JavaScript-if-else-statment.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2217\" src=\"http:\/\/mycours.es\/ems2\/files\/2020\/10\/JavaScript-if-else-statment.png\" alt=\"\" width=\"384\" height=\"467\" srcset=\"https:\/\/mycours.es\/digitalmedia\/files\/2020\/10\/JavaScript-if-else-statment.png 384w, https:\/\/mycours.es\/digitalmedia\/files\/2020\/10\/JavaScript-if-else-statment-247x300.png 247w\" sizes=\"auto, (max-width: 384px) 85vw, 384px\" \/><\/a><\/p>\n<p>A condition like <code>if( myVariable == true)<\/code> or<code> if(myVariable &gt; 20)<\/code> must always return a boolean value (true or false).<\/p>\n<p>To construct more complex conditions for both if statements and loops we have to get into Boolean operators.<\/p>\n<p><a href=\"http:\/\/mycours.es\/ems2\/files\/2020\/10\/logical-operator.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2218\" src=\"http:\/\/mycours.es\/ems2\/files\/2020\/10\/logical-operator.jpg\" alt=\"\" width=\"858\" height=\"516\" srcset=\"https:\/\/mycours.es\/digitalmedia\/files\/2020\/10\/logical-operator.jpg 858w, https:\/\/mycours.es\/digitalmedia\/files\/2020\/10\/logical-operator-300x180.jpg 300w, https:\/\/mycours.es\/digitalmedia\/files\/2020\/10\/logical-operator-768x462.jpg 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n<p>For our purposes == and === are equivalent. In javascript they compare both value and type of a variable.<\/p>\n<p><iframe loading=\"lazy\" title=\"3.1: Introduction to Conditional Statements - p5.js Tutorial\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/1Osb_iGDdjk?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><iframe loading=\"lazy\" title=\"3.3: Else and Else if, AND and OR - p5.js Tutorial\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/r2S7j54I68c?start=651&#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<h3>Exercise<\/h3>\n<p>Starting from\u00a0 a 9&#215;9 pattern of green circles<\/p>\n<p><a href=\"https:\/\/openprocessing.org\/sketch\/1113894\">https:\/\/openprocessing.org\/sketch\/1113894<\/a><\/p>\n<p>MAKE A FORK FOR EACH EXERCISE BELOW<\/p>\n<p>Reproduce the following outputs by <strong>changing only the if condition.<\/strong><br \/>\nCan you make the condition as short as possible?<\/p>\n<p><a href=\"http:\/\/mycours.es\/ems2\/files\/2025\/02\/if-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3253\" src=\"http:\/\/mycours.es\/ems2\/files\/2025\/02\/if-1.png\" alt=\"\" width=\"1200\" height=\"1200\" \/><\/a><a href=\"http:\/\/mycours.es\/ems2\/files\/2025\/02\/1-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3261\" src=\"http:\/\/mycours.es\/ems2\/files\/2025\/02\/1-2.png\" alt=\"\" width=\"1200\" height=\"1200\" \/><\/a><\/p>\n<p><a href=\"http:\/\/mycours.es\/ems2\/files\/2025\/02\/if-4.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3254\" src=\"http:\/\/mycours.es\/ems2\/files\/2025\/02\/if-4.png\" alt=\"\" width=\"1200\" height=\"1200\" \/><\/a> <a href=\"http:\/\/mycours.es\/ems2\/files\/2025\/02\/if-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3255\" src=\"http:\/\/mycours.es\/ems2\/files\/2025\/02\/if-2.png\" alt=\"\" width=\"1200\" height=\"1200\" \/><\/a> <a href=\"http:\/\/mycours.es\/ems2\/files\/2025\/02\/if-3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3256\" src=\"http:\/\/mycours.es\/ems2\/files\/2025\/02\/if-3.png\" alt=\"\" width=\"1200\" height=\"1200\" \/><\/a><\/p>\n<p><a href=\"http:\/\/mycours.es\/ems2\/files\/2025\/02\/if-5.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3258\" src=\"http:\/\/mycours.es\/ems2\/files\/2025\/02\/if-5.png\" alt=\"\" width=\"1200\" height=\"1200\" \/><\/a><\/p>\n<p>The quickest way to resolve this is with the <a href=\"https:\/\/www.mathsisfun.com\/numbers\/modulo.html\">modulo operator<\/a> aka the remainder of the division. A column is in position 0, 2, 4, etc when the position is an even number therefore&#8230;.<\/p>\n<p><a href=\"http:\/\/mycours.es\/ems2\/files\/2025\/02\/if-6.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3259\" src=\"http:\/\/mycours.es\/ems2\/files\/2025\/02\/if-6.png\" alt=\"\" width=\"1200\" height=\"1200\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/mycours.es\/ems2\/files\/2025\/02\/if-final-boss.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3257\" src=\"http:\/\/mycours.es\/ems2\/files\/2025\/02\/if-final-boss.png\" alt=\"\" width=\"1200\" height=\"1200\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A condition like if( myVariable == true) or if(myVariable &gt; 20) must always return a boolean value (true or false). To construct more complex conditions for both if statements and loops we have to get into Boolean operators. For our purposes == and === are equivalent. In javascript they compare both value and type of &hellip; <a href=\"https:\/\/mycours.es\/digitalmedia\/conditionals-if\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;p5: conditionals \/ if statements&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":22,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-617","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mycours.es\/digitalmedia\/wp-json\/wp\/v2\/pages\/617","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=617"}],"version-history":[{"count":6,"href":"https:\/\/mycours.es\/digitalmedia\/wp-json\/wp\/v2\/pages\/617\/revisions"}],"predecessor-version":[{"id":4064,"href":"https:\/\/mycours.es\/digitalmedia\/wp-json\/wp\/v2\/pages\/617\/revisions\/4064"}],"wp:attachment":[{"href":"https:\/\/mycours.es\/digitalmedia\/wp-json\/wp\/v2\/media?parent=617"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}