CANVAS PROJECT

 



My canvas project contains three green cacti, a tent, a smokey bonfire, a mountain range, the sun, and a blue sky. My first sketch included other things that I could not quite figure out how to add, like the details of the fire. The cacti are made up of lines and quadratic curves. I tried to join all of the lines together to fill the cactus but I couldn't figure out how. The stones for the bonfire are made up of circles, which I learned through the tutorial videos are made out of arcs. The fire itself is also made up of 3 arcs. The smoke is made out of bezier curves. Each mountain is its own triangle, and then I added a large rectangle to go underneath. The tent is made out of three triangles; the middle one being upside down. The sun is made of a quadratic curve and another upside down triangle that i aligned to go between the mountain. 



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(255,255,255,1);

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


//background color

context.beginPath();

context.moveTo(0,600);

context.lineTo(0,0);

context.lineTo(800,0);

context.lineTo(800,600);

context.closePath();

context.lineWidth = 5;

context.strokeStyle = "rgba(189,78,21,1.00)";

context.stroke()

context.lineJoin = "round";

context.fillStyle = "rgba(45,200,238,0.38)";

context.fill();



    //under the mountain

context.beginPath();

context.moveTo(0,600);

context.lineTo(0,300);

context.lineTo(800,300);

context.lineTo(800,600);

context.closePath();

context.lineWidth = 5;

context.strokeStyle = "rgba(189,78,21,1.00)";

context.stroke()

context.lineJoin = "round";

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

context.fill();

    

    // mountain 1

context.beginPath(); // begin a shape

context.moveTo(0,300); // point A coordinates

context.lineTo(75, 150); // point B coords

context.lineTo(145,300); // point C coords

context.closePath(); // close the shape

context.lineWidth = 25; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

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

context.fill();

//mountain 2

context.beginPath(); // begin a shape

context.moveTo(50,300); // point A coordinates

context.lineTo(145, 175); // point B coords

context.lineTo(240,300); // point C coords

context.closePath(); // close the shape

context.lineWidth = 25; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.fillStyle = "rgba(43,42,169,1.00)";

context.fill();


//mountain 3


context.beginPath(); // begin a shape

context.moveTo(125,300); // point A coordinate

context.lineTo(275, 100); // point B coords

context.lineTo(445,300); // point C coords

context.closePath(); // close the shape

context.lineWidth = 25; // you can use a variable that changes wherever you see a number

context.lineJoin = "round"

context.fillStyle = "rgba(43,42,169,1.00)";

context.fill();

//mountain 4


context.beginPath(); // begin a shape 

context.moveTo(300,300); // point A coordin

context.lineTo(455, 110); // point B coords

context.lineTo(600,300); // point C coords

context.closePath(); // close the shape

context.lineWidth = 25; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.fillStyle = "rgba(43,42,169,1.00)";

context.fill();

//mountain 5


context.beginPath(); // begin a shape 

context.moveTo(520,300); // point A coordinate

context.lineTo(645, 100); // point B coords

context.lineTo(755,300); // point C coords

context.closePath(); // close the shape

context.lineWidth = 25; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.fillStyle = "rgba(43,42,169,1.00)";

context.fill();

 //mountain 6

context.beginPath(); // begin a shape 

context.moveTo(600,300); // point A coordinat

context.lineTo(700, 150); // point B coords

context.lineTo(800,300); // point C coords

context.closePath(); // close the shape

context.lineWidth = 25; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.fillStyle = "rgba(43,42,169,1.00)";

context.fill();

//sun

context.beginPath();

context.moveTo(312,145);

context.quadraticCurveTo(370, 90, 427, 145);

context.lineWidth = 4;

context.strokeStyle = "rgba(231,189,57,1.00)";

context.stroke();

context.lineJoin = "round";

context.fillStyle = "rgba(231,189,57,1.00)";

context.fill();

context.beginPath(); // begin a shape

