"Lightning" - CANVAS Project FMX 210

 After several hours of coding, here's my Canvas that I named "Lightning". Every single shape is HTLM coding, inspired by various images. 


If you feel like it, you can check the code below! 



<!doctype html>

<html>

<head>

<meta charset="UTF-8">




<title> LIGHTING </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="1000" height="1000"></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 skycolor = context.createLinearGradient(500,0, 500, 900);

skycolor.addColorStop(0, "black"); 

skycolor.addColorStop(0.4, "rgba(0,25,252)");

skycolor.addColorStop(0.6, "rgba(68,20,222)");

skycolor.addColorStop(0.8, "rgba(157,34,245)");

skycolor.addColorStop(0.9, "rgba(207,20,222)");

skycolor.addColorStop(1, "rgba(255,26,141)");


var mooncolor = context.createRadialGradient(160,160,20,160,160,170);

mooncolor.addColorStop(0.1, "rgba(243,212,31)");

mooncolor.addColorStop(0.4, "rgba(244,234,176,0.1)");

mooncolor.addColorStop(0.5, "rgba(244,234,176,0.0000001)");

var impact = context.createRadialGradient(498,790,30,498,790,100);

impact.addColorStop(0.05, "rgba(246,39,37)");

impact.addColorStop(0.1, "orange");

impact.addColorStop(0.15, "yellow");

impact.addColorStop(0.2, "white");

impact.addColorStop(0.85, "rgba(66,194,240,0.0000001)");



// SKY

context.beginPath();


context.rect(0,0,1000,900);

context.closePath();


context.fillStyle = skycolor;

context.fill();

context.fillStyle = mooncolor;

context.fill();

context.fillStyle = impact;

context.fill();

context.lineWidth = 0.1

context.stroke(); // DRAW LINE


//GLOBAL OPACITY

//context.globalAlpha = 0.5;


//GROUND


context.beginPath();

context.moveTo(0,840);

context.quadraticCurveTo(500,669,1000,840);

context.lineTo(1000,1000);

context.lineTo(0,1000);

context.closePath();

context.fillStyle = "black";

context.fill();

context.lineWidth = 3

context.stroke() // DRAW LINE


//MOON

context.beginPath();

context.arc(160,160,60,0*Math.PI,2*Math.PI,true);

context.closePath();

context.lineWidth = 0.1;

context.fillStyle = "white";

context.fill();

context.stroke(); //DRAW

//MAN

context.beginPath();

context.moveTo(737,776);


context.quadraticCurveTo(735,742,739,733);

context.quadraticCurveTo(734,686,742,657);

context.quadraticCurveTo(730,629,732,603);

context.quadraticCurveTo(726,590,725,581);

context.lineTo(722,582);

context.quadraticCurveTo(724,577,721,573);

context.quadraticCurveTo(719,540,721,521);

context.lineTo(720,521);

context.quadraticCurveTo(717,472,721,431);

context.quadraticCurveTo(716,406,725,382);


context.quadraticCurveTo(726,374,733,369);

context.quadraticCurveTo(732,360,759,352);

context.quadraticCurveTo(768,348,765,343);

context.quadraticCurveTo(768,344,770,337);

context.quadraticCurveTo(774,338,778,341);

context.lineTo(787,333);

context.quadraticCurveTo(788,329,801,312);

context.quadraticCurveTo(802,302,811,299);

context.quadraticCurveTo(820,280,845,290);

context.quadraticCurveTo(849,293,851,298);

context.quadraticCurveTo(857,301,859,306);

context.quadraticCurveTo(863,315,868,326);

context.quadraticCurveTo(872,340,860,341);

context.lineTo(854,350);

context.lineTo(853,352);

context.quadraticCurveTo(849,356,847,356);

context.lineTo(844,366);

context.quadraticCurveTo(842,375,835,368);

context.quadraticCurveTo(828,373,827,371);

context.quadraticCurveTo(825,374,820,373);

context.quadraticCurveTo(815,378,812,376);

context.quadraticCurveTo(805,376,803,373);

context.lineTo(798,374);

context.quadraticCurveTo(801,379,802,381);

context.quadraticCurveTo(805,385,801,389);

context.quadraticCurveTo(796,394,800,400);

context.quadraticCurveTo(805,408,810,442);

context.quadraticCurveTo(813,475,813,500);

context.quadraticCurveTo(819,521,818,529);

context.quadraticCurveTo(821,556,819,561);

context.lineTo(820,570);

context.lineTo(826,580);

context.lineTo(828,595);

context.quadraticCurveTo(822,600,810,606);

context.quadraticCurveTo(813,617,805,627);

context.quadraticCurveTo(798,673,799,691);

context.quadraticCurveTo(802,710,796,713);

context.lineTo(795,722);

context.quadraticCurveTo(800,746,797,762);

context.quadraticCurveTo(796,774,800,791);

context.closePath();


context.fillStyle = "rgba(0,0,0,0.8)";

context.fill();


context.lineWidth = 0.0001;

context.stroke(); //DRAW


