Brodsky_Canvas.html

September 23, 2020

Brodsky_Canvas.html

/Users/maxwellbrodsky/Desktop/Brodsky_Canvas.html

This project was a tough first project. I had never coded anything in my life before this so it took some time and patience. When making this I really tried to focus on the shape of the stars and the gradient on the entire piece. Prior to sketching this, I wanted to make the entire night sky with the moon, the stars, and maybe a shooting comet. When things got tough, I had to simplify my work. The stars themselves were hard to draw. I ended up persevering and finishing my project of stars in the night sky and I couldn't be more happy. When I finished it gave me the best satisfaction in the world. For my first ever project, I do not think it looks half bad. I can't wait to grow and get better, it only goes up from here!

Code -

<!doctype html>

<html>

<head>

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>

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

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

//skygradient

var bkgdgrd = context.createLinearGradient(0,0,801,461);

bkgdgrd.addColorStop(0 , "rgba(83,107,144,1.00)" );

bkgdgrd.addColorStop(0.25 , "rgba(72,101,147,1.00)" );

bkgdgrd.addColorStop(0.5 , "rgba(55,56,120,1.00)" );

bkgdgrd.addColorStop(1 , "rgba(25,30,38,1.00)" );

//sky

context.beginPath();

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

context.stroke();

context.lineWidth=2;

context.closePath();

context.fillStyle = bkgdgrd;

context.fill();

var stargrd = context.createLinearGradient(0,300,800,800); // AXIS

stargrd.addColorStop(0,"rgba(255,255,255,1.00)");

stargrd.addColorStop(0.14,"rgba(234,238,108,1.00)" );

stargrd.addColorStop(0.28,"rgba(234,238,108,1.00)" );

stargrd.addColorStop(0.42,"rgba(255,255,255,1.00)");

stargrd.addColorStop(0.56,"rgba(235,172,78,1.00)");

stargrd.addColorStop(0.70,"rgba(234,238,108,1)");

stargrd.addColorStop(1.0,"rgba(252,243,88,1.00)");

//circle star

context.beginPath();

context.arc(600,80,12,0*Math.PI,2*Math.PI,false);

context.closePath();

context.fillStyle = stargrd;

context.fill();

//circle star

context.beginPath();

context.arc(400,20,12,0*Math.PI,2*Math.PI,false);

context.closePath();

context.fillStyle = stargrd;

context.fill();

//circle star

context.beginPath();

context.arc(80,300,12,0*Math.PI,2*Math.PI,false);

context.closePath();

context.fillStyle = stargrd;

context.fill();

//pointy star

context.beginPath();

context.moveTo(30,235);

context.lineTo(45,242);

context.lineTo(40,262);

context.lineTo(60,255);

context.lineTo(80,260);

context.lineTo(70,250);

context.lineTo(90,230);

context.lineTo(65,235);

context.lineTo(60,215);

context.lineTo(50,235);

context.lineTo(30,235);

context.closePath();

context.fillStyle = stargrd;

context.fill();

//pointy star

context.beginPath();

context.moveTo(230,435);

context.lineTo(245,442);

context.lineTo(240,462);

context.lineTo(260,455);

context.lineTo(280,460);

context.lineTo(270,450);

context.lineTo(290,430);

context.lineTo(265,435);

context.lineTo(260,415);

context.lineTo(250,435);

context.lineTo(230,435);

context.closePath();

context.fillStyle = stargrd;

context.fill();

//circle star

context.beginPath();

context.arc(106,66,10,0*Math.PI,2*Math.PI,false);

context.closePath();

context.fillStyle = stargrd;

context.fill();

//circle star

context.beginPath();

context.arc(330,280,5,0*Math.PI,2*Math.PI,false);

context.closePath();

context.fillStyle = stargrd;

context.fill();

//circle star

context.beginPath();

context.arc(50,518,15,0*Math.PI,2*Math.PI,false);

context.closePath();

context.fillStyle = stargrd;

context.fill();

//pointy star

context.beginPath();

context.moveTo(660,220);

context.lineTo(663,243);

context.lineTo(700,250);

context.lineTo(680,270);

context.lineTo(699,300);

context.lineTo(660,280);

context.lineTo(620,300);

context.lineTo(640,270);

context.lineTo(610,240);

context.lineTo(650,240);

context.lineTo(660,220);

context.closePath();

context.fillStyle = stargrd;

context.fill();

//pointy star

context.beginPath();

context.moveTo(360,520);

context.lineTo(363,543);

context.lineTo(400,550);

context.lineTo(380,570);

context.lineTo(399,600);

context.lineTo(360,580);

context.lineTo(340,600);

context.lineTo(340,570);

context.lineTo(310,540);

context.lineTo(350,540);

context.lineTo(360,520);

context.closePath();

context.fillStyle = stargrd;

context.fill();

//circle star

context.beginPath();

context.arc(719,126,10,0*Math.PI,2*Math.PI,false);

context.closePath();

context.fillStyle = stargrd;

context.fill();

//circle star

context.beginPath();

context.arc(139,157,8,0*Math.PI,2*Math.PI,false);

context.closePath();

context.fillStyle = stargrd;

context.fill();

context.beginPath();

context.moveTo(330,635);

context.lineTo(345,642);

context.lineTo(340,662);

context.lineTo(360,655);

context.lineTo(380,660);

context.lineTo(370,650);

context.lineTo(390,630);

context.lineTo(365,635);

context.lineTo(360,615);

context.lineTo(350,635);

context.lineTo(330,635);

context.closePath();

context.fillStyle = stargrd;

context.fill();

//circle star

context.beginPath();

context.arc(691,525,12,0*Math.PI,2*Math.PI,false);

context.closePath();

context.fillStyle = stargrd;

context.fill();

//circle star

context.beginPath();

context.arc(466,201,6,0*Math.PI,2*Math.PI,false);

context.closePath();

context.fillStyle = stargrd;

context.fill();

//circle star

context.beginPath();

context.arc(520,406,6,0*Math.PI,2*Math.PI,false);

context.closePath();

context.fillStyle = stargrd;

context.fill();

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

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

// CREDITS

context.save();

var credits = "Max Brodsky, Stars, FXX 210, FA 20";

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>

Search This Blog

Maxwell Brodsky - FMX

Brodsky_Canvas.html

Comments

Post a Comment

Popular Posts

Internet vs World Wide Web

Calligram