PixlBuny: ASCII PROJECT

Sunday, September 14, 2014

ASCII PROJECT

I decided to try and create a wolf howling at the moon

code

<!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 = 'rgb(0, 0, 55)';

context.fill();

context.stroke();

/// Moon

var centerX = 400;

var centerY = 275;

var radius = 250

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);

context.fillStyle = 'rgb(255, 255, 0)';

context.fill();

context.stroke();

/// Stars

var StarcenterX = 750;

var StarcenterY = 100;

var Star2centerX = 650;

var Star2centerY = 100;

var Star3centerX = 725;

var Star3centerY = 200;

var Star4centerX = 775;

var Star4centerY = 300;

var Star5centerX = 700;

var Star5centerY = 350;

var Star6centerX = 200;

var Star6centerY = 25;

var Star7centerX = 50;

var Star7centerY = 50;

var Star8centerX = 150;

var Star8centerY = 100;

var Star9centerX = 50;

var Star9centerY = 300;

var Star10centerX = 25;

var Star10centerY = 475;

var Star11centerX = 150;

var Star11centerY = 400;

var Star12centerX = 200;

var Star12centerY = 500;

var radius = 10;

context.beginPath();

context.arc(StarcenterX, StarcenterY, radius, 0, 2*Math.PI, false);

context.fillStyle = 'rgb(245, 245, 167)';

context.fill();

context.beginPath();

context.arc(Star2centerX, Star2centerY, radius, 0, 2*Math.PI, false);

context.fillStyle = 'rgb(245, 245, 167)';

context.fill();

context.beginPath();

context.arc(Star3centerX, Star3centerY, radius, 0, 2*Math.PI, false);

context.fillStyle = 'rgb(245, 245, 167)';

context.fill();

context.beginPath();

context.arc(Star4centerX, Star4centerY, radius, 0, 2*Math.PI, false);

context.fillStyle = 'rgb(245, 245, 167)';

context.fill();

context.beginPath();

context.arc(Star5centerX, Star5centerY, radius, 0, 2*Math.PI, false);

context.fillStyle = 'rgb(245, 245, 167)';

context.fill();

context.beginPath();

context.arc(Star6centerX, Star6centerY, radius, 0, 2*Math.PI, false);

context.fillStyle = 'rgb(245, 245, 167)';

context.fill();

context.beginPath();

context.arc(Star7centerX, Star7centerY, radius, 0, 2*Math.PI, false);

context.fillStyle = 'rgb(245, 245, 167)';

context.fill();

context.beginPath();

context.arc(Star8centerX, Star8centerY, radius, 0, 2*Math.PI, false);

context.fillStyle = 'rgb(245, 245, 167)';

context.fill();

context.beginPath();

context.arc(Star9centerX, Star9centerY, radius, 0, 2*Math.PI, false);

context.fillStyle = 'rgb(245, 245, 167)';

context.fill();

context.beginPath();

context.arc(Star10centerX, Star10centerY, radius, 0, 2*Math.PI, false);

context.fillStyle = 'rgb(245, 245, 167)';

context.fill();

context.beginPath();

context.arc(Star11centerX, Star11centerY, radius, 0, 2*Math.PI, false);

context.fillStyle = 'rgb(245, 245, 167)';

context.fill();

context.beginPath();

context.arc(Star12centerX, Star12centerY, radius, 0, 2*Math.PI, false);

context.fillStyle = 'rgb(245, 245, 167)';

context.fill();

/// Mountains

var Mx = -25;

var My = 600;

var Mx2 = 50;

var My2 = 500;

var Mx3 = 75;

var My3 = 550;

var Mx4 = 100;

var My4 = 525;

var Mx5 = 125;

var My5 = 550;

var Mx6 = 150;

var My6 = 500;

var Mx7 = 175;

var My7 = 550;

var Mx8 = 215;

var My8 = 525;

var Mx9 = 250;

var My9 = 575;

var Mx10 = 275;

var My10 = 550;

var Mx11 = 300;

var My11 = 575;

var Mx12 = 400;

var My12 = 575;

var Mx13 = 400;

var My13 = 625;

context.beginPath();

context.moveTo(Mx, My);

context.lineTo(Mx2, My2);

context.lineTo(Mx3, My3);

context.lineTo(Mx4, My4);

context.lineTo(Mx5, My5);

context.lineTo(Mx6, My6);

context.lineTo(Mx7, My7);

context.lineTo(Mx8, My8);

context.lineTo(Mx9, My9);

context.lineTo(Mx10, My10);

