Canvas Final - Forest Getaway

on

Forest Getaway




  This piece was made on Dreamweaver using HTML5. This is the first piece that I have ever made on Dreamweaver. Dreamweaver was a very challenging program for me to use at first, but I was able to get familiar with it. It is very daunting to look at (which can be seen when looking at all the code it takes to create a design). HTML5 really got me to think which I really enjoyed. I enjoyed how precise and intricate the work is. 

    My piece is a group of three different hills at which a small house sits at the top. It is a bright sunny day and there are a few clouds in the sky. The fluffy clouds aren't preventing the trees to get their daily sunlight. The shapes involved are circles, squares, triangles, and bezier curves. 

    My design started with a thought of some rolling hills.  I had the image of a lone house in the forest stuck in my head. I wanted to do a landscape from the beginning because landscapes intrigue me. I love finding the beauty of the world. I then sketched it out and added in more detail such as the trees, clouds, house, and sun. My sketch was on graph paper which helped me find my coordinates for all the points. I then also would write notes on other pieces of graph paper. There was some tweaking done to between the sketch and final piece due to spacing and complexity. Next, it was time to find the right code to create each individual shape. Finally, after all the shapes were on the canvas, it was time for coloring. To find the colors I chose, I used the Quick Edit tool. The most complex part of my piece would have to be the clouds because they were made up of multiple shapes in order to get the curves and Toy Story inspired shape that  I desired.  

    This piece took a lot of trial and error due to the newness of Dreamweaver. The program takes patience and learning. I had a great time learning and creating using Dreamweaver. I think my piece is successful for my first piece. I really like how it came out. I'm really happy with how my clouds came out because I was worried about how all the different shapes working together to create one shape. 


The Sketch:


Estimated Time of Work: 10 hours. 

My Code:

<!doctype html>

<html>

<head>

<meta charset="UTF-8">




<title> -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- </title>




<!-- import external .js scripts here -->


<!-- <script type="text/javascript" src="#" ></script> -->



<!-- modify CSS properties here -->


<style type="text/css">


body,td,th {

font-family: Monaco, "Courier New", "monospace";

font-size: 14px;

color: rgba(255,255,255,1);

}


body {

background-color: rgba(0,0,0,1);

}


#container {

position: relative;

text-align: left;

width: 95%;

height: 800px;

}


#fmxCanvas {

position: relative;

background-color:rgba(148,247,255,1.00);

border: rgba(255,255,255,1) thin dashed;

cursor: crosshair;

display: inline-block;

}


</style>


</head>




<body>


<div id="container">

<!-- START HTML CODE HERE -->




<canvas id="fmxCanvas" width="800" height="600"></canvas>


<div id="display"></div>





<!-- FINISH HTML CODE HERE -->

</div>


<script>


///////////////////////////////////////////////////////////////////////

// DECLARE requestAnimFrame


var rAF = window.requestAnimFrame ||

window.mozRequestAnimFrame ||

window.webkitRequestAnimFrame ||

window.msRequestAnimFrame;


var fps = 30;


window.requestAnimFrame = (


function(callback) {


return rAF ||


function(callback) {

window.setTimeout(callback, 1000 / fps);

};


})();


///////////////////////////////////////////////////////////////////////

// DEFINE GLOBAL VARIABLES HERE


var canvas;

var context;

canvas = document.getElementById("fmxCanvas");

context = canvas.getContext("2d");


var canvas1;

var context1;

canvas1 = document.createElement("canvas");

context1 = canvas1.getContext("2d");


canvas1.width = canvas.width;

canvas1.height = canvas.height;


var display;

display = document.getElementById('display');


var counter;



///////////////////////////////////////////////////////////////////////

// DEFINE YOUR GLOBAL VARIABLES HERE




///////////////////////////////////////////////////////////////////////

// CALL THE EVENT LISTENERS


window.addEventListener("load", setup, false);



//////////////////////////////////////////////////////////////////////

// ADD EVENT LISTENERS


canvas.addEventListener("mousemove", mousePos, false);


//////////////////////////////////////////////////////////////////////

// MOUSE COORDINATES


var stage, mouseX, mouseY;


function mousePos(event) {

stage = canvas.getBoundingClientRect();

mouseX = event.clientX - stage.left;

mouseY = event.clientY - stage.top;

}


/////////////////////////////////////////////////////////////////////

// INITIALIZE THE STARTING FUNCTION


