HTML Illustration
For the HTML illustration project I recreated the Netflix logo. While I chose this because it seemed simple, it was far from easy as a beginner. I ran into may troubles along the way with the curves and filling in the color of each shape. I had lots of trials and even more errors, but the outcome made it all worth it. Though it took many attempts for me, the end result made me so much more appreciative of this project, and inspired me to keep challenging myself in areas that are outside of my comfort zone.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> ENTER THE TITLE OF THE PROJECT HERE </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;
margin: 10px;
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>
<br><br>
Add your personal notes or additional information here
<!-- 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 ctx;
canvas = document.getElementById("fmxCanvas");
ctx = canvas.getContext("2d");
var canvas1;
var ctx1;
canvas1 = document.createElement("canvas");
ctx1 = canvas1.getContext("2d");
canvas1.width = canvas.width;
canvas1.height = canvas.height;
var canvas2;
var ctx2;
canvas2 = document.createElement("canvas");
ctx2 = canvas2.getContext("2d");
canvas2.width = canvas.width;
canvas2.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() {
ctx.clearRect(0,0,canvas.width, canvas.height);
ctx1.clearRect(0,0,canvas.width, canvas.height);
ctx2.clearRect(0,0,canvas.width, canvas.height);
// clear additional ctxs 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
ctx.beginPath();
ctx.rect(0,0,800,800);
ctx.fillStyle = 'black';
ctx.fill();
ctx.stroke();
//rectangle A
ctx.beginPath();
ctx.moveTo(225,550);
ctx.quadraticCurveTo(300,525,325,525);
ctx.lineTo(325,525);
ctx.lineTo(325,50);
ctx.lineTo(225,50);
ctx.lineTo(225,550);
ctx.fillStyle = 'maroon';
ctx.fill();
ctx.closePath();
ctx.strokeStyle = 'maroon';
ctx.stroke();
//rect B
ctx.beginPath
ctx.moveTo(425,525);
ctx.quadraticCurveTo(450,525,525,550);
ctx.lineTo(525,550);
ctx.lineTo(525,50);
ctx.lineTo(425,50);
ctx.lineTo(425,525);
ctx.fillStyle = 'maroon';
ctx.fill();
ctx.closePath();
ctx.strokeStyle = 'maroon';
ctx.stroke();
//rect C
ctx.beginPath();
ctx.moveTo(425,525);
ctx.quadraticCurveTo(450,525,525,550);
ctx.lineTo(525,550);
ctx.lineTo(325,50);
ctx.lineTo(225,50);
ctx.lineTo(425,525);
ctx.fillStyle = 'red';
ctx.fill();
ctx.closePath();
ctx.strokeStyle = 'red';
ctx.stroke();
// <<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE
///////////////////////////////////////////////////////////////////
// CREDITS
ctx.save();
var credits = "Sara, Line, FMX 210, Fall 2022";
ctx.font = 'bold 12px Helvetica';
ctx.fillStyle = "rgba(0,0,0,1)"; // change the color here
ctx.shadowColor = "rgba(255,255,255,1)"; // change shadow color here
ctx.shadowBlur = 12;
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.fillText(credits, 10, canvas.height - 10); // CHANGE THE LOCATION HERE
ctx.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>
.jpg)
Comments
Post a Comment