Canvas Experiment

-




For my canvas experiment I got my inspiration from a video game called Animal Crossing, I decided to create a female villager from the game. I made this decision because I spend a lot of time playing this game and perfecting my village. When this project was assigned, I was intimidated by it when I first read the syllabus because I had no idea how to code. But looking at my final product I am satisfied with the outcome for someone who just learned how to code. I think this project was very fun to create because we had the freedom to experiment with HTML5 and create whatever we wanted.

I spent about 12 hours getting all the shapes where I wanted them to be. Although I thought the project was fun I also found it to be a little difficult because when I looked at the blank canvas, I didn't know where to begin. The outline I created on graph paper for this assignment looked nothing like the outcome I have now. Originally, I wanted to create the villager from head to toe but assumed that it would be much harder to create. So I ended up starting with the face shape where I used a bezier curve to create the head and from there I moved to the triangle nose. At that point, I began to see exactly what I wanted my character to look like and the project felt a bit easier to me.

One thing I probably could've improved on is the characters hair and dress. The dress is just a triangle as if my character was a stick figure drawing. The hair was a little more complex, I used several triangles to make the bangs on my character and then used a quadratic curve to make the top of the hair round. I wanted to make the pigtails stick out more but the curve started to look a little crazy and it was hard to control. Overall I am still very satisfied with how my character came out and would be interested in doing another HTML5 project again.

Hours spent: 12 hours


Final Code

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> FMX 210 DIGITAL MEDIA - CANVAS PROJECT </title>

<style type="text/css">

body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: rgba(255,255,255,1);
}

body {
background-color: rgba(0,0,0,1);
}

#myCanvas { border: rgba(102,0,255,1) medium dashed; background-color: rgba(129,181,111,1.00); }

</style>

</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d')



//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE

// Green Dress

context.beginPath(); // begin a shape
context.moveTo(500,600); // point A coordinates
context.lineTo(200, 600); // point B co
context.lineTo(350,450); // point C co
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= "rgb(19, 88, 0)";
context.fill();
context.strokeStyle = "rgb(19, 88, 0)"; // Reb Green Blue Alpha
context.stroke();
 

//More hair right side
var x=397;
var y=320;
var width = 150
var height= 50;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
context.fillStyle = "rgb(113, 78, 15)";
context.strokeStyle = "rgb(113, 78, 15)";
context.fill();
context.fill();
context.stroke();

//More hair left side
var x=150;
var y=320;
var width = 150
var height= 50;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
context.fillStyle = "rgb(113, 78, 15)";
context.strokeStyle = "rgb(113, 78, 15)";
context.fill();
context.fill();
context.stroke();

// left sd burns (quadratic curve)
var x = 355;
var y = 90;
// control point coordinates ( magnet )
var cpointX = canvas.width / 2 - 290;
var cpointY = canvas.height / 2 - 300;
// ending point coordinates
var x1 = 150;
var y1 = 350;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);
context.lineWidth = 5;
context.fillStyle = "rgb(113, 78, 15)";
context.fill();
context.strokeStyle = "rgb(113, 78, 15)";
context.stroke();

//right sd burns (quadratic curve)
var x = 365;
var y = 90;
// control point coordinates ( magnet )
var cpointX = canvas.width / 1 - 250;
var cpointY = canvas.height / 2 - 300;
// ending point coordinates
var x1 = 550;
var y1 = 350;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);
context.lineWidth = 5;
context.fillStyle = "rgb(113, 78, 15)";
context.fill();
context.strokeStyle = "rgb(113, 78, 15)";
context.stroke();


// Pigtail left (quadratic curve)
var x = 205;
var y = 40;
// control point coordinates ( magnet )
var cpointX = canvas.width / 2 - 290;
var cpointY = canvas.height / 2 - 300;
// ending point coordinates
var x1 = 70;
var y1 = 350;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);
context.lineWidth = 5;
context.fillStyle = "rgb(113, 78, 15)";
context.fill();
context.strokeStyle = "rgb(113, 78, 15)";
context.stroke();



//PIGTAIL RIGHT (quadratic curve)
var x = 465;
var y = 40;
// control point coordinates ( magnet )
var cpointX = canvas.width / 1 - 210;
var cpointY = canvas.height / 2 - 300;
// ending point coordinates
var x1 = 635;
var y1 = 350;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);
context.lineWidth = 5;
context.fillStyle = "rgb(113, 78, 15)";
context.fill();
context.strokeStyle = "rgb(113, 78, 15)";
context.stroke();

