#1 Canvas

 Time spent: 12 hours 

                                                     Original idea: 


                                                Drawing I came up with for this idea: 


                                                                        Code design: 





                                                                    Artist Statement: 

My inspiration of this piece came from the movie Halloweentown. I wanted to create the larger than life pumpkin in the center of the town in the movie. I also wanted to create a bat because it screams Halloween. This piece has meaning to me because I love fall weather and it also means my birthday is right around the corner. This was not my first idea for the project. The first idea I had was to draw a table with books on it and have a mountain range during the night in the background of the table, but I didn't really like it on the graph paper. It is spooky season so I thought the pumpkin would be a great idea to create. 

At first creating the pedestal and the spider was simple, I though (at this time) that implementing code was easy. Then I got to the pumpkin and I ran into problem after problem. I created the pumpkin with a circle, nose with triangle, the eyes with circles, and the mouth with quadratic curves. To me the pumpkin didn't look like a pumpkin it was missing something so I added quadratic curves to the sides. It was not easy trying to match each curve and getting it to the right height and width on both sides. I also had to figure out how to fill in the curves with color and the bottom curves as well. For the bottom curves, I created triangles to cover the white space with the orange color. The main curves all I had to do was add code to fill the color in. I created the bat out of triangles and a pentagon. I think the background of the "spiderwebs" makes my piece successful because of how it ties everything together and makes the objects look brighter. 



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


///SKY BACKGROUND

var grd = 

context.createLinearGradient(0, 0, 0, 450);

grd.addColorStop(0, "rgba(10,22,91,1.00)");

grd.addColorStop(1, "black");

context.fillStyle = grd;

context.fillRect(0, 0, 800, 600);

 ///// Podium TOP

context.beginPath();

context.rect(100, 400, 500, 100);

context.fillStyle = 'gray';

context.fill();

//// Podium BOTTOM

context.beginPath();

context.rect(50, 450, 600, 200);

context.fillStyle = 'gray';

context.fill();

// Purple spider wed 


context.beginPath();

for (var i=10; i<canvas.height; i+=50) {

context.moveTo(0,i);

//context.lineTo(canvas.width,i);

//context.lineTo(canvas.width-i,i);

context.lineTo(i,canvas.height);

context.lineTo(canvas.width, canvas.height-i);

context.lineTo(canvas.width - i, 0);

context.lineTo(0,i);

context.strokeStyle = "rgb(200,16,255)";

context.stroke();

}

context.closePath();

// Green Spiderwed 


context.beginPath();


for (var i=40; i<canvas.height; i+=57) {

context.moveTo(0,i);

//context.lineTo(canvas.width,i);

//context.lineTo(canvas.width-i,i);

context.lineTo(i,canvas.height);

context.lineTo(canvas.width, canvas.height-i);

context.lineTo(canvas.width - i, 0);

context.lineTo(0,i);

context.strokeStyle = "rgb(0,255,0)";

context.stroke();

}


context.closePath();


 ////Spider bottom 

 

  var centerX = canvas.width / 2;

        var centerY = canvas.height / 1.1;

        var radius = 40;

        var startangle = 0;

        var endangle = 2 * Math.PI;


        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 5;

        context.strokeStyle = "black";

        context.stroke();

context.fillStyle = "black";

context.fill();

////Spider top

 

  var centerX = canvas.width / 2;

        var centerY = canvas.height / 1.2;

        var radius = 20;

        var startangle = 0;

        var endangle = 2 * Math.PI;


        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 5;

        context.strokeStyle = "black";

        context.stroke();

context.fillStyle = "black";

context.fill();

///spider legs 2

 context.moveTo(310,550); 

context.lineTo(375,550); 

context.lineWidth = 5; 

context.stroke(); 

//Spider legs 1


context.moveTo(310,530); 

context.lineTo(400,530); 

context.lineWidth = 5; 

context.stroke(); 

//Spider legs 3 


context.moveTo(310,570); 

context.lineTo(400,570); 

context.lineWidth = 5; 

context.stroke(); 

//Spider legs 4


context.moveTo(490,530); 

context.lineTo(400,530); 

context.lineWidth = 5; 

context.stroke(); 

//Spider legs 5


context.moveTo(490,550); 

context.lineTo(400,550); 

context.lineWidth = 5; 

context.stroke(); 

//Spider legs 6 


context.moveTo(490,570); 

context.lineTo(400,570); 

context.lineWidth = 5; 

