Canvas Final Project

February 13, 2022

Canvas Final Project

For my Canvas project, I used Adobe Dreamweaver. For my piece, I was inspired by Cubism art. I am intrigued by the vibrant colors and diverse shapes that are used to create these types of abstract art pieces. I choose to use music as my main inspiration for this piece. To emphasize this I put a heart-shaped guitar in the center. I then included music notes to represent the music more. The rest of the shapes incorporated in my image is to represent the cubism idea of art but incorporate various different shapes and objects.

This is only the second time I have had to use coding in a class so I do not know much about it. My project took me about 10 hours to complete. Some shapes were easy for me to move around and manipulate like the arcs, circles, and lines. However, the bezier curves and the triangle took a lot more time. I liked how much creative freedom we had within this project. Overall, I like how my project turned out even though it was not exactly how I envisioned it.

Inspiration from Cubism art

Sketch

CODE:

<!doctype html>

<html>

<head>

body,td,th {

font-family: Monaco, "Courier New", "monospace";

font-size: 14px;

color: rgba(255,255,255,1);

}

body {

background-color: rgba(0,0,0,1);

}

#container {

position: relative;

text-align: left;

width: 95%;

height: 800px;

}

#fmxCanvas {

position: relative;

background-color:rgba(255,255,255,1);

border: rgba(255,255,255,1) thin dashed;

cursor: crosshair;

display: inline-block;

}

</style>

</head>

<body>

</div>

///////////////////////////////////////////////////////////////////////

// DECLARE requestAnimFrame

var rAF = window.requestAnimFrame ||

window.mozRequestAnimFrame ||

window.webkitRequestAnimFrame ||

window.msRequestAnimFrame;

var fps = 30;

window.requestAnimFrame = (

function(callback) {

return rAF ||

function(callback) {

window.setTimeout(callback, 1000 / fps);

};

})();

///////////////////////////////////////////////////////////////////////

// DEFINE GLOBAL VARIABLES HERE

var canvas;

var context;

canvas = document.getElementById("fmxCanvas");

context = canvas.getContext("2d");

var canvas1;

var context1;

canvas1 = document.createElement("canvas");

context1 = canvas1.getContext("2d");

canvas1.width = canvas.width;

canvas1.height = canvas.height;

var display;

display = document.getElementById('display');

var counter;

///////////////////////////////////////////////////////////////////////

// DEFINE YOUR GLOBAL VARIABLES HERE

///////////////////////////////////////////////////////////////////////

// CALL THE EVENT LISTENERS

window.addEventListener("load", setup, false);

//////////////////////////////////////////////////////////////////////

// ADD EVENT LISTENERS

canvas.addEventListener("mousemove", mousePos, false);

//////////////////////////////////////////////////////////////////////

// MOUSE COORDINATES

var stage, mouseX, mouseY;

function mousePos(event) {

stage = canvas.getBoundingClientRect();

mouseX = event.clientX - stage.left;

mouseY = event.clientY - stage.top;

}

/////////////////////////////////////////////////////////////////////

// INITIALIZE THE STARTING FUNCTION

function setup() {

/////////////////////////////////////////////////////////////////////

// DECLARE STARTING VALUES OF GLOBAL VARIABLES

counter = 0;

mouseX = canvas.width/2;

mouseY = canvas.height/2;

/////////////////////////////////////////////////////////////////////

// CALL SUBSEQUENT FUNCTIONS, as many as you need

clear(); // COVER TRANSPARENT CANVAS OR CLEAR CANVAS

draw(); // THIS IS WHERE EVERYTHING HAPPENS

}

////////////////////////////////////////////////////////////////////

// CLEAR THE CANVAS FOR ANIMATION

// USE THIS AREA TO MODIFY BKGD

function clear() {

context.clearRect(0,0,canvas.width, canvas.height);

context1.clearRect(0,0,canvas.width, canvas.height);

// clear additional contexts here if you have more than canvas1

}

////////////////////////////////////////////////////////////////////

// THIS IS WHERE EVERYTHING HAPPENS

