When I started this project, I first sketched out my own design but when I realized that I was clueless as to where to even start with creating my code, I decided to use a figure who I already was familiar with. I decided to recreate my own version of Hello Kitty in honor of my sister who has a tradition of taking pictures with the Hello Kitty statue in front of the W Hotel in Miami. I first sketched out Hello Kitty based on an image I found online and then put that image onto Dreamweaver to use as a guideline for my image.
I began creating my composition by making a basic outline of Hello Kitty's figure. I did not pay much attention to what order I created her composition in so I had to go back and reorder her body parts and features later on. At first, I felt like I was on a roll and had a good baseline until I started filling it in with colors. Once I went to color it in, I realized certain parts were not closed shapes and other parts were not smooth outlines. For the arms, I had done one shape with a bezier curve per arm with a line through it but then realized I could not do two different colors within that so I had to do two seperate shapes with bezier curves per arm and overlap them.
Another area that I clearly struggled with was with some of the facial features, such as the eyes. Although they seem like they should be very simple shapes, I really struggled. For the eyes, I tried to use a quadratic curve since it was one of the requirements. However, even with attempting to fix them for over an hour and trying again later, I could not fix them. Although I wanted to just use circles, I decided to keep them as they are even though the appearance of them bothers me because I need to fulfill to my quadratic curve requirement. The nose was done with a bezier curve and it is still not quite right despite fervent effort.
Overall, I. would say the majority of my piece is made with bezier curves. I think that this led to the success of my piece because I was able to get more comfortable with bezier curves throughout my piece. In the end, what led to the individuality of my piece was playing around with colors and customizing my Hello Kitty and the background. I used an example code to help me create my background, but then altered it and changed the coloring to compliment the Hello Kitty. This project was very challenging and time consuming for me and although it is far from perfect I feel proud of my efforts and my final result.
My Code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Hello Kitty </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="600" 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
var img1 = new Image();
img1 = document.getElementById("img1");
///////////////////////////////////////////////////////////////////////
// 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
//context.drawImage(img1,0,0,canvas.width,canvas.height);
//// BACKGROUND
context.beginPath();
context.rect(0,0,800,600); // x,y,w,h
context.closePath();
context.fillStyle = "#D13173";
context.fill();
context.strokeStyle = "rgba(44,47,51,1)";
context.stroke();
context.closePath();
// Background circles
context.beginPath();
context.arc(120,30,60,0*Math.PI, 2*Math.PI,false);
context.lineWidth=10
context.strokeStyle="pink";
context.stroke();
context.beginPath();
context.arc(370,600,60,0*Math.PI, 2*Math.PI,false);
context.lineWidth=10
context.strokeStyle="pink";
context.stroke();
context.beginPath();
context.arc(100,380,60,0*Math.PI, 2*Math.PI,false);
context.lineWidth=10
context.strokeStyle="pink";
context.stroke();
context.beginPath();
context.arc(220,220,60,0*Math.PI, 2*Math.PI,false);
context.lineWidth=10
context.strokeStyle="pink";
context.stroke();
context.beginPath();
context.arc(200,540,60,0*Math.PI, 2*Math.PI,false);
context.lineWidth=10
context.strokeStyle="pink";
context.stroke();
context.beginPath();
context.arc(30,170,60,0*Math.PI, 2*Math.PI,false);
context.lineWidth=10
context.strokeStyle="pink";
context.stroke();
context.beginPath();
context.arc(20,570,60,0*Math.PI, 2*Math.PI,false);
context.lineWidth=10
context.strokeStyle="pink";
context.stroke();
context.beginPath();
context.arc(300,100,60,0*Math.PI, 2*Math.PI,false);
context.lineWidth=10
context.strokeStyle="pink";
context.stroke();
context.beginPath();
context.arc(300,400,60,0*Math.PI, 2*Math.PI,false);
context.lineWidth=10
context.strokeStyle="pink";
context.stroke();
context.beginPath();
context.arc(800,600,60,0*Math.PI, 2*Math.PI,false);
context.lineWidth=10
context.strokeStyle="pink";
context.stroke();
context.beginPath();
context.arc(460,350,60,0*Math.PI, 2*Math.PI,false);
context.lineWidth=10
context.strokeStyle="pink";
context.stroke();
context.beginPath();
context.arc(730,310,60,0*Math.PI, 2*Math.PI,false);
context.lineWidth=10
context.strokeStyle="pink";
context.stroke();
context.beginPath();
context.arc(450,40,60,0*Math.PI, 2*Math.PI,false);
context.lineWidth=10
context.strokeStyle="pink";
context.stroke();
context.beginPath();
context.arc(710,100,60,0*Math.PI, 2*Math.PI,false);
context.lineWidth=10
context.strokeStyle="pink";
context.stroke();
context.beginPath();
context.arc(550,200,60,0*Math.PI, 2*Math.PI,false);
context.lineWidth=10
context.strokeStyle="pink)";
context.stroke();
context.beginPath();
context.arc(500,510,60,0*Math.PI, 2*Math.PI,false);
context.lineWidth=10
context.strokeStyle="pink";
context.stroke();
context.beginPath();
context.arc(660,450,60,0*Math.PI, 2*Math.PI,false);
context.lineWidth=10
context.strokeStyle="pink";
context.stroke();
context.closePath();
/// EARS
//EAR 1
context.beginPath();
context.moveTo(200,50);
context.bezierCurveTo(181,77,188,163,250,138);
context.bezierCurveTo(295,124,242,43,200,50)
context.closePath();
context.fillStyle = "white";
context.fill();
context.strokeStyle = "black";
context.lineWidth = 5;
context.stroke();
//EAR 2
context.beginPath();
context.moveTo(407,48);
context.bezierCurveTo(409,35,290,79,342,150);
context.bezierCurveTo(433,153,421,54,407,48)
context.closePath();
context.fillStyle = "white"
context.fill();
context.strokeStyle = "black";
context.lineWidth = 5;
context.stroke();
///HEAD
context.beginPath();
context.moveTo(175,194);
context.bezierCurveTo(167,22,440,17,432,197);
context.bezierCurveTo(428,378,160,338,175,194);
context.closePath();
context.fillStyle = "white";
context.fill();
context.strokeStyle = "black";
context.lineWidth = 5;
context.stroke();
//ARCTOCOVEREAR
///EYES
//LEFTEYE
context.beginPath();
context.moveTo(243,211);
context.quadraticCurveTo(234,190,224,212,270,204);
context.quadraticCurveTo(229,257,245,224,243,211)
context.closePath();
context.fillStyle = "black";
context.fill();
context.strokeStyle = "black";
context.lineWidth = 5;
context.stroke();
//RIGHTEYE
context.beginPath();
context.moveTo(369,216);
context.quadraticCurveTo(359,198,353,216,292,211);
context.quadraticCurveTo(351,254,368,233,363,202)
context.closePath();
context.fillStyle = "black"
context.fill();
context.strokeStyle = "black"
context.lineWidth = 5;
context.stroke();
/// NOSE
context.beginPath();
context.moveTo(305,234);
context.bezierCurveTo(283,223,273,264,303,260);
context.bezierCurveTo(333,259,328,227,305,234)
context.closePath();
context.fillStyle = "yellow"
context.fill();
context.strokeStyle = "black";
context.lineWidth = 3;
context.stroke();
/// WHISKERS
//1
context.beginPath();
context.moveTo(148,204)
context.lineTo(197,204)
context.lineWidth = 8;
context.strokeStyle = "black"
context.stroke();
//2
context.beginPath();
context.moveTo(154,243)
context.lineTo(197,229)
context.lineWidth = 8;
context.strokeStyle = "black"
context.stroke();
//3
context.beginPath();
context.moveTo(169,288)
context.lineTo(207,256)
context.lineWidth = 8;
context.strokeStyle = "black"
context.stroke();
//4
context.beginPath();
context.moveTo(454,199)
context.lineTo(407,205)
context.lineWidth = 8;
context.strokeStyle = "black"
context.stroke();
//5
context.beginPath();
context.moveTo(457,241)
context.lineTo(409,231)
context.lineWidth = 8;
context.strokeStyle = "black"
context.stroke();
//6
context.beginPath();
context.moveTo(404,259)
context.lineTo(443,281)
context.closePath();
context.lineWidth = 8;
context.strokeStyle = "black"
context.stroke();
// BOW
//LEFTSIDE
context.beginPath();
context.moveTo(341,35);
context.bezierCurveTo(347,26,235,79,318,137);
context.bezierCurveTo(397,120,345,34,341,35)
context.closePath();
context.fillStyle = "pink"
context.fill();
context.strokeStyle = "black";
context.lineWidth = 5;
context.stroke();
//RIGHTSIDE
context.beginPath();
context.moveTo(426,91);
context.bezierCurveTo(412,80,327,130,398,182);
context.bezierCurveTo(455,178,435,90,426,91)
context.closePath();
context.fillStyle = "pink"
context.fill();
context.strokeStyle = "black";
context.lineWidth = 5;
context.stroke();
//MIDDLE
context.beginPath();
context.moveTo(373,95);
context.bezierCurveTo(375,85,307,93,351,141);
context.bezierCurveTo(401,146,388,97,373,95)
context.closePath();
context.fillStyle = "pink"
context.fill();
context.strokeStyle = "black";
context.lineWidth = 5;
context.stroke();
//FEET
//LEFTFOOT
context.beginPath();
context.moveTo(260,473);
context.bezierCurveTo(261,472,183,535,262,564);
context.bezierCurveTo(328,555,287,465,260,473);
context.closePath();
context.fillStyle = "white"
context.fill();
context.lineWidth = 5;
context.stroke();
//LEFTPANTBOTTOM
context.beginPath();
context.arc(263,417, 100,-1.4*Math.PI, -1.6*Math.PI,true);
context.lineWidth = 5;
context.closePath();
context.lineWidth = 5;
context.stroke();
//RIGHTFOOT
context.beginPath();
context.moveTo(343,471);
context.bezierCurveTo(333,467,261,534,337,564);
context.bezierCurveTo(394,555,367,465,343,471)
context.closePath();
context.fillStyle = "white"
context.fill();
context.strokeStyle = "black";
context.lineWidth = 5;
context.stroke();
//RIGHTPANTBOTTOM
context.beginPath();
context.arc(337,418, 100,-1.4*Math.PI, -1.6*Math.PI,true);
context.lineWidth = 5;
context.stroke();
/// BODY
context.beginPath();
context.moveTo(233,318);
context.lineTo(230,512);
context.lineTo(373,512);
context.lineTo(366,318);
context.closePath();
context.fillStyle = "black"
context.fill();
context.strokeStyle = "black";
context.lineWidth = 5;
context.stroke();
///TSHIRTRECTANGLE
context.beginPath();
context.moveTo(268,358);
context.lineTo(325,358);
context.lineTo(322,320);
context.lineTo(272,317);
context.closePath();
context.fillStyle = "pink"
context.fill();
context.strokeStyle = "black";
context.lineWidth = 5;
context.stroke();
///ARMS
//RIGHTARM
context.beginPath();
context.moveTo(342,326);
context.bezierCurveTo(333,319,346,390,412,369);
context. bezierCurveTo(433,306,320,305,342,326)
context.closePath();
context.fillStyle = "pink"
context.fill();
context.strokeStyle = "black";
context.lineWidth = 5;
context.stroke();
//WHITEOFRIGHTARM
context.beginPath();
context.moveTo(390,374);
context.bezierCurveTo(456,363,382,301,391,328);
//context. bezierCurveTo(433,306,320,305,342,326)
context.closePath();
context.fillStyle = "white"
context.fill();
context.strokeStyle = "black";
context.lineWidth = 5;
context.stroke();
//LEFT ARM
context.beginPath();
context.moveTo(259,312);
context.bezierCurveTo(236,369,209,386,177,351);
context. bezierCurveTo(174,289,250,317,259,312)
context.closePath();
context.fillStyle = "pink"
context.fill();
context.strokeStyle = "black";
context.lineWidth = 5;
context.stroke();
///WHITEOFLEFTARM
context.beginPath();
context.moveTo(213,368);
context.bezierCurveTo(129,369,207,294,206,321);
//context. bezierCurveTo(433,306,320,305,342,326)
context.closePath();
context.fillStyle = "white"
context.fill();
context.strokeStyle = "black";
context.lineWidth = 5;
context.stroke();
///LEGS
//CROTCH
context.beginPath();
context.arc(300,420, 60,-1.4*Math.PI, -1.6*Math.PI,true);
context.closePath();
context.strokeStyle = "black"
context.lineWidth = 2;
context.stroke();
//THIGHGAP
context.beginPath();
context.moveTo(301,483)
context.lineTo(301,515)
context.closePath();
context.strokeStyle = "black"
context.lineWidth = 5;
context.stroke();
/// BUTTONS
//LEFTBUTTON
context.beginPath();
context.arc(264,386, 12,0*Math.PI, 2*Math.PI,true);
context.closePath();
context.fillStyle = "white"
context.fill();
context.strokeStyle = "black";
context.lineWidth = 5;
context.stroke();
//RIGHTBUTTON
context.beginPath();
context.arc(336,385, 12,0*Math.PI, 2*Math.PI,true);
context.closePath();
context.fillStyle = "white"
context.fill();
context.strokeStyle = "black";
context.lineWidth = 5;
context.stroke();
// <<<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>
Hey Mia, I think you did such a great job on your Canvas project. I remember seeing how good this was when you presented it in class. Hello Kitty is a very popular character and I think anyone will be able to distinguish that it is indeed Hello Kitty upon looking at your work. Again great job! I can see it took you lots of time and effort. 👍🏼
ReplyDelete