context.stroke(); 

///Pumpkin 

 

  var centerX = canvas.width / 2.4;

        var centerY = canvas.height / 2.5;

        var radius = 165;

        var startangle = 0;

        var endangle = 2 * Math.PI;


        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 5;

        context.strokeStyle = "rgb(255, 119, 0)";

        context.stroke();

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

context.fill();

//Moon Sphere Shape

        context.beginPath();

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

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

        context.fill();

        context.lineWidth = 0;

        context.strokeStyle = "yellow";

        context.stroke();

///pumpkin stem


var x=320;

var y=20;

var width = 25

var height= 50;


context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgb(47,117,12)';

context.strokeStyle = 'rgb(47,117,12)';

context.fill();

context.stroke();

////eye 1 

 

  var centerX = canvas.width / 3;

        var centerY = canvas.height / 3.6;

        var radius = 25;

        var startangle = 0;

        var endangle = 2 * Math.PI;


        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 5;

        context.strokeStyle = "black";

        context.stroke();

context.fillStyle = "black"

context.fill();

////eye 2 

 

  var centerX = canvas.width / 2;

        var centerY = canvas.height / 3.6;

        var radius = 25;

        var startangle = 0;

        var endangle = 2 * Math.PI;


        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 5;

        context.strokeStyle = "black";

        context.stroke();

context.fillStyle = "black"

context.fill();

// pumpkin nose 

context.beginPath(); // begin a shape

 

context.moveTo(331,200); // point A coordinates

context.lineTo(312, 250); // point B coords

context.lineTo(350,250); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.strokeStyle = "black"; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "black";

context.fill();

////eye cutout 2 

 

  var centerX = canvas.width / 2.08;

        var centerY = canvas.height / 3.2;

        var radius = 15;

        var startangle = 0;

        var endangle = 2 * Math.PI;


        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 5;

        context.strokeStyle = "rgb(255, 119, 0)";

        context.stroke();

context.fillStyle = "rgb(255, 119, 0)"

context.fill();

//// eye cutout 1

 

  var centerX = canvas.width / 2.8;

        var centerY = canvas.height / 3.2;

        var radius = 15;

        var startangle = 0;

        var endangle = 2 * Math.PI;


        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 5;

        context.strokeStyle = "rgb(255, 119, 0)";

        context.stroke();

context.fillStyle = "rgb(255, 119, 0)"

context.fill();

// smile bottom  

var x = 245;

var y = 290;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 70;

var cpointY = canvas.height / 1 - 170;


// ending point coordinates

var x1 = 425;

var y1 = 290;



context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);


context.lineWidth = 5;

context.strokeStyle = "black";

context.stroke();

context.fillStyle = "black";

context.fill();


// smile top  

var x = 245;

var y = 290;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 70;

var cpointY = canvas.height / 1 - 250;


// ending point coordinates

var x1 = 425;

var y1 = 290;



context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);


context.lineWidth = 5;

context.strokeStyle = "black";

context.stroke();

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

context.fill();

// PUMPKIN CURVE LEFT

var x = 250;

var y = 98;


// control point coordinates ( magnet )

var cpointX = canvas.width / 3 - 200;

var cpointY = canvas.height / 2 - 100;


// ending point coordinates

var x1 = 200;

var y1 = 395;



context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);


context.lineWidth = 5;

context.strokeStyle = "rgb(255, 119, 0)";

context.stroke();

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

context.fill();

// PUMPKIN CURVE RIGHT

var x = 430;

var y = 107;


// control point coordinates ( magnet )

var cpointX = canvas.width / 1 - 200;

var cpointY = canvas.height / 2 - 100;


// ending point coordinates

var x1 = 470;

var y1 = 395;



context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);


context.lineWidth = 5;

context.strokeStyle = "rgb(255, 119, 0)";

context.stroke();

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

context.fill();

// PUMPKIN CURVE BOTTOM LEFT 

var x = 200;

var y = 395;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 150;

var cpointY = canvas.height / 1 - 190;


// ending point coordinates

var x1 = 300;

var y1 = 395;



context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);


context.lineWidth = 5;

context.strokeStyle = "rgb(255,119,0)";

context.stroke();

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

context.fill();

// PUMPKIN CURVE BOTTOM RIGHT 

var x = 470;

var y = 395;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 150;

var cpointY = canvas.height / 1 - 190;


// ending point coordinates

var x1 = 400;

var y1 = 395;



