#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. Sarah WeismanNovember 9, 2020 at 6:49 AM

    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

Somewhere

Image
 My picture:  The Movie Scene:  Final Image:  Artist Statement:  So I originally decided that I was going to do a scene from the Harry Potter movies. When I was working on it, I got so frustrated with the lighting and the way it looked. So I decided that I was going to do pick a different scene. I googled Gilmore Girl scenes sitting and I saw this image and I thought it would be perfect to photoshop myself into. Gilmore Girls is one of my favorite shows and I've always wanted to be Lorelai's daughter. In this scene, I could make it look like I was her daughter.  The thing was I had to take a picture for it which took forever because none of my pictures that I already had would match up. It took me a couple of tries to get it right but I think it came out pretty good. I had some problems though with attaching layers to the mask it kept copying the layer instead of attaching it. It took a while but I got it to attach.  The tools I used for this quick selection tool and the brush
Read more

Tag Brush Project

Image
Logo:  Tag brush:  Color tag brush:  Artist statement:       Can I just say I love how this turned out! The color tag brush looks so cool! I created this logo in a previous project. For this project, I created a tag for my remaining projects. The tag brush is my signature for my remaining digital art projects. My favorite color brush is the bottom right. I used a magenta color first then a sky blue but moved the brush a little to the right. Then I added a bright yellow to the and I moved the brush downwards to create the finishing touch.        I did have some problems with creating the brush. I did all the steps and I realized I didn't change the document to the grayscale which messed up the brush because the different layers I added were seen. I then redid everything in the right document (rdg color) and it turned out amazing. Oh, I also had to change all the stokes in the original logo so the viewers could clearly see the image and the different colors.  
Read more

Autoscopy

Image
 Original Images:   New photoshop version:  Artist Statement:  Lately, I have been creating scenarios in my head and with this project, I was able to create what I think is happening. So I think that the goddess of inspiration is pouring inspiration and creativity around me. The sprinkling of colors represents the creativity that is hitting me.  The books flying around me represent the stories I could write but I'm probably not going to.  The butterflies represent the inspiration flying away from me when I  have to focus on schoolwork. I really like how this turned out.  The tool I mainly used was the quick selection tool and the brush tool. I first put the background in then the books, then the teapot, then my picture, then the colors, and then the butterflies. I had to most trouble with the colors pouring on my face. I didn't know how I wanted it to be placed so I ended up redoing the part three times. For most of the items, I just lowered the opacity to blend in. The last pa
Read more