Sunday, October 23, 2016

Coding Assignment




<!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, 1000, 800);
context.fillStyle = 'rgb(116, 200, 226)';
context.fill();

context.beginPath();
context.arc(400, 225, 130, 0 , 2*Math.PI, false);
context.fillStyle = 'rgb(249, 199, 236)';
context.fill();

context.beginPath();
context.moveTo(300, 300);
context.lineTo(500, 300);
context.lineTo(400, 500);
context.lineTo(300, 300);
context.closePath();
context.lineWidth = 20;
context.fillStyle = 'rgb(229, 202, 154)';
context.fill();
context.strokeStyle = 'rgb(230, 200, 150)';
context.stroke();

context.beginPath();
context.moveTo(325, 200);
context.lineTo(350, 175);
context.lineWidth = 10;
context.strokeStyle = 'rgb(250, 0, 0)';
context.stroke();

context.beginPath();
context.moveTo(375, 250);
context.lineTo(400, 275);
context.lineWidth = 10;
context.strokeStyle = 'rgb(50, 250, 50)';
context.stroke();

context.beginPath();
context.moveTo(475, 220);
context.lineTo(500, 200);
context.lineWidth = 10;
context.strokeStyle = 'rgb(75, 75, 200)';
context.stroke();

context.beginPath();
context.moveTo(390, 150);
context.lineTo(430, 170);
context.lineWidth = 10;
context.strokeStyle = 'rgb(225, 225, 0)';
context.stroke();

context.beginPath();
context.moveTo(450, 260);
context.lineTo(470, 285);
context.lineWidth = 10;
context.strokeStyle = 'rgb(250, 0, 0)';
context.stroke();



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

};

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

Tuesday, October 11, 2016

Vector Illustration

For my vector illustration I took an image of me against a cinderblock wall. I used gradient mesh for the majority of the illustration, except for the hair, where I blocked out the shading and highlights. I found the two most difficult parts of the illustration were the hair and the face. On the face, I used gradient mesh for each part of the face, so one for the nose, one for the cheek etc. I found that when I got to the eye, it was going to be difficult because in the actual image, my eyes are very squinted and dark so the variation in color between the different aspects of the eye was not visible, even when zoomed in with the pixels. It was also difficult getting each of the different meshes to blend, and no matter how much I tried I could not get the faint lines to go away. The hair became difficult due to the varying colors throughout my hair. I attempted many different techniques to do the hair and I found that gradiating a base color, and then blocking out each highlight and lowlight looked the most realistic. I like how the image turned out however I wish that I could've found an even better way to depict the hair, because it feels as though it sticks out compared to the rest of the image.