For my canvas project I wanted to do something that was creative, but also spoke to me. I am obsessed with music and my favorite instrument is the Trumpet, so I thought I'd recreate it in canvas. Coding has always been an intimidating subject for me, as I never thought I'd be able to take the time to understand it. After this past unit in class, I've realized while coding is still challenging, it's not as intimidating as I once thought. For my first time ever giving coding a shot, I feel like my project turned out to the best of my abilities.
In my artwork, I feature the main trumpet design with some special abstract parts to it, including the triangular bottom valve covers and the large, gradient bell. I'm very happy that my original design resembles my final piece very similarly. Also something to note, the large, swooping bezier curves seen going across the artwork are the sound waves from the music. I wanted to be able to represent the musical aspect of the art, so adding in the sound waves, as well as a music note really completed the piece in my opinion.
Looking back I would have liked to improve the overall shape of the Trumpet, as I think the shape of the bell differs slightly from my original renderings. Still, many shapes were utilized throughout, such as a quadratic curve for part of the tubing, a gradient circle for the bell, rectangles as another part of the tubing, and other curves and arcs used for the trumpet's complex shape. Overall this project ended up taking me about 10 hours to complete, which was expected when I knew what was ahead of me when it came to the design. While my experience with coding so far has been challenging, I'm still open to learning more about it and potentially upping my skills in the future.
Final Code:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Music Note
var circlecenterX = 550; // x coordinate
var circlecenterY =550; // y coordinate
var radius = 30;
var startAngle = 0; // start at the angle 0
var endAngle = 2 * Math.PI; // end at the full angle
var counterClockwise = false; // in this case it doesn't really matter unless you are drawing half a circle
context.arc(circlecenterX, circlecenterY, radius, startAngle, endAngle, counterClockwise);
context.strokeStyle = "rgba(255,0,244,1.00)";
context.fill();
//
context.beginPath();
context.lineWidth =25; // declare the width in pixels of the line
context.moveTo(569,550); // move to starting coordinates
context.lineTo(555,459); // draw line to following point coordinates
context.strokeStyle = "rgba(0,0,0,1.00)"; context.lineCap = "round"; // "round" or "square"
context.stroke();
//
context.beginPath();
context.lineWidth =25; // declare the width in pixels of the line
context.moveTo(554,450); // move to starting coordinates
context.lineTo(600,470); // draw line to following point coordinates
context.strokeStyle = "rgba(0,0,0,1.00)"; context.lineCap = "round"; // "round" or "square"
context.stroke();
//MOUTHPIECE
// x and y coordinates of the circle
var circlecenterX = canvas.width / 2; // x coordinate
var circlecenterY = canvas.height / 2; // y coordinate
var radius = 40;
var startAngle = 0; // start at the angle 0
var endAngle = 2 * Math.PI; // end at the full angle
var counterClockwise = false; // in
context.arc(50,250, radius, startAngle, endAngle, counterClockwise);
context.fillStyle = 'rgba(255,176,72,1.00)'; // or '#FF0388'
context.fill();
//TOP TUBE
context.rect(80, 225, 395, 40); //
context.fillStyle = 'rgba(255,176,72,1.00)'; // or '#FF0388'
context.fill();
//LOWER TUBE
// starting point coordinates
var startX = 75;
var startY = 250;
// control point coordinates ( magnet )
var cpointX = canvas.width / 2;
var cpointY = canvas.height / 1.6 + 400;
// ending point coordinates
var endX = 460;
var endY = 250;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 35;
context.strokeStyle = "rgba(255,176,72,1.00)";
context.stroke();
//Valve 1
context.beginPath();
context.lineWidth =35; // declare the width in pixels of the line
context.moveTo(200,480); // move to starting coordinates
context.lineTo(195,200); // draw line to following point coordinates
context.strokeStyle = "rgba(255,176,72,1.00)"; context.lineCap = "round"; // "round" or "square"
context.stroke();
//Valve 2
context.beginPath();
context.lineWidth =35; // declare the width in pixels of the line
context.moveTo(260,525); // move to starting coordinates
context.lineTo(255,200); // draw line to following point coordinates
context.strokeStyle = "rgba(255,176,72,1.00)"; context.lineCap = "round"; // "round" or "square"
context.stroke();
//Valve 3
context.beginPath();
context.lineWidth =35; // declare the width in pixels of the line
context.moveTo(320,545); // move to starting coordinates
context.lineTo(315,200); // draw line to following point coordinates
context.strokeStyle = "rgba(255,176,72,1.00)"; context.lineCap = "round"; // "round" or "square"
context.stroke();
//Bell
var startX = 475;
var startY = 237.5;
var cpointX = 600;
var cpointY = 250;
var endX = 625;
var endY = 200;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 25;
context.strokeStyle = "rgba(255,176,72,1.00)";
context.stroke();
///bottom bell
var startX = 475;
var startY = 259;
var cpointX = 610;
var cpointY = 300;
var endX = 640;
var endY = 350;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 25;
context.strokeStyle = "rgba(255,176,72,1.00)";
context.stroke();
//// Big Bell + gradient
// x and y coordinates of the circle
var circlecenterX = canvas.width / 2; // x coordinate
var circlecenterY = canvas.height / 2; // y coordinate
var radius = 100;
var startAngle = 3; // start at the angle 0
var endAngle = 4 * Math.PI; // end at the full angle
var counterClockwise = false; // in
context.arc(680,270, 100, startAngle, endAngle, counterClockwise);
context.fillStyle = 'rgba(255,176,72,1.00)'; // or '#FF0388'
context.fill();
context.rect(800,250, 40, 10);
// inner circle
var circ1X = 680;
var circ1Y = 270;
var circ1Radius = 95;
// outer circle
var circ2X = 680;
var circ2Y = 270;
var circ2Radius = 40;
// create radial gradient
var grd = context.createRadialGradient(circ1X, circ1Y, circ1Radius, circ2X, circ2Y, circ2Radius);
// inner color
grd.addColorStop(0, "rgba(255,176,72,1.00)");
var N = 0.5;
grd.addColorStop(N, "rgba(188,107,0,1.00)");
// outer color
grd.addColorStop(1, "rgba(113,64,0,1.00)");
context.fillStyle = grd;
context.fill();
// VALVE CAPS
context.beginPath();
context.lineWidth = 15;
context.moveTo(190,165);
context.lineTo(200,165);
context.strokeStyle = "rgba(255,202,134,1.00)";
context.stroke();
//
context.beginPath();
context.lineWidth = 15;
context.moveTo(250,165);
context.lineTo(260,165);
context.strokeStyle = "rgba(255,202,134,1.00)";
context.stroke();
//
context.beginPath();
context.lineWidth = 15;
context.moveTo(310,165);
context.lineTo(320,165);
context.strokeStyle = "rgba(255,202,134,1.00)";
context.stroke();
//
context.beginPath();
context.lineWidth = 10;
context.moveTo(195,165);
context.lineTo(195,180);
context.strokeStyle = "rgba(255,202,134,1.00)";
context.stroke();
//
context.beginPath();
context.lineWidth = 10;
context.moveTo(255,165);
context.lineTo(255,180);
context.strokeStyle = "rgba(255,202,134,1.00)";
context.stroke();
//
context.beginPath();
context.lineWidth = 10;
context.moveTo(315,165);
context.lineTo(315,180);
context.strokeStyle = "rgba(255,202,134,1.00)";
context.stroke();
//Part of Bell
context.beginPath();
context.lineWidth = 50; // declare the width in pixels of the line
context.moveTo(460,250); // move to starting coordinates
context.lineTo(592,270); // draw line to following point coordinates
context.lineCap = "butt"; // "round" or "square"
context.strokeStyle = "rgba(255,176,72,1.00)"; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//Bottom Valve Caps 1
context.beginPath();
context.lineWidth = 10; // declare the width in pixels of the line
context.moveTo(182,480); // move to starting coordinates
context.lineTo(200,530); // draw line to following point coordinates
context.lineTo(218,480); // draw line to following point coordinates
context.lineTo(182,480); // draw line to following point coordinates
context.strokeStyle = "rgba(255,202,134,1.00)"; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.fill();
//Bottom Valve Caps 2
context.beginPath();
context.lineWidth = 10; // declare the width in pixels of the line
context.moveTo(243,525); // move to starting coordinates
context.lineTo(260,575); // draw line to following point coordinates
context.lineTo(278,525); // draw line to following point coordinates
context.lineTo(243,525); // draw line to following point coordinates
context.strokeStyle = "rgba(255,202,134,1.00)"; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.fill();
//Bottom Valve Caps 3
context.beginPath();
context.lineWidth = 10; // declare the width in pixels of the line
context.moveTo(305,555); // move to starting coordinates
context.lineTo(320,595); // draw line to following point coordinates
context.lineTo(335,555); // draw line to following point coordinates
context.lineTo(305,555); // draw line to following point coordinates
context.strokeStyle = "rgba(255,202,134,1.00)"; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.fill();
//Soundwave
//Line 1
// starting point coordinates
var startX = 0;
var startY = 255;
var cpointX1 = canvas.width / 4;
var cpointY1 = canvas.height / 2 + 200;
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height / 2 - 200;
// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgba(255,202,134,0.56)";
context.stroke();
//Line 2
// starting point coordinates
var startX = 0;
var startY = 300;
var cpointX1 = canvas.width / 4;
var cpointY1 = canvas.height / 2 + 200;
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height / 2 - 200;
// ending point coordinates
var endX = 810;
var endY = 350;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgba(73,154,255,0.48)";
context.stroke();
//Line 3
// starting point coordinates
var startX = 0;
var startY = 355;
var cpointX1 = canvas.width / 4;
var cpointY1 = canvas.height / 2 + 200;
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height / 2 - 200;
// ending point coordinates
var endX = 810;
var endY = 400;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgba(255,64,1,0.42)";
context.stroke();
//Line 4
// starting point coordinates
var startX = 0;
var startY = 400;
var cpointX1 = canvas.width / 4;
var cpointY1 = canvas.height / 2 + 200;
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height / 2 - 200;
// ending point coordinates
var endX = 810;
var endY = 455;
context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);
context.lineWidth = 5;
context.strokeStyle = "rgba(255,202,134,0.45)";
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
<meta charset="UTF-8">
<style type="text/css">
body {
background-color: #5EFFEA;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Comments
Post a Comment