context.lineTo(Mx11, My11);

context.lineTo(Mx12, My12);

context.lineTo(Mx13, My13);

context.lineTo(Mx,My);

context.fillStyle = 'rgb(1, 28, 3)';

context.fill();

context.closePath();

context.stroke();

/// Wolf

var startx = 300;

var starty = 610;

var controlx1 = 350;

var controly1 = 1500;

var controlx2 = 350;

var controly2 = 515;

var endx = 375;

var endy = 475;

var controlx3 = 325;

var controly3 = 487;

var endx2 = 375;

var endy2 = 448;

var controlx4 = 310;

var controly4 = 455;

var endx3 = 350;

var endy3 = 425;

var controlx5 = 410;

var controly5 = 348;

var controlx6 = 194;

var controly6 = 230;

var endx4 = 275;

var endy4 = 215;

var controlx7 = 300;

var controly7 = 195;

var endx5 = 292;

var endy5 = 223;

var controlx8 = 440;

var controly8 = 350;

var endx6 = 350;

var endy6 = 192;

var controlx9 = 300;

var controly9 = 200;

var endx7 = 345;

var endy7 = 175;

var controlx10 = 375;

var controly10 = 115;

var endx8 = 402;

var endy8 = 155;

var controlx11 = 630;

var controly11 = 275;

var controlx12 = 600;

var controly12 = 300;

var endx9 = 670;

var endy9 = 400;

var controlx13 = 830;

var controly13 = 460;

var endx10 = 700 ;

var endy10 = 475;

var controlx14 = 700;

var controly14 = 550;

var endx11 = 825;

var endy11 = 615;

context.beginPath();

context.moveTo(startx, starty);

context.bezierCurveTo(controlx1, controly1, controlx2, controly2, endx, endy);

context.quadraticCurveTo(controlx3, controly3, endx2, endy2);

context.quadraticCurveTo(controlx4, controly4, endx3, endy3);

context.bezierCurveTo(controlx5, controly5, controlx6, controly6, endx4, endy4);

context.quadraticCurveTo(controlx7, controly7, endx5, endy5);

context.quadraticCurveTo(controlx8, controly8, endx6, endy6);

context.quadraticCurveTo(controlx9, controly9, endx7, endy7);

context.quadraticCurveTo(controlx10, controly10, endx8, endy8);

context.lineTo(500, 250);

context.lineTo(525, 265);

context.bezierCurveTo(controlx11, controly11, controlx12, controly12, endx9, endy9);

context.quadraticCurveTo(controlx13, controly13, endx10, endy10);

context.quadraticCurveTo(controlx14, controly14, endx11, endy11);

context.lineTo(startx, starty);

context.lineWidth = 5;

context.fillStyle = 'rgb(0, 0, 0)';

context.fill();

context.closePath();

context.stroke();

/// Wolf Details

/// Eye

var StartEyex = 525;

var StartEyey = 300;

var controlEyeX = 550;

var controlEyeY = 285;

var endEyeX = 575;

var endEyeY = 350;

context.beginPath();

context.moveTo(StartEyex, StartEyey);

context.quadraticCurveTo(controlEyeX, controlEyeY, endEyeX, endEyeY);

context.strokeStyle = 'rgb(255, 255, 255)';

context.stroke();

/// Ear

var StartEarx = 675;

var StartEary = 425;

var controlEarX = 725;

var controlEarY = 425;

var endEarX = 750;

var endEarY = 450;

var controlEarX2 = 600;

var controlEarY2 = 450;

var endEarX2 = 675;

var endEarY2 = 425;

context.beginPath();

context.moveTo(StartEarx, StartEary);

context.quadraticCurveTo(controlEarX, controlEarY, endEarX, endEarY);

context.quadraticCurveTo(controlEarX2, controlEarY2, endEarX2, endEarY2);

context.strokeStyle = 'rgb(255, 255, 255)';

context.fillStyle = 'rgb(255, 255, 255)';

context.fill();

context.closePath();

context.stroke();

/// Nose

var StartNoseTopx = 375;

var StartNoseTopy = 148;

var NoseTopx = 390 ;

var NoseTopy = 148;

context.beginPath();

context.moveTo(StartNoseTopx, StartNoseTopy);

context.lineTo(NoseTopx, NoseTopy);

context.strokeStyle = 'rgb(255, 255, 255)';

context.lineCap = 'round';

context.stroke();

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

};

</script>

</head>

<body>

<canvas id="myCanvas" width="800" height="600"></canvas>

</body>

</html>

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)