HTML5/JAVASCRIPT ILLUSTRATION

 

The HTML5 Canvas / JavaScript Illustration took me days of blood, sweat and tears but still didn't turn out that great. I wouldn't say its my hidden talent but I had a lot of fun trying to teach myself how to do something I never would have thought I'd learn in a million years.


<!doctype html>

<html>
<head>
<meta charset="UTF-8">



<title> DANCING STARZ </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="300" height="400"></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
context.beginPath();
context.rect(0,1,300,400);

context.closePath();
context.fillStyle = "rgba (255,0,255,1)"

context.fill();

/// PEACE SIGN
context.beginPath();

context.arc(89,93,88, 0*Math.PI, 2*Math.PI, false);

context.lineWidth = 5;
context.lineCap = "round";

context.stroke();
context.closePath();
context.fillStyle = "green";

context.fill();
context.strokeStyle = "yellow";
context.beginPath();

context.moveTo(81,24)
context.bezierCurveTo(81,24,-1,41,33,133)
context.lineWidth = 5;

context.stroke();
context.fillStyle = "green";

context.fill();
context.beginPath();

context.moveTo(99,23)

context.bezierCurveTo(99,23,184,47,146,131)

context.lineWidth = 5;

context.stroke();

context.fillStyle = "green";

context.fill();
context.beginPath();

context.moveTo(45,145)

context.bezierCurveTo(45,145,53,160,81,163)

context.lineWidth = 5;

context.stroke();

context.fillStyle = "green";

context.fill();

context.beginPath();

context.moveTo(98,163)

context.bezierCurveTo(98,163,133,155,134,145)

context.lineWidth = 5;

context.stroke();
context.fillStyle = "green";

context.fill();
context.beginPath();

context.moveTo(34,131);
context.lineTo(60,108);

context.lineWidth = 5;

context.stroke();
context.fillStyle = "green";

context.fill();
context.beginPath();

context.moveTo(44,146);
context.lineTo(66,126);

context.lineWidth = 5;

context.stroke();

context.fillStyle = "green";

context.fill();

context.beginPath();

context.moveTo(82,163);
context.lineTo(82,130);

context.lineWidth = 5;

context.stroke();
context.fillStyle = "green";

context.fill();
context.beginPath();

context.moveTo(98,161);
context.lineTo(98,128);

context.lineWidth = 5;

context.stroke();
context.fillStyle = "green";

context.fill();
context.beginPath();

context.moveTo(135,146);
context.lineTo(116,126);

context.lineWidth = 5;

context.stroke();

context.fillStyle = "green";

context.fill();

context.beginPath();

context.moveTo(147,133);
context.lineTo(118,106);

context.lineWidth = 5;

context.stroke();

context.fillStyle = "green";

context.fill();

context.beginPath();

context.moveTo(98,23);

context.lineTo(99,58);

context.lineWidth = 5;

context.stroke();

context.fillStyle = "green";

context.fill();

context.beginPath();

context.moveTo(81,24);
context.lineTo(81,60);

context.lineWidth = 5;

context.stroke();

context.fillStyle = "green";

context.fill();

context.beginPath();

context.moveTo(104,87);
context.bezierCurveTo(104,87,112,88,97,108)

context.lineWidth = 5;

context.stroke();
// context.closePath();
/// FLOWER 1

// petal 1
context.beginPath();

context.moveTo(79,81)
context.bezierCurveTo(79,81,86,30,101,79)
context.lineWidth = 5;

context.stroke();

context.fillStyle = "yellow";

context.fill();

// petal 2

context.beginPath();

context.moveTo(101,82)
context.bezierCurveTo(101,82,160,70,138,87)
context.lineTo(113,100)
context.lineWidth = 5;

context.stroke();

context.fillStyle = "yellow";

context.fill();

// petal 3

context.beginPath();

context.moveTo(108,99)
context.bezierCurveTo(104,99,147,163,89,109)
context.lineWidth = 5;

context.stroke();

context.fillStyle = "yellow";

context.fill();

// petal 4
context.beginPath();

context.moveTo(90,109)
context.bezierCurveTo(90,109,41,166,75,99)
context.lineWidth = 5;

context.stroke();

context.fillStyle = "yellow";

context.fill();

// petal 5

context.beginPath();

context.moveTo(74,95)
context.bezierCurveTo(74,95,1,73,76,82)
context.lineWidth = 5;

context.stroke();

context.fillStyle = "yellow";

context.fill();

// flower center
context.beginPath();

context.arc(89,93,12, 0*Math.PI, 2*Math.PI, false);

context.lineWidth = 5;
context.lineCap = "round";

context.stroke();

context.closePath();

/// FLOWER 2

// petal 1

context.beginPath();

context.moveTo(206,165)
context.bezierCurveTo(206,165,176,-1,242,160)
context.lineWidth = 5;

context.stroke();

context.fillStyle = "pink";

context.fill();

// petal 2

context.beginPath();

