{"id":76008,"date":"2022-11-20T21:20:57","date_gmt":"2022-11-21T02:20:57","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=76008"},"modified":"2022-11-20T23:28:46","modified_gmt":"2022-11-21T04:28:46","slug":"project-11-generative-landscape-5","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/20\/project-11-generative-landscape-5\/","title":{"rendered":"Project 11 &#8211; 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>I combined handdrawn assets from a previous project with walking sprite from Assignment 9 to create a scene of a person walking outside. The sketchy &lsquo;handdrawn&rsquo; aesthetic of the assets combined with the layers scrolling at different speeds to create a sense of parallax. Occasionally, another character will pass by between the layer behind the main character.<\/p>\n\n\n\n<div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/sketch-83.js\" data-width=\"400\" 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=\"400\" height=\"400\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var walkImage = [];   \/\/ an array to store the images\nvar character;\n\nvar fgElem = [];\nvar mgElem = [];\nvar bgElem = [];\nvar pgElem = [];\n\nvar fg = [];\nvar mg = [];\nvar bg = [];\nvar pg = [];\n\nfunction preload(){\n    \/\/ walk cycle\n    walkImage[0] = loadImage(\"https:\/\/imgur.com\/8HlL26L\");\n    walkImage[1] = loadImage(\"https:\/\/imgur.com\/VLCqhEO\");\n    walkImage[2] = loadImage(\"https:\/\/imgur.com\/6rAVlb8\");\n    walkImage[3] = loadImage(\"https:\/\/imgur.com\/2VRJjQ6\");\n    walkImage[4] = loadImage(\"https:\/\/imgur.com\/zFCNtnG\");\n    walkImage[5] = loadImage(\"https:\/\/imgur.com\/AnyR09P\");\n    walkImage[6] = loadImage(\"https:\/\/imgur.com\/PMB0qDG\");\n    walkImage[7] = loadImage(\"https:\/\/imgur.com\/CiQWgmP\");\n\n\n\n\n    \/\/loading foreground\n    fgElem[0] = loadImage(\"https:\/\/imgur.com\/RUYNCQT\");\n    fgElem[1] = loadImage(\"https:\/\/imgur.com\/UaNr8wZ\");\n    fgElem[2] = loadImage(\"https:\/\/imgur.com\/LsfvMCm\");\n    fgElem[3] = loadImage(\"https:\/\/imgur.com\/GRwR31R\");\n    fgElem[4] = loadImage(\"https:\/\/imgur.com\/xQtPjEQ\");\n    fgElem[5] = loadImage(\"https:\/\/imgur.com\/cTUW62y\");\n    fgElem[6] = loadImage(\"https:\/\/imgur.com\/cY58wgx\");\n\n\n    \/\/loading midground\n    mgElem[0] = loadImage(\"https:\/\/imgur.com\/lal5lq9\");\n    mgElem[1] = loadImage(\"https:\/\/imgur.com\/c5fb0jp\");\n    mgElem[2] = loadImage(\"https:\/\/imgur.com\/kKwofLH\");\n    mgElem[3] = loadImage(\"https:\/\/imgur.com\/iN2MTZN\");\n    mgElem[4] = loadImage(\"https:\/\/imgur.com\/QclBuA8\");\n    mgElem[5] = loadImage(\"https:\/\/imgur.com\/IAaQ7Ta\");\n    mgElem[6] = loadImage(\"https:\/\/imgur.com\/g3xh1GG\");\n    mgElem[7] = loadImage(\"https:\/\/imgur.com\/LWmOUjc\");\n    mgElem[8] = loadImage(\"https:\/\/imgur.com\/xSvimmS\");\n\n    \/\/loading background\n    bgElem[0]= loadImage(\"https:\/\/imgur.com\/8MNPtj6\");\n    bgElem[1]= loadImage(\"https:\/\/imgur.com\/4bjqW3c\");\n    bgElem[2]= loadImage(\"https:\/\/imgur.com\/q7xaqWr\");\n    bgElem[3]= loadImage(\"https:\/\/imgur.com\/gEnWbVW\");\n    bgElem[4]= loadImage(\"https:\/\/imgur.com\/0yBIPM8\");\n    bgElem[5]= loadImage(\"https:\/\/imgur.com\/6TYtEHn\");\n\n    \/\/loading clouds\n    pgElem[0] = loadImage(\"https:\/\/imgur.com\/pdXo0gP\");\n    pgElem[1] = loadImage(\"https:\/\/imgur.com\/ohLIq5A\");\n    pgElem[2] = loadImage(\"https:\/\/imgur.com\/I9uzjJC\");\n    pgElem[3] = loadImage(\"https:\/\/imgur.com\/JYXlm2v\");\n}\n\n\nfunction setup() {\n    createCanvas(400, 400);\n    background(202, 240, 248);\n    frameRate(12);\n    imageMode(CENTER);\n    character = makeCharacter(width\/4, height*0.62, 0, 0);\n    surpriseChar = makeCharacter(-width*2.5, height*0.62, -5.5, 0);\n\n    var rand = 27;\n    \/\/loading foreground\n    var x1 = random(1, width\/4);\n    for (var i = 0; i&lt;rand; i++){\n        var envChar = makeCharacter(x1, height*(0.63), 5.5, 0);\n        envChar.imageNum = int(random(0, fgElem.length));\n        x1 += random(width\/(rand), (2*width)\/rand);\n        fg.push(envChar);\n    }\n\n     \/\/loading midground\n     var rand2 = 20;\n     var x2 = random(1, width);\n     for (var i = 0; i&lt;rand2; i++){\n         var envChar = makeCharacter(x2, height*(0.59), 2.5, 0);\n         envChar.imageNum = int(random(0, mgElem.length));\n         envChar.size = random(0.1, 0.17);\n         mg.push(envChar);\n         x2 += random(width\/4, width\/2);\n     }\n\n    \/\/loading background\n    var rand3 = 10;\n    var x3 = random(1, width);\n    for (var i = 0; i&lt;rand3; i++){\n        var envChar = makeCharacter(x3, height*(0.4), 1, 0);\n        envChar.imageNum = int(random(0, bgElem.length));\n        x3 += random(width\/6, width\/3);\n       \n        bg.push(envChar);\n    }\n\n    \/\/loading clouds\n    var rand4 = 4;\n    var x4 = random(1, width*(2\/3));\n    for (var i = 0; i&lt;rand4; i++){\n        var y = random(height*0.05, height*0.4);\n        \n        var envChar = makeCharacter(x4, y, 0.2, 0);\n        envChar.imageNum = int(random(0, pgElem.length));\n        envChar.size = random(0.1, 0.2);\n        pg.push(envChar);\n        x4 += random(width\/3, width\/2);\n    }\n}\n\n\nfunction draw() {\n    background(190, 225, 230);\n    push();\n    noStroke();\n    \n    ellipseMode(CENTER);\n    fill(246, 241, 209, 90);\n    circle(width*0.75, height*0.17, width*0.27);\n    \n    fill(244, 222, 44, 70);\n    circle(width*0.75, height*0.17, width*0.22);\n    fill(244, 222, 44, 120);\n    circle(width*0.75, height*0.17, width*0.17);\n    fill(243, 222, 44);\n    circle(width*0.75, height*0.17, width*0.12);\n    pop();\n\n    updateArray(pg, pgElem);\n    for (var i = 0; i&lt;pg.length; i++){\n        pg[i].drawFunction(pgElem); \n        pg[i].moveFunction(pgElem);\n        \n    }  \n\n    updateArray(bg, bgElem);\n    for (var i = 0; i &lt; bg.length; i++){\n        bg[i].drawFunction(bgElem);\n        bg[i].moveFunction(bgElem);\n    }\n\n    surpriseChar.drawFunction(walkImage);\n    surpriseChar.stepFunction(walkImage);\n    surpriseChar.moveFunction();\n    \n\n\n    updateArray(mg, mgElem);\n    for (var i = 0; i &lt; mg.length; i++){\n        mg[i].drawFunction(mgElem);   \n        mg[i].moveFunction(mgElem);\n        \n    }\n\n    character.drawFunction(walkImage);\n    character.stepFunction(walkImage);\n    \n\n    updateArray(fg, fgElem);\n    for (var i = 0; i&lt;fg.length; i++){\n        fg[i].drawFunction(fgElem); \n        fg[i].moveFunction(fgElem);\n        \n    }  \n\n    push();\n    noStroke();\n    fill(226, 208, 180);\n    rect(0, height*0.74, width, height);\n    pop();\n}\n\n\n\/\/ Constructor for each walking character\nfunction makeCharacter(cx, cy, cdx, cdy) {\n    var c = {x: cx, y: cy, dx: cdx, dy: cdy,\n             walkingRight: true, \n             imageNum: 0,\n             stepFunction: stepCharacter,\n             drawFunction: drawCharacter,\n             moveFunction: moveCharacter\n         }\n    return c;\n}\n\nfunction stepCharacter(images){\n    this.imageNum ++;\n    this.imageNum = this.imageNum % images.length;\n}\n\nfunction moveCharacter(){\n    this.x -= this.dx;\n    if (this == surpriseChar & this.x > 200){\n        this.x = -width;\n    }\n}\n\nfunction drawCharacter(images){\n    if (images == fgElem){\n        push();\n        translate(this.x, this.y);\n        scale(0.1);\n        image(images[this.imageNum], this.x, this.y);\n        pop();\n    } else if (images == bgElem){\n        push();\n        translate(this.x, this.y);\n        scale(0.19);\n        image(images[this.imageNum], this.x, this.y);\n        pop();\n    } else if (images == mgElem){\n        push();\n        translate(this.x, this.y);\n        scale(0.18);\n        image(images[this.imageNum], this.x, this.y);\n        pop();\n    } else if (images == pgElem){\n        push();\n        translate(this.x, this.y);\n        scale(this.size);\n        image(images[this.imageNum], this.x, this.y);\n        pop();\n    } else {\n        if (this == surpriseChar){\n            push();\n            scale(-1, 1);\n            image(images[this.imageNum], this.x, this.y);\n            pop();\n        } else {\n            image(images[this.imageNum], this.x, this.y);\n        }\n    }\n}\n\nfunction updateArray(array, source){\n    for (var i = 0; i &lt; array.length; i++){\n        elem = array[i];\n        if ((source == fgElem & elem.x < -10)||\n            (source != fgElem && elem.x < -100)){\n            elem.x = width + random(width\/4, width);\n            elem.imageNum = int(random(0, source.length));\n        }\n    }\n}\n\n\n\n\n\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>I combined handdrawn assets from a previous project with walking sprite from Assignment 9 to create a scene of a person walking outside. The sketchy &lsquo;handdrawn&rsquo; aesthetic of the assets combined with the layers scrolling at different speeds to create a sense of parallax. Occasionally, another character will pass by between the layer behind the &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/20\/project-11-generative-landscape-5\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 11 &#8211; Generative Landscape&#8221;<\/span><\/a><\/p>\n","protected":false},"author":708,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[115,121],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/76008"}],"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\/708"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=76008"}],"version-history":[{"count":10,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/76008\/revisions"}],"predecessor-version":[{"id":76145,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/76008\/revisions\/76145"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=76008"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=76008"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=76008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}