I started out by printing out a 700 X 900 grid. I then traced the character "Butters," from South Park, because that was going to be my original project. Half way through programming I decided to do something more creative then simply copying a character, and ended up making my own "little doctor." I started with the pants, then the shoes, then the arms, hands, thumbs; slowly working my way up to the face eyes and mouth. I ended up with what looked like a baby, but i wanted to add more. I decided to put a stethoscope on top of his head and then add the tie for the final touch.
here is the code
//PANTS
context.beginPath();
context.rect(235, 750, 250, 50);
context.fillStyle = "rgb(43, 108, 88)";
context.fill();
context.lineWidth = 7;
context.strokeStyle = "rgb(43, 108, 88)";
context.stroke();
//LEFT SHOE
context.beginPath();
context.moveTo(220, 800);
context.quadraticCurveTo(295, 775, 370, 800);
context.fillStyle ='black';
context.fill();
context.lineTo(220, 800);
context.lineCap = 'round';
context.lineWidth = 5;
// line color
context.strokeStyle = 'black';
context.stroke();
//RIGHT SHOE
context.beginPath();
context.moveTo(370, 800);
context.quadraticCurveTo(425, 775, 500, 800);
context.fillStyle ='black';
context.fill();
context.lineTo(370, 800);
context.lineCap = 'round';
context.lineWidth = 5;
// line color
context.strokeStyle = 'black';
context.stroke();
//LEFT ARM
context.beginPath();
context.moveTo(235, 700);
context.quadraticCurveTo(240, 675, 250, 665);
context.fillStyle = "rgb(100, 224, 226)";
context.fill();
context.lineWidth = 3;
// line color
context.strokeStyle = 'black';
context.stroke();
//RIGHT ARM
context.beginPath();
context.moveTo(470, 665);
context.quadraticCurveTo(478, 675, 480, 700);
context.fillStyle = "rgb(100, 224, 226)";
context.fill();
context.lineWidth = 3;
// line color
context.strokeStyle = 'black';
context.stroke();
//LEFT HAND
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 25;
context.beginPath();
context.arc(225, 725, radius, 0, 2 * Math.PI, false);
context.fillStyle = "rgb(255, 226, 198)";
context.fill();
context.lineWidth = 3;
context.stroke();
//RIGHT HAND
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 25;
context.beginPath();
context.arc(490, 725, radius, 0, 2 * Math.PI, false);
context.fillStyle = "rgb(255, 226, 198)";
context.fill();
context.lineWidth = 3;
context.stroke();
//LEFT THUMB
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 12;
context.beginPath();
context.arc(240, 710, radius, 0, 2 * Math.PI, false);
context.fillStyle = "rgb(255, 226, 198)";
context.fill();
context.lineWidth = 3;
context.stroke();
//RIGHT THUMB
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 12;
context.beginPath();
context.arc(473, 711, radius, 0, 2 * Math.PI, false);
context.fillStyle = "rgb(255, 226, 198)";
context.fill();
context.lineWidth = 3;
context.stroke();
//RIGHT ARM
context.beginPath();
context.moveTo(480, 585);
context.quadraticCurveTo(520, 635, 515, 725);
//context.fillStyle = "rgb(100, 224, 226)";
//context.fill();
//context.lineCap = 'round';
context.lineWidth = 3;
// line color
context.strokeStyle = 'black';
context.stroke();
//LEFT ARM
context.beginPath();
context.moveTo(240, 585);
context.quadraticCurveTo(200, 635, 200, 725);
//context.fillStyle = "rgb(100, 224, 226)";
//context.fill();
context.lineWidth = 3;
// line color
context.strokeStyle = 'black';
context.stroke();
//ZIPPER
context.beginPath();
context.moveTo(360,745);
context.lineTo(360,615);
context.stroke();
context.lineWidth = 7
//HEAD
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 185;
context.beginPath();
context.arc(360, 465, radius, 0, 2 * Math.PI, false);
context.fillStyle = "rgb(255, 226, 198)";
context.fill();
context.lineWidth = 3;
context.stroke();
//RIGHT EYE
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 65;
context.beginPath();
context.arc(425, 465, radius, 0, 2 * Math.PI, false);
context.fillStyle = "rgb(250, 255, 255)";
context.fill();
context.lineWidth = 3;
context.stroke();
//LEFT EYE
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 65;
context.beginPath();
context.arc(225, 465, radius, 0, 2 * Math.PI, false);
context.fillStyle = "rgb(250, 255, 255)";
context.fill();
context.lineWidth = 3;
context.stroke();
//LEFT EYE BALL
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 10;
context.beginPath();
context.arc(170, 465, radius, 0, 2 * Math.PI, false);
context.fillStyle = "rgb(0, 0, 0)";
context.fill();
context.lineWidth = 3;
context.stroke();
//RIGHT EYE BALL
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 10;
context.beginPath();
context.arc(370, 465, radius, 0, 2 * Math.PI, false);
context.fillStyle = "rgb(0, 0, 0)";
context.fill();
context.lineWidth = 3;
context.stroke();
//MOUTH
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(325, 565);
context.quadraticCurveTo(360, 610, 400, 565);
context.lineWidth = 5;
// line color
context.strokeStyle = 'black';
context.stroke();
//LEFT EYE BROW
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 50;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(225, 415, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 7;
// line color
context.strokeStyle = 'black';
context.stroke();
//RIGHT EYE BROW
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 50;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(425, 415, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 7;
// line color
context.strokeStyle = 'black';
context.stroke();
//DOC STRAP
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.rect(185, 305, 350, 40);
context.fillStyle = "rgb(0, 0, 0,)";
context.fill();
context.lineWidth = 7;
context.strokeStyle = "rgb(0, 0, 0,)";
context.stroke();
//DOC LIGHT
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 58;
context.beginPath();
context.arc(355, 315, radius, 0, 2 * Math.PI, false);
context.fillStyle = "rgb(250, 255, 255)";
context.fill();
context.lineWidth = 3;
context.stroke();
//TIE
context.beginPath();
context.moveTo(360,650);
context.lineTo(350,665);
context.lineTo(360, 680);
//context.moveTo(360,650);
context.lineTo(370,665);
context.lineTo(360,650);
context.fillStyle = "rgb(250, 0, 0)";
context.fill()
context.stroke();
context.beginPath();
context.moveTo(360, 680);
context.lineTo(345, 720);
context.lineTo(360, 750);
context.lineTo(375, 720);
context.lineTo(360, 680 );
context.fillStyle = "rgb(250, 0, 0)";
context.fill()
context.stroke();
No comments:
Post a Comment