{"id":75897,"date":"2022-11-19T23:13:15","date_gmt":"2022-11-20T04:13:15","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=75897"},"modified":"2022-11-19T23:21:17","modified_gmt":"2022-11-20T04:21:17","slug":"project-11-generative-landscape-2","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/19\/project-11-generative-landscape-2\/","title":{"rendered":"Project 11: 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=\"240\" id=\"wp-block-file--media-2733cc95-7464-4910-9321-ae1a5462fbca\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/sketch-66.js\">sketch<\/a><a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/sketch-66.js\" class=\"wp-block-file__button\" download aria-describedby=\"wp-block-file--media-2733cc95-7464-4910-9321-ae1a5462fbca\">Download<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"480\" height=\"240\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Alicia Kim\n\/\/Section B\n\nvar terrainHeight = [];\nvar noiseParam = 0;\nvar noiseStep = 0.1;\nvar offset=0;\nvar maxi=1;\nvar fish = [];\nvar loc1 = 600;\nvar loc2 = 400;\nvar loc3 = 100;\nvar loc4 = 230;\nvar starX=[];\nvar starY=[];\nvar r = 144;\nvar g = 209;\nvar b = 206;\nvar by = 240;\nvar sx =240;\nvar sy = 60;\nvar frameCount_=0;\n\nfunction setup() {\n    createCanvas(480, 240);\n    background(144, 209, 206);\n    frameRate(8);\n    for (var i=0; i&lt;=width\/5; i++) {\n        noiseParam += noiseStep; \n        var n = noise (noiseParam);\n        var value = map (n, 0, 1, 0, height);\n        terrainHeight.push(value);\n        noiseParam += noiseStep\n    }   \n    for (var i=0;i&lt;20;i++){\n        starX.push(random(0,width));\n        starY.push(random(0,height-100));\n    }\n}\n\nfunction draw() {\n\n    background(r, g, b);\n    loc1-=5;\n    loc2-=5;\n    loc3-=5;\n    loc4-=5;\n    if (loc1&lt;-100){\n        loc1 = 600;\n    }\n    if (loc2&lt;-100){\n        loc2 = 600;\n    }\n    if (loc3&lt;-100){\n        loc3 = 600;\n    }\n    if (loc4&lt;-100){\n        loc4 = 600;\n    }\n    \n    noStroke();\n    drawSun();\n    \n    if (frameCount_&gt;50 & frameCount_<103) {\n        r-=20;\n        g-=8;\n        b-=2;\n    }\n    \n\n    if (r&lt;180 & g<180 && b<180) {\n        stars();\n    }\n    if (r&lt;=0 & g<=0 && b<=0) { \/\/reset\n        r=144; \n        g=209; \n        b=206;\n\n        sy = 60;\n        sx = 240;\n        frameCount_=0;\n    } else {\n        r+=6;\n        g-=0.1;\n        b-=1;\n    }\n    drawCloud(loc1,loc2,loc3,loc4);\n    drawMountain();\n    drawLake();\n    drawBoat();\n   frameCount_+=1;\n}\n\nfunction drawSun(){\n    fill (255, 150, 51); \/\/yellow\n    circle (sx,sy,40,40);\n    sy+=1.5;\n    sx+=3;\n}\n\nfunction drawLake(){  \n    fill (60, 111, 166,220); \/\/blue\n    beginShape();\n    vertex(0,height);\n     for (var x = 0; x &lt; width; x++) { \n        \/\/ wave\n        var theta = offset+0.07*x;\n        var y = map(sin(theta),-maxi,maxi,height-60,height-70);\n        vertex(x,y);  \n    }\n    vertex(width, height);\n    endShape();\n    offset += 0.4;\n}\n\nfunction drawBoat(){\n    fill(235, 100, 52); \/\/orange\n    strokeWeight(1);\n    ellipse(width\/2,by,300,60);\n    fill(100);\n    ellipse(width\/2,by,80,30);\n\/\/ make boat float\n    if (by &lt;= 210) { \/\/ when it gets higher than lake\n        by += 4;\n    } else {\n        by -= 1;\n    }\n}\n\nfunction drawCloud(loc){\n    drawCloudHelper(1.3,loc1,-4);\n    drawCloudHelper(1,loc2,25);\n    drawCloudHelper(0.8,loc3,15);\n    drawCloudHelper(1.6,loc4,0);\n}\n\nfunction drawCloudHelper(scale,loc,dy){\n    fill(255);\n    circle(loc,30+dy,30*scale);\n    circle(loc-10,36+dy,25*scale);\n    circle(loc-20,43+dy,20*scale);\n    circle(loc-3,40+dy,25*scale);\n    circle(loc+10,38+dy,25*scale);\n    circle(loc+21,41+dy,14*scale);\n}\n\nfunction drawMountain(){\n    terrainHeight.shift();\n    var n = noise(noiseParam);\n    var value = map (n, 0, 1, 0, height);\n    terrainHeight.push(value);\n    noiseParam += noiseStep\n\n    for (var i = 0; i &lt; width\/5; i++) { \n        noStroke();\n        fill (101, 138, 41); \/\/green\n        beginShape();\n        vertex(i*5,terrainHeight[i]);\n        vertex((i+1)*5, terrainHeight[i+1]);\n        vertex ((i+1)*5, height-40);\n        vertex(i*5, height-40);\n        endShape();\n    }\n}\n\nfunction stars (){\n    for (var i=0;i&lt;20;i++){\n        drawStar(starX[i],starY[i],1,4,5);\n    }\n}\n\n\/\/ adapted from p5js website (https:\/\/p5js.org\/examples\/form-star.html)\nfunction drawStar(x, y, radius1, radius2, npoints) {\n  let angle = TWO_PI \/ npoints;\n  let halfAngle = angle \/ 2.0;\n  beginShape();\n  for (let a = 0; a &lt; TWO_PI; a += angle) {\n    let sx = x + cos(a) * radius2;\n    let sy = y + sin(a) * radius2;\n    vertex(sx, sy);\n    sx = x + cos(a + halfAngle) * radius1;\n    sy = y + sin(a + halfAngle) * radius1;\n    vertex(sx, sy);\n  }\n  endShape(CLOSE);\n}<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketchDownload \/\/Alicia Kim \/\/Section B var terrainHeight = []; var noiseParam = 0; var noiseStep = 0.1; var offset=0; var maxi=1; var fish = []; var loc1 = 600; var loc2 = 400; var loc3 = 100; var loc4 = 230; var starX=[]; var starY=[]; var r = 144; var g = 209; var b &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/19\/project-11-generative-landscape-2\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 11: Generative Landscape&#8221;<\/span><\/a><\/p>\n","protected":false},"author":726,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[115],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75897"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/users\/726"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=75897"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75897\/revisions"}],"predecessor-version":[{"id":75904,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75897\/revisions\/75904"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=75897"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=75897"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=75897"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}