#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>
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