function draw() {

counter += 0.1; // EASIER FOR SINE COSINE FUNCTIONS

if (counter > Math.PI*200) { counter = 0; } // RESET COUNTER

clear(); // USE THIS TO REFRESH THE FRAME AND CLEAR CANVAS

////////////////////////////////////////////////////////////////////

// >>>START HERE>>>START HERE>>>START HERE>>>START HERE>>>START HERE

////Radial Gradient

// the radial gradient requires a shape, in this case a rectangle that fills the entire canvas

context.rect(0,0, canvas.width, canvas.height);

// inner circle

var circ1X = 10;

var circ1Y = 10;

var circ1Radius = 200;

// outer circle

var circ2X = 10;

var circ2Y = 10;

var circ2Radius = 400;

// create radial gradient

var grd = context.createRadialGradient(circ1X, circ1Y, circ1Radius, circ2X, circ2Y, circ2Radius);

// inner color

grd.addColorStop(0, "rgba(244,18,150,1.00)");

// you can add intermediate colors using N greater than 0 and smaller then 1

var N = 0.5;

grd.addColorStop(N, "rgba(255,103,180,1.00)");

// outer color

grd.addColorStop(1, "rgba(244,148,218,1.00)");

context.fillStyle = grd;

context.fill();

/////// BEZIER CURVE 1 on right side

for (var i=0; i<canvas.height; i+=10) {

var startX = 3;

var startY = 800;

// starting point coordinates

var endX = 1000;

var endY = i;

var cpoint1X = canvas.width;

var cpoint1Y = canvas.height;

var cpoint2X = i;

var cpoint2Y = 275;

context.beginPath();

context.moveTo(startX, startY); ///cpoint1Y

context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);

context.lineWidth = 1;

context.strokeStyle = "rgba(250,0,134,1.00)";

context.stroke();

}

/////// BEZIER CURVE 2 middle

for (var i=0; i<canvas.height; i+=10) {

var startX = 50;

var startY = +800;

// starting point coordinates

var endX = i;

var endY = -1000;

var cpoint1X = canvas.width;

var cpoint1Y = canvas.height;

var cpoint2X = i;

var cpoint2Y = 175;

context.beginPath();

context.moveTo(startX, startY); ///cpoint1Y

context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);

context.lineWidth = 2;

context.strokeStyle = "rgba(245,147,204,1.00)";

context.stroke();

}

/////// BEZIER CURVE 3 left side

for (var i=0; i<canvas.height; i+=10) {

var startX = -3;

var startY = 800;

// starting point coordinates

var endX = -1000;

var endY = -i;

var cpoint1X = canvas.width;

var cpoint1Y = canvas.height;

var cpoint2X = i;

var cpoint2Y = 275;

context.beginPath();

context.moveTo(startX, startY); ///cpoint1Y

context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);

context.lineWidth = 1;

context.strokeStyle = "rgba(247,0,143,1.00)";

context.stroke();

}

// Second guitar

var Ax = 50;

var Ay = 150;

var Bx = 100;

var By = 300;

var control1x = -50;

var control1y = 100;

var control2x = -140;

var control2y = 200;

var control3x = 200;

var control3y = 200;

var control4x = 150;

var control4y = 20;

context.beginPath();

context.moveTo(Ax, Ay);

context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);

context.bezierCurveTo(control3x, control3y, control4x, control4y, Ax, Ay);

context.lineWidth = 10;

// line color

context.strokeStyle = 'rgba(232,123,241,1.00)';

context.lineCap = 'round';

context.stroke();

context.fillStyle = 'rgba(252,187,225,1.00)';

context.fill();

//Square

var x=100;

var y=200;

var width = 400

var height= 400;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 5;

context.fillStyle = 'rgba(255,172,239,0.48)';

context.strokeStyle = 'rgba(250,122,212,1.00)';

context.fill();

context.stroke();

//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height

// for a square width = height , the width and the height have the same value

//Heart Base of guitar

//Bezier Curve Variables

var Ax = 300;

var Ay = 300;

var Bx = 300;

var By = 600;

var control1x = 250;

var control1y = -25;

var control2x = -20;

var control2y = 450;

var control3x = 575;

var control3y = 500;

var control4x = 400;

var control4y = -50;

context.beginPath();

context.moveTo(Ax, Ay);

context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);

context.bezierCurveTo(control3x, control3y, control4x, control4y, Ax, Ay);

context.lineWidth = 30;

// line color

context.strokeStyle = 'rgba(239,71,245,1.00)';

context.lineCap = 'round';

context.stroke();

context.fillStyle = 'rgba(246,112,239,1.00)';