//SWING

context.beginPath();

context.moveTo(426,646);

context.lineTo(426,738);


context.quadraticCurveTo(420,739,426,741);

context.quadraticCurveTo(425,747,427,741);

context.lineTo(454,741);

context.quadraticCurveTo(454,744,454,742);

context.quadraticCurveTo(457,739,454,739);

context.lineTo(454,650);

context.lineTo(453,650);

context.lineTo(453,738);

context.lineTo(427,738);

context.lineTo(427,646);

context.closePath();


context.fillStyle = "black";

context.fill();


context.lineWidth = 1;

context.stroke(); //DRAW


//GIRL

context.beginPath();


context.moveTo(435,709);

context.bezierCurveTo(430,703,446,694,447,711);

context.quadraticCurveTo(450,711,449,715);

context.lineTo(446,713);

context.lineTo(446,716);

context.quadraticCurveTo(448,718,449,721);


context.lineTo(454,719);

context.quadraticCurveTo(456,718,455,721);

context.lineTo(451,725);

context.lineTo(446,722);

context.quadraticCurveTo(443,721,446,725);

context.lineTo(449,740);

context.lineTo(447,740);

context.lineTo(447,750);

context.quadraticCurveTo(444,755,444,750);

context.quadraticCurveTo(446,748,443,747);

context.lineTo(444,747);

context.lineTo(444,740);

context.lineTo(439,741);

context.lineTo(439,744);

context.quadraticCurveTo(442,748,440,748);

context.quadraticCurveTo(437,752,438,753);

context.lineTo(435,740);

context.lineTo(431,739);

context.lineTo(434,723);

context.quadraticCurveTo(430,728,428,723);

context.quadraticCurveTo(420,717,430,721);

context.quadraticCurveTo(433,716,436,712);

context.lineTo(430,713);

context.quadraticCurveTo(431,707,435,709);

context.closePath();


context.fillStyle = "black";

context.fill();


context.lineWidth = 0.1;

context.stroke(); //DRAW


// QUOTE

context.save();

var quote = "You were unsure";

context.font = 'bold 30px Apple Chancery';

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

context.shadowOffsetY = 5;

context.fillText(quote, 95, canvas.height - 700); // CHANGE THE LOCATION HERE

context.restore();

context.save();

var quote = "which pain is worse,";

context.font = 'bold 30px Apple Chancery';

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

context.shadowOffsetY = 5;

context.fillText(quote, 75, canvas.height - 650); // CHANGE THE LOCATION HERE

context.restore();

context.save();

var quote = "the shock of what happened,";

context.font = 'bold 30px Apple Chancery';

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

context.shadowOffsetY = 5;

context.fillText(quote, 25, canvas.height - 600); // CHANGE THE LOCATION HERE

context.restore();

context.save();

var quote = "or the ache for what";

context.font = 'bold 30px Apple Chancery';

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

context.shadowOffsetY = 5;

context.fillText(quote, 75, canvas.height - 550); // CHANGE THE LOCATION HERE

context.restore();

context.save();

var quote = "never will.";

context.font = 'bold 30px Apple Chancery';

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

context.shadowOffsetY = 5;

context.fillText(quote, 130, canvas.height - 500); // CHANGE THE LOCATION HERE

context.restore();

// QUOTE BY SIMON VAN BOOY, "EVERYTHING BEAUTIFUL BEGAN AFTER"



//lIGHTNING

context.save();


var diffX, diffY;


diffX = Math.round(mouseX/60);


diffY = Math.round(mouseY/60);


context.shadowColor = "rgba(255,255,0,1)"; // change shadow color here

context.shadowBlur = 12;

context.shadowOffsetX = diffX; // 10;

context.shadowOffsetY = diffY; // 10;


context.beginPath();

context.moveTo(605,0);

context.lineTo(606,6);

context.quadraticCurveTo(600,9,598,25);

context.quadraticCurveTo(590,31,592,39);

context.quadraticCurveTo(590,49,593,55);

context.quadraticCurveTo(592,62,595,69);

context.quadraticCurveTo(597,78,596,90);

context.quadraticCurveTo(591,93,593,99);

context.quadraticCurveTo(589,105,594,112);

context.quadraticCurveTo(596,122,602,121);

context.quadraticCurveTo(600,126,606,131);

context.quadraticCurveTo(601,142,606,150);

context.quadraticCurveTo(605,162,607,170);

context.quadraticCurveTo(604,180,611,183);

context.quadraticCurveTo(605,202,616,216);

context.quadraticCurveTo(616,229,621,237);

context.quadraticCurveTo(615,245,621,254);

context.quadraticCurveTo(616,256,615,263);

context.lineTo(607,274);

context.quadraticCurveTo(599,274,599,282);

context.quadraticCurveTo(592,287,591,295);

context.lineTo(575,303);

context.quadraticCurveTo(567,302,564,310);

context.quadraticCurveTo(558,311,558,316);

context.quadraticCurveTo(547,325,548,331);

context.quadraticCurveTo(540,334,542,342);

