HTML5 Project
This is my first project ever using adobe dreamweaver. This was probably one of the most challenging projects I have ever done because it was all new to me. Even deciding what I wanted to create was hard, (can you tell why I changed my major so many times). This probably took me upwards 30 hours and I still did not finish it the way I would have intended to but I think because I didn't copy the inspiration image exactly, is where my own spin on it comes into play. Above is my project and below was my inspiration for the project. I have always loved cartoons and believe they shaped my creative side growing up which is why I wanted to incorporate it into my art. I used the quadratic curve for Bubbles and Buttercups hair and the bezier curve to make Blossom's bow (that alone took four hours). Overall I am glad I got a feel for the software despite the times of frustration, I can only improve my version of the Power Puff Girls, probably starting with giving them more hair.
My codes
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Heart
//Bezier Curve Variables
//heart 2
var Ax = 400;//top moves left/ right
var Ay = 250;//moves top down
var Bx = 360;//moves bottom point left/right
var By = 550;//moves bottom up/down
var control1x = 100;//moves left side in/out
var control1y = 50;//moves top left up/down
var control2x = 10;//moves left side in/out
var control2y = 440;//moves left bottom in/out
var control3x = 925;//moves right side top in/out
var control3y = 430;//moves bottom right up/down
var control4x = 540;//moves right top in/out
var control4y = 50;//moves upper right side
context.beginPath();
context.moveTo(Ax, Ay);
context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);
context.bezierCurveTo(control3x, control3y, control4x, control4y, Ax, Ay);
context.lineWidth = 600;
// line color
context.strokeStyle = '#FFE87C';
context.lineCap = 'round';
context.stroke();
context.fillStyle = 'white';
context.fill();
//Heart
//Bezier Curve Variables
//heart 1
var Ax = 400;//top moves left/ right
var Ay = 250;//moves top down
var Bx = 400;//moves bottom point left/right
var By = 550;//moves bottom up/down
var control1x = 70;//moves left side in/out
var control1y = 50;//moves top left up/down
var control2x = 10;//moves left side in/out
var control2y = 500;//moves left bottom in/out
var control3x = 900;//moves right side top in/out
var control3y = 400;//moves bottom right up/down
var control4x = 575;//moves right top in/out
var control4y = 50;//moves upper right side
context.beginPath();
context.moveTo(Ax, Ay);
context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);
context.bezierCurveTo(control3x, control3y, control4x, control4y, Ax, Ay);
context.lineWidth = 200;
// line color
context.strokeStyle = '#FFFFCC';
context.lineCap = 'round';
context.stroke();
context.fillStyle = 'white';
context.fill();
//blossom's bow
context.beginPath
var Ax = 400;//top moves left/ right
var Ay = 170;//moves top down
var Bx = 400;//moves bottom point left/right
var By = 120;//moves bottom up/down
var control1x = 460;//moves left side in/out
var control1y = -250;//moves top left up/down
var control2x = 530;//moves left side in/out
var control2y = 350;//moves left bottom in/out
var control3x = 275;//moves right side top in/out
var control3y = 340;//moves bottom right up/down
var control4x = 290;//moves right top in/out
var control4y = -230;//moves upper right side
context.beginPath();
context.moveTo(Ax, Ay);
context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);
context.bezierCurveTo(control3x, control3y, control4x, control4y, Ax, Ay);
context.lineWidth = 3;
// line color
context.strokeStyle = 'black';
context.lineCap = 'round';
context.stroke();
context.fillStyle = '#FB5B49';
context.fill()
//rectangle blue
var x=120;
var y=400;
var width = 100
var height= 200;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
//context.fillStyle = 'rgb(124,221,245)';
context.strokeStyle = 'rgb(124,221,245)';
// add linear gradient
context.strokeStyle = 'rgb(124,221,245)';
context.fillStyle = 'rgb(124,221,245)'
context.fill();
context.stroke();
context.fill();
//rectangle green
var x1=570;
var y1=400;
var width1= 100
var height1= 200;
context.beginPath();
context.rect(x1, y1, width1, height1);
context.lineWidth = 10;
//context.fillStyle = 'rgb(100,238,148)';
context.strokeStyle = 'rgb(100,238,148)';
// add linear gradient
context.strokeStyle = 'rgb(100,238,148';
context.fillStyle = 'rgb(100,238,148)'
context.fill();
context.stroke();
//rectangle red
var x2=350;
var y2=300;
var width2 = 100
var height2= 300;
context.beginPath();
context.rect(x2, y2, width2, height2);
context.lineWidth = 10;
//context.fillStyle = 'pink';
context.strokeStyle ='pink';
// add linear gradient
context.strokeStyle = 'pink';
context.fillStyle = 'pink'
context.fill();
context.stroke();
var centerXBubblesHead = canvas.width / 4.70;
var centerYBubblesHead = canvas.height / 1.85;
context.beginPath();
for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
xPos = centerXBubblesHead - (50* Math.sin(i)) * Math.sin(1 * Math.PI) + (90* Math.cos(i)) * Math.cos(1 * Math.PI);
yPos = centerYBubblesHead + (100 * Math.cos(i)) * Math.sin(1 * Math.PI) + (75 * Math.sin(i)) * Math.cos(1 * Math.PI);
if (i == 0) {
context.moveTo(xPos, yPos);
} else {
context.lineTo(xPos, yPos);
}
}
context.lineWidth = 3;
context.strokeStyle = "#232323";
context.stroke();
context.fillStyle="#FCE3D0";
context.fill();
context.closePath();
//bubbles mouth
var centerX = canvas.width / 4.70;
var centerY = canvas.height / 1.75;
var radius = 50;
var eyeRadius = 10;
var eyeXOffset = 28;
var eyeYOffset = 28
// draw the mouth
context.beginPath();
context.arc(centerX, centerY, 8, 00, Math.PI, false);
context.stroke();context.closePath();
//eyeball left//whites
context.beginPath();
context.arc(122, 318, 32, 6, 80 * Math.PI, true);
context.closePath();
context.fillStyle = 'white';
context.fill();
context.lineWidth = 3;
context.strokeStyle = "#232323";
context.stroke();
context.fillStyle="white";
context.fill();
//eyeball left//border
context.beginPath();
context.arc(126, 315, 30, 6, 80 * Math.PI, true);
context.closePath();
context.fillStyle = 'rgb(124,221,245)';
context.fill();
//eyeball left
context.beginPath();
context.arc(131, 315, 25, 6, 60 * Math.PI, true);
context.closePath();
context.fillStyle = 'black';
context.fill();
//eyeball right//whites
context.beginPath();
context.arc(218, 318, 32, 6, 80 * Math.PI, true);
context.closePath();
context.fillStyle = 'white';
context.fill();
context.lineWidth = 3;
context.strokeStyle = "#232323";
context.stroke();
context.fillStyle="white";
context.fill();
//eyeball left//border
context.beginPath();
context.arc(215, 315, 30, 6, 80 * Math.PI, true);
context.closePath();
context.fillStyle = 'rgb(124,221,245)';
context.fill();
//eyeball right
context.beginPath();
context.arc(210, 315, 25, 800, 60 * Math.PI, true);
context.closePath();
context.fillStyle = 'black';
context.fill();
// draw the eyes
context.beginPath();
var eyeX = centerX - eyeXOffset;
var eyeY = centerY - eyeXOffset;
context.arc(eyeX, eyeY, eyeRadius, 0, 4 * Math.PI, false);
var eyeX = centerX + eyeXOffset;
context.arc(eyeX, eyeY, eyeRadius, 0, 4 * Math.PI, false);
context.fillStyle = 'white';
context.fill();
//hair
var x = 120;
var y = 250;
var controlX = 50;
var controlY = 300;
var x1 = 170;
var y1 = 260;
var controlX1 = 310;
var controlY1 = 320;
var x2 = 210;
var y2 = 250;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(controlX, controlY, x1, y1);
context.quadraticCurveTo(controlX1, controlY1, x2, y2);
context.fillStyle = '#FCD33A';
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();
var centerXBlossomsHead = canvas.width / 2.00;
var centerYBlossomsHead = canvas.height / 2.65;
context.beginPath();
for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
xPos = centerXBlossomsHead - (50* Math.sin(i)) * Math.sin(1 * Math.PI) + (90* Math.cos(i)) * Math.cos(1 * Math.PI);
yPos = centerYBlossomsHead + (100 * Math.cos(i)) * Math.sin(1 * Math.PI) + (75 * Math.sin(i)) * Math.cos(1 * Math.PI);
if (i == 0) {
context.moveTo(xPos, yPos);
} else {
context.lineTo(xPos, yPos);
}
}
context.lineWidth = 3;
context.strokeStyle = "#232323";
context.stroke();
context.fillStyle="#FCE3D0";
context.fill();
context.closePath();
//blossoms mouth
var centerX = canvas.width / 2.00;
var centerY = canvas.height / 2.50;
var radius = 70;
var eyeRadius = 10;
var eyeXOffset = 28;
var eyeYOffset = 28
//draw the mouth
context.beginPath();
context.arc(centerX, centerY, 8, 00, Math.PI, false);
context.stroke();context.closePath();
//eyeball left//whites
context.beginPath();
context.arc(352, 217, 32, 6, 80 * Math.PI, true);
context.closePath();
context.fillStyle = 'white';
context.fill();
context.lineWidth = 3;
context.strokeStyle = "#232323";
context.stroke();
context.fillStyle="white";
context.fill();
//eyeball left//border
context.beginPath();
context.arc(355, 216, 30, 6, 80 * Math.PI, true);
context.closePath();
context.fillStyle = '#F77DA7';
context.fill();
//eyeball left
context.beginPath();
context.arc(360, 215, 25, 800, 60 * Math.PI, true);
context.closePath();
context.fillStyle = 'black';
context.fill();
//eyeball right//whites
context.beginPath();
context.arc(449, 216, 32, 6, 80 * Math.PI, true);
context.closePath();
context.fillStyle = 'white';
context.fill();
context.lineWidth = 3;
context.strokeStyle = "#232323";
context.stroke();
context.fillStyle="white";
context.fill();
//eyeball right//border
context.beginPath();
context.arc(445, 215, 30, 6, 80 * Math.PI, true);
context.closePath();
context.fillStyle = '#F77DA7';
context.fill();
//blossom hair
var x = 350;
var y = 150;
var controlX = 260;
var controlY = 250;
var x1 = 400;
var y1 = 150;
var controlX1 = 550;
var controlY1 = 250;
var x2 = 450;
var y2 = 150;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(controlX, controlY, x1, y1);
context.quadraticCurveTo(controlX1, controlY1, x2, y2);
context.fillStyle = '#FC901C';
context.fill();
context.lineWidth = 1;
context.strokeStyle = "#black";
context.stroke();
//eyeball right
context.beginPath();
context.arc(440, 215, 25, 800, 60 * Math.PI, true);
context.closePath();
context.fillStyle = 'black';
context.fill();
// draw the eyes
context.beginPath();
var eyeX = centerX - eyeXOffset;
var eyeY = centerY - eyeXOffset;
context.arc(eyeX, eyeY, eyeRadius, 0, 4 * Math.PI, false);
var eyeX = centerX + eyeXOffset;
context.arc(eyeX, eyeY, eyeRadius, 0, 2 * Math.PI, false);
context.fillStyle = 'white';
context.fill();
var centerXButtercupsHead = canvas.width / 1.29;
var centerYButtercupsHead = canvas.height / 1.85;
context.beginPath();
for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
xPos = centerXButtercupsHead - (50* Math.sin(i)) * Math.sin(1 * Math.PI) + (90* Math.cos(i)) * Math.cos(1 * Math.PI);
yPos = centerYButtercupsHead + (100 * Math.cos(i)) * Math.sin(1 * Math.PI) + (75 * Math.sin(i)) * Math.cos(1 * Math.PI);
if (i == 0) {
context.moveTo(xPos, yPos);
} else {
context.lineTo(xPos, yPos);
}
}
context.lineWidth = 3;
context.strokeStyle = "#232323";
context.stroke();
context.fillStyle="#FCE3D0";
context.fill();
//buttercups mouth
var centerX = canvas.width / 1.29;
var centerY = canvas.height / 1.75;
var radius = 70;
var eyeRadius = 10;
var eyeXOffset = 28;
var eyeYOffset = 28
// draw the mouth
context.beginPath();
context.arc(centerX, centerY, 8, 00, Math.PI, false);
context.stroke();context.closePath();
//eyeball left//whites
context.beginPath();
context.arc(571, 318, 32, 6, 80 * Math.PI, true);
context.closePath();
context.fillStyle = 'white';
context.fill();
context.lineWidth = 3;
context.strokeStyle = "#232323";
context.stroke();
context.fillStyle="white";
context.fill();
//eyeball left//border
context.beginPath();
context.arc(575, 315, 30, 6, 80 * Math.PI, true);
context.closePath();
context.fillStyle = '#7CD68B';
context.fill();
//eyeball left
context.beginPath();
context.arc(580, 315, 25, 6, 60 * Math.PI, true);
context.closePath();
context.fillStyle = 'black';
context.fill();
//eyeball right//whites
context.beginPath();
context.arc(668, 318, 32, 6, 80 * Math.PI, true);
context.closePath();
context.fillStyle = 'white';
context.fill();
context.lineWidth = 3;
context.strokeStyle = "#232323";
context.stroke();
context.fillStyle="white";
context.fill();
//eyeball right//border
context.beginPath();
context.arc(665, 315, 30, 6, 80 * Math.PI, true);
context.closePath();
context.fillStyle = '#7CD68B';
context.fill();
//butttercup hair
var x = 570;
var y = 250;
var controlX = 510;
var controlY = 300;
var x1 = 620;
var y1 = 260;
var controlX1 = 750;
var controlY1 = 320;
var x2 = 660;
var y2 = 250;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(controlX, controlY, x1, y1);
context.quadraticCurveTo(controlX1, controlY1, x2, y2);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();
//eyeball right
context.beginPath();
context.arc(660, 315, 25, 6, 60 * Math.PI, true);
context.closePath();
context.fillStyle = 'black';
context.fill();
context.fill();
// draw the eyes
context.beginPath();
var eyeX = centerX - eyeXOffset;
var eyeY = centerY - eyeXOffset;
context.arc(eyeX, eyeY, eyeRadius, 0, 2 * Math.PI, false);
var eyeX = centerX + eyeXOffset;
context.arc(eyeX, eyeY, eyeRadius, 0, 2 * Math.PI, false);
context.fillStyle = 'white';
context.fill();
//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height
// for a square width = height , the width and the height have the same value
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
I love this project and the recreation of the famous Power Puff Girls. Great job on the details and background color to compliment the Power Puff Girls. This image really stands out and highlights Dreamweaver in an amazing way.
ReplyDeleteRaven K.
I love how this project came out. I think it really displayed a high level of effort and proficiency in the software. I had a tough time with this assignment and found yours to be incredibly impressive. Its super cute and colorful and ended up looking almost exactly like the reference photo.
ReplyDeleteJasmin J.