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>


Comments

  1. Kayla BonillaDecember 15, 2021 at 4:18 PM

    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

Post a Comment

Popular posts from this blog

AutoScopy

Image
This is the autoscopy that I created. I started with a selfie of mine and combined half of the evil mask. The background is space with all its plants and I also combined a UFO in there. I created this piece because I never knew how much I was into space. I started becoming more interesed about space because it is so big and we still do not know if there is more to life than just us. Space is so interesting because you learn so much about it and still do not know anything. There could be other living beings living in another plantet and they could look so different from us. This piece was created to inspire other people to imagine and believe. 
Read more

Caligram

Image
  Artist Statement: I decided to create my calligram a  hand because for me it means to calm down. As we are growing up, time goes by so fast, which is the whole meaning behind my hand. With this project, I wanted to let people know that it is ok to stop sometimes and relax. People need to enjoy every second of life so when something is not going your way, just stop and relax. As I create this piece of art, memories come up of when I was younger and stressing over things that did not matter 6 months later. Life is so fast that people need to do what makes them excited and happy with life. As I grow older, I understand that life is hard and difficult but I want this piece of art to let me know that not everything is going to go your way, so relax.  My Letter: Dear Bexhet or Jon or whatever your name will be,             Before we start, I hope that you never forgot where you came from and your goal. You should be 39 somewhere living life or maybe you're dead, who knows. Even though
Read more

Business Cards

Image
Making business  cards went better than  I  excepted . I really  enjoyed this project  because it gave me a  lot of freedom to create  them however I please.  My favorite cards are the first  two because of the  color gradient. This assignment helped me a lot because I know I will use these skills in the future. 
Read more