context.fill();

//Rectangle base of guitar

var x=275;

var y=100;

var width = 50

var height= 300;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgba(247,158,251,1.00)';

context.strokeStyle = 'rgba(214,32,255,1.00)';

context.fill();

context.stroke();

////circle for middle of guitar

var centerX = canvas.width / 2;

var centerY = canvas.height / 2;

var radius = 70;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

context.lineWidth = 5;

context.strokeStyle = "black";

context.stroke();

//Top of guitar

var x1 =50;

var y1 =50;

var x2 =750;

var y2 =500;

var rectx1 = 260;

var recty1 = 50;

var rectwidth1 = 75;

var rectheight1 = 75;

// Top of guitar square

context.beginPath();

context.rect(rectx1,recty1,rectwidth1,rectheight1);

context.lineWidth = 5;

context.strokeStyle = 'rgba(21,19,19,1.00)';

context.fillStyle = '#FE83FF';

context.fill();

context.stroke();

//Guitar line 1

context.moveTo(285,50); // COORDINATES OF STARTING POINT

context.lineTo(285,400); // COORDS OF ENDING POINT 1

context.lineWidth = 5; // STROKE WIDTH

context.stroke(); // STROKE

// Guitar line 2

context.moveTo(300,50); // COORDINATES OF STARTING POINT

context.lineTo(300,400); // COORDS OF ENDING POINT 1

context.lineWidth = 5; // STROKE WIDTH

context.stroke(); // STROKE

// Guitar line 3

context.moveTo(315,50); // COORDINATES OF STARTING POINT

context.lineTo(315,400); // COORDS OF ENDING POINT 1

context.lineWidth = 5; // STROKE WIDTH

context.stroke(); // STROKE

centerX

//Bottom guitar line

context.moveTo(220,500); // COORDINATES OF STARTING POINT

context.lineTo(380,500); // COORDS OF ENDING POINT 1

context.lineWidth = 5; // STROKE WIDTH

context.stroke(); // STROKE

//Box around cup

var rectx2 = 440;

var recty2 = 650;

var rectwidth2 = 200;

var rectheight2 = 150;

//pink and green

context.beginPath();

context.rect(rectx2,recty2,rectwidth2,rectheight2);

context.lineWidth = 5;

context.strokeStyle = 'rgba(246,18,189,0.69)';

context.fillStyle = '#F50D91';

context.fill();

context.stroke();

//Top of Cup

var centerX = 520;

var centerY = 660;

var radius = 70;

var startangle = 0* Math.PI;;

var endangle = 1* Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

context.fillStyle = "#17171E";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "#323242";

context.stroke();

//Handle part of Cup

var x5= 520;

var y5= 720;

var x6= 520;

var y6= 790;

//Handle part of Cup color

context.beginPath();

context.moveTo(x5,y5);

context.lineTo(x6,y6);

context.lineWidth = 25;

context.strokeStyle = 'rgba(18,24,24,1.00)';

context.lineCap = 'butt';

context.stroke();

//Bottom of cup

var centerX = 520;

var centerY = 800

var radius = 40;

var startangle = 0* Math.PI;;

var endangle = 1* Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, true);

context.fillStyle = "#0A0A0D";

context.fill();

context.lineWidth = 1;

context.strokeStyle = "#0C0B0C";

context.stroke();

//Lime on cup

var tx1 = 550;

var ty1 = 600;

var tx2 = 600;

var ty2 = 600;

var tx3 = 550;

var ty3 = 660;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 5;

//context.fillStyle = 'rgb(230, 230. 230)';

var grd = context.createLinearGradient(startx, starty, endx, endy);

grd.addColorStop(0, 'rgba(255,0,166,1.00)');

grd.addColorStop(1, 'rgba(255,143,253,1.00)');

context.fillStyle = grd;

context.fill();

context.stroke();

//Music line 1

context.moveTo(400,50); // COORDINATES OF STARTING POINT

context.lineTo(600,50); // COORDS OF ENDING POINT 1

context.lineWidth = 5; // STROKE WIDTH

context.stroke(); // STROKE

// Music line 2

context.moveTo(400,70); // COORDINATES OF STARTING POINT

context.lineTo(600,70); // COORDS OF ENDING POINT 1

context.lineWidth = 5; // STROKE WIDTH

context.stroke(); // STROKE

