{"id":75954,"date":"2022-11-20T15:14:39","date_gmt":"2022-11-20T20:14:39","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=75954"},"modified":"2022-11-20T15:44:15","modified_gmt":"2022-11-20T20:44:15","slug":"project-11-generative-landscape-4","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/20\/project-11-generative-landscape-4\/","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><p>SpongeBob SquarePants<\/p>\n<div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/sketch-73.js\" data-width=\"480\" data-height=\"400\">sketch<\/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=\"400\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Xinyi Du \n\/\/15104 Section B\n\/\/xinyidu@andrew.cmu.edu\n\/\/Project-11\n\n\/\/SpongBob walking gif source:\n\/\/https:\/\/www.deviantart.com\/supermariospongebob\/art\/SB-Walkin-into-Monday-858782150\n\/\/SB Walkin' into Monday\n\/\/by supermariospongebob\n\n\/\/arrays for background flowers\nvar filenamesF = [];\nvar bgflowers = [];\nvar backgroundF = [];\n\/\/arrays for the character\nvar filenames = [];\nvar walkImage = [];\nvar character = [];\n\nvar buildings = [];\nvar leaves = [];\nvar flags = [];\n\nfunction preload() {\n    \/\/load SpongeBob walk cycle images\n    filenames[0] = \"https:\/\/i.imgur.com\/ulD5SOy.png\";\n    filenames[1] = \"https:\/\/i.imgur.com\/0cFmmhf.png\";\n    filenames[2] = \"https:\/\/i.imgur.com\/wmSWQHb.png\";\n    filenames[3] = \"https:\/\/i.imgur.com\/iYYLnPL.png\";\n    filenames[4] = \"https:\/\/i.imgur.com\/kFzcZXr.png\";\n    filenames[5] = \"https:\/\/i.imgur.com\/Ej0nUgn.png\";\n    filenames[6] = \"https:\/\/i.imgur.com\/wfR57hy.png\";\n    filenames[7] = \"https:\/\/i.imgur.com\/4TadbPD.png\";\n    filenames[8] = \"https:\/\/i.imgur.com\/BjVfWWi.png\";\n    filenames[9] = \"https:\/\/i.imgur.com\/vLUiotP.png\";\n    filenames[10] = \"https:\/\/i.imgur.com\/oA49LHr.png\";\n    filenames[11] = \"https:\/\/i.imgur.com\/A9TMzpP.png\";\n    filenames[12] = \"https:\/\/i.imgur.com\/NAPIs2c.png\";\n    for (var i = 0; i &lt; filenames.length; i++) {\n        walkImage[i] = loadImage(filenames[i]);\n    }\n    \/\/load background flower images\n    filenamesF[0] = \"https:\/\/i.imgur.com\/ZNmnfMU.png\";\n    filenamesF[1] = \"https:\/\/i.imgur.com\/o1z2jrZ.png\";\n    filenamesF[2] = \"https:\/\/i.imgur.com\/U4OwJMt.png\";\n    filenamesF[3] = \"https:\/\/i.imgur.com\/iACszh9.png\";\n    filenamesF[4] = \"https:\/\/i.imgur.com\/4eTqZLb.png\";\n    for (var i = 0; i &lt; filenamesF.length; i++) {\n        bgflowers[i] = loadImage(filenamesF[i]);\n    }\n    leaves.push(loadImage(\"https:\/\/i.imgur.com\/8NFDDnM.png\"));\n    leaves.push(loadImage(\"https:\/\/i.imgur.com\/CberjzQ.png\"));\n    flags.push(loadImage(\"https:\/\/i.imgur.com\/2kTH6D6.png\"));\n}\n\n\/\/make SpongeBob\nfunction makeSpongeBob(sx, sy) {\n    var s = {x: sx, y: sy, \n             imageNum: 0,\n             drawFunction: drawSpongeBob\n         }\n    return s;\n}\nfunction drawSpongeBob() {\n    this.imageNum ++; \/\/increase imageNum\n    \/\/if reaches the length (end) of the array (go over 10 images), start from 0 again\n    if (this.imageNum == walkImage.length) { \n        this.imageNum = 0;\n    }\n    image(walkImage[this.imageNum], this.x, this.y, 130, 140); \/\/draw the image\n}\n\nfunction setup() {\n    createCanvas(480, 400); \n    frameRate(9);\n    \/\/store SpongBob andCoral images to the array character\n    character.push(makeSpongeBob(180, 220));\n    character.push(makeCoral(0));\n    \/\/store background flower images to the array makeBackground\n    backgroundF.push(makeBackground(20, 50, 0));\n    backgroundF.push(makeBackground(180, 30, 1));\n    backgroundF.push(makeBackground(460, 30, 2));\n    backgroundF.push(makeBackground(120, 180, 3));\n    backgroundF.push(makeBackground(300, 180, 4));\n    backgroundF.push(makeBackground(550, 100, 0));\n    backgroundF.push(makeBackground(650, 30, 3));\n    \/\/store 4 types of buildings to the array buildings\n    buildings.push(makeBuilding1(0));\n    buildings.push(makeBuilding1(360));\n    buildings.push(makeBuilding2(130));\n    buildings.push(makeBuilding3(270));\n    buildings.push(makeBuilding4(560));\n}\n\n\nfunction draw() {\n    background(87,157,231); \n    \/\/draw background flowers\n    for (i = 0; i &lt; backgroundF.length; i++) {\n        backgroundF[i].update();\n        backgroundF[i].display();  \n    } \n    \/\/draw the grounds and horizon lines\n    fill(235,233,218);\n    noStroke();\n    rect(0, height*2\/3, width, height\/3);\n    fill(80);\n    rect(0, height*3\/4, width, height\/4);\n    stroke(0);\n    strokeWeight(0.7);\n    line(0, height*3\/4, width, height*3\/4);\n    line(0, height*2\/3, width, height*2\/3)\n    \/\/draw the buildings\n    for (i = 0; i &lt; 5; i ++) {\n        buildings[i].update();\n        buildings[i].drawFunction();\n    }\n    character[0].drawFunction(); \/\/draw SpongBob\n    character[1].drawFunction(); \/\/draw corals\n}\n\n\/\/make background flowers\nfunction makeBackground(bgx, bgy, idx) {\n    var bg = {x: bgx, y: bgy, index: idx, speed: -3,\n                size: random(100, 180), \/\/random starting size\n                dsize: random(-6,6), \/\/random decrease or increase size every update\n                update: bgFlowerUpdate,\n                display: bgFlowerDisplay\n            }\n    return bg;  \n}\nfunction bgFlowerUpdate() {\n    this.x += this.speed; \/\/move to the left with speed -3\n    this.size += this.dsize; \/\/increase or decrease size by dsize\n    if (this.x &lt; -width\/2) { \/\/if out of the canvas\n        this.x = width; \/\/start from the right side again\n        this.size = random(80, 100); \/\/start with random size\n        this.size += this.dsize;\n    }\n    if (this.size &gt;= 200 || this.size &lt;= 30) { \/\/if size reaches the limit 30 or 200\n        this.dsize = -this.dsize; \/\/inverse the size change direction\n    }\n}\nfunction bgFlowerDisplay() {\n    image(bgflowers[this.index], this.x, this.y, this.size, this.size); \n}\n\n\/\/Squidward Tentacles' house\nfunction makeBuilding1(bx) { \/\/startX is the starting X of the building\n    var bg = {startX: bx, speed: -6,\n              r: random(40, 150), g: random(70, 200), b: random(200, 255), \/\/random color in cool tone\n              update: updateBuilding1,\n              drawFunction: drawBuilding1\n            }\n    return bg;\n}\nfunction drawBuilding1() {\n    \/\/structure\n    var x1 = 100; var y1 = 140;\n    var x2 = 150; \n    var x3 = 165; var y2 = 285;\n    var x4 = 85; \n    fill(this.r+20, this.g+20, this.b+20);\n    rect(this.startX+80, 180, 90, 45);\n    fill(this.r, this.g, this.b);\n    quad(this.startX+x1, y1, this.startX+x2, y1, this.startX+x3, y2, this.startX+x4, y2);\n    fill(this.r-20, this.g-20, this.b-20);\n    rect(this.startX+103, 169, 44, 11);\n    quad(this.startX+120, 180, this.startX+130, 180, this.startX+138, 235, this.startX+112, 235);\n    \/\/windows\n    fill(171,174,191);\n    ellipse(this.startX+109, 190, 19, 20);\n    ellipse(this.startX+141, 190, 19, 20);\n    if (frameCount % 5 == 0) { \/\/blink every 5 frames\n        fill(21,144,177); \n    } else {\n        fill(255, 250, 112);\n    }\n    ellipse(this.startX+109, 190, 0.6*19, 0.6*20);\n    ellipse(this.startX+141, 190, 0.6*19, 0.6*20);\n    \/\/door\n    fill(132, 114, 85);\n    arc(this.startX+125, 255, 26, 26, PI, PI*2, OPEN);\n    noStroke();\n    rect(this.startX+125-13, 255, 26, 30);\n    stroke(0);\n    line(this.startX+125-13, 255, this.startX+125-13, 255+30);\n    line(this.startX+125+13, 255, this.startX+125+13, 255+30);\n    line(this.startX+125-13, 255+30, this.startX+125+13, 255+30);\n\n}\nfunction updateBuilding1() {\n    this.startX += this.speed;\n    if (this.startX &lt; -width\/3) { \/\/if out of the canvas\n        this.startX = width; \/\/start from the right side again\n    }\n\n}\n\/\/SpongeBob's house\nfunction makeBuilding2(bx) {\n    var bg = {startX: bx, speed: -6,\n              r: random(240,255), g: random(140,210), b: random(10,45), \/\/random orange\/yellow\n              update: updateBuilding2,\n              drawFunction: drawBuilding2\n            }\n    return bg;\n}\nfunction drawBuilding2() {\n    fill(46, 144, 11);\n    image(leaves[0], this.startX+16, 76, 200, 230); \/\/draw leaves  \n    \/\/pineapple structure\n    fill(this.r, this.g, this.b);\n    arc(this.startX+125, 245.5, 100, 130, PI*3\/4, PI*9\/4, CHORD);\n    \/\/windows\n    fill(171,174,191);\n    ellipse(this.startX+109, 210, 19, 20);\n    ellipse(this.startX+155, 265, 19, 20);\n    if (frameCount % 8 == 0) { \/\/blinks every 8 frames\n        fill(255, 250, 112);\n    } else {\n        fill(21,144,177);\n    }\n    ellipse(this.startX+109, 210, 0.6*19, 0.6*20);\n    ellipse(this.startX+155, 265, 0.6*19, 0.6*20);\n    \/\/door\n    fill(171,174,191);\n    strokeWeight(0.5);\n    arc(this.startX+125, 260, 26, 26, PI, PI*2, OPEN);\n    noStroke();\n    rect(this.startX+125-13, 260, 26, 25);\n    stroke(0);\n    strokeWeight(0.5);\n    line(this.startX+125-13, 260, this.startX+125-13, 260+25);\n    line(this.startX+125+13, 260, this.startX+125+13, 260+25);\n    line(this.startX+125-13, 260+25, this.startX+125+13, 260+25);\n    fill(76,89,121);\n    arc(this.startX+125, 260, 18, 18, PI, PI*2, OPEN);\n    noStroke();\n    rect(this.startX+125-9, 260, 18, 25);\n    stroke(0);\n    strokeWeight(0.5);\n    line(this.startX+125-9, 260, this.startX+125-9, 260+25);\n    line(this.startX+125+9, 260, this.startX+125+9, 260+25);\n    line(this.startX+125-9, 260+25, this.startX+125+9, 260+25);\n}\nfunction updateBuilding2() {\n    this.startX += this.speed;\n    if (this.startX &lt; -width\/3) {\n        this.startX = width;\n    }\n\n}\n\/\/Patrick Star's house\nfunction makeBuilding3(bx) {\n    var bg = {startX: bx, speed: -6,\n              r: random(150,255), g: 80, b: 80, \/\/random shades of red\n              update: updateBuilding3,\n              drawFunction: drawBuilding3\n            }\n    return bg;\n}\nfunction drawBuilding3() {\n    \/\/decoration\n    strokeWeight(0.3)\n    fill(248,228,156);\n    rect(this.startX+125-1.5, 248, 3, 30);\n    rect(this.startX+125-8, 245, 16, 3);\n    \/\/structure\n    strokeWeight(0.6);\n    fill(this.r, this.g, this.b);\n    arc(this.startX+125, 285, 60, 60, PI, PI*2, CHORD);\n}\nfunction updateBuilding3() {\n    this.startX += this.speed;\n    if (this.startX &lt; -width\/2) {\n        this.startX = width;\n    }\n}\n\/\/Krusty Krab Restaurant\nfunction makeBuilding4(bx) {\n    var bg = {startX: bx, speed: -6,\n              update: updateBuilding4,\n              drawFunction: drawBuilding4\n            }\n    return bg;\n}\nfunction drawBuilding4() {\n    fill(115,95,42);\n    rect(this.startX, 222, 105, 63);\n    \/\/glass windows and door\n    fill(109,165,244);\n    rect(this.startX, 252, 105, 33);\n    \/\/wooden structures\n    fill(115,95,42);\n    rect(this.startX, 215, 12, 70);\n    rect(this.startX+105, 215, 12, 70);\n    fill(94,74,29);\n    line(this.startX-5+63, 252, this.startX-5+63, 285)\n    rect(this.startX-5, 273, 40, 12);\n    rect(this.startX+80, 273, 41, 12);\n    rect(this.startX-5+40, 252, 40, 5);\n    rect(this.startX-5+40, 252, 10, 33);\n    rect(this.startX+71, 252, 11, 33);\n    \/\/load flags\n    image(flags[0], this.startX+11.5, 232, 94, 20); \n}\nfunction updateBuilding4() {\n    this.startX += this.speed;\n    if (this.startX &lt; -width\/3) {\n        this.startX = width;\n    }\n\n}\n\/\/corals\nfunction makeCoral(cx) {\n    var s = {startX: cx, speed: -10,\n             drawFunction: drawCoral\n         }\n    return s;\n}\nfunction drawCoral() {\n    image(leaves[1], this.startX+100, 320, 60, 120); \/\/smaller coral\n    image(leaves[1], this.startX+200, 280, 100, 200); \/\/bigger coral\n    this.startX += this.speed;\n    if (this.startX &lt; -width) {\n        this.startX = width*1.2;\n    }\n}\n\n\n\n\n\n\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>SpongeBob SquarePants sketch \/\/Xinyi Du \/\/15104 Section B \/\/xinyidu@andrew.cmu.edu \/\/Project-11 \/\/SpongBob walking gif source: \/\/https:\/\/www.deviantart.com\/supermariospongebob\/art\/SB-Walkin-into-Monday-858782150 \/\/SB Walkin&#8217; into Monday \/\/by supermariospongebob \/\/arrays for background flowers var filenamesF = []; var bgflowers = []; var backgroundF = []; \/\/arrays for the character var filenames = []; var walkImage = []; var character = []; var buildings &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/20\/project-11-generative-landscape-4\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 11: Generative Landscape&#8221;<\/span><\/a><\/p>\n","protected":false},"author":716,"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\/f2022\/wp-json\/wp\/v2\/posts\/75954"}],"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\/716"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=75954"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75954\/revisions"}],"predecessor-version":[{"id":75958,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75954\/revisions\/75958"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=75954"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=75954"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=75954"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}