function setup() {


/////////////////////////////////////////////////////////////////////

// DECLARE STARTING VALUES OF GLOBAL VARIABLES


counter = 0;

mouseX = canvas.width/2;

mouseY = canvas.height/2;


/////////////////////////////////////////////////////////////////////

// CALL SUBSEQUENT FUNCTIONS, as many as you need


clear(); // COVER TRANSPARENT CANVAS OR CLEAR CANVAS


draw(); // THIS IS WHERE EVERYTHING HAPPENS


}


////////////////////////////////////////////////////////////////////

// CLEAR THE CANVAS FOR ANIMATION

// USE THIS AREA TO MODIFY BKGD


function clear() {


context.clearRect(0,0,canvas.width, canvas.height);

context1.clearRect(0,0,canvas.width, canvas.height);


// clear additional contexts here if you have more than canvas1


}


////////////////////////////////////////////////////////////////////

// THIS IS WHERE EVERYTHING HAPPENS


function draw() {


counter += 0.1; // EASIER FOR SINE COSINE FUNCTIONS


if (counter > Math.PI*200) { counter = 0; } // RESET COUNTER


clear(); // USE THIS TO REFRESH THE FRAME AND CLEAR CANVAS


////////////////////////////////////////////////////////////////////

// >>>START HERE>>>START HERE>>>START HERE>>>START HERE>>>START HERE


 // hill one

var startX = 0;

var startY = 300;


// control point 1 coordinates ( magnet )

var cpointX1 = 150;

var cpointY1 = 50;


// control point 2 coordinates ( magnet )

var cpointX2 = 150;

var cpointY2 = 200;


// ending point coordinates

var endX = 600;

var endY = 600;



context.beginPath();

context.moveTo(startX, startY);

context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);

 

context.lineWidth = 1;

context.strokeStyle = "rgba(5,92,0,1.00)";

context.fillStyle = 'rgba(5,92,0,1.00)';

context.stroke();

context.fill();

context.closePath


//bottom of hill that is not the curve

context.beginPath();

context.lineWidth = 0;

context.moveTo(0,300); 

context.lineTo(600,600); 

context.lineTo(0,600); 

context.lineTo(0,300);

context.strokeStyle = "rgba(5,92,0,1.00)"; 

context.fillStyle = 'rgba(5,92,0,1.00)';

context.stroke();

context.fill();

context.closePath();


//hill 2 

var startX = 350;

var startY = 360;


// control point 1 coordinates ( magnet )

var cpointX1 = 350;

var cpointY1 = 225;


// control point 2 coordinates ( magnet )

var cpointX2 = 450;

var cpointY2 = 25;


// ending point coordinates

var endX = 600;

var endY = 475;



context.beginPath();

context.moveTo(startX, startY);

context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);

 

context.lineWidth = 1;

context.strokeStyle = "rgba(82,192,76,1.00)";

context.stroke();

context.fillStyle = 'rgba(82,192,76,1.00)';

context.stroke();

context.fill();


context.beginPath();

context.lineWidth = 5;

context.moveTo(350,360); 

context.lineTo(600,475); 

context.lineTo(600,480);

context.lineTo(680,600);

context.lineTo(600,600);

context.lineTo(350,360);


context.strokeStyle ="rgba(82,192,76,1.00)";

context.stroke();

context.stroke();

context.fillStyle = 'rgba(82,192,76,1.00)';

context.stroke();

context.fill();

context.closePath();

 


//hill three

var startX = 555;

var startY = 350;


// control point 1 coordinates ( magnet )

var cpointX1 = 600;

var cpointY1 = 150;


// control point 2 coordinates ( magnet )

var cpointX2 = 775;

var cpointY2 = 150;


// ending point coordinates

var endX = 800;

var endY = 175;


context.beginPath();

context.lineWidth= 1;

context.moveTo(startX, startY);

context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);

context.fillStyle=  'rgba(50,94,48,1.00)';

context.fill();

context.closePath();


context.beginPath();

context.lineWidth = 0;

context.moveTo(555,350); 

context.lineTo(800,170); 

context.lineTo(800,600); 

context.lineTo(600,600);

;

context.fillStyle = 'rgba(50,94,48,1.00)';

context.fill();

context.closePath();

///Pathway 


context.beginPath();

context.moveTo(730, 175);

context.quadraticCurveTo(660, 705, 650, 600);

context.moveTo(750, 175);

context.quadraticCurveTo(720, 755, 650, 600);

