HTML Illustration

 



(Reference Photo on top and Final Project on the bottom with label)


Artist Statement

Though the logo is simple, the production process took quite a while. It is not entirely accurate with the thickness of the lines being different but it is relatively close. I started with the basic code for a circle and centered it directly in the middle of the reference graph. After I filled the circle with white to create an open shape for the triangles inside. For the triangle directly straight towards the top of the circle, I placed the bottom line at the center point and only had the other sides less than 2 squares away from the center. For the smaller triangles facing opposite directions, instead of having the bottom side create an almost square with the top triangle, I had them directly connect to the bottom side of the top triangle so there wasn't any open space. I did have to modify the angle of the bottom triangles for them to be higher up as they were fairly low before. For final touches, I would change the x and y points slightly by small numbers like one through 5 to make sure all points touched the edges of the circle and did not overlap.


Code:

<!doctype html>
<!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


//Mercedes

ctx.beginPath();
ctx.arc(400, 300, 180, 0, 2*Math.PI, false);
ctx.closePath();
ctx.lineWidth = 20
ctx.fillStyle = "white";
ctx.fill();
ctx.strokeStyle = "black"
ctx.stroke();

ctx.beginPath();
ctx.moveTo(400, 132);
ctx.lineTo(375, 308);
ctx.lineTo(425, 304);
ctx.lineTo(400, 132);
ctx.closePath();
ctx.lineWidth = 5
ctx.fillStyle = "black"
ctx.fill();
ctx.stroke();

ctx.beginPath();
ctx.moveTo(550, 400);
ctx.lineTo(425, 300);
ctx.lineTo(390, 315);
ctx.lineTo(550, 400);
ctx.closePath();
ctx.lineWidth = 5
ctx.fillStyle = "black"
ctx.fill();
ctx.stroke();

ctx.beginPath();
ctx.moveTo(250, 400);
ctx.lineTo(415, 315);
ctx.lineTo(375, 304);
ctx.lineTo(250, 400);
ctx.closePath();
ctx.lineWidth = 5
ctx.fillStyle = "black"
ctx.fill();
ctx.stroke();

 //ctx.arc(centerX, centerY, 0, 2*Math.PI, clockwise) //false is clockwise Standard Circle

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

// CREDITS

ctx.save();
var credits = "Kaila DeJesus, Mercedes, 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>

Comments

Post a Comment

Popular posts from this blog

Caligramme

Image
  Artist Statement     For this project, I wanted to make something inspired by one of my favorite artists, Taylor Swift. I used the pen tool to create an outline of a scarf, a large symbol in one of her most famous songs All Too Well. Using the color red in the font, I made a little nod to the album that the song is in. I also used a Times New Roman font(italicized) as it fit the emotions of the song. For the text, I used the lyrics from her song All Too Well(10 Minute Version) for the outline and the inside of the scarf. For the inside text, I made it a darker shade to emphasize the shape. For final touches, I added the title of the song largely at the top as well as the credits for the songwriting in black to stand out.
Read more

Exquisite Corpse

Image
  Artist Statement: Going off of the original photo, I wanted to keep the illustration relatively close to the original drawing. Using the pen tool for the head and body of the cat, I made a simple outline for the final illustration. I did go off with my creative liberties with the pants, shirt, and shoes. I went with an "Earth Day" T-shirt and cargo pants along with high-top sneakers to go with the cat's chill pose. On the face, I also added eyebrows to make it less creepy. I copy and pasted many elements to create symmetry like the eyes and eyebrows but kept things like the ears and arms different to not make the illustration too "cold". For the background, I wanted to create depth, in so I used the pen tool to create dirt as well as distant mountains to make it look like the cat was standing far away almost like on top of another hill. To add more to the sky, I created clouds and used the gradient tool to make sure the clouds weren't too one-dimensional. ...
Read more

Logo Icon

Image
            Final Logo Reference Image Statement:      For my fictional company, I wanted to center the logo around one of my hobbies– collecting records. I wanted to go beyond a typical logo with a record where it either was the logo entirely or part of the name. I felt that a shopping bag was appropriate as the company would be both an in-store and online record shop. I am also a big fan of the color sage green and thought it would go with the company well and provide a simple and identifiable name. I also added the company's name below for the logo to be easily tied to a business. In terms of creating the logo, I started with the front shape of the bag using the rectangle tool to create the basic shape then using the direct selection tool to modify the proportions. After, I made the record using the ellipse tool as well as the curvature tool to create the grooves of the record. I also used the ellipse tool for both the handle of the b...
Read more