{"id":75849,"date":"2022-11-19T16:08:13","date_gmt":"2022-11-19T21:08:13","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=75849"},"modified":"2022-11-19T16:08:13","modified_gmt":"2022-11-19T21:08:13","slug":"project-11-landscape-2","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/19\/project-11-landscape-2\/","title":{"rendered":"Project-11-Landscape"},"content":{"rendered":"\n

I take references from this animation\/rendering competition and made this robot pushing a sphere in an alien planet:<\/p>\n\n\n\n

I have trees generation in the background<\/p>\n\n\n\n

boulders in front<\/p>\n\n\n\n

and hills in the back<\/p>\n\n\n\n<\/iframe>\n\n\n\n<p><a class=\"p5_sketch_link\" data-width=\"480\" data-height=\"300\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/sketch-60.js\"><\/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=\"300\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/*\n * Andrew J Wang\n * ajw2@andrew.cmu.edu\n * Section A\n *\n * This Program is walking\n *\/\n\n\/\/sets of links\n\n\/\/location of feets of the walking person\nvar pointXG = 0;\nvar pointYG = 0;\n\n\/\/steps (frame) locations of the feets\nvar stepsX = [0,1,2,3,4,5,6,7,8,9,10,10,10,10,10,10,9,8,7,6,5,4,3,2,1,0];\nvar stepsY = [0,0.5,1,1.5,2,2.5,3,3.5,4,4.5,5,4,3,2,1,0,0,0,0,0,0,0,0,0,0,0];\n\n\/\/counters for multiple frames (feet + mountains)\nvar counter = 0;\n\n\/\/location of the person on the drawing\nvar locationX = 120;\nvar locationY = 200;\n\n\/\/arrays for trees for clusters of boulders \nvar trees = [];\nvar clusters = [];\n\n\/\/set a array for land heights (FROM PREVIOUS ASSIGNMENT)\nvar landHeight = [];\nvar landHeight2 = [];\n\n\/\/create noice parameter and steps\nvar noiseParam = 0;\nvar noiseParam2 = 0;\nvar noiseStep = 0.005;\nvar noiseStep2 = 0.01;\n\nfunction setup() {\n createCanvas(480,300);\n \/\/ create an initial collection of trees\n for (var i = 0; i < 5; i++){\n var rx = random(width);\n trees[i] = makeTrees(rx);\n }\n\n \/\/ create an initial collection of boulders\n for (var i = 0; i < 10; i++)\n {\n var rx2 = random(width);\n clusters[i] = makeClusters(rx2);\n }\n\n \/\/hill #1\n for (var k=0; k<=480; k++)\n { \n \/\/get noise through noise param\n var n = noise(noiseParam);\n \/\/remapping based on height\n var value = map(n,0,1,0,height\/4)+130;\n \/\/add to array\n landHeight.push(value);\n \/\/plus steps\n noiseParam += noiseStep;\n }\n\n \/\/hill #2\n for (var k=0; k<=480; k++)\n { \n \/\/get noise through noise param\n var n2 = noise(noiseParam2);\n \/\/remapping based on height\n var value2 = map(n2,0,1,0,height\/3)+80;\n \/\/add to array\n landHeight2.push(value2);\n \/\/plus steps\n noiseParam2 += noiseStep2;\n }\n\n}\n\n\nfunction draw() {\n background(100);\n\n \/\/MOON\n push();\n noStroke();\n fill(255,255,220);\n ellipse(380,0,250,250);\n pop();\n\n \/\/draw first sets of hill\n push();\n noStroke();\n fill(240);\n beginShape();\n \/\/fist vertex\n vertex(0,(locationY+70+60)*0.8-80);\n \/\/for loop to grab all the vertex\n for (var k=0; k<=480; k++)\n { \n vertex(k,landHeight2[k]);\n }\n \/\/last vertex\n vertex(width,(locationY+70+60)*0.8-80);\n endShape(CLOSE);\n \/\/adding another point by shifting\n var n2=noise(noiseParam2);\n var value2 = map(n2,0,1,0,height\/3)+80;\n noiseParam2 += 0.01\/20;\n \/\/slowing the speed of refreshing by using a counter\n if (counter%40==0)\n {\n landHeight2.shift();\n landHeight2.push(value2);\n }\n pop();\n\n \/\/draw second sets of hill\n push();\n noStroke();\n fill(220);\n beginShape();\n \/\/fist vertex\n vertex(0,(locationY+70+60)*0.8-80);\n \/\/for loop to grab all the vertex\n for (var k=0; k<=480; k++)\n { \n vertex(k,landHeight[k]);\n }\n \/\/last vertex\n vertex(width,(locationY+70+60)*0.8-80);\n endShape(CLOSE);\n \/\/adding another point by shifting\n var n=noise(noiseParam);\n var value = map(n,0,1,0,height\/4)+130;\n noiseParam += 0.005\/5;\n \/\/slowing the speed of refreshing by using a counter\n if (counter%10==0)\n {\n landHeight.shift();\n landHeight.push(value);\n }\n pop();\n\n \/\/ground plane\n push();\n noStroke();\n fill(200);\n rect(0,(locationY+70+60)*0.8-80,width, height-((locationY+70+60)*0.8-80));\n pop();\n\n \/\/set trees and clusters by refreshing the removed objects and clusters\n updateDisplay();\n removeTrees();\n addTrees();\n removeClusters();\n addClusters();\n\n \/\/walking person\n strokeWeight(3);\n push();\n\n \/\/scaling it\n scale(0.6);\n translate(0,150);\n walking(locationX,locationY);\n walking2(locationX,locationY);\n body(locationX,locationY);\n\n \/\/butt\n push();\n strokeWeight(2);\n ellipse(locationX,locationY,15,15);\n pop();\n pop();\n\n \/\/display clusters in the end\n updateDisplay2();\n\n}\n\n\n\/\/refreashing trees and display them\nfunction updateDisplay(){\n for (var i = 0; i < trees.length; i++){\n trees[i].move();\n trees[i].display();\n }\n}\n\n\/\/refreshing boulders and display them\nfunction updateDisplay2(){\n for (var i = 0; i < clusters.length; i++){\n clusters[i].move();\n clusters[i].display();\n }\n}\n\n\/\/removing trees if it is too far away from the screen\nfunction removeTrees(){\n var treesToKeep = [];\n for (var i = 0; i < trees.length; i++){\n if (trees[i].x + trees[i].breadth > 0) {\n treesToKeep.push(trees[i]);\n }\n }\n}\n\n\/\/removing boulders if it is too far away from the screen\nfunction removeClusters(){\n var clustersToKeep = [];\n for (var i = 0; i < clusters.length; i++){\n if (clusters[i].x + clusters[i].breadth > 0) {\n clustersToKeep.push(clusters[i]);\n }\n }\n}\n\n\/\/add trees 100 units away from border\nfunction addTrees() {\n var Likelihood = 0.01; \n if (random(0,1) < Likelihood) {\n trees.push(makeTrees(width+100));\n }\n}\n\n\/\/add boulders 500 units away from border\nfunction addClusters() {\n var Likelihood = 0.01; \n if (random(0,1) < Likelihood) {\n clusters.push(makeClusters(width+500));\n }\n}\n\n\/\/set trees values and function\nfunction makeTrees(birthLocationX) {\n var tree = {x: birthLocationX,\n breadth: 100,\n speed: -0.4,\n y: 160+round(random(20)),\n treeHeight: round(random(40,50)),\n size: round(random(30,50)),\n move: objectMove,\n display: treeDisplay}\n return tree;\n}\n\n\/\/set boulders values and functions\nfunction makeClusters(birthLocationX) {\n var tree = {x: birthLocationX,\n breadth: 100,\n speed: -2.0,\n treeHeight: round(random(40,50)),\n size: round(random(200,350)),\n move: object2Move,\n display: clusterDisplay}\n return tree;\n}\n\n\/\/move objects \nfunction objectMove() {\n this.x += this.speed;\n}\n\nfunction object2Move() {\n this.x += this.speed;\n}\n\n\/\/draw trees\nfunction treeDisplay() {\n line(this.x, this.y , this.x, this.y+this.treeHeight);\n\n push();\n translate(this.x,this.y);\n rectMode(CENTER);\n noFill();\n strokeWeight(1);\n\n push();\n rotate(-counter\/180*Math.PI);\n rect(0,0,this.size,this.size);\n pop();\n\n push();\n rotate(counter\/180*Math.PI);\n rect(0,0,this.size-10,this.size-10);\n pop();\n\n\n pop();\n}\n\n\/\/draw bolders\nfunction clusterDisplay() {\n push();\n fill(0);\n ellipse(this.x,height+30,this.size,this.size\/2);\n strokeWeight(1.5);\n noFill();\n ellipse(this.x,height+30,this.size+20,this.size\/2+10);\n pop();\n}\n\n\/\/leg #1\nfunction walking(xL,yL)\n{ \n \/\/counter\/10 get frame number\n var counterK = Math.floor(counter\/10)%(stepsX.length);\n\n \/\/Feet locations\n pointXG = xL-70+stepsX[counterK]*6;\n pointYG = yL+70-stepsY[counterK]*4;\n\n \/\/Pathegorean theorm to get the knee and legs\n var dis = Math.sqrt((xL-pointXG)*(xL-pointXG)+(yL-pointYG)*(yL-pointYG));\n var num = (10000)-(dis*dis);\n var sid = sqrt(num);\n var midX = xL-(xL-pointXG)\/2;\n var midY = yL-(yL-pointYG)\/2;\n var tan = atan2(pointXG-xL,pointYG-yL);\n ellipse ((pointXG-xL)\/2+xL+cos(tan)*sid\/2, (pointYG-yL)\/2+yL-sin(tan)*sid\/2, 5,5);\n line(xL,yL,(pointXG-xL)\/2+xL+cos(tan)*sid\/2, (pointYG-yL)\/2+yL-sin(tan)*sid\/2);\n line(pointXG,pointYG,(pointXG-xL)\/2+xL+cos(tan)*sid\/2, (pointYG-yL)\/2+yL-sin(tan)*sid\/2);\n\n \/\/feet bending\n if (stepsY[counterK]==0)\n {\n line(pointXG,pointYG,pointXG+20,pointYG);\n }\n else\n {\n var tanF = atan2(Math.sqrt(400-stepsY[counterK]*2),stepsY[counterK]*4);\n line(pointXG,pointYG,pointXG+20*sin(tanF),pointYG+20*cos(tanF));\n }\n\n counter++;\n}\n\n\/\/repeat for the second leg\nfunction walking2(xL,yL)\n{ \n var counterK = (Math.floor(counter\/10)+stepsX.length\/2)%(stepsX.length);\n pointXG = xL-70+stepsX[counterK]*6;\n pointYG = yL+70-stepsY[counterK]*4;\n var dis = Math.sqrt((xL-pointXG)*(xL-pointXG)+(yL-pointYG)*(yL-pointYG));\n var num = (10000)-(dis*dis);\n var sid = sqrt(num);\n var midX = xL-(xL-pointXG)\/2;\n var midY = yL-(yL-pointYG)\/2;\n var tan = atan2(pointXG-xL,pointYG-yL);\n ellipse ((pointXG-xL)\/2+xL+cos(tan)*sid\/2, (pointYG-yL)\/2+yL-sin(tan)*sid\/2, 5,5);\n line(xL,yL,(pointXG-xL)\/2+xL+cos(tan)*sid\/2, (pointYG-yL)\/2+yL-sin(tan)*sid\/2);\n line(pointXG,pointYG,(pointXG-xL)\/2+xL+cos(tan)*sid\/2, (pointYG-yL)\/2+yL-sin(tan)*sid\/2);\n if (stepsY[counterK]==0)\n {\n line(pointXG,pointYG,pointXG+20,pointYG);\n }\n else\n {\n var tanF = atan2(Math.sqrt(400-stepsY[counterK]*2),stepsY[counterK]*4);\n line(pointXG,pointYG,pointXG+20*sin(tanF),pointYG+20*cos(tanF));\n }\n\n counter++;\n\n}\n\n\/\/body parts and other stuff\nfunction body(xL,yL)\n{\n var counterK = (Math.floor(counter\/10)+stepsX.length\/2)%(stepsX.length);\n var counterK2 = (Math.floor(counter\/10)+10)%(stepsX.length);\n var counterK3 = (Math.floor(counter\/10)+25)%(stepsX.length);\n push();\n strokeWeight(2);\n fill(\"grey\")\n \/\/shoulder 1\n ellipse(xL+35+stepsY[counterK2],yL-45-stepsX[counterK2],30,30);\n\n \/\/hand\n ellipse(xL+35+60,yL-45-stepsX[counterK]+10,10,10);\n pop();\n\n \/\/arms\n line(xL+35+stepsY[counterK],yL-45-stepsX[counterK],xL+35+30,yL-45-stepsX[counterK]+20);\n line(xL+35+30,yL-45-stepsX[counterK]+20,xL+35+60,yL-45-stepsX[counterK]+10);\n\n \/\/body\n line(xL,yL,xL+35+stepsY[counterK],yL-45-stepsX[counterK]);\n\n push();\n fill(\"black\");\n ellipse(xL+35+30,yL-45-stepsX[counterK]+20,5,5);\n pop();\n\n \/\/Round thingy\n push();\n noFill();\n strokeWeight(2);\n ellipse(xL+35+175,yL-45,230,230);\n fill(255);\n ellipse(xL+35+175,yL-45,220,220);\n\n stroke(255);\n\n pop();\n\n\n \/\/shoulder 2\n push();\n noStroke();\n ellipse(xL+35+stepsY[counterK2],yL-45-stepsX[counterK2],15,15);\n pop();\n\n \/\/head\n push();\n strokeWeight(1);\n noFill();\n translate(xL+55+stepsY[counterK3],yL-85-stepsX[counterK3]);\n rectMode(CENTER);\n rotate(-counter\/180*Math.PI);\n rect(0,0,40,40);\n rect(0,0,30,30);\n pop();\n\n push();\n strokeWeight(1);\n noFill();\n translate(xL+65+stepsY[counterK2]*2,yL-95-stepsX[counterK2]);\n rectMode(CENTER);\n rotate(counter\/180*Math.PI);\n rect(0,0,25,25);\n rect(0,0,30,30);\n pop();\n\n push();\n strokeWeight(1);\n noFill();\n translate(xL+45+stepsY[counterK]*2,yL-75-stepsX[counterK]);\n rectMode(CENTER);\n rotate(counter\/180*Math.PI);\n rect(0,0,25,25);\n rect(0,0,15,15);\n pop();\n\n}\n\n\n\n\n\n<\/code><\/pre><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>I take references from this animation\/rendering competition and made this robot pushing a sphere in an alien planet: I have trees generation in the background boulders in front and hills in the back \/* * Andrew J Wang * ajw2@andrew.cmu.edu * Section A * * This Program is walking *\/ \/\/sets of links \/\/location of … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/19\/project-11-landscape-2\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project-11-Landscape”<\/span><\/a><\/p>\n","protected":false},"author":768,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[115,55,1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75849"}],"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\/768"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=75849"}],"version-history":[{"count":5,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75849\/revisions"}],"predecessor-version":[{"id":75855,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75849\/revisions\/75855"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=75849"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=75849"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=75849"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}