context.quadraticCurveTo(535,347,535,353);

context.quadraticCurveTo(524,362,524,370);

context.quadraticCurveTo(510,374,508,390);

context.quadraticCurveTo(499,390,496,398);

context.quadraticCurveTo(488,396,487,405);

context.quadraticCurveTo(483,406,480,409);

context.quadraticCurveTo(472,408,471,415);

context.quadraticCurveTo(465,417,465,425);

context.quadraticCurveTo(460,430,461,437);

context.quadraticCurveTo(456,442,451,450);

context.quadraticCurveTo(444,448,441,462);

context.quadraticCurveTo(432,458,430,468);

context.quadraticCurveTo(426,466,418,473);

context.quadraticCurveTo(418,468,407,483);

context.quadraticCurveTo(398,483,401,492);

context.quadraticCurveTo(388,491,382,502);

context.quadraticCurveTo(377,501,370,506);

context.quadraticCurveTo(365,501,363,509);

context.quadraticCurveTo(347,501,349,518);

context.quadraticCurveTo(345,519,343,524);

context.quadraticCurveTo(334,523,334,532);

context.quadraticCurveTo(316,534,318,544);

context.quadraticCurveTo(313,545,313,548);

context.quadraticCurveTo(306,547,304,553);

context.quadraticCurveTo(299,554,297,567);

context.quadraticCurveTo(293,568,290,572);

context.quadraticCurveTo(283,567,280,577);

context.quadraticCurveTo(273,579,271,586);

context.quadraticCurveTo(262,592,267,605);

context.quadraticCurveTo(255,605,256,616);

context.lineTo(249,621);


context.quadraticCurveTo(244,611,242,624);


context.quadraticCurveTo(236,629,238,636);

context.quadraticCurveTo(235,637,236,641);

context.quadraticCurveTo(225,645,230,648);

context.quadraticCurveTo(217,650,220,656);

context.quadraticCurveTo(218,667,214,665);

context.quadraticCurveTo(221,660,222,654);

context.quadraticCurveTo(233,651,232,646);

context.quadraticCurveTo(240,640,239,641);

context.quadraticCurveTo(240,640,240,634);

context.quadraticCurveTo(242,632,242,628);

context.quadraticCurveTo(246,627,246,620);

context.quadraticCurveTo(247,629,254,623);

context.quadraticCurveTo(263,617,260,610);

context.quadraticCurveTo(276,608,270,601);

context.quadraticCurveTo(269,596,270,593);

context.quadraticCurveTo(276,591,275,586);

context.quadraticCurveTo(288,578,286,576);

context.quadraticCurveTo(294,578,295,573);

context.quadraticCurveTo(301,573,304,560);

context.quadraticCurveTo(308,558,309,554);

context.quadraticCurveTo(321,550,322,544);

context.quadraticCurveTo(324,537,333,537);

context.quadraticCurveTo(327,548,335,552);

context.quadraticCurveTo(333,566,337,562);

context.quadraticCurveTo(330,569,347,577);

context.quadraticCurveTo(344,582,357,593);

context.quadraticCurveTo(352,601,361,600);

context.quadraticCurveTo(363,608,367,606);

context.lineTo(373,612);

context.quadraticCurveTo(369,617,375,621);

context.quadraticCurveTo(375,627,380,628);

context.quadraticCurveTo(380,630,382,633);

context.quadraticCurveTo(380,643,385,646);

context.quadraticCurveTo(383,641,384,633);

context.lineTo(383,630);

context.quadraticCurveTo(384,627,379,624);

context.quadraticCurveTo(377,618,376,617);

context.quadraticCurveTo(377,608,372,608);

context.quadraticCurveTo(369,603,367,603);

context.quadraticCurveTo(362,598,359,598);

context.quadraticCurveTo(363,593,358,590);

context.quadraticCurveTo(355,584,352,583);

context.quadraticCurveTo(350,571,345,573);

context.quadraticCurveTo(337,567,340,567);

context.quadraticCurveTo(341,560,338,560);

context.quadraticCurveTo(339,549,335,545);

context.quadraticCurveTo(340,536,339,530);

context.quadraticCurveTo(352,527,355,518);

context.quadraticCurveTo(352,510,360,514);

context.quadraticCurveTo(366,517,368,510);

context.quadraticCurveTo(374,514,377,509);

context.quadraticCurveTo(386,512,392,501);

context.quadraticCurveTo(409,498,406,490);

context.quadraticCurveTo(412,484,419,481);

context.quadraticCurveTo(423,480,426,475);

context.quadraticCurveTo(436,474,436,469);

context.quadraticCurveTo(446,474,451,457);


context.quadraticCurveTo(465,449,468,435);

context.quadraticCurveTo(473,429,471,424);


context.quadraticCurveTo(475,420,477,415);

context.quadraticCurveTo(480,417,484,413);

context.quadraticCurveTo(491,412,493,406);

context.quadraticCurveTo(498,408,506,396);

context.quadraticCurveTo(502,404,504,406);

