My Graphic Arts Portfolio: October 2015

PHINEAS! I used HTML5 coding on the text wrangler program to create this!

original Phineas head

Phineas Head with background

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

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

context.beginPath();
context.rect(0,0,800,600);
context.fillStyle = 'blue';
context.fill();
context.stroke();

//hair
context.beginPath();
context.moveTo(100, 210);
context.quadraticCurveTo(100, 125, 175, 75);
context.quadraticCurveTo(125, 60, 75, 115);
context.quadraticCurveTo(128, 35, 175, 15);
context.quadraticCurveTo(210,100,175,115);
context.quadraticCurveTo(210, 90, 75, 15);
context.quadraticCurveTo(200, 50, 175, 115);
context.quadraticCurveTo(150, 70, 75, 115);
context.quadraticCurveTo(50, 80, 175, 15);
context.quadraticCurveTo(50, 80, 175, 75);
context.quadraticCurveTo(50, 90, 75, 115);
context.quadraticCurveTo(25, 125, 175, 75);
context.quadraticCurveTo(180, 220, 75, 115);
context.quadraticCurveTo(150, 100, 175, 75);
context.quadraticCurveTo(60, 101, 75, 115);
context.stroke();
context.fillStyle = 'red';
context.fill();
context.stroke();
context.closePath();

/*context.moveTo(200,100);
context.quadraticCurveTo(200,105, 90, 190);
context.lineTo(170,90);
context.lineTo(190,80);
context.lineTo(140,200);
context.lineTo(200,110);
context.lineTo(190,120);
context.stroke();
context.fillStyle = 'orange';
context.fill();
context.stroke();
context.closePath();
*/

//head shape
context.beginPath();
context.moveTo(300,415);
context.quadraticCurveTo(275,250, 95, 150);
context.quadraticCurveTo(75,125, 100, 120);
context.lineTo(570,120);
context.lineTo(405,300);
context.lineTo(400,301);
context.lineTo(400,305);
context.lineTo(330,415);
context.stroke();
context.fillStyle = 'tan';
context.fill();
context.stroke();
context.closePath();

//mouth
context.beginPath();
context.moveTo(300,250);
context.quadraticCurveTo(350,300, 400, 300);
context.stroke();

//eyes
context.beginPath();
context.arc(300, 100, 50, 0, 2*Math.PI, true);
context.stroke();
context.stroke();
context.fillStyle = 'white';
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.arc(380, 100, 50, 0, 2*Math.PI, true);
context.stroke();

context.stroke();
context.fillStyle = 'white';
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.arc(300, 125, 20, 0, 2*Math.PI, true);
context.stroke();
context.stroke();
context.fillStyle = 'blue';
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.arc(400, 125, 20, 0, 2*Math.PI, true);
context.stroke();
context.fillStyle = 'blue';
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.arc(400, 110, 5, 0, 2*Math.PI, true);
context.stroke();
context.fillStyle = 'white';
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.arc(300, 110, 5, 0, 2*Math.PI, true);
context.stroke();
context.fillStyle = 'white';
context.fill();
context.stroke();
context.closePath();

//ear
context.beginPath()
context.arc(200,250,20,0, 2*Math.PI, true);
context.stroke();
context.fillStyle = 'tan';
context.fill();
context.stroke();
context.closePath();

//dimples
context.beginPath();
context.arc(170, 160, 2, 0, 2*Math.PI, true);
context.stroke();

context.beginPath();
context.arc(160, 150, 2, 0, 2*Math.PI, true);
context.stroke();

context.beginPath();
context.arc(150, 180, 2, 0, 2*Math.PI, true);
context.stroke();

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

};

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

My Graphic Arts Portfolio

Monday, October 26, 2015

the wing in the great Blue Yonder"

Tuesday, October 20, 2015

Rock and roll Phineas

Tuesday, October 6, 2015

final mesh sketch of FIAT 500

final mesh sketch of fiat