context.moveTo(312,145); // point A coordinates

context.lineTo(370, 215); // point B coords

context.lineTo(427,145); // point C coords

context.closePath(); // close the shape

context.lineWidth = 25; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.fillStyle = "rgba(231,189,57,1.00)";

context.fill();


//cactus 1

//left branch

//left side

context.beginPath();

context.moveTo(25,575);

context.lineTo(25,525)

context.closePath();

context.lineWidth = 4;

context.strokeStyle = "rgba(6,155,86,1.00)";

context.stroke()

//bottom connector

context.beginPath();

context.moveTo(25,575);

context.lineTo(40,575)

context.closePath();

context.lineWidth = 4;

context.stroke()

//top connector

context.beginPath();

context.moveTo(30,570);

context.lineTo(40,570)

context.closePath();

context.lineWidth = 4;

context.stroke()

//right side

context.beginPath();

context.moveTo(30,570);

context.lineTo(30,525)

context.closePath();

context.lineWidth = 4;

context.stroke()

//base

context.beginPath();

context.moveTo(40,570);

context.lineTo(40,575)

context.closePath();

context.lineWidth = 4;

context.stroke()


//main part

//left side

context.beginPath();

context.moveTo(40,600);

context.lineTo(40,520)

context.closePath();

context.lineWidth = 5;

context.stroke()


//right side

context.beginPath();

context.moveTo(60,600);

context.lineTo(60,520)

context.closePath();

context.lineWidth = 5;

context.stroke()

//right branch

//left side

context.beginPath();

context.moveTo(70,525);

context.lineTo(70,555)

context.closePath();

context.lineWidth = 4;

context.stroke()

//right side

context.beginPath();

context.moveTo(75,525);

context.lineTo(75,560)

context.closePath();

context.lineWidth = 4;

context.stroke()

//bottom connector

context.beginPath();

context.moveTo(60,560);

context.lineTo(75,560)

context.closePath();

context.lineWidth = 4;

context.stroke()

//top connector

context.beginPath();

context.moveTo(60,555);

context.lineTo(70,555)

context.closePath();

context.lineWidth = 4;

context.stroke()

//cactus 2


//main part

//left side

context.beginPath();

context.moveTo(145,400);

context.lineTo(145,600)

context.closePath();

context.lineWidth = 5;

context.stroke()


//right side

context.beginPath();

context.moveTo(180,400);

context.lineTo(180,600)

context.closePath();

context.lineWidth = 5;

context.stroke()

//left branch


//left side

context.beginPath();

context.moveTo(100,400);

context.lineTo(100,475)

context.closePath();

context.lineWidth = 5;

context.stroke()

//right side

context.beginPath();

context.moveTo(120,400);

context.lineTo(120,455)

context.closePath();

context.lineWidth = 5;

context.stroke()


//bottom connector

context.beginPath();

context.moveTo(100,475);

context.lineTo(145,475)

context.closePath();

context.lineWidth = 5;

context.stroke()

//top connector

context.beginPath();

context.moveTo(120,455);

context.lineTo(145,455)

context.closePath();

context.lineWidth = 5;

context.stroke()

//right branch

//left side

context.beginPath();

context.moveTo(200,525);

context.lineTo(200,425)

context.closePath();

context.lineWidth = 5;

context.stroke()

//right side

context.beginPath();

context.moveTo(225,550);

context.lineTo(225,425)

context.closePath();

context.lineWidth = 5;

context.stroke()


//top connector

context.beginPath();

context.moveTo(180,525);

context.lineTo(200,525)

context.closePath();

context.lineWidth = 5;

context.stroke()

//bottom connector

context.beginPath();

context.moveTo(180,550);

context.lineTo(225,550)

context.closePath();

context.lineWidth = 5;

context.stroke()

//cactus 3

//main part

//left side

context.beginPath();

context.moveTo(660,600);

context.lineTo(660,475)

context.closePath();