context.quadraticCurveTo(492,409,494,420);

context.quadraticCurveTo(491,423,492,426);

context.quadraticCurveTo(488,428,487,440);

context.quadraticCurveTo(479,443,483,450);

context.quadraticCurveTo(480,457,482,459);

context.quadraticCurveTo(468,472,487,481);

context.quadraticCurveTo(487,488,492,494);

context.quadraticCurveTo(489,509,499,519);

context.quadraticCurveTo(496,523,500,528);

context.quadraticCurveTo(498,539,504,545);

context.quadraticCurveTo(504,550,509,550);

context.quadraticCurveTo(507,554,506,573);

context.quadraticCurveTo(497,580,503,591);

context.quadraticCurveTo(499,596,500,601);

context.quadraticCurveTo(498,607,499,617);

context.quadraticCurveTo(491,617,491,623);

context.quadraticCurveTo(477,627,489,653);

context.lineTo(487,665);

context.quadraticCurveTo(484,665,485,672);

context.quadraticCurveTo(483,675,484,681);

context.quadraticCurveTo(479,688,484,698);

context.quadraticCurveTo(484,713,486,710);

context.lineTo(488,718);

context.lineTo(496,716);

context.quadraticCurveTo(496,711,494,706);

context.quadraticCurveTo(493,699,490,691);

context.quadraticCurveTo(493,682,491,679);

context.quadraticCurveTo(494,675,493,670);

context.quadraticCurveTo(499,652,492,635);

context.quadraticCurveTo(498,627,502,624);

context.quadraticCurveTo(509,622,507,612);


context.quadraticCurveTo(510,608,508,607);

context.quadraticCurveTo(511,602,509,600);

context.quadraticCurveTo(514,594,510,583);

context.quadraticCurveTo(517,579,515,569);

context.lineTo(516,559);


context.quadraticCurveTo(521,552,510,537);

context.quadraticCurveTo(512,518,502,504);

context.quadraticCurveTo(506,487,500,487);

context.quadraticCurveTo(496,468,487,470);

context.quadraticCurveTo(494,464,492,457);

context.quadraticCurveTo(496,451,492,447);

context.quadraticCurveTo(504,434,504,418);

context.quadraticCurveTo(519,409,518,388);

context.lineTo(523,382);

context.quadraticCurveTo(535,377,536,368);

context.quadraticCurveTo(545,363,546,354);


context.quadraticCurveTo(556,347,553,339);

context.quadraticCurveTo(559,340,559,334);

context.lineTo(567,321);

context.quadraticCurveTo(573,321,575,316);

context.quadraticCurveTo(581,314,586,309);

context.quadraticCurveTo(590,312,595,307);


context.quadraticCurveTo(605,302,603,295);

context.quadraticCurveTo(609,291,609,284);

context.quadraticCurveTo(624,274,625,266);

context.quadraticCurveTo(640,254,631,248);

context.quadraticCurveTo(638,231,632,231);

context.quadraticCurveTo(631,221,629,221);

context.quadraticCurveTo(631,210,624,201);

context.lineTo(623,190);

context.quadraticCurveTo(626,179,621,173);

context.quadraticCurveTo(620,163,618,164);

context.quadraticCurveTo(620,150,616,141);

context.quadraticCurveTo(622,120,605,108);

context.quadraticCurveTo(609,103,607,95);

context.quadraticCurveTo(610,86,609,80);

context.quadraticCurveTo(612,85,616,86);

context.quadraticCurveTo(619,94,626,96);

context.quadraticCurveTo(629,101,633,103);

context.quadraticCurveTo(641,109,650,108);

context.quadraticCurveTo(656,111,661,108);

context.quadraticCurveTo(661,117,672,120);

context.quadraticCurveTo(671,127,677,130);

context.quadraticCurveTo(680,139,689,140);

context.quadraticCurveTo(694,147,701,144);

context.quadraticCurveTo(708,143,717,151);

context.quadraticCurveTo(718,159,726,157);

context.quadraticCurveTo(725,165,728,166);

context.quadraticCurveTo(723,177,736,174);

context.quadraticCurveTo(739,186,749,183);

context.quadraticCurveTo(753,190,760,186);

context.quadraticCurveTo(763,187,765,189);

context.quadraticCurveTo(761,198,780,197);

context.quadraticCurveTo(784,203,787,203);

context.quadraticCurveTo(787,213,801,215);

context.quadraticCurveTo(813,223,816,218);

context.quadraticCurveTo(822,222,823,218);

context.quadraticCurveTo(830,218,831,215);

context.quadraticCurveTo(834,226,843,227);

context.quadraticCurveTo(844,233,851,233);


context.quadraticCurveTo(851,244,860,241);

context.quadraticCurveTo(866,256,875,255);

context.quadraticCurveTo(882,272,891,262);

context.quadraticCurveTo(897,264,898,262);

context.quadraticCurveTo(903,268,909,272);

context.quadraticCurveTo(905,286,915,289);

context.quadraticCurveTo(919,297,926,292);