context.lineWidth=1; 

context.fillStyle = "rgba(208,208,208,1.00)"

context.fill();

context.closePath();


context.beginPath();

context.lineWidth=5;

context.moveTo (730,175);

context.lineTo(748,175);

context.lineTo(700,388);

context.moveTo (730,175);

context.strokeStyle="rgba(208,208,208,1.00)";

context.fillStyle=  "rgba(208,208,208,1.00)";

context.fill();

context.stroke();

context.closePath();

////house


context.beginPath();

context.rect(700, 100, 75, 75);

context.lineWidth=1; 

context.fillStyle = "rgba(233,209,209,1.00)"

context.fill();

context.closePath();


//roof

 context.beginPath();

    

    context.moveTo(700,100);

    

context.lineTo(775, 100);

context.lineTo(740, 50);

context.stroke();

context.fillStyle = 'rgba(155,37,37,1.00)';

context.stroke();

context.fill();

 context.closePath();

//chimney

context.beginPath();

context.lineWidth = 1;

context.moveTo(755,70); 

context.lineTo(755,50); 

context.lineTo(760,50); 

context.lineTo(765,50);

context.lineTo(765,85);

context.fillStyle = 'rgba(83,19,19,1.00)';

context.fill();

context.closePath();

//door

context.rect(750, 175, -20, -40);

context.lineWidth = 1;

context.fillStyle= "rgba(92,65,35,1.00)";

context.fill();

context.closePath();


context.beginPath();

context.arc(745,155,1,0,2*Math.PI);

context.strokeStyle= "rgba(250,224,78,1.00)"

context.stroke();

context.closePath();

//windows

context.beginPath();

context.rect(710, 120, 15, 15);

context.lineWidth = 1;

context.fillStyle = "rgba(231,251,253,1.00)";

context.fill();

context.closePath();


context.beginPath();

context.rect(755, 120, 15, 15);

context.lineWidth = 1;

context.fillStyle = "rgb(231,251,253,1.00)"

context.fill();

context.closePath();



//TREES

//tree A

//trunk

context.beginPath();

context.lineWidth = 1; 

context.moveTo(55,220); 

context.lineTo(55,180); 

context.lineTo(75,180); 

context.lineTo(75,200); 

context.lineTo(75,200); 

context.lineTo(55,220); 

context.fillStyle = "rgba(104,81,45,1.00)";

context.fill();

context.closePath();

//leaves

context.beginPath();

context.lineWidth = 1;

context.moveTo(40,180); 

context.lineTo(65,110); 

context.lineTo(90,180); 

context.lineTo(40,180);

context.lineTo(90,180);  

context.fillStyle = "rgba(62,119,44,1.00)";

context.fill();

context.closePath

//Tree B

//trunk

context.beginPath();

context.lineWidth = 1;

context.moveTo(115,150); 

context.lineTo(115,180); 

context.lineTo(130,180); 

context.lineTo(130,180);

context.lineTo(130,150);

context.fillStyle = "rgba(132,94,21,1.00)";

context.fill();

context.closePath();


//leaves

context.beginPath();

context.lineWidth = 1;

context.moveTo(100,150); 

context.lineTo(140,150); 

context.lineTo(125,75); 

context.lineTo(100,150);

context.lineTo(140,150); 

context.fillStyle = "rgba(84,158,46,1.00)";

context.fill();

//tree C\

//leaves

context.beginPath();

context.lineWidth = 1;

context.moveTo(410,200); 

context.lineTo(410,200); 

context.lineTo(410,170); 

context.lineTo(425,170);

context.lineTo(425,195);

context.fillStyle = "rgba(140,97,42,1.00)";

context.fill();

context.closePath();


context.beginPath();

context.lineWidth = 1;

context.moveTo(385,170); 

context.lineTo(415,110); 

context.lineTo(445,170); 

context.lineTo(385,170);

context.lineTo(445,170);

context.lineTo(385,170); 

context.lineTo(445,170);

context.fillStyle = "rgba(51,140,43,1.00)";

context.fill();

context.closePath();


//tree D

//Tree four 

//trunk D

context.beginPath();

context.rect(100, 600, 45, -85);

context.lineWidth = 1;

context.fillStyle = "rgba(129,93,24,1.00)";

context.fill();

context.closePath();

//leaves D

context.beginPath();

context.lineWidth = 1;

context.moveTo(40,515); 

context.lineTo(115,220); 

context.lineTo (200,515); 

