DONE !
I am actually quite proud of this little fellow (high resolution photo is after html coding):
.JPG)
The concept I worked around was whimsicality, asymmetry and humor. A lot of my artworks are cartoonish and humorous in a sense, and I wanted to see if I could carry that out in the digital realm as well. Asymmetry was an important one here. If you can see, nothing in this little fellow's face is bi-symmetrical, as most faces are structured to be. I not only forced this to be so, but I very much like it better this way. I think it not only adds to the whimsical nature of the portrait, but it makes it quite comical. Like, look at him: look at that left eye. It's poppin' out! He's either going mad or is frightened out of his mind.
The process, if you check out the coding below, is mostly made up of Bezier curves. I was really having trouble at the start, which I think showed with the first pair of eyebrows and the first nose I had made. I think I got the hand of them a bit later, and redid both the nose and the eyebrows. The notion of using a paper grid really, really helped, in my opinion. It gives you an overall idea of where (kind of sort of) your x and y points should be. And that saves you a good chunk of time, although I feel that is almost wrong to say since this took me so darn long. I think this assignment was very interesting. It was tough, but it was very interesting. I feel like I had gone into it feeling like the little fellow above, but I'm really glad we had this. I learned a lot from it.
Here's the HTML coding for all of it, and the initial sketches and process for the final result are in the prior posting (Bezier, Bezier...):
Cheers.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ??????????
//rectangle for my background
var topleftX = 0;
var topleftY = 0;
var width = canvas.width;
var height = canvas.height;
context.beginPath();
context.rect(topleftX, topleftY, width, height);
context.fillStyle = 'rgb(221,181,2)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'rgb(0,150,180)';
context.stroke();
//eye1
var centerX = canvas.width / 1.7;
var centerY = canvas.height / 2;
var radius = 50;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.lineWidth = 2.5;
context.strokeStyle = "black";
context.stroke();
//eye2
var centerX = canvas.width / 3;
var centerY = canvas.height / 3;
var radius = 80;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.lineWidth = 2.5;
context.strokeStyle = "black";
context.stroke();
//iris1
var centerX = canvas.width / 1.7;
var centerY = canvas.height / 2;
var radius = 3;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
//eye bag right
//EYE BAG 2
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = 475.8;
var y = 300;
var radius = 57;
var startAngle = 1.1 * Math.PI;
var endAngle = 2.1 * Math.PI;
var counterClockwise = true;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 0.8;
// line color
context.strokeStyle = "black";
context.stroke();
//iris2
var centerX = canvas.width / 3.2;
var centerY = canvas.height / 3;
var radius = 2;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.lineWidth = 4;
context.strokeStyle = "black";
context.stroke();
//irisblue
var centerX = canvas.width / 3.2;
var centerY = canvas.height / 3;
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fill();
context.lineWidth = 6;
context.strokeStyle = "rgb(7,200,174)";
context.stroke();
//Shine of eye
var centerX = canvas.width / 3.23;
var centerY = canvas.height / 3.1;
var radius = 3;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.fillStyle = 'white';
context.fill();
context.stroke();
//EYE BAG 1
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = 257;
var y = 206;
var radius = 91;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = true;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 1;
// line color
context.strokeStyle = "black";
context.stroke();
//EYE BAG 2
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = 263;
var y = 203;
var radius = 86;
var startAngle = 1.5 * Math.PI;
var endAngle = 2.1 * Math.PI;
var counterClockwise = true;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 0.8;
// line color
context.strokeStyle = "black";
context.stroke();
// NEW NOSE
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(295, 335);
context.bezierCurveTo(295, 330, 320, 430, 395, 350);
context.bezierCurveTo(395, 350, 345, 300, 295, 335);
context.closePath();
context.lineWidth = 2;
context.strokeStyle = "rgb(0,0,0)";
context.fillStyle = 'rgb(250,223,48)';
context.fill();
context.stroke();
// end
//Nose hole
var centerX = 313;
var centerY = 357;
var radius = 12;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(221,181,2)';
context.fill();
context.lineWidth = 4;
context.strokeStyle = "rgb(221,181,2)";
context.stroke();
//Nose hole right
var centerX = 370;
var centerY = 366;
var radius = 12;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(221,181,2)';
context.fill();
context.lineWidth = 4;
context.strokeStyle = "rgb(221,181,2)";
context.stroke();
//Nose Hole black
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = 313;
var y = 357;
var radius = 12;
var startAngle = 1.2 * Math.PI;
var endAngle = 2.39 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 2;
// line color
context.strokeStyle = "black";
context.stroke();
//Nose Hole black 2
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = 369;
var y = 366;
var radius = 12;
var startAngle = 1.99 * Math.PI;
var endAngle = 2.7 * Math.PI;
var counterClockwise = true;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 2;
// line color
context.strokeStyle = "black";
context.stroke();
// mouth shape
// begin
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(60, 250);
context.bezierCurveTo(160, 250, 230, 550, 550, 340);
context.bezierCurveTo(550, 340, 688, 250, 690, 450);
context.bezierCurveTo(690, 450, 660, 550, 450, 550);
context.bezierCurveTo(450, 550, 200, 550, 140, 477);
context.bezierCurveTo(140, 477, 40, 430, 30, 300);
context.bezierCurveTo(30, 300, 9, 247, 60, 250);
context.closePath();
context.lineWidth = 2;
context.strokeStyle = "black";
context.fillStyle = 'black';
context.fill();
context.stroke();
// end
// begin LEFT EYEBROW
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(150, 100);
context.bezierCurveTo(230, 70, 255, 40, 290, 65);
context.bezierCurveTo(290, 65, 130, 180, 150, 100);
context.closePath();
context.lineWidth = 2;
context.strokeStyle = "black";
context.fillStyle = 'rgb(65,46,2)';
context.fill();
context.stroke();
// end
// begin RIGHT EYEBROW
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(500, 170);
context.bezierCurveTo(500, 100, 520, 160, 566, 210);
context.bezierCurveTo(566, 210, 550, 230, 500, 170);
context.closePath();
context.lineWidth = 2;
context.strokeStyle = "black";
context.fillStyle = 'rgb(65,46,2)';
context.fill();
context.stroke();
//Tooth 1
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(170, 335);
context.bezierCurveTo(125, 338, 190, 400, 200, 360);
context.bezierCurveTo(200, 368, 200, 360, 170, 335);
// complete custom shape
context.closePath();
context.lineWidth = 2;
context.strokeStyle = "white";
context.fillStyle = 'white';
context.fill();
context.stroke();
context.stroke();
//Tooth 2
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(203, 513);
context.bezierCurveTo(209, 485, 250, 470, 267, 530);
context.bezierCurveTo(267, 530, 210, 517, 203, 513);
// complete custom shape
context.closePath();
context.lineWidth = 2;
context.strokeStyle = "white";
context.fillStyle = 'white';
context.fill();
context.stroke();
context.stroke();
//Tooth 3
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(302, 412);
context.bezierCurveTo(300, 413, 340, 417, 330, 417);
context.bezierCurveTo(340, 417, 330, 500, 300, 412);
// complete custom shape
context.closePath();
context.lineWidth = 2;
context.strokeStyle = "white";
context.fillStyle = 'white';
context.fill();
context.stroke();
context.stroke();
//Hole in tooth 3
var centerX = 330;
var centerY = 430;
var radius = 7;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.lineWidth = 4;
context.strokeStyle = "black";
context.stroke();
//Tooth 4
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(360, 416);
context.bezierCurveTo(360, 416, 350, 417, 380, 413);
context.bezierCurveTo(380, 413, 360, 500, 360, 415);
// complete custom shape
context.closePath();
context.lineWidth = 2;
context.strokeStyle = "white";
context.fillStyle = 'white';
context.fill();
context.stroke();
context.stroke();
//Tooth 5
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(360, 416);
context.bezierCurveTo(360, 416, 350, 417, 380, 413);
context.bezierCurveTo(380, 413, 360, 500, 360, 415);
// complete custom shape
context.closePath();
context.lineWidth = 2;
context.strokeStyle = "white";
context.fillStyle = 'white';
context.fill();
context.stroke();
context.stroke();
//Tooth 5
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(400, 546);
context.bezierCurveTo(420, 499, 420, 520, 420, 546);
context.bezierCurveTo(420, 546, 420, 547, 400, 546);
// complete custom shape
context.closePath();
context.lineWidth = 2;
context.strokeStyle = "white";
context.fillStyle = 'white';
context.fill();
context.stroke();
context.stroke();
//Tooth 6
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(503, 371);
context.bezierCurveTo(503, 371, 507, 370, 520, 361);
context.bezierCurveTo(520, 361, 520, 440, 503, 371);
// complete custom shape
context.closePath();
context.lineWidth = 2;
context.strokeStyle = "white";
context.fillStyle = 'white';
context.fill();
context.stroke();
context.stroke();
// end
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
__________________________________________________________________
No comments:
Post a Comment