context.quadraticCurveTo(931,304,938,299);

context.quadraticCurveTo(941,302,944,300);

context.quadraticCurveTo(935,309,953,313);

context.quadraticCurveTo(950,317,959,324);

context.quadraticCurveTo(953,326,955,335);

context.lineTo(953,340);

context.lineTo(956,353);

context.quadraticCurveTo(953,359,957,359);

context.quadraticCurveTo(953,359,954,364);

context.quadraticCurveTo(948,357,944,364);

context.quadraticCurveTo(948,360,953,365);

context.quadraticCurveTo(946,370,948,378);

context.quadraticCurveTo(950,368,955,366);

context.quadraticCurveTo(954,371,956,374);

context.lineTo(954,377);

context.quadraticCurveTo(949,375,949,379);

context.quadraticCurveTo(942,380,941,384);

context.quadraticCurveTo(944,382,948,381);

context.quadraticCurveTo(945,388,948,388);

context.quadraticCurveTo(946,392,949,393);

context.quadraticCurveTo(944,403,955,405);

context.quadraticCurveTo(946,400,952,393);

context.quadraticCurveTo(951,392,951,391);

context.quadraticCurveTo(951,388,949,386);

context.quadraticCurveTo(949,385,951,381);

context.quadraticCurveTo(955,386,960,382);

context.lineTo(967,385);

context.quadraticCurveTo(960,379,957,381);

context.quadraticCurveTo(955,381,954,379);

context.quadraticCurveTo(959,379,959,370);

context.quadraticCurveTo(956,365,959,359);

context.quadraticCurveTo(958,349,957,341);

context.quadraticCurveTo(960,333,958,330);

context.quadraticCurveTo(964,323,958,317);

context.quadraticCurveTo(960,311,946,307);

context.quadraticCurveTo(953,312,958,304);

context.quadraticCurveTo(956,304,955,304);

context.quadraticCurveTo(949,307,950,303);

context.quadraticCurveTo(950,302,958,304);

context.quadraticCurveTo(960,307,966,308);

context.quadraticCurveTo(966,316,974,310);

context.quadraticCurveTo(979,316,985,315);

context.quadraticCurveTo(987,319,992,315);

context.quadraticCurveTo(991,319,1000,322);

context.lineTo(1000,316);

context.quadraticCurveTo(992,305,989,311);

context.quadraticCurveTo(982,309,979,308);

context.quadraticCurveTo(975,302,971,307);

context.quadraticCurveTo(968,302,966,302);

context.quadraticCurveTo(971,301,973,302);

context.quadraticCurveTo(974,304,978,303);

context.quadraticCurveTo(981,304,986,303);

context.quadraticCurveTo(990,302,992,304);

context.quadraticCurveTo(996,307,1000,303);

context.lineTo(1000,302);

context.quadraticCurveTo(995,305,993,303);

context.quadraticCurveTo(988,299,986,302);

context.lineTo(975,301);

context.quadraticCurveTo(969,298,967,300);

context.quadraticCurveTo(972,297,970,294);

context.quadraticCurveTo(973,293,975,288);

context.quadraticCurveTo(989,293,981,278);

context.quadraticCurveTo(985,291,973,286);

context.quadraticCurveTo(970,291,969,291);

context.quadraticCurveTo(967,293,968,297);

context.quadraticCurveTo(963,296,963,299);

context.quadraticCurveTo(957,296,957,298);

context.quadraticCurveTo(955,295,949,296);

context.quadraticCurveTo(944,292,939,295);

context.quadraticCurveTo(936,291,933,294);

context.quadraticCurveTo(929,284,923,286);

context.quadraticCurveTo(914,283,915,279);

context.quadraticCurveTo(915,266,910,264);

context.quadraticCurveTo(909,258,906,258);

context.quadraticCurveTo(900,250,896,256);

context.quadraticCurveTo(887,250,886,258);

context.quadraticCurveTo(879,248,875,249);

context.quadraticCurveTo(873,244,867,241);

context.quadraticCurveTo(867,232,860,235);

context.quadraticCurveTo(859,227,850,223);

context.quadraticCurveTo(847,218,842,219);

context.quadraticCurveTo(832,200,819,211);

context.quadraticCurveTo(817,209,813,212);

context.quadraticCurveTo(807,205,802,208);

context.quadraticCurveTo(799,203,796,204);

context.quadraticCurveTo(794,196,790,193);

context.quadraticCurveTo(787,184,782,187);

context.quadraticCurveTo(778,180,771,185);

context.lineTo(772,187);

context.quadraticCurveTo(778,184,781,190);

context.quadraticCurveTo(786,187,787,191);

context.quadraticCurveTo(776,189,772,187);

context.quadraticCurveTo(771,180,766,181);

context.quadraticCurveTo(764,175,758,176);

context.lineTo(755,174);

context.quadraticCurveTo(754,167,748,163);

context.quadraticCurveTo(745,153,733,152);

context.lineTo(735,154);

context.quadraticCurveTo(743,157,746,164);

context.quadraticCurveTo(751,168,752,174);