//right ear
var centerX = 530;
var centerY = 240
    var radius = 50;
var startangle = 1.45* Math.PI;;
var endangle =  0.5* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = 'rgb(252, 244, 218)';
context.fill();
context.lineWidth = 3;
context.strokeStyle = "black";
       context.stroke();

//left ear
var centerX = 170;
var centerY = 240
var radius = 50;
var startangle = 1.45* Math.PI;;
var endangle =  0.5* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, true);
context.fillStyle = 'rgb(252, 244, 218)';
context.fill();
context.lineWidth = 3;
context.strokeStyle = "black";
context.stroke();

//neck
var x=280;
var y=200;
var width = 135;
var height= 300;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 3;
context.fillStyle = 'rgb(252, 244, 218)';
//context.strokeStyle = 'rgb(0,0,0)';
context.fill();
//context.stroke();

//Bezier Curve Variables
// FACE SHAPE
var Ax = 320;
var Ay = 60;
var Bx = 310;
var By = 440;
var control1x = 115;
var control1y = -60;
var control2x = 95;
var control2y = 445;
var control3x = 690;
var control3y = 465;
var control4x = 520;
var control4y = -85;
        context.beginPath();
        context.moveTo(Ax, Ay);
        context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);
        context.bezierCurveTo(control3x, control3y, control4x, control4y, Ax, Ay);
        context.lineWidth = 7;
        // line color
        //context.strokeStyle = 'rgb(255, 100, 100)';
        context.lineCap = 'round';
        context.stroke();
        context.fillStyle   = 'rgb(252, 244, 218)';
        context.fill();

 // BANG 4
context.beginPath(); // begin a shape
context.moveTo(305,30); // point A coordinates LEFT POINT
context.lineTo(410, 30); // point B coords RIGHT POINT
context.lineTo(350,150); // point C coords TOP POINT
context.closePath(); // close the shape
context.lineWidth = 1
; // you can use a variable that changes wherever you see a number
context.lineJoin = "round";
context.strokeStyle = "rgb(113, 78, 15)"; // Reb Green Blue Alpha
context.stroke();
context.fillStyle = "rgb(113, 78, 15)";
context.fill();

//BANG 2
context.beginPath(); // begin a shape
context.moveTo(215,30); // point A coordinates LEFT POINT
context.lineTo(275, 30); // point B coords RIGHT POINT
context.lineTo(200,150); // point C coords TOP POINT
context.closePath(); // close the shape
context.lineWidth = 1
context.lineJoin = "round";
context.strokeStyle = "rgb(113, 78, 15)";
context.stroke();
context.fillStyle = "rgb(113, 78, 15)";
context.fill();

 // BANG 1
context.beginPath(); // begin a shape
context.moveTo(205,30); // point A coordinates LEFT POINT
context.lineTo(245, 30); // point B coords RIGHT POINT
context.lineTo(160,150); // point C coords TOP POINT
context.closePath(); // close the shape
context.lineWidth = 1
; // you can use a variable that changes wherever you see a number
context.lineJoin = "round";
context.strokeStyle = "rgb(113, 78, 15)"; // Reb Green Blue Alpha
context.stroke();
context.fillStyle = "rgb(113, 78, 15)";
context.fill();


//BANG 5
context.beginPath(); // begin a shape
context.moveTo(375,30); // point A coordinates LEFT POINT
context.lineTo(475, 30); // point B coords RIGHT POINT
context.lineTo(425,150); // point C coords TOP POINT
context.closePath(); // close the shape
context.lineWidth = 1
context.lineJoin = "round";
context.strokeStyle = "rgb(113, 78, 15)";
context.stroke();
context.fillStyle = "rgb(113, 78, 15)";
context.fill();

//BANG 6
context.beginPath(); // begin a shape
context.moveTo(415,30); // point A coordinates LEFT POINT
context.lineTo(490, 30); // point B coords RIGHT POINT
context.lineTo(520,150); // point C coords TOP POINT
context.closePath(); // close the shape
context.lineWidth = 1
context.lineJoin = "round";
context.strokeStyle = "rgb(113, 78, 15)";
context.stroke();
context.fillStyle = "rgb(113, 78, 15)";
context.fill();

 //BANG 3
