Sugar,Spice, and Everything Nice (ASCII Project)
On Monday January the 29th, I sat in front of my computer and stared at a picture of Bubbles from “The Powerpuff Girls” for about one hour. I placed the image over the ASCII Graph and printed it out. I then began labeling key points I thought would be useful when creating quadratic and Bezier curves, as well as the circles that would be part of her eyes. I began by creating the main oval that constitutes her face. Since it is an oval, I used two Bezier curves for a more accurate shape. After this simple step, I decided to work on the next layer, which would be the ponytails. Let me just say, it’s not as easy as it looks. I spent TWO hours in this part because I wanted the curves in the ponytails to be as smooth as possible. After nearly plucking my hairs off, I started working on the eyes. Creating the circles was easy, but I did need to rearrange some coordinates to better position each circle and not make Bubbles look cross-eyed. When the eyes look as sweet and charming as I desired, it was time to work on the bangs. By this step, I was already mastering my curves and wasn’t afraid to play around with numbers to make them as perfect as possible. Finally, I coded Bubbles’ sweet little smile. After doing all of this I went back and began adding fill colors and stroke colors/width to each section. I decided to do this at the end because it was what most excited me. I used the Pantone website color search tool and believe me when I say, it worked wonders. It was super easy to use and I could personalize my colors to perfectly match those of Bubbles. Once I was done, I decided to play around with some rectangles to add a cute background that made the image pop. It was definitely a fun project that allowed me to reconnect with a childhood treasure!
The HTML Code for my image:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Background
context.beginPath();
context.rect(0,0,800,600);
context.fillStyle = '#FFBEDE';
context.fill();
context.strokeStyle= '#EE2737';
context.lineWidth=40;
context.stroke();
context.beginPath();
context.rect(50,50,700,500);
context.fillStyle = '#FFBEDE';
context.fill();
context.strokeStyle= '#EE2737';
context.lineWidth=20;
context.stroke();
context.beginPath();
context.rect(100,100,600,400);
context.fillStyle = '#FFBEDE';
context.fill();
context.strokeStyle= '#EE2737';
context.lineWidth=20;
context.stroke();
context.beginPath();
context.rect(150,150,500,300);
context.fillStyle = '#FFBEDE';
context.fill();
context.strokeStyle= '#EE2737';
context.lineWidth=20;
context.stroke();
//main oval
context.beginPath();
context.moveTo(148, 300);
context.bezierCurveTo(148, 575, 670, 565, 637,300); //context.bezierCurveTo(controlx1, controly1, controlx2, controly2, endx, endy);
context.bezierCurveTo(637, 50, 148, 50, 148,300);
context.closePath();
context.fillStyle = '#FCE8CE';
context.fill();
context.strokeStyle= '#E1CB94';
context.lineWidth=7;
context.stroke();
//ponytail 1
context.beginPath();
context.moveTo(225, 200);
context.bezierCurveTo(225, 100, 75, 100, 75,200); //context.bezierCurveTo(controlx1, controly1, controlx2, controly2, endx, endy);
context.quadraticCurveTo(75, 225, 85, 260);
context.quadraticCurveTo(95, 310, 62, 350);
context.quadraticCurveTo(200, 325, 225, 200);
context.closePath();
context.fillStyle='#FFEF72';
context.fill();
context.strokeStyle= '#FFD100';
context.lineWidth=7;
context.stroke();
//ponytail 2
context.beginPath();
context.moveTo(575, 250);
context.bezierCurveTo(575, 150, 725, 150, 725,250); //context.bezierCurveTo(controlx1, controly1, controlx2, controly2, endx, endy);
context.quadraticCurveTo(725, 285, 690, 325);
context.quadraticCurveTo(660, 370, 700, 413);
context.quadraticCurveTo(580, 350, 575, 250);
context.closePath();
context.fillStyle='#FFEF72';
context.fill();
context.strokeStyle= '#FFD100';
context.lineWidth=7;
context.stroke();
//eye 1
context.beginPath();
context.arc(255, 300, 110, 0, 2*Math.PI, true); //context.arc(centerx, centery, radius, angle, 2*Math.PI, true);
context.fillStyle='white';
context.fill();
context.strokeStyle= 'black';
context.lineWidth= 5;
context.stroke();
context.beginPath();
context.arc(265, 300, 100, 0, 2*Math.PI, true); //context.arc(centerx, centery, radius, angle, 2*Math.PI, true);
context.fillStyle='#56B7E6';
context.fill();
context.beginPath();
context.arc(282, 285, 80, 0, 2*Math.PI, true); //context.arc(centerx, centery, radius, angle, 2*Math.PI, true);
context.fillStyle='black';
context.fill();
context.stroke();
context.beginPath();
context.arc(318, 270, 37, 0, 2*Math.PI, true); //context.arc(centerx, centery, radius, angle, 2*Math.PI, true);
context.fillStyle='white';
context.fill();
//eye 2
context.beginPath();
context.arc(530, 325, 110, 0, 2*Math.PI, true); //context.arc(centerx, centery, radius, angle, 2*Math.PI, true);
context.fillStyle='white';
context.fill();
context.strokeStyle= 'black';
context.lineWidth= 5;
context.stroke();
context.beginPath();
context.arc(540, 325, 100, 0, 2*Math.PI, true); //context.arc(centerx, centery, radius, angle, 2*Math.PI, true);
context.fillStyle='#56B7E6';
context.fill();
context.beginPath();
context.arc(560, 312, 80, 0, 2*Math.PI, true); //context.arc(centerx, centery, radius, angle, 2*Math.PI, true);
context.fillStyle='black';
context.fill();
context.beginPath();
context.arc(595, 297, 37, 0, 2*Math.PI, true); //context.arc(centerx, centery, radius, angle, 2*Math.PI, true);
context.fillStyle='white';
context.fill();
//Bangs
context.beginPath();
context.moveTo(643, 295);
context.bezierCurveTo(637, 50, 178, 60, 154,244); //context.bezierCurveTo(controlx1, controly1, controlx2, controly2, endx, endy);
context.quadraticCurveTo(310, 260, 405, 169);
context.quadraticCurveTo(485, 250, 643, 295);
context.closePath();
context.fillStyle='#FFEF72';
context.fill();
context.strokeStyle= '#FFD100';
context.lineWidth=7;
context.stroke();
//smile
context.beginPath();
context.moveTo(350, 425);
context.bezierCurveTo(350, 475, 405, 475, 405,425);
context.strokeStyle ='black';
context.lineWidth=3;
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Background
context.beginPath();
context.rect(0,0,800,600);
context.fillStyle = '#FFBEDE';
context.fill();
context.strokeStyle= '#EE2737';
context.lineWidth=40;
context.stroke();
context.beginPath();
context.rect(50,50,700,500);
context.fillStyle = '#FFBEDE';
context.fill();
context.strokeStyle= '#EE2737';
context.lineWidth=20;
context.stroke();
context.beginPath();
context.rect(100,100,600,400);
context.fillStyle = '#FFBEDE';
context.fill();
context.strokeStyle= '#EE2737';
context.lineWidth=20;
context.stroke();
context.beginPath();
context.rect(150,150,500,300);
context.fillStyle = '#FFBEDE';
context.fill();
context.strokeStyle= '#EE2737';
context.lineWidth=20;
context.stroke();
//main oval
context.beginPath();
context.moveTo(148, 300);
context.bezierCurveTo(148, 575, 670, 565, 637,300); //context.bezierCurveTo(controlx1, controly1, controlx2, controly2, endx, endy);
context.bezierCurveTo(637, 50, 148, 50, 148,300);
context.closePath();
context.fillStyle = '#FCE8CE';
context.fill();
context.strokeStyle= '#E1CB94';
context.lineWidth=7;
context.stroke();
//ponytail 1
context.beginPath();
context.moveTo(225, 200);
context.bezierCurveTo(225, 100, 75, 100, 75,200); //context.bezierCurveTo(controlx1, controly1, controlx2, controly2, endx, endy);
context.quadraticCurveTo(75, 225, 85, 260);
context.quadraticCurveTo(95, 310, 62, 350);
context.quadraticCurveTo(200, 325, 225, 200);
context.closePath();
context.fillStyle='#FFEF72';
context.fill();
context.strokeStyle= '#FFD100';
context.lineWidth=7;
context.stroke();
//ponytail 2
context.beginPath();
context.moveTo(575, 250);
context.bezierCurveTo(575, 150, 725, 150, 725,250); //context.bezierCurveTo(controlx1, controly1, controlx2, controly2, endx, endy);
context.quadraticCurveTo(725, 285, 690, 325);
context.quadraticCurveTo(660, 370, 700, 413);
context.quadraticCurveTo(580, 350, 575, 250);
context.closePath();
context.fillStyle='#FFEF72';
context.fill();
context.strokeStyle= '#FFD100';
context.lineWidth=7;
context.stroke();
//eye 1
context.beginPath();
context.arc(255, 300, 110, 0, 2*Math.PI, true); //context.arc(centerx, centery, radius, angle, 2*Math.PI, true);
context.fillStyle='white';
context.fill();
context.strokeStyle= 'black';
context.lineWidth= 5;
context.stroke();
context.beginPath();
context.arc(265, 300, 100, 0, 2*Math.PI, true); //context.arc(centerx, centery, radius, angle, 2*Math.PI, true);
context.fillStyle='#56B7E6';
context.fill();
context.beginPath();
context.arc(282, 285, 80, 0, 2*Math.PI, true); //context.arc(centerx, centery, radius, angle, 2*Math.PI, true);
context.fillStyle='black';
context.fill();
context.stroke();
context.beginPath();
context.arc(318, 270, 37, 0, 2*Math.PI, true); //context.arc(centerx, centery, radius, angle, 2*Math.PI, true);
context.fillStyle='white';
context.fill();
//eye 2
context.beginPath();
context.arc(530, 325, 110, 0, 2*Math.PI, true); //context.arc(centerx, centery, radius, angle, 2*Math.PI, true);
context.fillStyle='white';
context.fill();
context.strokeStyle= 'black';
context.lineWidth= 5;
context.stroke();
context.beginPath();
context.arc(540, 325, 100, 0, 2*Math.PI, true); //context.arc(centerx, centery, radius, angle, 2*Math.PI, true);
context.fillStyle='#56B7E6';
context.fill();
context.beginPath();
context.arc(560, 312, 80, 0, 2*Math.PI, true); //context.arc(centerx, centery, radius, angle, 2*Math.PI, true);
context.fillStyle='black';
context.fill();
context.beginPath();
context.arc(595, 297, 37, 0, 2*Math.PI, true); //context.arc(centerx, centery, radius, angle, 2*Math.PI, true);
context.fillStyle='white';
context.fill();
//Bangs
context.beginPath();
context.moveTo(643, 295);
context.bezierCurveTo(637, 50, 178, 60, 154,244); //context.bezierCurveTo(controlx1, controly1, controlx2, controly2, endx, endy);
context.quadraticCurveTo(310, 260, 405, 169);
context.quadraticCurveTo(485, 250, 643, 295);
context.closePath();
context.fillStyle='#FFEF72';
context.fill();
context.strokeStyle= '#FFD100';
context.lineWidth=7;
context.stroke();
//smile
context.beginPath();
context.moveTo(350, 425);
context.bezierCurveTo(350, 475, 405, 475, 405,425);
context.strokeStyle ='black';
context.lineWidth=3;
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Comments
Post a Comment