context.lineWidth = 5;

context.stroke()


//right side

context.beginPath();

context.moveTo(700,600);

context.lineTo(700,475)

context.closePath();

context.lineWidth = 5;

context.stroke()

//left branch

//left side

context.beginPath();

context.moveTo(620,550);

context.lineTo(620,485)

context.closePath();

context.lineWidth = 5;

context.stroke()

//right side

context.beginPath();

context.moveTo(645,525);

context.lineTo(645,485)

context.closePath();

context.lineWidth = 5;

context.stroke()

//bottom connector

context.beginPath();

context.moveTo(620,550);

context.lineTo(660,550)

context.closePath();

context.lineWidth = 5;

context.stroke()


//top connector

context.beginPath();

context.moveTo(645,525);

context.lineTo(660,525)

context.closePath();

context.lineWidth = 5;

context.stroke()

//right branch

//left side

context.beginPath();

context.moveTo(715,550);

context.lineTo(715,500)

context.closePath();

context.lineWidth = 5;

context.stroke()

//right side

context.beginPath();

context.moveTo(740,575);

context.lineTo(740,500)

context.closePath();

context.lineWidth = 5;

context.stroke()

//bottom connector

context.beginPath();

context.moveTo(700,575);

context.lineTo(740,575)

context.closePath();

context.lineWidth = 5;

context.stroke()

//top connector

context.beginPath();

context.moveTo(700,550);

context.lineTo(715,550)

context.closePath();

context.lineWidth = 5;

context.stroke()

//tent


context.beginPath();

context.moveTo(225,600);

context.lineTo(300,500);

context.lineTo(375,600);

context.closePath();

context.lineWidth = 5;

context.strokeStyle = "rgba(198,101,211,1.00)";

context.stroke();

context.lineJoin = "round";

context.fillStyle = "rgba(198,101,211,1.00)";

context.fill();


context.beginPath();

context.moveTo(300,500);

context.lineTo(375,600);

context.lineTo(450,500);

context.closePath();

context.lineWidth = 5;

context.stroke()

context.lineJoin = "round";

context.fillStyle = "rgba(198,101,211,1.00)";

context.fill();

context.beginPath();

context.moveTo(375,600);

context.lineTo(450,500);

context.lineTo(525,600);

context.closePath();

context.lineWidth = 5;

context.stroke()

context.lineJoin = "round";

context.fillStyle = "rgba(198,101,211,1.00)";

context.fill();

context.beginPath();

context.moveTo(450,500);

context.lineTo(450,600);

context.closePath();

context.lineWidth = 5;

context.strokeStyle = "rgba(142,16,159,1.00)"

context.stroke()

context.beginPath();

context.moveTo(225,600);

context.lineTo(300,500);

context.closePath();

context.lineWidth = 5;

context.strokeStyle = "rgba(142,16,159,1.00)"

context.stroke()

context.beginPath();

context.moveTo(300,500);

context.lineTo(450,500);

context.closePath();

context.lineWidth = 5;

context.strokeStyle = "rgba(142,16,159,1.00)"

context.stroke()

context.beginPath();

context.moveTo(450,500);

context.lineTo(375,600);

context.closePath();

context.lineWidth = 5;

context.strokeStyle = "rgba(142,16,159,1.00)"

context.stroke()

context.beginPath();

context.moveTo(450,500);

context.lineTo(525,600);

context.closePath();

context.lineWidth = 5;

context.strokeStyle = "rgba(142,16,159,1.00)"

context.stroke()

//cactus 1 curves

//left

context.beginPath();

context.moveTo(25,525);

context.quadraticCurveTo(27.5, 520, 30,525);

context.lineWidth = 4;

context.strokeStyle = "rgba(11,157,89,0.70)";

context.stroke();


//middle

context.beginPath();

context.moveTo(40,520);

context.quadraticCurveTo(50, 505, 60,520);

context.lineWidth = 5;

