{"id":69010,"date":"2021-11-13T21:34:35","date_gmt":"2021-11-14T02:34:35","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=69010"},"modified":"2021-11-13T21:34:35","modified_gmt":"2021-11-14T02:34:35","slug":"project-11-generative-landscape-2","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/13\/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\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/wpf-landscape.js\" data-width=\"480\" data-height=\"300\">wpf-landscape.js<\/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=\"300\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Patrick Fisher, Section B, wpf@andrew.cmu.edu Assignment -11-project\nvar trackLines = []; \/\/array for converyer belt\nvar robots = []; \/\/array for the robots\n\nfunction setup() {\n    createCanvas(480,300);\n    background(219.219,211);\n    for(var i = 0; i &lt;= 9; i++){\n        trackLines[i] = i*48; \/\/fills the track array\n    }\n\n    for(var i = 0; i &lt;= 5; i++){\n        robots[i] = makeRobot(i); \/\/fills the robot array\n        robots[i].centerX = -50 + (i*-200);\n    }\n}\n\nfunction draw(){\n    push();\n    stroke(0);\n    strokeWeight(4);\n    fill(54,54,66);\n    rect(0,50,width,200);\n    fill(28,150,195);\n    rect(0,25,width,25);\n    rect(0,250,width,25);\n    stroke(0);\n    strokeWeight(3); \/\/draws the lines and moves them forward\n    for(var i = 0; i &lt;= 9; i++){\n        line(trackLines[i],50,trackLines[i],250);\n        trackLines[i] += 1;\n\n        if(trackLines[i] &gt;= width){ \/\/sends a line back to the start when it gets to big\n            trackLines[i] = 0;\n        }\n    }\n    pop();\n\n    for(var i = 0; i &lt;= 5; i++){\n        robots[i].draw(); \/\/draws the robots\n        \n\n        robots[i].centerX ++; \/\/sends the robots forward\n        \n        if(robots[i].centerX &gt;= 800){ \/\/deletes a robot from the array when it gets too far off screen and makes a new one\n            robots.shift();\n            robots.push(makeRobot(0));\n            robots[5].centerX = -400\n        }\n    }\n}\n\nfunction makeRobot(i) {\n    var rob = {centerX: 0, \/\/funciton for making the robot\n               head: floor(random(0,3)),\n               eyes: floor(random(0,4)),\n               glowColor: clrSelect(floor(random(0,6))), \/\/sends a random number to the color select function to set the color variable\n               mouth: floor(random(0,3)), \/\/5\n               chest: floor(random(0,2)),\n               chestPiece: floor(random(0,3)), \/\/8\n               arms: floor(random(0,3)), \/\/4\n               legs: floor(random(0,3)), \/\/3\n               draw: drawRobot,\n               drawHead: drawRobotHead,\n               drawBody: drawRobotBody,\n               drawEye: robotEyes,\n               drawMouth: robotMouth,\n               drawPiece: robotChestPiece,\n               drawArms: robotArms,\n               drawLegs: robotLegs,\n           }\n    return rob;\n\n}\n\nfunction drawRobot(){\/\/ draws the robot in fragments\n    this.drawHead();\n    this.drawBody();\n\n}\n\nfunction drawRobotHead(){\n    fill(101,108,127);\n    if(this.head == 0){\n        circle(this.centerX,90,60);\n    }\n    if(this.head == 1){\n        push();\n        rectMode(CENTER);\n        rect(this.centerX,90,60,60);\n        pop();\n    }\n    if(this.head == 2){\n        triangle(this.centerX,120,this.centerX-50,70,this.centerX+50,70);\n    }\n\n    this.drawEye();\n\n    this.drawMouth();\n    \n\n}\n\nfunction drawRobotBody(){\n    fill(101,108,127);\n    if(this.chest == 0){\n        rect(this.centerX-25,120,50,75);\n    }\n    if(this.chest == 1){\n        ellipse(this.centerX, 157.5,50,75);\n    }\n    \n    this.drawPiece();\n\n    this.drawArms();\n\n    this.drawLegs();\n\n\n}\n\nfunction robotEyes() {\n    push();\n    fill(this.glowColor);\n    if(this.eyes == 0){\n        circle(this.centerX + 15,85,20);\n        circle(this.centerX - 15,85,20);\n    }\n\n    if(this.eyes == 1){\n        push();\n        rectMode(CENTER);\n        rect(this.centerX + 15, 85, 15, 15);\n        rect(this.centerX - 15, 85, 15, 15);\n        pop();\n\n    }\n    if(this.eyes == 2){\n        push();\n        stroke(this.glowColor);\n        strokeWeight(3);\n        line(this.centerX + 20, 80 , this.centerX + 5, 80);\n        line(this.centerX - 20, 80 , this.centerX - 5, 80);\n        pop()\n    }\n\n    if(this.eyes == 3){\n        push();\n        stroke(this.glowColor);\n        strokeWeight(3);\n        line(this.centerX + 15, 90 , this.centerX + 15, 75);\n        line(this.centerX - 15, 90 , this.centerX - 15, 75);\n        pop()\n    }\n    pop();\n}\n\nfunction robotMouth() {\n    if(this.mouth == 0){\n        push();\n        stroke(this.glowColor);\n        strokeWeight(4);\n        noFill();\n        arc(this.centerX, 100, 20, 20, 0, PI);\n        pop();\n    }\n\n    if(this.mouth == 1){\n        push();\n        stroke(this.glowColor);\n        strokeWeight(4);\n        line(this.centerX + 10, 105, this.centerX -10, 105);\n        pop();\n    }\n    if(this.mouth == 2){\n        push();\n        fill(this.glowColor);\n        rect(this.centerX - 10, 101, 20, 8);\n        line(this.centerX -10, 105, this.centerX + 10, 105);\n        pop();\n\n    }\n\n}\n\nfunction robotChestPiece() {\n    if(this.chestPiece == 0){\n        push();\n        fill(this.glowColor);\n        circle(this.centerX, 147,20);\n        pop();\n    }\n    if(this.chestPiece == 1){\n        push();\n        fill(this.glowColor);\n        rectMode(CENTER);\n        rect(this.centerX, 147,20,20);\n        pop();\n    }\n    if(this.chestPiece == 2){\n        push();\n        fill(this.glowColor);\n        translate(this.centerX,147);\n        rotate(radians(45));\n        rectMode(CENTER);\n        rect(0,0,20,20);\n        pop();\n    }\n\n}\n\nfunction robotArms(){\n    if(this.arms == 0){\n        push();\n        stroke(0);\n        strokeWeight(2);\n        line(this.centerX + 25, 147, this.centerX + 50, 147);\n        line(this.centerX - 25, 147, this.centerX - 50, 147);\n        pop();\n        circle(this.centerX - 55, 147, 10);\n        circle(this.centerX + 55, 147, 10);\n\n    }\n    if(this.arms == 1){\n        ellipse(this.centerX+37.5,147,25,10);\n        ellipse(this.centerX-37.5,147,25,10);\n    }\n    if(this.arms == 2){\n        push();\n        rectMode(CENTER);\n        square(this.centerX+35,147,20);\n        square(this.centerX-35,147,20);\n        pop();\n\n    }\n}\n\nfunction robotLegs(){\n    if(this.legs == 0){\n        push()\n        stroke(0);\n        strokeWeight(2);\n        line(this.centerX + 20, 195, this.centerX + 20, 225);\n        line(this.centerX - 20, 195, this.centerX - 20, 225);\n        pop();\n        circle(this.centerX + 20, 230, 10);\n        circle(this.centerX - 20, 230, 10);\n\n    }\n    if(this.legs == 1){\n        ellipse(this.centerX - 15, 215, 10,40);\n        ellipse(this.centerX + 15, 215, 10,40);\n    }\n    if(this.legs == 2){\n        triangle(this.centerX-15, 197.5, this.centerX - 10, 235, this.centerX - 20, 235);\n        triangle(this.centerX+15, 197.5, this.centerX +10, 235, this.centerX + 20, 235);\n    }\n}\n\nfunction clrSelect(i){\n    if(i == 0){\n        var c = color(128,196,99); \/\/green\n    }\n    if(i == 1){\n        var c = color(182,20,29); \/\/red\n    }\n    if(i == 2){\n        var c = color(10,201,239); \/\/blue\n    }\n    if(i == 3){\n        var c = color(217,16,207); \/\/purple\n    }\n    if(i == 4){\n        var c = color(248,241,25); \/\/yellow\n    }\n    if(i == 5){\n        var c = color(244,239,221); \/\/off white\n    }\n\n    return c;\n\n}<\/code><\/pre><\/div>\n\n\n\n<p>For my project, I did a robot factory line, with all the different parts of the robots changing. I started with getting the conveyor belt to look correct. Then I worked on making one look for the robot and getting it to loop continuously. Afterward, I started to separate the body parts into distinct functions and then implements the if statements to draw different types of body parts. I am very happy with how it worked out, I think the robots look kind of cute and I am happy with how seamless the loop is. I also think I have a good amount of variety so the robots do not get immediately boing.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"768\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/IMG_1976-1024x768.jpeg\" alt=\"\" class=\"wp-image-69013\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/IMG_1976-1024x768.jpeg 1024w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/IMG_1976-300x225.jpeg 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/IMG_1976-768x576.jpeg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/IMG_1976-1536x1152.jpeg 1536w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/IMG_1976-2048x1536.jpeg 2048w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/IMG_1976-1200x900.jpeg 1200w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><\/figure><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>wpf-landscape.js \/\/Patrick Fisher, Section B, wpf@andrew.cmu.edu Assignment -11-project var trackLines = []; \/\/array for converyer belt var robots = []; \/\/array for the robots function setup() { createCanvas(480,300); background(219.219,211); for(var i = 0; i &lt;= 9; i++){ trackLines[i] = i*48; \/\/fills the track array } for(var i = 0; i &lt;= 5; i++){ robots[i] = &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/13\/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":648,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[115,56],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69010"}],"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\/648"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=69010"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69010\/revisions"}],"predecessor-version":[{"id":69014,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69010\/revisions\/69014"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=69010"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=69010"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=69010"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}