FMX 210 Canvas Final Project

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>

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>

body {

background-color: #5EFFEA;

}

</style>

</head>

<body>

</body>

</html>

FMX210 Blog

Search This Blog

FMX 210 Canvas Final Project

Comments

Post a Comment

Popular posts from this blog

Portfolio

BW to Color

Photoshop Homework 2