HTML5 CANVAS PROJECT
Final Project:
My piece of art was done with HTML5 in Canvas. I decided to put a bunch of shapes together, using my favorite colors. I used rectangles, curves, circles, squares, triangles, bezier, and quadratic curves. These colors make me feel peaceful and calm. It was my first time using Dreamweaver, so it was a little challenging. I was able to manage it, and it took me around seven hours to complete. A lot of effort, understanding, research, and learning went into my piece. My sketch did not turn out to be my final project, but that is okay with me. After playing with my shapes for a while, I decided I wanted something different and it even gives vibes from the '80s.
My original idea for this project was to have all the shapes overlapping and have their colors blend, but it did not turn out exactly like that. Although some of the figures are indeed overlapping, some are just hanging out by themselves. I like the way it turned out. For some reason, it reminds me of space; the green curve at the bottom looks like a planet to me, and the blue lines give me galaxy vibes. I am very into unity, so this art piece also reminds me how even though we are all unique, we are all united. This is because the shapes all look differently, and a lot of them overlap with others, uniting them. Additionally, I enjoy looking at unique pieces of art like this one, and one of my aunts is an artist who does this type of art, so that is another reason why I wanted to try something like this. I am proud of myself for learning how to code and be able to create an image like this one.
Full Code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> COMPILATION OF SHAPES </title>
<!-- import external .js scripts here -->
<!-- <script type="text/javascript" src="#" ></script> -->
<!-- modify CSS properties here -->
<style type="text/css">
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 id="container">
<!-- START HTML CODE HERE -->
<canvas id="fmxCanvas" width="800" height="600"></canvas>
<div id="display"></div>
<!-- FINISH HTML CODE HERE -->
</div>
<script>
///////////////////////////////////////////////////////////////////////
// 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
var grd1 = context.createLinearGradient(400,0,400,450);
grd1.addColorStop(0 , "rgba(105,125,255,0.93)");
grd1.addColorStop(0.25 , "rgba(55,169,240,0.70)");
grd1.addColorStop(0.5 , "rgba(83,210,240,0.50)");
grd1.addColorStop(0.75 , "rgba(214,138,240,0.35)");
grd1.addColorStop(1 , "rgba(255,91,251,0.45)");
context.beginPath();
context.rect(0,0,800,600);
context.fillStyle = grd1;
context.fill();
context.closePath();
/// TRIANGLE
var tx1 = 450;
var ty1 = 210;
var tx2 = 310;
var ty2 = 370;
var tx3 = 475;
var ty3 = 300;
var startx = 200;
var starty = 600;
var endx = 670;
var endy = 550;
context.beginPath();
context.moveTo(tx1, ty1);
context.lineTo(tx2, ty2);
context.lineTo(tx3, ty3);
context.lineTo(tx1, ty1);
context.closePath();
context.lineWidth = 10;
context.fillStyle = "rgb(230,230.230)";
context.fillStyle = "rgba(7,5,5,1.00)";
context.fill();
context.stroke();
/// BEZIER CURVE
for (var i=1; i<canvas.height; i+=10) {
var startX =-100;
var startY = i;
// starting point coordinates
var endX = 800;
var endY = i;
var cpoint1X = 600;
var cpoint1Y = 150;
var cpoint2X = i;
var cpoint2Y = 550;
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 1;
context.strokeStyle = "rgba(34,102,227,1.00)";
context.stroke();
}
/// CURVE
var centerX = 200;
var centerY = 800;
var radius = 400;
var startangle= 0* Math.PI;;
var endangle = 1* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, true);
context.fillStyle = "rgba(57,224,128,1.00)";
context.fill();
context.lineWidth = 3;
context.strokeStyle = "rgba(26,1,16,1.00)";
context.stroke();
/// TRIANGLE 2
var tx1 = 400;
var ty1 = 30;
var tx2 = 100;
var ty2 = 38;
var tx3 = 800;
var ty3 = 350;
var startx = 600;
var starty = 200;
var endx = 550;
var endy = 670;
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)';
context.fillStyle = 'rgba(233,31,208,1.00)';
context.fill();
context.stroke();
/// CIRCLE
var centerX = 200;
var centerY = 250;
var radius = 118;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, true);
context.lineWidth = 15;
context.fillStyle = 'rgba(143,6,229,0.96)';
context.fill();
/// RECTANGLE
context.beginPath();
context.rect(130,410,580,100); // x,y,w,h
context.closePath();
context.fillStyle = "rgba(20,185,233,0.83)";
context.fill();
context.strokeStyle = "rgba(232,232,232,0.78)";
context.lineCap = 'round'
context.stroke();
/// RECTANGLE 2
context.beginPath();
context.rect(500,100,100,500); // x,y,w,h
context.closePath();
context.fillStyle = "rgba(126,32,225,0.78)";
context.fill();
context.strokeStyle = "rgba(109,227,250,0.78)";
context.lineCap = 'round'
context.stroke();
/// CIRCLE 2
var centerX = canvas.width / 1.55;
var centerY = canvas.height / 1.5;
var radius = 130;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.lineWidth = 7;
context.strokeStyle = "rgba(70,10,249,0.94)";
context.stroke();
/// QUADRARATIC LINE
// starting point coordinates
var x = 250;
var y = 150;
// control point coordinates ( magnet )
var cpointX = canvas.width / 1 - 650;
var cpointY = canvas.height / 1 - 200;
// ending point coordinates
var x1 = 100;
var y1 = 300;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);
context.lineWidth = 13;
context.strokeStyle = "rgba(220,125,197,0.93)";
context.stroke();
/// SQUARE
var x=60;
var y=53;
var width = 150
var height= 150;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
context.fillStyle = 'rgba(5,215,248,0.73)';
context.strokeStyle = 'rgba(216,50,249,0.80)';
context.fill();
context.stroke();
// <<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE
///////////////////////////////////////////////////////////////////
// CREDITS
context.save();
var credits = "Alexia Pez, Shapes, FMX 210, FALL 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>
Comments
Post a Comment