context.lineTo(756,178);

context.quadraticCurveTo(749,173,747,175);

context.quadraticCurveTo(744,168,737,165);

context.quadraticCurveTo(736,151,727,148);

context.quadraticCurveTo(728,143,723,141);

context.quadraticCurveTo(725,137,736,144);

context.quadraticCurveTo(735,146,747,139);

context.quadraticCurveTo(746,135,752,138);


context.quadraticCurveTo(759,141,766,134);

context.quadraticCurveTo(775,141,786,135);

context.quadraticCurveTo(772,137,766,132);

context.quadraticCurveTo(752,139,749,133);

context.quadraticCurveTo(746,134,744,137);

context.lineTo(736,141);

context.quadraticCurveTo(727,136,718,139);


context.lineTo(717,138);

context.quadraticCurveTo(717,127,713,127);

context.quadraticCurveTo(713,115,706,121);

context.quadraticCurveTo(694,112,695,119);

context.quadraticCurveTo(686,119,687,114);

context.quadraticCurveTo(684,104,673,108);

context.lineTo(676,111);

context.quadraticCurveTo(681,108,684,115);

context.quadraticCurveTo(686,124,699,121);

context.quadraticCurveTo(703,127,710,123);

context.quadraticCurveTo(707,130,712,131);

context.quadraticCurveTo(713,136,714,138);

context.quadraticCurveTo(701,131,696,134);

context.quadraticCurveTo(691,129,685,127);

context.quadraticCurveTo(684,122,681,122);

context.quadraticCurveTo(678,111,671,107);

context.quadraticCurveTo(677,108,680,105);

context.quadraticCurveTo(686,107,692,102);

context.quadraticCurveTo(697,106,701,101);

context.quadraticCurveTo(708,103,711,96);

context.quadraticCurveTo(718,100,728,95);

context.quadraticCurveTo(736,98,741,93);

context.quadraticCurveTo(745,95,749,92);

context.quadraticCurveTo(759,99,766,93);

context.quadraticCurveTo(774,91,768,85);

context.quadraticCurveTo(771,87,773,84);

context.quadraticCurveTo(778,86,783,83);


context.quadraticCurveTo(790,91,791,77);

context.quadraticCurveTo(798,76,802,66);

context.quadraticCurveTo(805,66,808,62);

context.quadraticCurveTo(813,66,814,70);

context.quadraticCurveTo(814,73,822,73);

context.quadraticCurveTo(817,78,828,84);

context.quadraticCurveTo(827,91,841,86);

context.quadraticCurveTo(830,88,830,82);

context.quadraticCurveTo(821,79,825,72);

context.quadraticCurveTo(813,70,816,66);

context.lineTo(812,62);

context.quadraticCurveTo(818,64,823,59);

context.quadraticCurveTo(831,63,835,55);


context.quadraticCurveTo(839,61,845,56);

context.quadraticCurveTo(851,60,856,53);


context.quadraticCurveTo(861,53,868,53);

context.quadraticCurveTo(875,59,890,55);

context.quadraticCurveTo(872,55,869,50);

context.quadraticCurveTo(858,48,859,53);

context.quadraticCurveTo(856,47,850,55);

context.quadraticCurveTo(842,52,841,56);

context.quadraticCurveTo(832,49,831,56);

context.quadraticCurveTo(814,56,816,60);

context.quadraticCurveTo(802,54,795,71);

context.quadraticCurveTo(786,71,788,82);

context.quadraticCurveTo(785,76,778,81);

context.quadraticCurveTo(771,76,770,82);

context.quadraticCurveTo(756,81,767,89);

context.quadraticCurveTo(759,93,754,90);

context.quadraticCurveTo(747,83,744,89);

context.quadraticCurveTo(738,85,736,90);


context.quadraticCurveTo(729,87,724,90);

context.quadraticCurveTo(723,86,725,79);

context.lineTo(722,71);

context.quadraticCurveTo(723,69,721,63);

context.quadraticCurveTo(719,58,717,56);

context.quadraticCurveTo(719,46,720,35);

context.quadraticCurveTo(726,27,722,18);

context.quadraticCurveTo(722,32,717,35);

context.quadraticCurveTo(715,47,714,55);

context.quadraticCurveTo(716,62,719,62);

context.quadraticCurveTo(716,65,721,67);

context.quadraticCurveTo(716,73,723,79);

context.quadraticCurveTo(718,88,723,92);

context.quadraticCurveTo(718,90,718,94);

context.quadraticCurveTo(707,88,705,96);

context.quadraticCurveTo(696,94,697,99);

context.quadraticCurveTo(691,95,685,100);

context.quadraticCurveTo(677,97,672,103);

context.quadraticCurveTo(662,95,656,98);


context.quadraticCurveTo(649,92,647,98);

context.quadraticCurveTo(643,95,637,94);


context.quadraticCurveTo(632,86,627,85);

context.quadraticCurveTo(622,77,620,77);

context.quadraticCurveTo(621,72,608,65);

