{"id":68993,"date":"2021-11-13T17:33:12","date_gmt":"2021-11-13T22:33:12","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=68993"},"modified":"2021-11-13T17:33:12","modified_gmt":"2021-11-13T22:33:12","slug":"generative-landscape","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/13\/generative-landscape\/","title":{"rendered":"Generative Landscape"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<html><body><div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-width=\"480\" data-height=\"320\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/sketch-45.js\">sketch<\/a><a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/sketch-45.js\" class=\"wp-block-file__button\" download>Download<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"480\" height=\"320\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var cld = [];\nvar shl = [];\n\nfunction setup() {\n    createCanvas(480, 320);\n    background(200);\n    noStroke();\n}\n\nfunction draw() {\n    \/\/static background\n    fill(57, 16, 115);\n    rect(0, 0, 480, 40);\n    fill(129, 21, 150);\n    rect(0, 40, 480, 40);\n    fill(189, 28, 119);\n    rect(0, 80, 480, 40);\n    fill(224, 47, 31);\n    rect(0, 120, 480, 40);\n    fill(230, 107, 50);\n    rect(0, 160, 480, 40);\n    fill(255, 185, 64);\n    circle(240, 200, 60);\n    fill(179, 161, 91);\n    rect(0, 200, 480, 120);\n\n    \/\/cloud code\n    if(random() &gt; 0.95) cld.push(makeCloud((random()*120), color(random()*30+220, 220, random()*30+220))); \/\/chance to draw new cloud\n    for(let i = 0; i &lt; cld.length; i++) { \/\/draws and updates clouds\n      cld[i].drawCloud();\n      cld[i].moveCloud();\n    }\n    if(cld[0].x &gt; 480) cld.shift(); \/\/removes clouds that move too far\n\n    \/\/shell code\n    if(random() &gt; 0.85) shl.push(makeShell(random()*200+120, color(random()*255, random()*255, random()*255), random()*3)); \/\/chacne to draw new drawShell\n    for(let i = 0; i &lt; shl.length; i++) { \/\/draws and updates shells\n      shl[i].drawShell();\n      shl[i].moveShell();\n    }\n    if(shl[0].x &gt; 480) shl.shift(); \/\/removes shells that move too far\n}\n\nfunction makeCloud(ty, tc) {\n    var cloud = {x: 0, y: ty, c: tc};\n    return cloud;\n}\n\nfunction drawCloud() {\n    fill(this.c);\n    ellipse(this.x, this.y, 40, 20);\n}\n\nfunction moveCloud() {\n    this.x += 10;\n}\n\nfunction makeShell(ty, tc, ts) {\n    var shell = {x: 0, y: ty, c: tc, s: ts}\n    return shell;\n}\n\nfunction drawShell() {\n    fill(this.c);\n    if(this.s &lt; 1) circle(this.x, this.y, 20);\n    else if(this.s &lt; 2) square(this.x, this.y, 20);\n    else triangle(this.x, this.y, this.x+10, this.y+20, this.x+20, this.y);\n}\n\nfunction moveShell() {\n    this.x += 10;\n}\n<\/code><\/pre><\/div>\n\n\n\n<p>This isn&rsquo;t running correctly right now and I can&rsquo;t figure out why ?-?<\/p>\n\n\n\n<p>I made a sunset landscape because I thought I could incorporate some really cool colors into the background. First I coded the hard landscape. Since the sun is so far away, it will look like it isn&rsquo;t moving. Next I created very simple clouds. To create randomness and variety in my landscape the clouds have a randomized color and height. I created a method that updated their x position so that they&rsquo;d look like they were &ldquo;moving&rdquo; across the screen. After that I made shells. I followed a similar procedure, but I also added shape as a random variable. Having different shaped\/colored shells in different locations helps make the landscape more exciting. I wish the code was displayed properly so you could see the final product \ud83d\ude41<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>This isn&rsquo;t running correctly right now and I can&rsquo;t figure out why ?-? I made a sunset landscape because I thought I could incorporate some really cool colors into the background. First I coded the hard landscape. Since the sun is so far away, it will look like it isn&rsquo;t moving. Next I created very &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/13\/generative-landscape\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Generative Landscape&#8221;<\/span><\/a><\/p>\n","protected":false},"author":652,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[115,56,1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68993"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/users\/652"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68993"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68993\/revisions"}],"predecessor-version":[{"id":68996,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68993\/revisions\/68996"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68993"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68993"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}