Casper Cafferata Canvas Project


    My canvas project was created in Dreamweaver using HTML Canvas in order to create a night sky, with a shooting star going past a moon over a city, as you can see the sky scrapers. My image consists of shapes, curves, gradients, and a dark background. I had no inspiration for this photo, it kind of just came to my mind and seemed simple enough for me to do, however my sketch is shown below. The reason I ran with this idea is because I love looking into the sky at night at all of the stars, and always sleeping on a boat over night on a long fishing trip I loved just laying on my bean bag and staring for hours. I went with a cartoony look because it was honestly a lot more simple to do that way, and this took long enough as it is. This was done over the course of two days and took about a total of 7 hours to finish in total.

    This was my first time ever using Dreamweaver, and while it was kind of fun to learn, it was very stressful and very hard to figure out for me. What helped me a lot to make the process a lot easier was opening new Dreamweaver documents and making the shapes I wanted and putting them in the spots I wanted and then copying and pasting what I would make into the main document. This saved me from pretty much saved me from messing up the whole thing and made it a lot quicker and easier to work with. Overall I am very proud and happy with how it turned out, because to me it was a lot of time and effort so I am now glad to be able to just look at it and know what went into it.

Sketch:


<!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 = 300;

var centerY = 300;

var radius = 200;


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.lineWidth = 20;

context.fillStyle = 'rgb(0, 0, 80)';

context.fill();

context.strokeStyle = 'rgba(13,13,70,1.00)';

context.stroke();


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(145,231,233,1.00)');

grd.addColorStop(1, 'rgba(25,66,66,1.00)');

context.fillStyle = grd;

context.fill();

context.stroke(); 



// starting point coordinates

var x = 100;

var y = 300;


// control point 1 coordinates ( magnet )

var cpointX1 = canvas.width / 6;

var cpointY1 = canvas.height / 2 + 300;


// control point 2 coordinates ( magnet )

var cpointX2 = canvas.width / 2.0;

var cpointY2 = canvas.height / 1.5 - 300; 


// ending point coordinates 

var x1 = 500;

var y1 = 300;



context.beginPath();

context.moveTo(x, y);

context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);


context.lineWidth = 6;

context.strokeStyle = "rgba(255,250,0,0.34)";

context.lineCap = 'round' 

context.stroke();


//context.lineCap = Lines can have one of three cap styles: butt, round, or square

// lineCap property must be set before calling stroke()

 

 var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;



var tx1 = 500;

var ty1 = 250;

var tx2 = 400;

var ty2 = 400;

var tx3 = 600;

var ty3 = 400;


var startx = 175;

var starty = 300;

var endx = 650;

var endy = 500;

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

context.stroke();


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

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

context.fillStyle = grd;

context.fill();

context.stroke();

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;



var tx1 = 500;

var ty1 = 450;

var tx2 = 400;

var ty2 = 300;

var tx3 = 600;

var ty3 = 300;


var startx = 175;

var starty = 300;

var endx = 650;

var endy = 500;

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

context.stroke();


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

grd.addColorStop(1, 'rgba(245,255,0,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);


//Rectangle


var x=650;

var y=500;

var width = 40

var height= 100;


context.beginPath();

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

context.lineWidth = 5;

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

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

// add linear gradient

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

        // starting color

        grd.addColorStop(0, "rgba(122,134,135,1.00)");

        //intermediate color

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

        // ending color

        grd.addColorStop(1, "rgba(73,73,73,1.00)");

        context.fillStyle = grd;

        context.fill();

context.fill();



context.stroke();


//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height


// for a square width = height , the width and the height have the same value


//Rectangle


var x=700;

var y=470;

var width = 40

var height= 200;


context.beginPath();

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

context.lineWidth = 5;

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

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

// add linear gradient

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

        // starting color

        grd.addColorStop(0, "rgba(122,134,135,1.00)");

        //intermediate color

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

        // ending color

        grd.addColorStop(1, "rgba(73,73,73,1.00)");

        context.fillStyle = grd;

        context.fill();

context.fill();



context.stroke();


//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height


// for a square width = height , the width and the height have the same value


//Rectangle


var x=750;

var y=480;

var width = 40

var height= 200;


context.beginPath();

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

context.lineWidth = 5;

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

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

// add linear gradient

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

        // starting color

        grd.addColorStop(0, "rgba(122,134,135,1.00)");

        //intermediate color

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

        // ending color

        grd.addColorStop(1, "rgba(73,73,73,1.00)");

        context.fillStyle = grd;

        context.fill();

context.fill();



context.stroke();


//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height


// for a square width = height , the width and the height have the same value

//Rectangle


var x=600;

var y=550;

var width = 40

var height= 200;


context.beginPath();

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

context.lineWidth = 5;

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

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

// add linear gradient

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

        // starting color

        grd.addColorStop(0, "rgba(122,134,135,1.00)");

        //intermediate color

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

        // ending color

        grd.addColorStop(1, "rgba(73,73,73,1.00)");

        context.fillStyle = grd;

        context.fill();

context.fill();



context.stroke();


//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height


// for a square width = height , the width and the height have the same value


 


 


// <<<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

Popular posts from this blog

Propoganda Poster

Image
       For my poster I decided to talk about a topic very close to me. I am from the Bahamas, and right now in the Bahamas the locals are fighting the government to stop them from allowing Americans to drill oil from our beautiful pristine ocean water we have, which brings in all of out tourism. While the drilling will bring in a lot of income for the Bahamas, it has some major down falls. If there is one little slip up, it will cause an oil spill in the Bahamas and kill all of our beautiful reefs and all of the species we have under water. So if this were to happen, we would not get any tourism anymore, seeing as our ocean is what brings in tourism, and tourism is our main source of income in the Bahamas. Also me being such an ocean lover, the thought of what could happen irritates me a lot. I did not use any inspiration from other posters, this idea popped into my head straight away, and I went with it, and I think it turned out amazing.     People should...
Read more

Casper's Logo Project

Image
      My idea was to create a logo surrounding what I grew up doing and has been my whole life, diving and fishing. So with the help of my classes ideas, I came up with adding a fishing rod and spear in a cross with a mask over the top, to sort of ressemble a skull and cross bone. I had a lot of fun creating these logos and I really think the logo does resemble me as a person seeing as it has been my whole life.
Read more

BW to Color Photos

Image
  This is how all of my images turned out from the original photo, and I am very happy with the results. It took a lot of time, about 2 and a half hours, but it was a very relieving feeling to be done with it when I finished. I went with these choices of colors, because I feel like the fish in the photo that I am holding up, really pops out with either a bright background and a dark fish, or a bright fish, with a dark background. This is because it just really brings your eyes to the center of the photo where that color is so different compared to the others.
Read more