context.lineTo(40,515);

context.lineTo(200,515);

context.strokeStyle = "rgba(83,218,45,1.00)"; 

context.stroke();

context.fillStyle= "rgba(94,197,47,1.00)";

context.fill();

context.closePath();



//sun

context.beginPath();

context.lineWidth = 1; 

context.arc(570, 90, 70, 0, 2 * Math.PI, false);

context.fillStyle= "rgba(242,255,112,1.00)";

context.fill();

context.closePath();


//clouds

//cloud a 

context.beginPath();

context.lineWidth = 0; 

context.arc (50,45, 20, 0, 2*Math.PI, false);

context.fillStyle = "rgba(255,255,255,1.00)";

context.fill();

context.closePath();

context.beginPath();

context.lineWidth = 1; 

context.arc (80,25, 35, 0, 2*Math.PI, false);


context.fillStyle= "rgb(255,255,255)";

context.fill();

context.closePath();

context.fillStyle= "rgb(255,255,255)";

context.fill();

context.closePath();

context.beginPath();

context.rect(50,40, 50, 25);

context.lineWidth = 1;  

context.fillStyle= "rgb(255,255,255)";

context.fill();

context.closePath();

context.beginPath();

context.lineWidth = 1; 

context.arc (110,45, 25, 0, 2*Math.PI, false);

context.fillStyle= "rgb(255,255,255)";

context.fill();

context.closePath();

//CLOUD B

context.beginPath();

context.lineWidth = 1; 

context.arc (260,150, 15, 0, 2*Math.PI, false);

context.fillStyle= "rgb(255,255,255)";

context.fill();

context.closePath();

context.beginPath();

context.lineWidth = 1; 

context.arc (190,150, 15, 0, 2*Math.PI, false);

context.fillStyle= "rgb(255,255,255)";

context.fill();

context.closePath();

context.beginPath();

context.rect(190,140, 65, 25);

context.lineWidth = 1; 

context.fillStyle= "rgb(255,255,255)";

context.fill();

context.closePath();

context.beginPath();

context.lineWidth = 1; 

context.arc (225,115, 35, 0, 2*Math.PI, false);

context.fillStyle= "rgb(255,255,255)";

context.fill();

context.closePath();


//cloud C

context.beginPath();

context.lineWidth = 1; 

context.arc (430,50, 40, 0, 2*Math.PI, false);

context.fillStyle= "rgb(255,255,255)";

context.fill();

context.closePath();


context.beginPath();

context.lineWidth = 1; 

context.arc (390,60, 25, 0, 2*Math.PI, false)

context.fillStyle= "rgb(255,255,255)";

context.fill();

context.closePath();


context.beginPath();

context.lineWidth=1;

context.arc(465,65, 25, 0, 2*Math.PI, false);

context.fillStyle= "rgb(255,255,255)";

context.fill();

context.closePath();

context.beginPath();

context.rect(380,59, 50, 25);

context.lineWidth = 1; 

context.fillStyle= "rgb(255,255,255)";

context.fill();

context.closePath();





// <<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE

///////////////////////////////////////////////////////////////////


// CREDITS


context.save();

var credits = "Bella Gonzalez, Forest Getaway, FMX 210-1, FA, 2020";

context.font = 'bold 12px Helvetica';

context.fillStyle = "rgba(0,0,0,1)"; // change the color here

context.shadowColor = "rgba(255,255,255,1)"; // change shadow color here

context.shadowBlur = 12;

context.shadowOffsetX = 2;

context.shadowOffsetY = 2;

context.fillText(credits, 10, canvas.height - 10); // CHANGE THE LOCATION HERE

context.restore();


//////////////////////////////////////////////////////////////////

// HTML DISPLAY FIELD FOR TESTING PURPOSES


display.innerHTML = Math.round(mouseX) + " || " + Math.round(mouseY) + " || counter = " + Math.round(counter);


/////////////////////////////////////////////////////////////////

// LAST LINE CREATES THE ANIMATION


requestAnimFrame(draw); // CALLS draw() every nth of a second


}


</script>


</body>

</html>


Comments

  1. Brooke StephensNovember 29, 2020 at 6:39 PM

    I really liked the way your Canvas project came out! It reminds me of cartoons from when I was little. I think the depth of the work is great, how the hills come one after another, and I think the house came out super cute. If I could suggest anything, I would add more details to the trees to give them more texture.

    ReplyDelete

Post a Comment