context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);


context.lineWidth = 5;

context.strokeStyle = "rgb(255,119,0)";

context.stroke();

 

/// orange TRIANGLE to fill color in pumpkin LEFT 

context.beginPath(); // begin a shape

 

context.moveTo(200,390); 

context.lineTo(268, 390);

context.lineTo(210,350); 

context.closePath(); 

context.lineWidth = 10; 

context.lineJoin = "round";

context.strokeStyle = "rgb(255,119,0)"; 

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

context.fill(); 

context.stroke();

/// orange TRIANGLE to fill color in pumpkin RIGHT 

context.beginPath(); // begin a shape

 

context.moveTo(462,349); 

context.lineTo(468, 398);

context.lineTo(370,397); 

context.closePath(); 

context.lineWidth = 5; 

context.lineJoin = "round";

context.strokeStyle = "rgb(255,119,0)"; 

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

context.fill(); 

context.stroke();

 

//bat top line 


context.beginPath();

context.moveTo(650,150); // COORDINATES OF STARTING POINT

context.lineTo(715,150); // COORDS OF ENDING POINT 1

context.lineTo(740,200); // COORDS OF ENDING POINT 2

context.lineTo(690,230); // COORDS OF ENDING POINT 3

context.lineTo(630,200); // COORDS OF ENDING POINT 4

context.lineTo(630,200); // COORDS OF ENDING POINT 5

context.lineTo(650,150);

context.lineWidth = 5; // STROKE WIDTH

context.strokeStyle = "black";

context.stroke(); // STROKE

context.fillStyle = "rgb(107,67,7)";

context.fill();

context.closePath();

///Bat eye left 

 

  var centerX = canvas.width / 1.2;

        var centerY = canvas.height / 3.4;

        var radius = 6;

        var startangle = 0;

        var endangle = 2 * Math.PI;


        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 5;

        context.strokeStyle = "white";

        context.stroke();

context.fillStyle = "red";

context.fill();

//Bat eye right

 

  var centerX = canvas.width / 1.13;

        var centerY = canvas.height / 3.4;

        var radius = 6;

        var startangle = 0;

        var endangle = 2 * Math.PI;


        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 5;

        context.strokeStyle = "white";

        context.stroke();

context.fillStyle = "red";

context.fill();

// bat ear left 

context.beginPath(); // begin a shape

 

context.moveTo(650,148); // point A coordinates

context.lineTo(670, 148); // point B coords

context.lineTo(640,120); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.strokeStyle = "rgb(107,67,7)"; // Reb Green Blue Alpha

context.stroke();

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

context.fill();

// bat ear right 

context.beginPath(); // begin a shape

 

context.moveTo(715,148); // point A coordinates

context.lineTo(695, 148); // point B coords

context.lineTo(725,120); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.strokeStyle = "rgb(107,67,7)"; // Reb Green Blue Alpha

context.stroke();

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

context.fill();

      

// Bat Wing left 1 

context.beginPath(); // begin a shape

 

context.moveTo(650,150); // point A coordinates

context.lineTo(630, 200); // point B coords

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

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.strokeStyle = "black"; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "rgb(107,67,7)";

context.fill();

// Bat Wing left 2 

context.beginPath(); // begin a shape

 

context.moveTo(600,150); // point A coordinates

context.lineTo(630, 200); // point B coords

context.lineTo(580, 200); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.strokeStyle = "black"; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "rgb(107,67,7)";

context.fill();

    

// Bat Wing right 1 

context.beginPath(); // begin a shape

 

context.moveTo(715,150); // point A coordinates

context.lineTo(740, 200); // point B coords

context.lineTo(765, 150); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.strokeStyle = "black"; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "rgb(107,67,7)";

context.fill();

// Bat Wing right 2 

context.beginPath(); // begin a shape

 

context.moveTo(765,150); // point A coordinates

context.lineTo(740, 200); // point B coords

context.lineTo(785, 200); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.strokeStyle = "black"; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "rgb(107,67,7)";

context.fill();


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

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


// CREDITS


context.save();

var credits = "Name, Title, FMX XYZ, FA/SP YEAR";

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. I really like the approach you took on this project. The purple and green lines look like laser beams and I thought this was really creative. I also like how it is simple yet has complexity to it. The pumpkin and the bat are adorable. Overall, well done!

    ReplyDelete

Post a Comment

Popular posts from this blog

pre somewhere

Internet vs World Wide Web Assignment