Canvas Project
Jon Shehu
For my project, I decided to go with a view from my home city of Vlore, Albania. When I learned that we were going to this type of assignment, I knew that this is what I wanted to do. This started off very easy but it became very hard as this was one of the first times I had ever coded. In this project, I included a lot of different shapes, bezier curve and quadratic curve. My favorite part of this, is that the final project looks a lot like my inspiration and thats what I wanted.
This project took me about four hours because there were times where I might have have been halfway done and I had to restart because of mistakes. I have proud of how my project came out but it could have been way better. In my opinion, I was missing some gradient colors on the mountains and different colors for the water and sky.
Insiration:
Full Code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- </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
var x = 0;
var y = 0;
var width = canvas.width;
var height = canvas.height;
var centerX = 575;
var centerY = 100;
var radius = 75;
var startX = 300;
var startY = 200;
var startRadius = 50;
var endX = 400;
var endY = 300;
var endRadius = 200;
context.beginPath();
context.rect(x, y, width, height);
context.fillStyle = 'rgba(53,53,226,1.00)';
context.fill();
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);
var grd = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);
grd.addColorStop(0, 'rgb(0, 250, 255)');
grd.addColorStop(1, 'Yellow');
context.fillStyle = grd;
context.fill();
// Sand //
var x=0;
var y=500;
var width = 800
var height= 300;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
context.fillStyle = 'rgba(171,136,29,1.00)';
context.fill();
// Waves //
// starting point coordinates
var x = 20;
var y = 470;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 6.0;
var cpointY1 = canvas.height / 1 - 300;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width / 1.5;
var cpointY2 = canvas.height / 2 + 300;
// ending point coordinates
var x1 = 800;
var y1 = 475;
context.beginPath();
context.moveTo(x, y);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);
context.lineWidth = 19;
context.strokeStyle = "rgba(80,80,245,1.00)";
context.lineCap = 'round'
context.stroke();
// starting point coordinates
var x = 0;
var y = 400;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 6.0;
var cpointY1 = canvas.height / 1 - 350;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width / 1.5;
var cpointY2 = canvas.height / 2 + 300;
// ending point coordinates
var x1 = 800;
var y1 = 400;
context.beginPath();
context.moveTo(x, y);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);
context.lineWidth = 19;
context.strokeStyle = "rgba(80,80,245,1.00)";
context.lineCap = 'round'
context.stroke();
//context.lineCap = Lines can have one of three cap styles: butt, round, or square
context.beginPath(); // begin a shape
context.moveTo(0,500); // point A coordinates
context.lineTo(0, 400); // point B coords
context.lineTo(100,500); // point C coords
context.closePath(); // close the shape
context.lineWidth = 25; // you can use a variable that changes wherever you see a number
context.lineJoin = "round";
context.fillStyle = "rgba(171,136,29,1.0)";
context.fill();
//context.lineCap = Lines can have one of three cap styles: butt, round, or square
context.beginPath(); // begin a shape
context.moveTo(-10,300); // point A coordinates
context.lineTo(0, 0); // point B coords
context.lineTo(250,300); // point C coords
context.closePath(); // close the shape
context.lineWidth = 25; // you can use a variable that changes wherever you see a number
context.lineJoin = "round";
context.fillStyle = "rgba(10,61,18,1.00)";
context.fill();
//context.lineCap = Lines can have one of three cap styles: butt, round, or square
context.beginPath(); // begin a shape
context.moveTo(100,300); // point A coordinates
context.lineTo(250, 30); // point B coords
context.lineTo(350,300); // point C coords
context.closePath(); // close the shape
context.lineWidth = 25; // you can use a variable that changes wherever you see a number
context.lineJoin = "round";
context.fillStyle = "rgba(10,61,18,1.00)";
context.fill();
//context.lineCap = Lines can have one of three cap styles: butt, round, or square
context.beginPath(); // begin a shape
context.moveTo(300,300); // point A coordinates
context.lineTo(350, 150); // point B coords
context.lineTo(375,300); // point C coords
context.closePath(); // close the shape
context.lineWidth = 25; // you can use a variable that changes wherever you see a number
context.lineJoin = "round";
context.fillStyle = "rgba(10,61,18,1.00)";
context.fill();
//context.lineCap = Lines can have one of three cap styles: butt, round, or square
context.beginPath(); // begin a shape
context.moveTo(800,300); // point A coordinates
context.lineTo(725, 200); // point B coords
context.lineTo(625,300); // point C coords
context.closePath(); // close the shape
context.lineWidth = 25; // you can use a variable that changes wherever you see a number
context.lineJoin = "round";
context.fillStyle = "rgba(10,61,18,1.00)";
context.fill();
// <<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE
///////////////////////////////////////////////////////////////////
// CREDITS
context.save();
var credits = "Jon Shehu, Stetch, FMX XYZ, FA/SP YEAR";
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>
Your canvas project looks really good. I like your original image, its very pretty and I think you executed very well in your coding.
ReplyDelete