During class four, when professor Corrigan showed us some examples of past student's projects, I would have to admit that I was pretty overwhelmed. For the first few classes we were simply creating single shapes and learning about gradients, I thought to myself "how on earth would I be able to create a picture based on shapes, without it ending up looking like a five year old did it?" However, when i got past my initial fear I began to brainstorm and thought that I would create a graphic which portrays something which I enjoy. After much thought I decided to create a graphic to depict music and by music I mean "reggae music". Reggae is something which I listen to when I need to relax and settle my mind and the first thing which comes to mind when I think about reggae is an acoustic guitar.
I began creating this graphic by first adding a background with the symbolic reggae colors of "red, gold, green and black" followed by the body of the guitar. I created the body by making two interconnected circles of different sizes and filling them with the same brown as the strokestyle. I then created two more circles with a darker shade of brown to give the effect of the inside of the guitar. After this came the neck, the strings and the bar, which comprised of one horizontal rectangle, two more interconnected circles, six lines and a vertical rectangle. I then added a radial gradient at the bottom conner of the body of the guitar to symbolize light reflecting off the wood of the guitar.
To end this graphic I decided to add a powerful quote by one of the most influential singers in reggae music, Bob Marley. This project, though stressful, turned out to be a lot of fun and I am glad I was able to make a meaningful piece.
CODE:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var x = 0;
var y = 0;
var width = 800;
var height = 600;
var startX = 400;
var startY = 0;
var endX = 800;
var endY = 600;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
var grd = context.createLinearGradient(startX, startY, endX, endY);
grd.addColorStop(0, 'rgb(255, 25, 25)');
grd.addColorStop(0.30, 'rgb(255, 255, 0)');
grd.addColorStop(0.65, 'rgb(51, 160, 0)');
grd.addColorStop(0.90,'rgb(0, 0, 0)');
context.fillStyle = grd;
context.fill();
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
//body
context.beginPath();
context.arc(200, 350, 125, 0 , 2 * Math.PI, false);
context.lineWidth = 4;
context.strokeStyle = 'rgb(102,51,0)';
var grd=context.createRadialGradient(135, 450, 20, 125, 450, 60);
grd.addColorStop(1, 'rgb(102,51,0)');
grd.addColorStop(0, 'rgb(160,160,160)');
context.fillStyle = grd;
context.fill();
context.stroke();
//body
context.beginPath();
context.arc(375,350, 100, 0 , 2 * Math.PI, false);
context.fillStyle = 'rgb(102,51,0)';
context.strokeStyle = 'rgb(102,51,0)';
context.fill();
context.stroke();
//center
context.beginPath();
context.arc(355,350, 40, 0 , 2 * Math.PI, false);
context.fillStyle = 'rgb(51,8,0)';
context.strokeStyle = 'rgb(51,8,0)';
context.fill();
context.stroke();
context.beginPath();
context.arc(355,350, 50, 0 , 2 * Math.PI, false);
context.fillStyle = 'rgb(51,8,0)';
context.strokeStyle = 'rgb(20,0,0)';
context.fill();
context.stroke();
//neck
context.beginPath();
context.rect(398, 330, 300, 35);
context.fillStyle = 'rgb(25,0,0)';
context.strokeStyle = 'rgb(25,0,0)';
context.fill();
context.stroke();
//top
context.beginPath();
context.arc(708,350, 30, 0 , 2 * Math.PI, false);
context.fillStyle = 'rgb(25,0,0)';
context.fill();
context.stroke();
context.beginPath();
context.arc(745,350, 35, 0 , 2 * Math.PI, false);
context.fillStyle = 'rgb(25,0,0)';
context.fill();
context.stroke();
//bar
context.beginPath();
context.rect(200, 310, 20, 80);
context.fillStyle = 'rgb(25,0,0)';
context.fill();
context.stroke();
//1 Strings
context.beginPath();
context.moveTo(755,335);
context.lineTo(200,335);
context.strokeStyle = 'rgb(255,255,255)';
context.lineWidth = 1;
context.stroke();
//2
context.beginPath();
context.moveTo(735,340);
context.lineTo(200,340);
context.strokeStyle = 'rgb(255,255,255)';
context.lineWidth = 1;
context.stroke();
//3
context.beginPath();
context.moveTo(715,345);
context.lineTo(200,345);
context.strokeStyle = 'rgb(255,255,255)';
context.lineWidth = 1;
context.stroke();
//4
context.beginPath();
context.moveTo(715,350);
context.lineTo(200,350);
context.strokeStyle = 'rgb(255,255,255)';
context.lineWidth = 1;
context.stroke();
//5
context.beginPath();
context.moveTo(735,355);
context.lineTo(200,355);
context.strokeStyle = 'rgb(255,255,255)';
context.lineWidth = 1;
context.stroke();
//6
context.beginPath();
context.moveTo(755,360);
context.lineTo(200,360);
context.strokeStyle = 'rgb(255,255,255)';
context.lineWidth = 1;
context.stroke();
context.font = 'italic 15pt Calibri';
context.fillText('Dont gain the world and ', 50, 520);
context.font = 'italic 15pt Calibri';
context.fillText('lose your soul, wisdom', 50, 550);
context.font = 'italic 15pt Calibri';
context.fillText('is better than silver or gold.', 50, 580);
context.font = 'italic 10pt Calibri';
context.fillText('- Bob Marley', 275, 590);
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
