This project was the most confusing artistic project I've ever had to do. At first I wanted to create a 3 or 4 3-D pyramids (because of my Egyptian heritage) but as soon as I started I wasn't feeling it. After that I decided to try recreate a South African logo but that proved to be harder than it looked. After some time I finally decided to use the circles from my failed South African logo rendition to make a watch. I figured why throw the circles away if they were already there?
At first while working on the watch I wanted to simply recreate a TIMEX. That idea however had no originality which made me reconsider the whole deal. At the end I figured adding my name to the logo of the watch would be a little more original. I decided to make the watch "the most expensive watch in the world" because the material of the watch are supposed to be pure Gold, Black Granite, and Platinum. The glass case around the watch is supposed to be the watch's showcase display.
During this project the hardest part I found was aligning the hour clocks and creating the 3-D glass case. These parts of the project took me quite some time but once the first few steps were done all I had to do was simply duplicate the lines. This was unfortunately harder than calculus (just joking, but not really). Overall I had fun with this project and I hope you like it.
context.beginPath();
context.rect(0, 0, 1000, 1000);
var grd = context.createLinearGradient(0, 10, 1200, 800);
grd.addColorStop(0, 'rgb(255, 51, 0)');
grd.addColorStop(0.7, 'rgb(153, 0, 51)');
context.fillStyle = grd;
context.fill();
/*context.strokeStyle = 'rgb(204, 51, 51)';
context.stroke();*/
var centerX = 500;
var centerY = 400;
var radius = 150;
var centerX1 = 500;
var centerY1 = 400;
var radius1 = 180;
var centerX2 = 500;
var centerY2 = 420;
var radius2 = 2.5;
//left rectangle
context.beginPath();
context.rect(390, 195, 15, 60);
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'rgb(255, 255, 255)';
context.stroke();
//right rectangle
context.beginPath();
context.rect(590, 195, 15, 60);
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'rgb(255, 255, 255)';
context.stroke();
//bottom left rectangle
context.beginPath();
context.rect(390, 545, 15, 60);
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'rgb(255, 255, 255)';
context.stroke();
//bottom right rectangle
context.beginPath();
context.rect(590, 545, 15, 60);
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'rgb(255, 255, 255)';
context.stroke();
//outer circle
context.beginPath();
context.arc(centerX1, centerY1, radius1, 0, 2 * Math.PI, false);
/*context.fillStyle = 'rgb(0, 0, 0)';
context.fill();*/
var grd=context.createRadialGradient(500, 500, 120, 500, 500, 180);
grd.addColorStop(0, 'rgb(102, 102, 102)');
grd.addColorStop(1, 'rgb(255, 255, 255)');
context.fillStyle = grd;
context.fill();
context.lineWidth = 3;
context.strokeStyle = 'rgb(255, 255, 255)';
context.stroke();
//inner circle
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
/*context.fillStyle = 'rgb(0, 0, 0)';
context.fill();*/
context.fillStyle = 'rgb(0, 0, 0)';
context.fill();
context.lineWidth = 3;
context.strokeStyle = 'rgb(255, 255, 255)';
context.stroke();
context.beginPath();
context.arc(centerX2, centerY2, radius2, 0, 2 * Math.PI, false);
/*var grd=context.createRadialGradient(500, 500, 120, 500, 500, 180);
grd.addColorStop(0, 'rgb(102, 102, 102)');
grd.addColorStop(1, 'rgb(255, 255, 255)');
context.fillStyle = grd;*/
context.lineWidth = 3;
context.strokeStyle = 'rgb(255, 204, 102)';
context.stroke();
context.beginPath();
context.font = 'italic 25pt Calibri';
context.fillStyle = 'white';
context.fillText('RJW', 475, 350);
context.font = 'italic 15pt Calibri';
context.fillText('12', 488, 290);
context.font = 'italic 15pt Calibri';
context.fillText('6', 495, 518);
context.font = 'italic 15pt Calibri';
context.fillText('3', 610, 413);
context.font = 'italic 15pt Calibri';
context.fillText('9', 380, 413);
context.beginPath();
context.font = 'italic 25pt Calibri';
context.fillStyle = 'white';
context.fillText('THE MOST EXPENSIVE WATCH IN THE UNIVERSE*', 180, 710);
//hour hands
context.beginPath();
context.moveTo(405, 365);
context.lineTo(500, 420);
context.moveTo(500, 420);
context.lineTo(580, 335);
context.moveTo(514, 395);
context.lineTo(455, 500);
context.lineWidth = 4.5;
context.strokeStyle = 'rgb(255, 204, 102)';
context.lineCap = 'butt';
context.stroke();
//Minute indicators
context.beginPath();
context.moveTo(500, 250);
context.lineTo(500, 270);
context.lineWidth = 3;
context.strokeStyle = 'rgb(204, 204, 204)';
context.stroke();
context.beginPath();
context.moveTo(500, 530);
context.lineTo(500, 550);
context.lineWidth = 3;
context.strokeStyle = 'rgb(204, 204, 204)';
context.stroke();
context.beginPath();
context.moveTo(352, 405);
context.lineTo(372, 405);
context.lineWidth = 3;
context.strokeStyle = 'rgb(204, 204, 204)';
context.stroke();
context.beginPath();
context.moveTo(630, 405);
context.lineTo(650, 405);
context.lineWidth = 3;
context.strokeStyle = 'rgb(204, 204, 204)';
context.stroke();
/*
context.beginPath();
context.moveTo(684,385);
context.bezierCurveTo(684, 388, 683, 500, 682, 400);
context.lineWidth = 5;
context.strokeStyle = 'rgb(255, 204, 102)';
context.stroke();
*/
context.beginPath();
context.moveTo(681, 384);
context.quadraticCurveTo(689, 384, 684.5, 430);
context.lineWidth = 10;
context.strokeStyle = 'rgb(255, 204, 102)';
context.stroke()
//Glass Casing
//1st Vertical line
context.beginPath();
context.moveTo(200, 163);
context.lineTo(200, 610);
context.lineWidth = 5;
context.strokeStyle = 'rgb(153, 153, 153)';
context.stroke();
//first bottom diagonal
context.moveTo(200, 610);
context.lineTo(312, 528);
context.lineWidth = 5;
context.strokeStyle = 'rgb(153, 153, 153)';
context.stroke();
//Bottom connecting line
context.moveTo(200, 610);
context.lineTo(750, 670);
context.lineWidth = 5;
context.strokeStyle = 'rgb(153, 153, 153)';
context.stroke();
//diagonal top right connector
context.moveTo(750, 670);
context.lineTo(830, 590);
context.lineWidth = 5;
context.strokeStyle = 'rgb(153, 153, 153)';
context.stroke();
context.moveTo(830, 592);
context.lineTo(830, 150);
context.lineWidth = 5;
context.strokeStyle = 'rgb(153, 153, 153)';
context.stroke();
context.moveTo(750, 670);
context.lineTo(750, 200);
context.lineWidth = 5;
context.strokeStyle = 'rgb(153, 153, 153)';
context.stroke();
context.moveTo(830, 150);
context.lineTo(750, 200);
context.lineWidth = 5;
context.strokeStyle = 'rgb(153, 153, 153)';
context.stroke();
context.moveTo(830, 588);
context.lineTo(608, 562);
context.lineWidth = 5;
context.strokeStyle = 'rgb(153, 153, 153)';
context.stroke();
context.moveTo(387, 542);
context.lineTo(310, 530);
context.lineWidth = 5;
context.strokeStyle = 'rgb(153, 153, 153)';
context.stroke();
//2nd Vertical Line
context.moveTo(310, 113);
context.lineTo(310, 530);
context.lineWidth = 5;
context.strokeStyle = 'rgb(153, 153, 153)';
context.stroke();
context.moveTo(200, 165);
context.lineTo(750, 200);
context.lineWidth = 5;
context.strokeStyle = 'rgb(153, 153, 153)';
context.stroke();
context.moveTo(310, 115);
context.lineTo(830, 150);
context.lineWidth = 5;
context.strokeStyle = 'rgb(153, 153, 153)';
context.stroke();
context.beginPath();
context.moveTo(200, 165);
context.lineTo(310, 115);
context.lineWidth = 5;
context.strokeStyle = 'rgb(153, 153, 153)';
context.stroke();
context.closePath();
No comments:
Post a Comment