Html illustration 1


 


Code: !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

 ctx.beginPath();
 ctx.moveTo(325, 275);
 ctx.quadraticCurveTo(290, 375, 600, 225);
ctx.stroke(); 
ctx.fillStyle = "black"

ctx.beginPath();
ctx.moveTo(325, 275);
ctx.bezierCurveTo(175, 450, 400, 350, 600, 225);
ctx.stroke();

 

 

 

 

 

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

// CREDITS

ctx.save();
var credits = "Jaxson Francois, nikelogo, FMX 210, FA 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>

Statement: I used the Nike logo for reference and graphed each point carefully to find a good match. I started with beginning the lines at my start point of (325, 275) and then ended at the point (600, 225). I started with a quadratic line for the top section using the points made on the graph. I made a Bézier curve for the bottom section, putting the 2nd control points much lower than the beginning and end points to create a sharp curve.


Comments

Popular posts from this blog

Christmas Kitty