Monday, October 26, 2015
Photo Extract
Tuesday, October 20, 2015
HTML Project
For my project I decided to recreate the Monsters Inc. symbol. I was really satisfied with how the "M" turned out and the eyeball inside of it. Creating the outside circle was really difficult for me. I thought the eye was a really cool shape to do and I was actually really surprised with how well it came out. I was going to put a character from the movie in front of the M, but it looked very odd when I did it, so I decided not to. This was definitely the hardest project so far for me, but it was really cool to learn how to do.
<!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.moveTo(225, 150);
context.lineTo(355, 150);
context.lineTo(390, 205);
context.lineTo(425, 150);
context.lineTo(550, 150);
context.lineTo(602, 352);
context.lineTo(175, 352);
context.lineTo(225, 150);
context.stroke();
context.fillStyle = 'blue';
context.fill();
context.beginPath();
context.moveTo(250, 350);
context.lineTo(315, 275);
context.lineTo(395, 350);
context.lineTo(475, 275);
context.lineTo(550, 350);
context.stroke();
context.fillStyle = 'white';
context.fill();
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(50, 215);
context.quadraticCurveTo(400, 0, 725, 215);
context.lineWidth = 15;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.moveTo(48, 350);
context.quadraticCurveTo(400, 550, 725, 350);
context.lineWidth = 15;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.moveTo(50, 350);
context.quadraticCurveTo(0, 250, 50, 215);
context.lineWidth = 15;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.moveTo(725, 350);
context.quadraticCurveTo(730, 200, 700, 200);
context.lineWidth = 15;
context.stroke();
context.beginPath();
context.moveTo(275, 260);
context.quadraticCurveTo(390, 300, 500, 260);
context.lineWidth = 5;
context.stroke();
context.fillStyle = 'white';
context.fill();
context.beginPath();
context.moveTo(500, 260);
context.quadraticCurveTo(390, 225, 275, 260);
context.lineWidth = 5;
context.stroke();
context.fillStyle = 'white';
context.fill();
context.beginPath();
context.moveTo(375, 260);
context.quadraticCurveTo(390, 250, 410, 260);
context.lineWidth = 5;
context.stroke();
context.fillStyle = 'black';
context.fill();
context.beginPath();
context.moveTo(410, 260);
context.quadraticCurveTo(390, 275, 375, 260);
context.lineWidth = 5;
context.stroke();
context.fillStyle = 'black';
context.fill();
/*
context.beginPath();
context.moveTo(150, 50);
context.lineTo(300, 50);
context.stroke();
context.beginPath();
context.moveTo(150, 10);
context.lineTo(450, 50);
context.stroke();
*/
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
context.beginPath();
context.moveTo(225, 150);
context.lineTo(355, 150);
context.lineTo(390, 205);
context.lineTo(425, 150);
context.lineTo(550, 150);
context.lineTo(602, 352);
context.lineTo(175, 352);
context.lineTo(225, 150);
context.stroke();
context.fillStyle = 'blue';
context.fill();
context.beginPath();
context.moveTo(250, 350);
context.lineTo(315, 275);
context.lineTo(395, 350);
context.lineTo(475, 275);
context.lineTo(550, 350);
context.stroke();
context.fillStyle = 'white';
context.fill();
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.moveTo(50, 215);
context.quadraticCurveTo(400, 0, 725, 215);
context.lineWidth = 15;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.moveTo(48, 350);
context.quadraticCurveTo(400, 550, 725, 350);
context.lineWidth = 15;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.moveTo(50, 350);
context.quadraticCurveTo(0, 250, 50, 215);
context.lineWidth = 15;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.moveTo(725, 350);
context.quadraticCurveTo(730, 200, 700, 200);
context.lineWidth = 15;
context.stroke();
context.beginPath();
context.moveTo(275, 260);
context.quadraticCurveTo(390, 300, 500, 260);
context.lineWidth = 5;
context.stroke();
context.fillStyle = 'white';
context.fill();
context.beginPath();
context.moveTo(500, 260);
context.quadraticCurveTo(390, 225, 275, 260);
context.lineWidth = 5;
context.stroke();
context.fillStyle = 'white';
context.fill();
context.beginPath();
context.moveTo(375, 260);
context.quadraticCurveTo(390, 250, 410, 260);
context.lineWidth = 5;
context.stroke();
context.fillStyle = 'black';
context.fill();
context.beginPath();
context.moveTo(410, 260);
context.quadraticCurveTo(390, 275, 375, 260);
context.lineWidth = 5;
context.stroke();
context.fillStyle = 'black';
context.fill();
/*
context.beginPath();
context.moveTo(150, 50);
context.lineTo(300, 50);
context.stroke();
context.beginPath();
context.moveTo(150, 10);
context.lineTo(450, 50);
context.stroke();
*/
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Wednesday, October 7, 2015
Vector Illustration
I chose to draw a picture of my dog, Rex. I liked this picture because I really liked the texture of his fur and wanted to try to draw it. I chose to make the background different from the actual picture because the background in the real photo was so complex that it was taking away from the rest of the photo. I didn't want the background to be the main focus of the picture, so I wanted to change it a little bit. I started by drawing the dog. For the most part I really liked drawing the textured fur, and it was not as hard as I thought it would be. The eyes were difficult for me. It was hard because his eyes were very lively and I wanted them to look as real as possible. The rest of the picture I wanted to look a little more cartoonish, but I was really focused on making the eyes look life-like.
Subscribe to:
Posts (Atom)