Canvas Project

on

 When we were introduced to this project, I was struggling to come up with an idea of what I should do, I was having good luck so my initial idea for this project was to create a 4 leaf clover, I spent hours trying to figure out how to put the leafs(which I was creating with hearts) in the right place so I had a change of thought about what I would create. I tried to do something similar. Valentine's Day is coming up so I stuck with my idea of using hearts. I decided to make a mountain of hearts and the circles were just a special addition. I tried to make the "sky" a rainbow kind of pattern. This ended up being abstract art. I think I spent about 10 hours total doing this project, it was definitely one of the hardest projects Ive ever done but Im glad I got through it. 





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



 ///background

    var bkgdgrd = context.createLinearGradient(0,0,0,800);

    

    bkgdgrd.addColorStop(0,"rgba(0, 204, 255,1)"); 

    bkgdgrd.addColorStop(.15, "rgba(244, 175, 216, 1)");

    bkgdgrd.addColorStop(.50,"rgba(201,19,51,1.00)");

    bkgdgrd.addColorStop(.75,"rgba(0,255,106,1.00)");

    bkgdgrd.addColorStop(1, "rgba(255,255,255,1)"); 

        

// BACKGROUND

    

    context.beginPath();


         context.rect(0,0,800,600);

    

    context.closePath();

    

    context.fillStyle = bkgdgrd;

    

    context.fill();


 // TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(350,300); // point A coordinates

context.lineTo(430, 600); // point B coords

context.lineTo(260,600); // point C coords

context.closePath(); // close the shape

context.lineWidth = 15; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle = "rgba(0,255,25,0.60)"; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "rgba(12,232,126,0.50)";

context.fill();

//Middle Heart


//Bezier Curve Variables


var Ax = 360;

var Ay = 150;

var Bx = 350;

var By = 300;

var control1x = 260;

var control1y = -40;

var control2x = 210;

var control2y = 255;

var control3x = 500;

var control3y = 255;

var control4x = 450;

var control4y = -40;


        context.beginPath();

        context.moveTo(Ax, Ay);

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

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

        context.lineWidth = 20;

        // line color

        context.strokeStyle = 'rgba(242,48,121,1.00)';

        context.lineCap = 'round';

        context.stroke();

        context.fillStyle   = 'rgba(187,8,67,1.00)';

        context.fill();

//Left Heart


//Bezier Curve Variables


var Ax = 150;

var Ay = 150;

var Bx = 150;

var By = 340;

var control1x = 120;

var control1y = -40;

var control2x = 40;

var control2y = 255;

var control3x = 240;

var control3y = 255;

var control4x = 250;

var control4y = -40;


        context.beginPath();

        context.moveTo(Ax, Ay);

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

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

        context.lineWidth = 20;

        // line color

        context.strokeStyle = 'rgba(49,242,48,1.00)';

        context.lineCap = 'round';

        context.stroke();

        context.fillStyle   = 'rgba(187,8,95,1.00)';

        context.fill();

//Right Heart


//Bezier Curve Variables


var Ax = 610;

var Ay = 150;

var Bx = 600;

var By = 340;

var control1x = 590;

var control1y = -40;

var control2x = 460;

var control2y = 270;

var control3x = 700;

var control3y = 270;

var control4x = 700;

var control4y = -40;


        context.beginPath();

        context.moveTo(Ax, Ay);

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

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

        context.lineWidth = 20;

        // line color

        context.strokeStyle = 'rgba(49,242,48,1.00)';

        context.lineCap = 'round';

        context.stroke();

        context.fillStyle   = 'rgba(187,8,97,1.00)';

        context.fill();

 

 

//bottom right triangle 

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;



var tx1 = 600;

var ty1 = 350;

var tx2 = 440;

var ty2 = 600;

var tx3 = 600;

var ty3 = 600;


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 = 15;

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

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

grd.addColorStop(0, 'rgb(0, 255, 0)');

grd.addColorStop(1, 'rgb(0, 0, 255)');

context.fillStyle = grd;

context.fill();

context.stroke();

//bottom left triangle 

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;



var tx1 = 150;

var ty1 = 350;

var tx2 = 250;

var ty2 = 600;

var tx3 = 90;

var ty3 = 600;


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 = 15;

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

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

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

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

context.fillStyle = grd;

context.fill(); 

context.stroke();

///// rectangle code sample 2

var x=450;

var y=0;

var width = 250

var height= 70;


context.beginPath();

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

context.lineWidth = 15;

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

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

context.stroke();

// add linear gradient

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

        // starting color

        grd.addColorStop(0, "rgb(0,255,0)");

        //intermediate color

        grd.addColorStop(0.5, "rgb(255,0,0)");

        // ending color

        grd.addColorStop(1, "rgba(62,82,230,1.00)");

        context.fillStyle = grd;

        context.fill();

 

///// rectangle code sample 2

var x=350;

var y=0;

var width = 250

var height= 70;


context.beginPath();

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

context.lineWidth = 15;

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

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

context.stroke();

// add linear gradient

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

        // starting color

        grd.addColorStop(0, "rgb(0,255,0)");

        //intermediate color

        grd.addColorStop(0.5, "rgb(255,0,0)");

        // ending color

        grd.addColorStop(1, "rgba(62,82,230,1.00)");

        context.fillStyle = grd;

        context.fill();

///// rectangle code sample 2

var x=150;

var y=0;

var width = 250

var height= 70;


context.beginPath();

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

context.lineWidth = 15;

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

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

context.stroke();

// add linear gradient

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

        // starting color

        grd.addColorStop(0, "rgb(0,255,0)");

        //intermediate color

        grd.addColorStop(0.5, "rgb(255,0,0)");

        // ending color

        grd.addColorStop(1, "rgba(62,82,230,1.00)");

        context.fillStyle = grd;

        context.fill();

///// rectangle code sample 2

var x=50;

var y=0;

var width = 250

var height= 70;


context.beginPath();

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

context.lineWidth = 15;

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

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

context.stroke();

// add linear gradient

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

        // starting color

        grd.addColorStop(0, "rgb(0,255,0)");

        //intermediate color

        grd.addColorStop(0.5, "rgb(255,0,0)");

        // ending color

        grd.addColorStop(1, "rgba(62,82,230,1.00)");

        context.fillStyle = grd;

        context.fill();


 //circle 1

var x = 0;

var y = 0;

var width = canvas.width;5

var height = canvas.height;


var centerX =250;

var centerY = 340;

var radius = 50;


var startX = 200;

var startY = 300;

var startRadius = 50;

var endX = 200;

var endY = 300;

var endRadius = 200;





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, 'rgba(0,255,108,1.00)');

grd.addColorStop(1, 'rgba(233,0,205,1.00)');

context.fillStyle = grd;

context.fill();

context.stroke();

//circle 2

var x = 0;

var y = 0;

var width = canvas.width;5

var height = canvas.height;


var centerX =480;

var centerY = 340;

var radius = 50;


var startX = 450;

var startY = 550;

var startRadius = 50;

var endX = 4500;

var endY = 340;

var endRadius = 200;





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, 'rgba(0,255,82,1.00)');

grd.addColorStop(1, 'rgba(211,38,164,1.00)');

context.fillStyle = grd;

context.fill();

context.stroke();

 


 


 


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

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


// CREDITS


context.save();

var credits = "Name, Title, 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

Post a Comment