For this assignment, we had to insert ourselves into a place we've never been by integrating two images on Photoshop. I decided to take a photo of myself, originally sitting on the hood of a Mustang, and put myself in the Amalfi Coast of Italy.
Monday, March 27, 2017
Tuesday, March 21, 2017
Assignment 5: ASCII- HTML 5 Coding
For this assignment, I chose to do the BMW logo because it seemed pretty simple for such a difficult project. "Just some circles and triangles, it will be easy!" Well, I thought wrong. The top image is the reference image and below is my version. As you can see, the letters are missing. This is because I had extreme difficulty writing code for the letters- slightly changing and tweaking each number and variable to see if I could get it to look right. Especially for the B, I tried to do a belzier curve for the two bubbles, and just couldn't figure out the code to get it to actually look like a B. You will see in the code where I was attempting to do this.
I think the most difficult aspect of this assignment was the numbers and math involved with first choosing the right points on the graph and then transferring that to the actual coding, where you will have to do more math to make changes and make shapes look smoother/ more accurate.
The triangles were difficult for me because it took a lot of messing with numbers for it to make like each separate triangle belonged together as part of a circle. I used a quadratic curve on each side of all 4 triangles. Additionally, getting the gradient in the black circle to look like the original was quite difficult for me.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
///////////////////////////////////// start below this line ~~~~~~~~~~~~~
var centerX = 400;
var centerY = 300;
var radius = 150;
var startX = 180;
var startY = 300;
var endX = 550;
var endY = 500;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);
var grd = context.createLinearGradient(startX, startY, endX, endY);
grd.addColorStop(0,'rgb(250, 250, 250)');
grd.addColorStop(.3,'rgb(0, 0, 0)');
context.fillStyle = grd;
context.fill();
context.lineWidth = 8;
context.strokeStyle = 'rgb(210, 210, 210)';
context.closePath();
context.stroke();
var controlX = 310;
var controlY = 210;
var endX = 400;
var endY = 200;
context.beginPath();
context.moveTo(400,300);
context.lineTo(300,300);
context.quadraticCurveTo(controlX, controlY, endX, endY);
context.lineTo(400,300);
context.lineWidth = 2.25;
context.fillStyle = 'rgb(0, 200, 245)';
context.fill();
context.closePath();
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
var controlX = 490;
var controlY = 210;
var endX = 500;
var endY = 300;
context.beginPath();
context.moveTo(400,300);
context.lineTo(400,200);
context.quadraticCurveTo(controlX, controlY, endX, endY);
context.lineTo(400,300);
context.lineWidth = 2.25;
context.fillStyle = 'rgb(250, 250, 250)';
context.fill();
context.closePath();
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
var controlX = 490;
var controlY = 390;
var endX = 400;
var endY = 400;
context.beginPath();
context.moveTo(400,300);
context.lineTo(500,300);
context.quadraticCurveTo(controlX, controlY, endX, endY);
context.lineTo(400,300);
context.lineWidth = 2.25;
context.fillStyle = 'rgb(0, 200, 250)';
context.fill();
context.closePath();
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
var controlX = 310;
var controlY = 390;
var endX = 300;
var endY = 300;
context.beginPath();
context.moveTo(400,300);
context.lineTo(400,400);
context.quadraticCurveTo(controlX, controlY, endX, endY);
context.lineTo(400,300);
context.lineWidth = 2.25;
context.fillStyle = 'rgb(250, 250, 250)';
context.fill();
context.closePath();
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
var controlX1 = 310;
var controlY2 = 190;
var controlX2 = 340;
var controlY2 = 190;
var endX = 300;
var endY = 250;
context.beginPath();
context.moveTo(300,250);
context.lineTo(275,210);
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
context.lineWidth = 2.25;
context.closePath();
context.strokeStyle = 'rgb(210, 210, 210)';
context.stroke();
//////////////////////////////////// end above this line ~~~~~~~~~~~~~~
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Subscribe to:
Posts (Atom)