context.beginPath(); // begin a shape
context.moveTo(250,30); // point A coordinates LEFT POINT
context.lineTo(350, 30); // point B coords RIGHT POINT
context.lineTo(270,150); // point C coords TOP POINT
context.closePath(); // close the shape
context.lineWidth = 1
context.lineJoin = "round";
context.strokeStyle = "rgb(113, 78, 15)";
context.stroke();
context.fillStyle = "rgb(113, 78, 15)";
context.fill();

 // top of head n bangs (quadratic curve)
var x = 206;
var y = 30;
// control point coordinates ( magnet )
var cpointX = canvas.width / 2 - 50;
var cpointY = canvas.height / 2 - 350;
// ending point coordinates
var x1 = 489;
var y1 = 30;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);
context.lineWidth = 5;
context.fillStyle = "rgb(113, 78, 15)";
context.fill();
context.strokeStyle = "rgb(113, 78, 15)";
context.stroke();




// Left side hair extended (quadratic curve)
var x = 205;
var y = 40;
// control point coordinates ( magnet )
var cpointX = canvas.width / 2 - 190;
var cpointY = canvas.height / 2 - 300;
// ending point coordinates
var x1 = 155;
var y1 = 165;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);
context.lineWidth = 5;
context.fillStyle = "rgb(113, 78, 15)";
context.fill();
context.strokeStyle = "rgb(113, 78, 15)";
context.stroke();


// Right sd of hair extended (quadratic curve)
var x = 485;
var y = 40;
// control point coordinates ( magnet )
var cpointX = canvas.width / 1 - 310;
var cpointY = canvas.height / 2 - 300;
// ending point coordinates
var x1 = 525;
var y1 = 165;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);
context.lineWidth = 5;
context.fillStyle = "rgb(113, 78, 15)";
context.fill();
context.strokeStyle = "rgb(113, 78, 15)";
context.stroke();


////left eyeball
 var centerX = canvas.width / 3.4;
 var centerY = canvas.height / 3;
 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.fillStyle = 'rgb(46, 87, 54)';
context.fill();
        //context.stroke();

////right eyeball
  var centerX = canvas.width / 1.8;
  var centerY = canvas.height / 3;
  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.fillStyle = 'rgb(46, 87, 54)';
context.fill();
        //context.stroke();

 // TRIANGLE NOSE
context.beginPath(); // begin a shape
context.moveTo(335,300); // point A coordinates LEFT POINT
context.lineTo(365, 300); // point B coords RIGHT POINT
context.lineTo(350,250); // point C coords TOP POINT
context.closePath(); // close the shape
context.lineWidth = 1
; // you can use a variable that changes wherever you see a number
context.lineJoin = "round";
context.strokeStyle = "rgb(275,35,78)"; // Reb Green Blue Alpha
context.stroke();
context.fillStyle = "rgb(275,35,78)";
context.fill();


/// MOUTH CIRCLE
var centerX = 350;
var centerY = 320
        var radius = 55;
        var startangle = 2* Math.PI;;
var endangle =  1.0* Math.PI;

        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        //context.fillStyle = "pink";
//context.fill();
       context.lineWidth = 5;

        context.strokeStyle = "black";
        context.stroke();


//LEFT EYE
var centerX = 250;
        var centerY = 200
        var radius = 50;
        var startangle = 2* Math.PI;;
        var endangle =  1.0* Math.PI;

        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, true);
        //context.fillStyle = 'rgb(252, 244, 218)';
//context.fill();
       context.lineWidth = 6;

        context.strokeStyle = "black";
        context.stroke();

//LEFT EYE LEFT SD EXTENDED
context.moveTo(200,200); // COORDINATES OF STARTING POINT (RIGHT SD OF LASH)
context.lineTo (200,230); // COORDS OF ENDING POINT 1 (LEFT SD OF LASH)
context.lineWidth = 6; // STROKE WIDTH
context.stroke(); // STROKE
 
//LEFT EYE RIGHT SD EXTENDED
context.moveTo(300,230); // COORDINATES OF STARTING POINT
context.lineTo (300,200); // COORDS OF ENDING POINT 1
context.lineWidth = 6; // STROKE WIDTH
context.stroke(); // STROKE
 
//LEFT EYELASH
context.moveTo(200,205); // COORDINATES OF STARTING POINT (RIGHT SD OF LASH)
context.lineTo (180,195); // COORDS OF ENDING POINT 1 (LEFT SD OF LASH)
context.lineWidth = 6; // STROKE WIDTH
context.stroke(); // STROKE

//RIGHT EYE
var centerX = 455;
var centerY = 200
var radius = 50;
var startangle = 2* Math.PI;;
var endangle =  1.0* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, true);
//context.fillStyle ='rgb(252, 244, 218)';
//context.fill();
context.lineWidth = 6;

