{"id":69078,"date":"2021-11-14T18:51:54","date_gmt":"2021-11-14T23:51:54","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=69078"},"modified":"2021-11-14T18:51:54","modified_gmt":"2021-11-14T23:51:54","slug":"project-generative-landscape","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/14\/project-generative-landscape\/","title":{"rendered":"Project: 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><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"932\" height=\"1024\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/IMG_5956-932x1024.jpg\" alt=\"\" class=\"wp-image-69081\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/IMG_5956-932x1024.jpg 932w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/IMG_5956-273x300.jpg 273w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/IMG_5956-768x844.jpg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/IMG_5956-1398x1536.jpg 1398w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/IMG_5956-1865x2048.jpg 1865w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/IMG_5956-1200x1318.jpg 1200w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><\/figure><p><a class=\"p5_sketch_link\" data-width=\"480\" data-height=\"480\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/sketch-54.js\">luca generative landscape<\/a><a><\/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=\"480\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/lucacao\n\/\/sectionD\n\/\/Project11\n\nvar boat = [];\/\/array to store boat number\nvar speed = 1;\n\n\nfunction setup() {\n    createCanvas(480, 480);\n    noStroke();\n    frameRate(5);\n\n    for (var i = 0; i &lt; 10;i++){\n        bx = random(width);\/\/boat x position\n    }\n}\n\nfunction draw() {\n    background(220);\n    sea(); \n    sky();\n    moon();\n\n    for(var i = 0; i &lt; 5; i++){\n        drawBoat();\n        boat++;\n        print(boat);\n    }\n}\n\nfunction sea() {\n    fill(0, 64, 108);\n    rect(0,240,480,240);\n}\n\nfunction sky(){\n    fill(0, 37, 62);\n    rect(0,0,480,240);\n\n    for (var i = 0; i &lt; 100;i++){\n        var starx = random(0,480);\n        var stary = random(0,240);\n        fill(255,255,255);\n        ellipse(starx,stary,3,3);\n        starx += speed;\n        \n    }\n    \/\/ noLoop();\n}\n\nfunction moon(){\n    fill(252, 202, 70);\n    ellipse(350,80,100,100);\n}\n\nfunction drawBoat(){\n    var blength = random(50,100);\n    var bheight = random(20,30);\n    var bx = random(0,480);\n    var by = random(240,480);\n\n    this.bx += this.speed;\n\n    fill(0);\n    rect(bx,by,blength,bheight);\n    rect(bx+20,by-10,blength\/2,bheight\/2);\n    triangle(bx+blength,by+bheight,bx+blength,by,\n        bx+blength+30,by-10);\n    \n}\n\n\n\n\n\n<\/code><\/pre><\/p>\n\n\n\n<p>For my landscape, I wanted to depict a scene with boats and stars moving at night. In my thumbnail sketch, I divided the canvas into halves, with a sky which is the top half, and the sea at the bottom half. I thought it would be more visually interesting with objects moving on all areas of the canvas. During this project, I faced difficulty trying to animate my objects, but I solved the problem by creating multiple functions which helped me clarify my code structure and tackle specific problems. The randomness in my code exists in the size and position of the boat. <\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>luca generative landscape \/\/lucacao \/\/sectionD \/\/Project11 var boat = [];\/\/array to store boat number var speed = 1; function setup() { createCanvas(480, 480); noStroke(); frameRate(5); for (var i = 0; i &lt; 10;i++){ bx = random(width);\/\/boat x position } } function draw() { background(220); sea(); sky(); moon(); for(var i = 0; i &lt; 5; i++){ &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/14\/project-generative-landscape\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project: Generative Landscape&#8221;<\/span><\/a><\/p>\n","protected":false},"author":642,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[115,58,1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69078"}],"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\/642"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=69078"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69078\/revisions"}],"predecessor-version":[{"id":69084,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69078\/revisions\/69084"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=69078"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=69078"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=69078"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}