ASCII PROJECT
"The All Seeing Kaw-Eye-Chan (Kawaii-Chan)"


I decided to test my ASCII skills with a tattoo idea that I drew myself. I believe it took about 6 hours altogether to finish. I used "Notepad++" since that was the shell program I already had on my computer.
Here's the code guys!

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

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

//triangle
context.beginPath();
context.moveTo(350, 25);
context.lineTo(100, 410);
context.lineTo(550, 390);
context.lineTo(350, 25);
context.closePath();
context.lineWidth = 5;
context.fillStyle = 'gold';
context.fill();
context.stroke();

//eyebrow
context.beginPath();
context.moveTo(375, 75);
context.quadraticCurveTo(325, 125, 225, 150);
context.lineWidth = 2;
context.stroke();

//eyelid
context.beginPath();
context.moveTo(265, 180)
context.bezierCurveTo(310, 140, 350, 135, 375, 150);
context.lineWidth = 1;
context.stroke();

//iris
context.beginPath();
context.moveTo(260, 225);
context.bezierCurveTo(275, 485, 450, 420, 410, 160);
context.bezierCurveTo(400, 100, 250, 200, 260, 225);
context.closePath();
context.lineWidth = 1.5;
var grd = context.createLinearGradient(270, 200, 300, 380);
grd.addColorStop(0, 'black');
grd.addColorStop(1, 'rgb(160, 50, 250)');
context.fillStyle = grd;
context.fill();
context.stroke();

//iris2
context.beginPath();
context.moveTo(280, 190);
context.bezierCurveTo(260, 460, 440, 410, 395, 150);
context.lineWidth = 1;
context.stroke();

//pupil
context.beginPath();
context.moveTo(300, 180);
context.bezierCurveTo(260, 415, 430, 400, 380, 140);
context.bezierCurveTo(370, 135, 275, 210, 300, 180);
context.closePath;
context.lineWidth = 2;
var grd = context.createLinearGradient(280, 210, 300, 410);
grd.addColorStop(0, 'black');
grd.addColorStop(1, 'rgb(160, 50, 250)');
context.fillStyle = grd;
context.fill();
context.stroke();

//large reflection
context.beginPath();
context.moveTo(360, 160);
context.bezierCurveTo(300, 310, 500, 300, 410, 150);
context.bezierCurveTo(400, 140, 365, 150, 360, 160);
context.closePath();
context.fillStyle = 'white';
context.fill();
context.stroke();

//small reflection
context.beginPath();
context.arc(385, 320, 15, 0, 2*Math.PI, false);
context.fillStyle = 'white'
context.fill();
context.stroke();

//pacman reflection
context.beginPath();
context.moveTo(260, 275);
context.lineTo(320, 290);
context.lineTo(260, 315);
context.lineTo(260, 300);
context.closePath();
context.fillStyle = 'gold'
context.fill();

//upper eyelash
context.beginPath();
context.moveTo(200, 300);
context.bezierCurveTo(250, 200, 400, 65, 450, 210);
context.lineWidth = 15;
context.stroke();

context.beginPath();
context.moveTo(205, 290);
context.lineTo(175, 280);
context.closePath();
context.lineWidth = 8;
context.stroke();

context.beginPath();
context.moveTo(225, 260);
context.lineTo(190, 240);
context.closePath();
context.lineWidth = 9;
context.stroke();

context.beginPath();
context.moveTo(245, 230);
context.lineTo(205, 200);
context.closePath();
context.lineWidth = 10;
context.stroke();


//lower lash
context.beginPath();
context.moveTo(265, 405);
context.bezierCurveTo(290, 390, 375, 385, 390, 400);
context.lineWidth = 8;
context.stroke();

context.beginPath();
context.moveTo(275, 403);
context.lineTo(270, 420);
context.lineWidth = 5;
context.stroke();

context.beginPath();
context.moveTo(290, 403);
context.lineTo(285, 425);
context.lineWidth = 5;
context.stroke();

//tear
context.beginPath();
context.moveTo(285, 400);
context.bezierCurveTo(270, 385, 370, 380, 375, 390);
context.closePath();
context.lineWidth = 3;
context.strokeStyle = 'rgba(90, 200, 250, .75)'
context.fillStyle = 'rgba(120, 200, 250, .75)'
context.fill();
context.stroke();

context.beginPath();
context.moveTo(330,395)
context.bezierCurveTo(300, 600, 375, 600, 340, 395);
context.fillStyle = 'rgba(120, 200, 250, .75)'
context.fill();
context.stroke();


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

};

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

Comments

Post a Comment

Popular Posts