context.strokeStyle = "black";
context.stroke();

//RIGHT EYE LEFT SD EXTENDED
context.moveTo(405,230); // COORDINATES OF STARTING POINT (RIGHT SD OF LASH)
context.lineTo (405,200); // COORDS OF ENDING POINT 1 (LEFT SD OF LASH)
context.lineWidth = 6; // STROKE WIDTH
context.stroke(); // STROKE

//RIGHT EYE RIGHT SD EXTENDED
context.moveTo(505,230); // COORDINATES OF STARTING POINT
context.lineTo (505,200); // COORDS OF ENDING POINT 1
context.lineWidth = 6; // STROKE WIDTH
context.stroke(); // STROKE

//RIGHT EYELASH
context.moveTo(505,205); // COORDINATES OF STARTING POINT (RIGHT SD OF LASH)
context.lineTo (525,195); // COORDS OF ENDING POINT 1 (LEFT SD OF LASH)
context.lineWidth = 6; // STROKE WIDTH
context.stroke(); // STROKE


////Ponytail holder Left
  var centerX = canvas.width / 4.3;
        var centerY = canvas.height / 10;
        var radius = 30;
        var startangle = 0;
        var endangle = 2 * Math.PI;

        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
 
        context.lineWidth = 5;
context.fillStyle = 'rgb(250, 248, 145)';
context.fill();
        context.strokeStyle = "black";
        context.stroke();

////Ponytail holder Right
  var centerX = canvas.width / 1.6;
        var centerY = canvas.height / 10;
        var radius = 30;
        var startangle = 0;
        var endangle = 2 * Math.PI;
    context.beginPath();
    context.arc(centerX, centerY, radius, startangle, endangle, false);
    context.lineWidth = 5;
context.fillStyle = 'rgb(250, 248, 145)';
context.fill();
    context.strokeStyle = "black";
    context.stroke();


//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE




// CHANGE THE CREDITS: ADD YOUR NAME AND CLASS INFORMATION

var credits = "Andrea Ramirez, FMX 210, spring, 2020";
context.beginPath();
context.font = 'bold 20px Arial';
context.fillStyle = "rgba(0,0,0,1)";
context.fillText(credits, 10, 590);
context.closePath();

</script>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Somewhere Project

-
Image
For this project I struggled to come up with a photo I wanted to place myself into because a lot of my clothes are still back in Tampa. I began to think about different movies and artists I liked and being a huge fan of One Direction since middle school really swayed me to pick this album cover as my topic for this project. I began by choosing which member I wanted to remove and decided to remove Liam because he is super problematic now a days. I removed him by using the clone tool, I then took a couple of photos because I wanted to have options on which one to use. I then transformed all my photos into black and white and used the quick selection tool to remove myself from my first photo and insert myself into the album cover. It took me a while to remember how to place myself behind an object, but once I did figured that out it was easier for me to complete.  Hours to complete: 2 1/2 hours Below is the original album cover:
Read more

Business Cards

-
Image
These are my business cards. They took about 2 hours to complete. I chose to stick with the film aspect of my logo and made the first business card based on a clapboard that you would see on set of a film or TV show, the next I chose to base it off of a marquee at a movie theatre that would tell you what movie is showing. The last business card was inspired by an old fashioned black and white film, I made my logo the projection for the movie. I liked making my logo into a business card because it allowed me to use my creativity and add my love of film into my business cards. Indesign took me a minute to get used to but I like how compatible it is with other Adobe products. My favorite business card I made is probably the clap board because it actually resembles one and puts my information where it would be if I was the director of a film. Below are my original sketches:
Read more

Propaganda Poster

-
Image
This project took me about 5 hours total to create and I am so proud of the outcome because I think it actually resembles me. One thing I struggled with was creating the eyes and making them look realistic and as close to mine as possible, I wanted to seek help in person but since class was cancelled I troubleshooted and watched many tutorials on Youtube for help. One thing I could've done better would probably be the my hair, I think I got the shape down really well with the pen tool but I couldn't seem to figure out how to put the highlights in without making them look choppy. Other than those issues I had a lot of fun making this self portrait. I chose to use the saying "give peace a chance" but added "let us" because it looks like I am running in a campaign and I will be bringing the world peace if the people select me. I decided to challenge myself and make my hand into a peace sign out of words that part alone took me about one hour. I wanted to...
Read more