{"id":75884,"date":"2022-11-19T20:52:33","date_gmt":"2022-11-20T01:52:33","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=75884"},"modified":"2022-11-19T20:52:46","modified_gmt":"2022-11-20T01:52:46","slug":"project-11-landscape-3","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/19\/project-11-landscape-3\/","title":{"rendered":"Project &#8211; 11 &#8211; 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>In this animation, I wanted to create a simple and playful but mysterious atmosphere. I choose to make it only with shades of purple and set the scene in the woods during a full moon. <\/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-63.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\">\/\/ Emily Franco\n\/\/ efranco\n\/\/ Section C\n\/\/ Project 11 \n\n\n\n\/\/CHANGING FEATURES\n\/\/verticle coordinates \nvar hill = [];\nvar noiseParam = 0; \n\/\/hill frequency\nvar noiseStep = 0.02; \n\nvar tree;\nvar forest = []; \nvar sky = [];\n\n\/\/state of person walking\nvar state = 0;\n\nfunction moon(){\n    var oMoon = 30;\n    var dim = 100;\n    noStroke();\n    fill(252,250,252,230);\n    circle(300,90,dim);\n    \/\/halo\n    for(var i=0; i&lt;3; i++){\n        oMoon -= 5*i;\n        dim +=30;\n        fill(252,250,252,oMoon);\n        circle(300,90,dim);\n    }\n}\n\n\/\/constructor for stars\nfunction makeStar(){\n    var star = {x:random(width),y:random(height),size:random(0.25,2), \n                opacity:random(100,255),\n                drawFunction: drawStar};\n    return star;\n}\n\nfunction drawStar(){\n    stroke(252,250,252,this.opacity);\n    strokeWeight(this.size);\n    point(this.x,this.y);\n}\n\nfunction stepTree(){\n    this.x++;\n}\n\nfunction drawTree(){\n    noStroke();\n    var side;\n    var triangleY;\n    var branchLen;\n    \n    fill(this.color);\n    rect(this.x,0,this.w,height);\n    \/\/branches\n    switch(this.side){\n        case 0:\n        triangle(this.x,this.triangleY,this.x-this.branchLen,this.triangleY-6,this.x,this.triangleY+10);\n        break;\n        case 1: \n        triangle(this.x+this.w,this.triangleY,this.x+this.w+this.branchLen,this.triangleY-6,this.x+this.w,this.triangleY+10);\n        break;\n    }  \n}\n\n\/\/tree constructor\nfunction makeTrees(tx,tw,treeColor){\n    var tree = {x: tx, w:tw, color:treeColor, side:floor(random(2)), \n                triangleY:random(height-100), branchLen:random(10,55),\n                drawFunction:drawTree, stepFunction: stepTree};\n\n    return tree;\n}\n\n\/\/center if person is center of face circle\nfunction person(x, y,state){\n    \/\/LEGS\n    \/\/state 1\n    if(state==0){\n        strokeWeight(2);\n        stroke(248,232,212);\n        line(x-6,y+58,x-8,y+68);\n        line(x+4,y+58,x+4,y+68);\n        stroke(0);\n        line(x-8,y+68,x-9,y+81);\n        line(x+4,y+68,x+7,y+81);\n        \/\/shadow\n        noStroke();\n        fill(0,0,0,90);\n        rect(x-10,y+81,30,5);\n    }\n    \/\/state 2\n    if(state==1){\n        strokeWeight(2);\n        stroke(248,232,212);\n        line(x-3,y+58,x-8,y+67);\n        line(x+5,y+58,x+6,y+68);\n        stroke(0);\n        line(x-8,y+67,x-6,y+81);\n        line(x+6,y+68,x+9,y+81);\n        \/\/shadow\n        noStroke();\n        fill(0,0,0,90);\n        rect(x-12,y+81,35,5);\n    }\n    \/\/state 3\n    if(state==2){\n        strokeWeight(2);\n        stroke(248,232,212);\n        line(x-3,y+58,x-6,y+69);\n        line(x,y+58,x,y+68);\n        stroke(0);\n        line(x-6,y+69,x+3,y+81);\n        line(x,y+68,x,y+81);\n        \/\/shadow\n        noStroke();\n        fill(0,0,0,90);\n        rect(x-5,y+81,15,5);\n    }\n    noStroke();\n    \/\/BODY\n    \/\/hair in back\n    fill(43,28,28);\n    rect(x-10,y,17.5,29.8);\n\n    \/\/head\n    fill(248,232,212);\n    circle(x,y,20);\n    \/\/neck\n    rect(x-1,y+10,2,5);\n    \/\/hair\n    fill(56,38,33);\n    arc(x,y,20,20,radians(180),radians(0),CHORD);\n    rect(x+4.6,y,5.4,29.9);\n    \/\/eye\n    ellipse(x-6,y+2,1,2);\n    \/\/dress\n    fill(33,30,45);\n    beginShape();\n    vertex(x-6.5,y+15);\n    vertex(x-15,y+59);\n    vertex(x+15,y+59);\n    vertex(x+6.5,y+15);\n    endShape(CLOSE);\n}\n\nfunction moveHill(){\n    \/\/hill.shift();\n\n    \/\/add new coordinate to hill arry\n    n = noise(noiseParam); \n    val = map(n,0,1,height-100,height);\n    hill.pop();\n    hill.unshift(val);\n    noiseParam = noiseParam + noiseStep;\n\n}\nfunction defineHill(){\n    var n;\n    var val;\n    for(var i=0; i&lt;(width\/5)+1; i++){\n        n = noise(noiseParam);\n        \/\/map noise output to height of canvas\n        val = map(n,0,1,height-100,height);\n        hill.unshift(val);\n        \/\/increment to change curve\n        noiseParam = noiseParam + noiseStep;\n    }\n}\n\nfunction setup(){\n    createCanvas(400, 400);\n    frameRate(5);\n\n    \/\/STARS \n    for(var i=0; i&lt;200; i++){\n        sky[i] = makeStar();\n    }\n\n    \/\/TREES\n    for(var i=0; i&lt;=18;i++){\n          \/\/furthest back\n        if(i&lt;=4){\n            c = color(50,36,81);\n        }\n        \/\/middle\n        if(i&gt;4 & i<=10){\n            c = color(35,29,71);\n        }\n        if(i&gt;10){\n            c = color(25,18,66);\n        }\n        \/\/front\n        tree = makeTrees(random(width),random(5,15),c);\n        forest.push(tree);\n    }\n\n    \/\/HILL\n    defineHill();\n    \n}\n\nfunction draw(){\n    background(69,55,89);\n    var drawSetBack = floor(random(30));\n    \/\/------BACKGROUND--------\n    moon();\n    for(var i=0; i&lt;sky.length-1; i++){\n        \/\/make stars twinkle\n        if(i%5==0){\n            sky[i].size = random(0.25,3.5);\n        }\n        var str = sky[i];\n        str.drawFunction();\n    }\n    \/\/back hills\n    fill(49, 34, 66);\n    noStroke();\n    beginShape();\n    curveVertex(400,235);\n    curveVertex(400,235);\n    curveVertex(316,283);\n    curveVertex(232,285);\n    curveVertex(194,400);\n    curveVertex(400,400);\n    endShape(CLOSE);\n\n    fill(62, 47, 79);\n    noStroke();\n    beginShape();\n    curveVertex(0,245);\n    curveVertex(0,245);\n    curveVertex(35,204);\n    curveVertex(87,273);\n    curveVertex(192,258);\n    curveVertex(272,320);\n    curveVertex(400,400);\n    curveVertex(0,400);\n    endShape(CLOSE);\n\n    \/\/------MIDGROUND--------\n    \/\/find index of most right tree\n    var currentX=0; \n    var xHigh=0;\n\n    for(var i=0; i&lt;=forest.length-1;i++){\n        currentX = forest[i].x;\n        if(currentX&gt;xHigh){\n            xHigh=currentX;\n            furthestTree = i;\n        }\n    }\n\n    \/\/move last tree to start of canvas\n    if(forest[furthestTree].x &gt; width){\n        forest[furthestTree].x = 0-forest[furthestTree].w;\n    }\n\n    for(var i=0; i&lt;=forest.length-1;i++){\n        var t = forest[i];\n        t.drawFunction();\n        t.stepFunction();\n    }\n\n    \/\/------FOREGROUND--------\n    \/\/draw hill\n    for(var i=0; i&lt;(width\/5);i++){\n        fill(125, 104, 135);\n        beginShape();\n        vertex(i*5,hill[i]);\n        vertex(i*5,height);\n        vertex((i+1)*5,height);\n        vertex((i+1)*5,hill[i+1]);\n        endShape(CLOSE);\n    }\n    moveHill();\n\n    \/\/move person according to hill value\n    person(260,hill[53]-79,state%3);\n    state++;\n}<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>In this animation, I wanted to create a simple and playful but mysterious atmosphere. I choose to make it only with shades of purple and set the scene in the woods during a full moon. sketch \/\/ Emily Franco \/\/ efranco \/\/ Section C \/\/ Project 11 \/\/CHANGING FEATURES \/\/verticle coordinates var hill = []; &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/19\/project-11-landscape-3\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project &#8211; 11 &#8211; Landscape&#8221;<\/span><\/a><\/p>\n","protected":false},"author":719,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[115,57],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75884"}],"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\/719"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=75884"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75884\/revisions"}],"predecessor-version":[{"id":75887,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75884\/revisions\/75887"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=75884"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=75884"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=75884"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}