Alexis' ART 210 Blog: Project 1: ASCII

For my ASCII project, I decided to recreate an image of Mike Wazowski. I began by creating his head using two Bezier curves. I filled in his head using the rgb format of coloring so I could create a color most accurate to Mike's skin tone. Then I created his eyebrow/eyelid thing using a quadratic curve. Afterwards, I used more quadratic curves to create Mike's horns. I filled those in using the rgb format and made them grey. Since I wanted the horns to hide behind Mike's head, I moved the codes for his horns to the top of the entire code. The easiest part of this image was the eyes. They were just four simple circles. I filled each eye in with a certain color to accurately represent Mike's eyes. After finishing Mike's eyes, I began to create his mouth. I used two quadratic curves and filled them in using the rgb format. The most difficult part of this project was creating the teeth. I used multiple quadratic curves and lines to create the teeth and filled them in white. At one point, the coordinates on my reference graph were not accurate to the graph on my image, so I had to estimate the rest of the points. That is why there isn't the same amount of teeth compared to the reference image. This part definitely took the longest amount of time. After finally completing the teeth, I finished coding this image by creating Mike's dimples using two quadratic curves.

HTML5 Code:

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

//Mike's left horn

context.beginPath();
context.moveTo(220, 125);
context.quadraticCurveTo(200, 90, 230, 50);
context.quadraticCurveTo(240, 85, 260, 97);
context.fillStyle = 'rgb(200, 200, 200)';
context.fill();
context.lineWidth = 8;
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();

//Mike's right horn

context.beginPath();
context.moveTo(545, 97);
context.quadraticCurveTo(560, 80, 565, 45);
context.quadraticCurveTo(595, 75, 580, 135);
context.fillStyle = 'rgb(200, 200, 200)';
context.fill();
context.stroke();

//Mike's head

context.beginPath();
context.moveTo(300, 75);
context.bezierCurveTo(50, 200, 130, 460, 250, 520); //left Bezier curve
context.bezierCurveTo(400, 600, 500, 550, 550, 530); //bottom Bezier curve
context.bezierCurveTo(700, 450, 720, 150, 500, 80) //right Bezier curve
context.fillStyle = 'rgb(200, 255, 100)';
context.lineWidth = 8;
context.strokeStyle = 'rgb(0, 0, 0)';
context.fill();

context.stroke();

//Mike's eyebrow/eyelid thing I don't really know what it is lol

context.beginPath();
context.moveTo(275, 100);
context.quadraticCurveTo(400, -50, 510, 95);
context.fillStyle = 'rgb(200, 255, 100)';
context.fill();
context.lineWidth = 10;
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();

//Mike's eye white large

context.beginPath();
context.arc(400, 225, 130, 200, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();

//Mike's eye green

context.beginPath();
context.arc(400, 225, 65, 200, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(10, 255, 150)';
context.fill();
context.lineWidth = 3;
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();

//Mike's eye black

context.beginPath();
context.arc(400, 225, 35, 200, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(0, 0, 0)';
context.fill();
context.stroke();

//Mike's eye white small

context.beginPath();
context.arc(420, 200, 20, 200, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.strokeStyle = 'rgb(255, 255, 255)';
context.stroke();

//Mike's mouth

context.beginPath();
context.moveTo(200, 350);
context.quadraticCurveTo(400, 480, 600, 350);
context.quadraticCurveTo(400, 650, 200, 350);
context.closePath();
context.fillStyle = 'rgb(10, 255, 150)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();

//Mike's top teeth

context.beginPath();
context.moveTo(255, 380);
context.quadraticCurveTo(255, 410, 280, 420);
context.lineTo(290, 395);
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.lineWidth = 3;
context.closePath();
context.stroke();

context.beginPath();
context.moveTo(290, 395);
context.quadraticCurveTo(290, 420, 320, 430);
context.lineTo(320, 405);
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.lineWidth = 3;
context.closePath();
context.stroke();

context.beginPath();
context.moveTo(320, 405);
context.quadraticCurveTo(325, 430, 350, 440);
context.lineTo(360, 413);
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.lineWidth = 3;
context.closePath();
context.stroke();

context.beginPath();
context.moveTo(360, 415);
context.quadraticCurveTo(360, 440, 385, 445);
context.lineTo(395, 417);
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.lineWidth = 3;
context.closePath();
context.stroke();

context.beginPath();
context.moveTo(395, 417);
context.quadraticCurveTo(397, 445, 420, 450);
context.lineTo(430, 415);
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.lineWidth = 3;
context.closePath();
context.stroke();

context.beginPath();
context.moveTo(430, 415);
context.quadraticCurveTo(430, 440, 460, 445);
context.lineTo(460, 412);
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.lineWidth = 3;
context.closePath();
context.stroke();

context.beginPath();
context.moveTo(460, 412);
context.quadraticCurveTo(465, 435, 490, 435);
context.lineTo(490, 405);
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.lineWidth = 3;
context.closePath();
context.stroke();

context.beginPath();
context.moveTo(490, 405);
context.quadraticCurveTo(500, 430, 520, 425);
context.lineTo(520, 392);
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.lineWidth = 3;
context.closePath();
context.stroke();

//Mike's bottom teeth

context.beginPath();
context.moveTo(300, 460);
context.quadraticCurveTo(330, 440, 340, 450);
context.lineTo(340, 485);
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.lineWidth = 3;
context.closePath();
context.stroke();

context.beginPath();
context.moveTo(340, 485);
context.quadraticCurveTo(370, 450, 375, 465);
context.lineTo(380, 498);
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.lineWidth = 3;
context.closePath();
context.stroke();

context.beginPath();
context.moveTo(380, 498);
context.quadraticCurveTo(400, 460, 410, 465);
context.lineTo(420, 497);
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.lineWidth = 3;
context.closePath();
context.stroke();

context.beginPath();
context.moveTo(420, 497);
context.quadraticCurveTo(435, 455, 450, 455);
context.lineTo(460, 485);
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.lineWidth = 3;
context.closePath();
context.stroke();

context.beginPath();
context.moveTo(460, 485);
context.quadraticCurveTo(460, 470, 485, 445);
context.lineTo(500, 460);
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.lineWidth = 3;
context.closePath();
context.stroke();

//Mike's dimple left

context.beginPath();
context.moveTo(180, 360);
context.quadraticCurveTo(200, 330, 230, 340);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();

//Mike's dimple right

context.beginPath();
context.moveTo(570, 340);
context.quadraticCurveTo(600, 330, 620, 360);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();

////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

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