// Music line 3

context.moveTo(400,90); // COORDINATES OF STARTING POINT

context.lineTo(600,90); // COORDS OF ENDING POINT 1

context.lineWidth = 5; // STROKE WIDTH

context.stroke(); // STROKE

centerX

//Circle music note 1

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

var centerX = 521

var centerY = 80;

var radius = 5;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

context.lineWidth = 1;

context.strokeStyle = "black";

context.stroke();

//Body of music note 1

context.moveTo(525,40); // COORDINATES OF STARTING POINT

context.lineTo(525,80); // COORDS OF ENDING POINT 1

context.lineWidth = 2; // STROKE WIDTH

context.stroke(); // STROKE

context.moveTo(525,40); // COORDINATES OF STARTING POINT

context.lineTo(540,40); // COORDS OF ENDING POINT 1

context.lineWidth = 2; // STROKE WIDTH

context.stroke(); // STROKE

//Music note 2

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

var centerX = 440

var centerY = 60;

var radius = 5;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

context.lineWidth = 1;

context.strokeStyle = "black";

context.stroke();

//Body of music note 2

context.moveTo(445,30); // COORDINATES OF STARTING POINT

context.lineTo(445,60); // COORDS OF ENDING POINT 1

context.lineWidth = 2; // STROKE WIDTH

context.stroke(); // STROKE

context.moveTo(445,30); // COORDINATES OF STARTING POINT

context.lineTo(480,30); // COORDS OF ENDING POINT 1

context.lineWidth = 2; // STROKE WIDTH

context.stroke(); // STROKE

context.moveTo(480,30); // COORDINATES OF STARTING POINT

context.lineTo(480,60); // COORDS OF ENDING POINT 1

context.lineWidth = 2; // STROKE WIDTH

context.stroke(); // STROKE

//circle 2 on music note 2

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

var centerX = 475

var centerY = 60;

var radius = 5;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

context.lineWidth = 2;

context.strokeStyle = "black";

context.stroke();

//Music Note 3

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

var centerX = 550

var centerY = 110;

var radius = 5;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

context.lineWidth = 1;

context.strokeStyle = "black";

context.stroke();

//Body of music note 1

context.moveTo(555,80); // COORDINATES OF STARTING POINT

context.lineTo(555,110); // COORDS OF ENDING POINT 1

context.lineWidth = 2; // STROKE WIDTH

context.stroke(); // STROKE

context.moveTo(555,80); // COORDINATES OF STARTING POINT

context.lineTo(570,80); // COORDS OF ENDING POINT 1

context.lineWidth = 2; // STROKE WIDTH

context.stroke(); // STROKE

//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height

// for a square width = height , the width and the height have the same value

// <<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE

///////////////////////////////////////////////////////////////////

// CREDITS

context.save();

var credits = "Madison Loscalzo, Canvas Final, FMX 210, SP 2022";

context.font = 'bold 12px Helvetica';

context.fillStyle = "rgba(0,0,0,1)"; // change the color here

context.shadowColor = "rgba(255,255,255,1)"; // change shadow color here

context.shadowBlur = 12;

context.shadowOffsetX = 2;

context.shadowOffsetY = 2;

context.fillText(credits, 10, canvas.height - 10); // CHANGE THE LOCATION HERE

context.restore();

//////////////////////////////////////////////////////////////////

// HTML DISPLAY FIELD FOR TESTING PURPOSES

display.innerHTML = Math.round(mouseX) + " || " + Math.round(mouseY) + " || counter = " + Math.round(counter);

/////////////////////////////////////////////////////////////////

// LAST LINE CREATES THE ANIMATION

requestAnimFrame(draw); // CALLS draw() every nth of a second

}

</script>

</body>

</html>

Comments

Sage BoutelleMay 1, 2022 at 5:27 PM
The colors pop and work together really well.
ReplyDelete
Replies
Emma ShuckMay 2, 2022 at 6:53 AM
I really liked the structure of the image and how all the shapes came together. I also really liked how all the colors were the same color but in different shades it really made it stand out. I think you did a great job off of the inspiration while still making it your own. Overall I think you did amazing on this project!
ReplyDelete
Replies

Add comment

Search This Blog

Lifewithmadison

Canvas Final Project

Comments

Post a Comment

Popular Posts

Photoshop Videos

Internet vs. The Web