context.quadraticCurveTo(610,58,604,48);

context.quadraticCurveTo(606,45,607,38);

context.quadraticCurveTo(611,31,611,26);

context.quadraticCurveTo(616,24,616,17);

context.quadraticCurveTo(622,6,619,0);

context.closePath();


context.fillStyle = "rgba(198,222,244,0.8)";

context.fill();


context.lineWidth = 0.00001;

context.stroke(); //DRAW



context.restore();

//UMBRELLA


context.beginPath();

context.moveTo(665,275);

context.bezierCurveTo(705,220,744,135,866,129);

context.quadraticCurveTo(879,129,877,118);

context.quadraticCurveTo(879,101,883,118);

context.quadraticCurveTo(882,129,893,129);

context.quadraticCurveTo(965,134,1000,159);

context.lineTo(1000,281);

context.quadraticCurveTo(951,261,885,268);

context.lineTo(885,424);

context.quadraticCurveTo(892,432,894,438);

context.quadraticCurveTo(899,444,901,446);

context.lineTo(934,443);

context.quadraticCurveTo(953,434,986,435);

context.lineTo(1000,428);

context.lineTo(1000,457);

context.quadraticCurveTo(969,465,949,466);

context.lineTo(901,464);

context.quadraticCurveTo(888,472,871,467);

context.quadraticCurveTo(847,463,858,440);

context.quadraticCurveTo(862,438,864,442);

context.quadraticCurveTo(858,453,865,458);

context.quadraticCurveTo(865,454,868,456);

context.quadraticCurveTo(867,452,872,452);

context.quadraticCurveTo(869,449,875,447);

context.quadraticCurveTo(873,440,881,440);

context.quadraticCurveTo(878,425,880,424);

context.lineTo(879,268);

context.quadraticCurveTo(841,269,796,284);

context.quadraticCurveTo(793,294,795,284);

context.quadraticCurveTo(744,244,667,274);

context.quadraticCurveTo(661,281,665,275);

context.closePath();


context.fillStyle = "rgba(0,0,0,0.8)";

context.fill();


context.lineWidth = 1;

context.stroke(); //DRAW


//TREE

context.beginPath();

context.moveTo(476,756);

context.bezierCurveTo(496,743,487,723,473,702);

context.quadraticCurveTo(469,696,471,690);

context.bezierCurveTo(461,691,461,680,446,684);

context.quadraticCurveTo(436,684,434,689);

context.quadraticCurveTo(437,685,440,684);

context.quadraticCurveTo(434,682,428,687);

context.quadraticCurveTo(431,681,440,683);

context.quadraticCurveTo(449,681,456,681);

context.bezierCurveTo(436,668,443,661,429,660);

context.quadraticCurveTo(413,655,405,662);

context.quadraticCurveTo(411,654,426,658);

context.bezierCurveTo(405,641,400,657,393,648);

context.bezierCurveTo(396,651,409,643,428,657);

context.bezierCurveTo(440,657,456,686,470,686);

context.bezierCurveTo(464,635,449,653,422,644);

context.quadraticCurveTo(415,644,403,658);

context.quadraticCurveTo(415,643,416,644);

context.quadraticCurveTo(401,636,390,647);


context.quadraticCurveTo(400,633,417,643);

context.bezierCurveTo(423,637,437,647,444,644);

context.bezierCurveTo(431,638,440,627,421,600);

context.bezierCurveTo(437,618,435,641,448,643);


context.quadraticCurveTo(466,646,474,668);

context.bezierCurveTo(481,611,468,639,459,608);

context.bezierCurveTo(444,603,447,586,442,571);

context.quadraticCurveTo(451,606,458,605);

context.quadraticCurveTo(452,599,453,550);

context.quadraticCurveTo(449,541,442,536);

context.quadraticCurveTo(447,537,452,545);

context.quadraticCurveTo(450,537,446,530);

context.quadraticCurveTo(451,536,453,543);

context.quadraticCurveTo(455,572,455,584);

context.quadraticCurveTo(453,562,471,547);

context.quadraticCurveTo(470,541,466,533);

context.quadraticCurveTo(468,535,470,541);

context.quadraticCurveTo(471,537,475,530);

context.quadraticCurveTo(471,537,471,541);

context.lineTo(473,545);

context.bezierCurveTo(483,538,476,541,487,522);

context.quadraticCurveTo(498,509,500,501);

context.bezierCurveTo(499,513,480,528,484,533);

context.quadraticCurveTo(490,525,499,527);

context.quadraticCurveTo(489,528,482,536);

context.bezierCurveTo(476,551,456,552,457,577);

context.quadraticCurveTo(454,595,465,613);

context.quadraticCurveTo(470,603,471,566);

context.quadraticCurveTo(471,585,470,599);

context.quadraticCurveTo(474,591,477,586);

context.quadraticCurveTo(469,603,466,615);

context.bezierCurveTo(470,624,480,623,480,646);

context.quadraticCurveTo(472,689,487,710);

context.quadraticCurveTo(499,721,500,697);