context.strokeStyle = "rgba(6,155,86,1.00)";

context.stroke();

//right

context.beginPath();

context.moveTo(70,525);

context.quadraticCurveTo(72.5, 520, 75,525);

context.lineWidth = 4;

context.strokeStyle = "rgba(6,155,86,1.00)";

context.stroke();

//cactus 2 curves

//left

context.beginPath();

context.moveTo(100,400);

context.quadraticCurveTo(110, 390, 120,400);

context.lineWidth = 5;

context.strokeStyle = "rgba(6,155,86,1.00)";

context.stroke();

//right

context.beginPath();

context.moveTo(200,425);

context.quadraticCurveTo(212.5, 410, 225,425);

context.lineWidth = 5;

context.strokeStyle = "rgba(6,155,86,1.00)";

context.stroke();

//middle

context.beginPath();

context.moveTo(145,400);

context.quadraticCurveTo(162.5, 380, 180,400);

context.lineWidth = 5;

context.strokeStyle = "rgba(6,155,86,1.00)";

context.stroke();

//cactus 3 curves

//left

context.beginPath();

context.moveTo(620,485);

context.quadraticCurveTo(632.5, 470, 645,485);

context.lineWidth = 5;

context.strokeStyle = "rgba(6,155,86,1.00)";

context.stroke();

//middle

context.beginPath();

context.moveTo(660,475);

context.quadraticCurveTo(680, 450, 700,475);

context.lineWidth = 5;

context.strokeStyle = "rgba(6,155,86,1.00)";

context.stroke();

//right

context.beginPath();

context.moveTo(715,500);

context.quadraticCurveTo(727.5, 485, 740,500);

context.lineWidth = 5;

context.strokeStyle = "rgba(6,155,86,1.00)";

context.stroke();

        

//campfire stones

context.beginPath();

context.arc(515, 590, 10, 1, 1.5, true);

context.closePath();

context.strokeStyle = "rgba(49,52,50,1.00)";

context.stroke();

context.beginPath();

context.arc(540, 590, 10, 1, 1.5, true);

context.closePath();

context.strokeStyle = "rgba(49,52,50,1.00)";

context.stroke();

context.beginPath();

context.arc(565, 590, 10, 1, 1.5, true);

context.closePath();

context.strokeStyle = "rgba(49,52,50,1.00)";

context.stroke();

context.beginPath();

context.arc(590, 590, 10, 1, 1.5, true);

context.closePath();

context.stroke();

context.lineWidth = 5;

context.strokeStyle = "rgba(49,52,50,1.00)";

context.stroke();

//fire

context.beginPath();

context.moveTo(517,550);

context.quadraticCurveTo(552, 590, 587,550);

context.lineWidth = 5;

context.strokeStyle = "rgba(249,108,8,1.00)";

context.stroke();


context.beginPath();

context.moveTo(517,550);

context.quadraticCurveTo(540, 560, 552,520);

context.lineWidth = 5;

context.strokeStyle = "rgba(249,108,8,1.00)";

context.stroke();


context.beginPath();

context.moveTo(587,550);

context.quadraticCurveTo(565, 560, 552, 520);

context.lineWidth = 5;

context.strokeStyle = "rgba(249,108,8,1.00)";

context.stroke();

//smoke

context.beginPath();

context.moveTo(535,510);

context.bezierCurveTo(480, 450, 600, 325, 500, 200);

context.lineWidth = 2;

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

context.stroke();

context.beginPath();

context.moveTo(565,515);

context.bezierCurveTo(540, 460, 650, 350, 500, 250);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(570,525);

context.bezierCurveTo(600, 450, 500, 330, 650, 190);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(540,520);

context.bezierCurveTo(400, 460, 660, 355, 600, 175);

context.lineWidth = 2;

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

context.stroke();


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

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


// CREDITS


context.save();

var credits = "Sophia DeGasparre, Camping Cacti, 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

Post a Comment