context.moveTo(244,159)
context.bezierCurveTo(244,159,400,40,252,201)
context.lineWidth = 5;

context.stroke();

context.fillStyle = "pink";

context.fill();

// petal 3

context.beginPath();

context.moveTo(253,202)
context.bezierCurveTo(253,202,290,352,222,221)
context.lineWidth = 5;

context.stroke();

context.fillStyle = "pink";

context.fill();


// petal 4

context.beginPath();

context.moveTo(224,217)
context.bezierCurveTo(224,217,85,312,196,196)
context.lineWidth = 5;

context.stroke();

context.fillStyle = "pink";

context.fill();

//petal 5

context.beginPath();

context.moveTo(196,193)

context.bezierCurveTo(196,193,94,130,203,168)

context.lineWidth = 5;

context.stroke();

context.fillStyle = "pink";

context.fill();

// flower center
context.beginPath();

context.arc(225,187,26, 0*Math.PI, 2*Math.PI, false);

context.lineWidth = 5;

context.lineCap = "round";

context.stroke();

context.closePath();


/// FLOWER 3

// petal 1

context.beginPath();

context.moveTo(95,238)
context.bezierCurveTo(95,238,75,127,54,239)
context.lineWidth = 5;

context.stroke();

context.fillStyle = "pink";

context.fill();

// petal 2

context.beginPath();

context.moveTo(53,240)
context.bezierCurveTo(53,240,-150,250,45,275)
context.lineWidth = 5;

context.stroke();

context.fillStyle = "pink";

context.fill();

// petal 3

context.beginPath();

context.moveTo(44,278)
context.bezierCurveTo(44,278,-1,398,74,300)
context.lineWidth = 5;

context.stroke();

context.fillStyle = "pink";

context.fill();

// petal 4

context.beginPath();

context.moveTo(75,300)
context.bezierCurveTo(75,300,150,400,109,278)
context.lineWidth = 5;

context.stroke();

context.fillStyle = "pink";

context.fill();

// petal 5

context.beginPath();

context.moveTo(94,242)
context.bezierCurveTo(94,242,222,205,104,274)
context.lineWidth = 5;

context.stroke();

context.fillStyle = "pink";

context.fill();
// flower center
context.beginPath();

context.arc(205,330,26, 0*Math.PI, 2*Math.PI, false);

context.lineWidth = 5;

context.lineCap = "round";

context.stroke();

context.closePath();

context.beginPath();

context.arc(205,330,26, 0*Math.PI, 2*Math.PI, false);

context.lineWidth = 5;

context.lineCap = "round";

context.stroke();

context.closePath();

/// FLOWER 4

// petal 1

context.beginPath();

context.moveTo(187,307)
context.bezierCurveTo(187,307,202,159,225,306)
context.lineWidth = 5;

context.stroke();

context.fillStyle = "pink";

context.fill();

// petal 2

context.beginPath();

context.moveTo(227,306)
context.bezierCurveTo(227,306,301,221,238,347)
context.lineWidth = 5;

context.stroke();

context.fillStyle = "pink";

context.fill();


// petal 3

context.beginPath();

context.moveTo(230,340)
context.bezierCurveTo(230,340,300,500,205,358)
context.lineWidth = 5;

context.stroke();

context.fillStyle = "pink";

context.fill();


// petal 4

context.beginPath();

context.moveTo(205,356)
context.bezierCurveTo(205,356,100,500,175,340)
context.lineWidth = 5;

context.stroke();

context.fillStyle = "pink";

context.fill();


// petal 5

context.beginPath();

context.moveTo(180,337)
context.bezierCurveTo(180,337,43,254,188,308)
context.lineWidth = 5;

context.stroke();

context.fillStyle = "pink";

context.fill();

// flower center
context.beginPath();

context.arc(74,265,28, 0*Math.PI, 2*Math.PI, false);

context.lineWidth = 5;

context.lineCap = "round";

context.stroke();

context.closePath();

context.fillStyle = "cyan";

context.closePath();

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

// CREDITS

context.save();
var credits = "Cathryn DoRosario, DancingStarzHTML5, FMX 210, Fall 2020";
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

ANIMATION (FRAME X FRAME)

  This animation assignment had my fingers numb. Hand drawing almost two hundred individual frames, pressing my pointer finger down against the MAC Book for hours at a time was tedious and quite honestly painful... I had not been able to bend my finger by the end of it but it was definitely worth it. I had a lot of fun seeing the final project in the end (not so much making it lol) and I received an A which I'm super happy about.
Read more

CALLIGRAM

Image
The calligram project was one of the more intricate assignments because a lot of words came out illegible so I had to keep trying different words until they fit perfectly in each portion of my face. I was very happy with the final result.  
Read more

MULTIPLICITY

Image
  The multiplicity project was so much fun! I loved asking my roommate to take awkward, random photographs of me doing the strangest things because she didn't understand what I was using them for no matter how many times I tried to explain. I will always remember making this project... MY SECOND AND FINAL HALL OF FAME!
Read more