context.bezierCurveTo(488,638,488,633,495,626);

context.quadraticCurveTo(489,605,491,596);

context.quadraticCurveTo(492,611,496,624);

context.quadraticCurveTo(499,611,501,602);

context.quadraticCurveTo(496,628,494,640);

context.bezierCurveTo(499,624,515,624,518,599);

context.quadraticCurveTo(518,568,522,565);

context.quadraticCurveTo(518,578,520,600);

context.quadraticCurveTo(523,590,526,586);

context.quadraticCurveTo(521,599,520,603);

context.bezierCurveTo(503,649,492,615,500,670);

context.quadraticCurveTo(503,683,505,700);

context.quadraticCurveTo(529,690,542,633);

context.quadraticCurveTo(540,599,549,591);

context.quadraticCurveTo(542,579,547,574);

context.quadraticCurveTo(542,564,540,560);

context.quadraticCurveTo(536,557,532,553);

context.quadraticCurveTo(532,553,540,560);


context.quadraticCurveTo(537,550,530,545);

context.quadraticCurveTo(543,561,548,572);

context.bezierCurveTo(552,545,559,557,557,539);

context.quadraticCurveTo(552,523,546,517);

context.quadraticCurveTo(550,521,558,537);

context.bezierCurveTo(564,507,545,510,552,499);

context.bezierCurveTo(548,517,563,500,559,538);

context.bezierCurveTo(561,558,540,570,551,587);

context.bezierCurveTo(568,574,572,528,586,531);

context.quadraticCurveTo(585,522,595,510);

context.quadraticCurveTo(585,522,587,529);

context.quadraticCurveTo(607,527,625,503);

context.quadraticCurveTo(618,516,593,529);

context.bezierCurveTo(566,540,579,556,559,582);

context.bezierCurveTo(571,573,559,579,589,562);

context.quadraticCurveTo(594,549,614,555);

context.quadraticCurveTo(591,550,590,563);

context.lineTo(584,568);

context.quadraticCurveTo(586,567,591,569);

context.quadraticCurveTo(573,568,564,582);

context.quadraticCurveTo(544,589,546,618);


context.quadraticCurveTo(555,617,572,600);

context.bezierCurveTo(578,587,584,593,601,582);

context.quadraticCurveTo(602,577,623,580);

context.quadraticCurveTo(602,579,599,585);

context.quadraticCurveTo(598,584,590,590);

context.quadraticCurveTo(598,587,612,592);

context.quadraticCurveTo(597,588,589,591);

context.bezierCurveTo(571,590,582,596,561,614);

context.bezierCurveTo(570,614,585,612,592,619);

context.quadraticCurveTo(580,613,577,616);

context.quadraticCurveTo(581,619,585,621);

context.quadraticCurveTo(578,618,576,616);

context.lineTo(560,615);

context.quadraticCurveTo(552,621,546,621);

context.quadraticCurveTo(547,629,538,665);

context.bezierCurveTo(552,651,559,657,582,633);

context.quadraticCurveTo(569,644,567,649);

context.quadraticCurveTo(596,627,612,638);

context.quadraticCurveTo(592,631,572,650);

context.bezierCurveTo(578,652,589,646,599,651);

context.bezierCurveTo(576,649,578,655,570,651);

context.bezierCurveTo(522,665,543,692,513,702);

context.bezierCurveTo(500,731,510,735,506,753);

context.lineTo(511,763);

context.closePath();

context.fillStyle = "black";

context.fill();


context.lineWidth = 1

context.stroke() // DRAW LINE




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

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


// CREDITS


context.save();

var credits = "Jean-Baptiste Hansali, Lighting, FMX 210, SP 2021";

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>


Commentaires

Enregistrer un commentaire

Posts les plus consultés de ce blog

Animation Project

Image
  230 frames. As I was drawing, I was calculating the time spent on a singular frame. It was about 5 to 10 minutes. I will let you do the math. It was very long I can tell you that, but I’m very glad about how the final result turned out! I was inspired by Christopher Nolan’s first short film, Doodlebug (1998), which tells a similar story. By creating an animation, I was able to create a loop, and I think that the result is pretty cool.
Lire la suite

Multiplicity Project

Image
  Through the multiplicity project, I wanted to tell a specific story. I recreated a scene of a party with multiple versions of myself. I think that every single version shows a different personality, and that’s what made this project interesting. I really had fun making it. I think that the challenging part was to mask every layer in Adobe Photoshop to make it look believable. Also, since the sunlight was slightly changing, I had to take the photos as fast as possible to keep the exposure the same. 
Lire la suite

Introduction

 Hello, my name is Jean-Baptiste Hansali, I'm a junior and an international student from France, studying at the University of Tampa. I'm a Film and Media Arts major (BFA), and I'm a big fan of Christopher Nolan's work.  When I was little, I loved drawing and doing magic tricks.  At  14, I started learning to play the piano. Today, I try to externalize these artistic aspects through cinema.   For me, this class is a good way to extend my knowledge, whether in graphic design or other fields.
Lire la suite