Monday, December 12, 2016
Wednesday, November 30, 2016
Monday, November 14, 2016
Project 3: Collage Environment
The message I based my Collage on is "Don't Give Up". The Bridge represents the easy route that many people get to take, the darkness to the right represents the problems that some people encounter, the fire represents the obstacle that has to be overcome to allow you to allow you to achieve what you want to achieve.
Monday, November 7, 2016
Wednesday, October 26, 2016
Sunday, October 23, 2016
Assignment 5: ASCII
Assignment 5: ASCII
 |
| Screenshot of Logo from HTML code |
 |
| Grid Used to help determine point coordinates |
<!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.arc(400, 300, 170, 0 , 2 * Math.PI, false);
context.fillStyle = '#A19E9B'
context.fill();
context.stroke();
context.beginPath();
context.arc(400, 300, 162, 0 , 2 * Math.PI, false);
context.fillStyle = 'black'
context.fill();
context.stroke();
context.beginPath();
context.arc(400, 300, 153.5, 0 , 2 * Math.PI, false);
context.fillStyle = 'white'
context.fill();
context.stroke();
context.beginPath();
context.moveTo(400,300);
context.lineTo(400,137.5);
context.lineTo(405,145);
context.lineTo(422,280);
context.lineTo(400,300);
var grd = context.createLinearGradient(400, 300, 400, 137.5);
grd.addColorStop(1, '#A19E9B');
grd.addColorStop(0.1, 'black');
context.fillStyle = grd;
context.fill();
context.stroke();
context.beginPath();
context.moveTo(400,300);
context.lineTo(400,137.5);
context.lineTo(395,145);
context.lineTo(378,280);
context.lineTo(400,300);
context.fillStyle = '#A19E9B'
context.fill();
context.stroke();
context.beginPath();
context.moveTo(400,300);
context.lineTo(378,280);
context.lineTo(262.6,365);
context.lineTo(255,375);
context.lineTo(400,300);
context.fillStyle = '#A19E9B';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(400,300);
context.lineTo(400,324.5);
context.lineTo(270,375);
context.lineTo(255,375);
context.lineTo(400,300);
var grd = context.createLinearGradient(400, 300, 255, 375);
grd.addColorStop(1, 'black');
grd.addColorStop(0.000000000000000000005, '#A19E9B');
context.fillStyle = grd;
context.fill();
context.stroke();
context.beginPath();
context.moveTo(400,300);
context.lineTo(422,280);
context.lineTo(537.4,365);
context.lineTo(545,375);
context.lineTo(400,300);
context.fillStyle = '#A19E9B';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(400,300);
context.lineTo(545,375);
context.lineTo(530,375);
context.lineTo(400,324.5);
context.lineTo(400,300);
var grd = context.createLinearGradient(400, 300, 545, 375);
grd.addColorStop(1, 'black');
grd.addColorStop(0.000000000000000000005, '#A19E9B');
context.fillStyle = grd;
context.fill();
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.arc(400, 300, 170, 0 , 2 * Math.PI, false);
context.fillStyle = '#A19E9B'
context.fill();
context.stroke();
context.beginPath();
context.arc(400, 300, 162, 0 , 2 * Math.PI, false);
context.fillStyle = 'black'
context.fill();
context.stroke();
context.beginPath();
context.arc(400, 300, 153.5, 0 , 2 * Math.PI, false);
context.fillStyle = 'white'
context.fill();
context.stroke();
context.beginPath();
context.moveTo(400,300);
context.lineTo(400,137.5);
context.lineTo(405,145);
context.lineTo(422,280);
context.lineTo(400,300);
var grd = context.createLinearGradient(400, 300, 400, 137.5);
grd.addColorStop(1, '#A19E9B');
grd.addColorStop(0.1, 'black');
context.fillStyle = grd;
context.fill();
context.stroke();
context.beginPath();
context.moveTo(400,300);
context.lineTo(400,137.5);
context.lineTo(395,145);
context.lineTo(378,280);
context.lineTo(400,300);
context.fillStyle = '#A19E9B'
context.fill();
context.stroke();
context.beginPath();
context.moveTo(400,300);
context.lineTo(378,280);
context.lineTo(262.6,365);
context.lineTo(255,375);
context.lineTo(400,300);
context.fillStyle = '#A19E9B';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(400,300);
context.lineTo(400,324.5);
context.lineTo(270,375);
context.lineTo(255,375);
context.lineTo(400,300);
var grd = context.createLinearGradient(400, 300, 255, 375);
grd.addColorStop(1, 'black');
grd.addColorStop(0.000000000000000000005, '#A19E9B');
context.fillStyle = grd;
context.fill();
context.stroke();
context.beginPath();
context.moveTo(400,300);
context.lineTo(422,280);
context.lineTo(537.4,365);
context.lineTo(545,375);
context.lineTo(400,300);
context.fillStyle = '#A19E9B';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(400,300);
context.lineTo(545,375);
context.lineTo(530,375);
context.lineTo(400,324.5);
context.lineTo(400,300);
var grd = context.createLinearGradient(400, 300, 545, 375);
grd.addColorStop(1, 'black');
grd.addColorStop(0.000000000000000000005, '#A19E9B');
context.fillStyle = grd;
context.fill();
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Wednesday, October 12, 2016
Project 2: Vector Illustration
Project 2: Vector Illustration
Below is my vector illustration.
Below is the reference image.
Subscribe to:
Posts (Atom)