Canvas Final Project :)

September 22, 2020

Canvas Final Project :)

Hi everyone!

For my final canvas project, I wanted to showcase a visibly appealing piece to the eye as well as allow the viewer to better understand what we've learned thus far in class. As pictured, I have compiled different size circles and lines to create a happy face (something we all need during this time) and various other shapes to add detail and depth to the image.

While creating my art, I made sure only to add things that were going to bring positive vibes off the screen; I love how this turned out as it has allowed me to express my creativity. I have to use curves, gradients, and several shapes to create a captivating image and engage my audience.

Being someone who is not artistically inclined, I knew that simple shapes and design patterns were the way to go. I decided to do very few aspects of this project in solid colors, rather gradients to give more depth. While this was very time consuming, and I had several hiccups along the way, the final product made it all worthwhile. I am proud of myself for learning how to work this new software, something I was in no way previously familiar with.

While I don't plan to be a professional coder, I am grateful that this project was one we had to conquer because it has given me a newfound confidence in digital design.

I hope you all enjoy my art! :)

Hours worked: 6

My 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

//background grd

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

// add linear gradient

var grd = context.createLinearGradient(200, 50, canvas.width, canvas.height);

// light pink

grd.addColorStop(0, '#FCDAFE');

// dark purple

grd.addColorStop(1, '#EED1FD');

context.fillStyle = grd;

context.fill();

context.stroke();

//// smile head

var centerX = canvas.width / 1.9;

var centerY = canvas.height / 2.0;

var radius = 150;

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.fillStyle = "#FFF27A"

context.fill();

context.stroke();

//// smile

var centerX = canvas.width / 1.9;

var centerY = canvas.height / 1.8;

var radius = 60;

var startangle = 0;

var endangle = 1* Math.PI;

context.beginPath();

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

//context.fillStyle = "red";

context.lineWidth = 5;

context.strokeStyle = "#0D0D0D";

context.stroke();

//// eye 1

var centerX = canvas.width / 2.2;

var centerY = canvas.height / 2.36;

var radius = 7;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

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

context.lineWidth = 14;

context.strokeStyle = "black";

context.stroke();

//// eye 2

var centerX = canvas.width / 1.66;

var centerY = canvas.height / 2.36;

var radius = 7;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

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

context.lineWidth = 14;

context.strokeStyle = "black";

context.stroke();

// blue triangle

context.beginPath(); // start

context.moveTo(50,170); // point A

context.lineTo(260, 300); // point B

context.lineTo(100,30); // point C

context.closePath(); // end

context.lineWidth = 5

; //

context.lineJoin = "round";

context.strokeStyle = "rgba(85,211,255,1.00)"; // light blue

context.stroke();

context.fillStyle = "rgba(121,236,255,1.00)"; // light blue

context.fill();

// bezier curve

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

var startX = 4;

var startY = 700;

// starting point coordinates

var endX = 850;

var endY = i;

var cpoint1X = canvas.width;

var cpoint1Y = canvas.height;

var cpoint2X = i;

var cpoint2Y = 979;

context.beginPath();

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

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

context.lineWidth = 1;

context.strokeStyle = "rgba(2,11,0,1.00)";

context.stroke();

}

// bottom left square

var x=0;

var y=429;

var width = 165

var height= 165;

context.beginPath();

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

context.lineWidth = 5;

//context.fillStyle = 'rgb(0,255,0)';

context.strokeStyle = 'rgba(244,18,22,0.09)';

// add linear gradient

var grd = context.createLinearGradient(x, y, x+width, y+height);

// top color

grd.addColorStop(0, "rgba(243,176,255,1.00)");

//middle color

grd.addColorStop(0.5, "rgba(48,27,255,1.00)");

// bottom color

grd.addColorStop(1, "rgba(120,255,178,1.00)");

context.fillStyle = grd;

context.fill();

context.stroke();

/// left middle square

var x=0;

var y=300;

var width = 125

var height= 125;

context.beginPath();

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

context.lineWidth = 5;

//context.fillStyle = 'rgb(0,255,0)';

context.strokeStyle = 'rgba(250,250,250,0.14)';

// add linear gradient

var grd = context.createLinearGradient(x, y, x+width, y+height);

// top color

grd.addColorStop(0, "rgba(176,115,255,1.00)");

//middle color

grd.addColorStop(0.5, "rgba(150,245,255,1.00)");

// bottom color

grd.addColorStop(1, "rgba(133,255,111,1.00)");

context.fillStyle = grd;

context.fill();

context.stroke();

// left top square

var x=0;

var y=202;

var width = 95

var height= 95;

context.beginPath();

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

context.lineWidth = 5;

//context.fillStyle = 'rgb(0,255,0)';

context.strokeStyle = 'rgba(250,250,250,0.09)';

// add linear gradient

var grd = context.createLinearGradient(x, y, x+width, y+height);

// top color

grd.addColorStop(0, "rgba(83,121,255,1.00)");

//middle color

grd.addColorStop(0.5, "rgba(255,193,222,1.00)");

// bottom color

grd.addColorStop(1, "rgba(247,255,183,1.00)");

context.fillStyle = grd;

context.fill();

context.stroke();

// right rectangle vertical

var x=697;

var y=270;

var width = 107

var height= 700;

context.beginPath();

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

context.lineWidth = 5;

//context.fillStyle = 'rgb(0,255,0)';

context.strokeStyle = 'rgba(250,250,250,0.05)';

// add linear gradient

var grd = context.createLinearGradient(x, y, x+width, y+height);

// top color

grd.addColorStop(0, "rgba(158,153,225,1.00)");

//middle color

grd.addColorStop(0.5, "rgba(232,161,255,1.00)");

// bottom color

grd.addColorStop(1, "rgba(156,253,255,1.00)");

context.fillStyle = grd;

context.fill();

context.stroke();

//right rectangle horizontal

var x=497;

var y=500;

var width = 200

var height= 100;

context.beginPath();

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

context.lineWidth = 5;

//context.fillStyle = 'rgb(0,255,0)';

context.strokeStyle = 'rgba(250,250,250,0.05)';

// add linear gradient

var grd = context.createLinearGradient(x, y, x+width, y+height);

// top color

grd.addColorStop(0, "rgba(253,255,168,1.00)");

//middle color

grd.addColorStop(0.5, "rgba(197,18,255,1.00)");

// bottom color

grd.addColorStop(1, "rgba(229,186,247,1.00)");

context.fillStyle = grd;

context.fill();

context.stroke();

//heart

var Ax = 568;

var Ay = 78;

var Bx = 560;

var By = 155;

var control1x = 496;

var control1y = -20;

var control2x = 500;

var control2y = 100;

var control3x = 620;

var control3y = 110;

var control4x = 670;

var control4y = -5;

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(75,0,130,0.01)';

context.lineCap = 'round';

context.stroke();

context.fillStyle = 'rgba(255,0,0,1.00)';

context.fill();

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

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

// CREDITS

context.save();

var credits = "Kayla Salsburg, Project 1, FMX 210, FA 2020";

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>

Search This Blog

Kayla's World

Canvas Final Project :)

Comments

Post a Comment

Popular Posts

Propaganda Poster: COVID/Election Edition

Autoscopy