Todoroki Disgraced, my final coding project!

    To make my project, I looked at this image for a reference.


    This is Todoroki from Boku no Hero Academia. He's my favorite character, so I figured I would do a portrait of him. It seemed like it would be easy because a face is just a bunch of circles, but I was in for way more than I knew when I first started working on it. All together, finishing this took roughly 8 hours and 30 minutes.

    Without further ado, here is my project, Todoroki Disgraced.


    Getting the gradient of the background and the base of the face was easy, but everything after that was a struggle. My first obstacle was to switch the gradient of the scar from going side-to-side to up and down. Then I struggled with putting lines in that didn't affect the strokes on other shapes, but others in the class had the same problem, so Professor Roundtree figured out what we were doing wrong and helped us. The Bezier curve gave me the biggest struggle of all- I didn't quite get the effect I was going for with it, but I still managed to use them to make the fire.

    As I just said, I used Bezier curves to make the fire. On his other side, I used squares to make ice. Todoroki has fire and ice because his quirk is Half-Hot, Half-Cold. In the BNHA universe, everyone is born with a special power called a quirk. His hair is half-white and half-red because his hair corresponds to the side of his body that the power is on. He is a very handsome character, but I didn't portray that very well because I'm bad at drawing and I'm extremely inexperienced at coding.

    This is all of the code for the project.

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title> -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- </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="800" height="600"></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 gradient

var gradient1 = context.createLinearGradient(0, 0, 550, 0);

gradient1.addColorStop(0, 'rgb(159 , 41, 63');

gradient1.addColorStop(1, 'rgba(243,243,243,1.00)');

context.fillStyle = gradient1;

context.fillRect(0, 0, 800, 800);

//Todoroki face

var centerX = canvas.width / 2;

var centerY = canvas.height / 2;

var radius = 250;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

context.lineWidth = 5;

context.fillStyle = 'rgb(233, 187, 161)'

context.fill();

//scar on eye (shape)

var centerX1 = 500;

var centerY1 = 250;

var radius1 = 75;

var startangle1 = 0;

var endangle1 = 2 * Math.PI;

//gradient for scar

var startX = 500;

var startY = 190;

var startRadius = 15;

var endX = 500;

var endY = 250;

var endRadius = 75;

context.beginPath();

context.arc(centerX1, centerY1, radius1, startangle1, endangle1, false);

var grd = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius); 

grd.addColorStop(0, 'rgba(200,15,76,1.00)');

grd.addColorStop(1, 'rgba(99,4,48,1.00)');

context.fillStyle = grd;

context.fill();

//right eye

var centerX2 = 500;

var centerY2 = 250;

var radius2 = 55;

var startangle2 = 0;

var endangle2 = 2 * Math.PI;

context.beginPath();

context.arc(centerX2, centerY2, radius2, startangle2, endangle2);

context.fillStyle = 'rgba(255,255,255,1.00)'

context.fill();

//right iris

var centerX3 = 500;

var centerY3 = 250;

var radius3 = 25;

var startangle3 = 0;

var endangle3 = 2 * Math.PI;

context.beginPath();

context.arc(centerX3, centerY3, radius3, startangle3, endangle3);

context.fillStyle = 'rgba(0,0,0,1.00)'

context.fill();

context.closePath();

context.lineWidth = 5;

context.strokeStyle = 'rgba(39,226,250,1.00)';

context.stroke();

//left eye

var centerX4 = 300;

var centerY4 = 240;

var radius4 = 55;

var startangle4 = 0;

var endangle4 = 2 * Math.PI;

context.beginPath();

context.arc(centerX4, centerY4, radius4, startangle4, endangle4);

context.fillStyle = 'rgba(255,255,255,1.00)'

context.fill();

//left iris

var centerX5 = 300;

var centerY5 = 240;

var radius5 = 25;

var startangle5 = 0;

var endangle5 = 2 * Math.PI;

context.beginPath();

context.arc(centerX5, centerY5, radius5, startangle5, endangle5);

context.fillStyle = 'rgba(0,0,0,1.00)'

context.fill();

context.closePath();

context.lineWidth = 5;

context.strokeStyle = 'rgba(152,160,161,1.00)';

context.stroke();

//nose

context.beginPath();

context.moveTo(400,210); 

context.lineTo(400,350);

context.lineWidth = 5; 

context.strokeStyle = 'rgba(0,0,0,1.00)';

context.stroke(); 

//mouth

var centerX6 = 400;

var centerY6 = 375

var radius6 = 70;

var startangle6 = 0.5* Math.PI;;

var endangle6 =  0.25* Math.PI;

context.beginPath();

context.arc(centerX6, centerY6, radius6, startangle6, endangle6, true);

context.lineWidth = 5;

context.strokeStyle = "rgba(30,2,30,1.00)";

context.stroke();

//white hair quad curve 1

  //starting point coordinates

var x = 130;

var y = 200;

var cpointX = 315

var cpointY = canvas.height / 2 - 300;

// ending point coordinates

var x1 = 365;

var y1 = 68;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgba(255,255,255,1.00)";

context.stroke();

//white hair quad curve 2

//beginning coordinates

var x2 = 130;

var y2 = 185;

//ending coordinates

var x3 = 365

var y3 = 75

var cpointX1 = 315

var cpointY1 = canvas.height / 2 - 300;

context.beginPath();

context.moveTo(x2, y2);

context.quadraticCurveTo(cpointX1, cpointY1, x3, y3);

context.lineWidth = 5;

context.strokeStyle = "rgba(255,255,255,1.00)";

context.stroke();

//white hair quad 3

var x4 = 145;

var y4 = 150;

//ending coordinates

var x5 = 365

var y5 = 75

var cpointX2 = 315

var cpointY2 = canvas.height / 2 - 300;

context.beginPath();

context.moveTo(x4, y4);

context.quadraticCurveTo(cpointX1, cpointY2, x5, y5);

context.lineWidth = 5;

context.strokeStyle = "rgba(255,255,255,1.00)";

context.stroke();

// white hair quad 4

var x6 = 125;

var y6 = 240;

//ending coordinates

var x7 = 365

var y7 = 75

var cpointX3 = 315

var cpointY3 = canvas.height / 2 - 300;

context.beginPath();

context.moveTo(x6, y6);

context.quadraticCurveTo(cpointX3, cpointY3, x7, y7);

context.lineWidth = 5;

context.strokeStyle = "rgba(255,255,255,1.00)";

context.stroke();

//white hair quad 5

var x8 = 125;

var y8 = 260;

//ending coordinates

var x9 = 365

var y9 = 75

var cpointX4 = 315

var cpointY4 = canvas.height / 2 - 300;

context.beginPath();

context.moveTo(x8, y8);

context.quadraticCurveTo(cpointX4, cpointY4, x9, y9);

context.lineWidth = 5;

context.strokeStyle = "rgba(255,255,255,1.00)";

context.stroke();

//white hair quad 6

var x10 = 125;

var y10 = 280;

//ending coordinates

var x11 = 365

var y11 = 75

var cpointX5 = 315

var cpointY5 = canvas.height / 2 - 300;

context.beginPath();

context.moveTo(x10, y10);

context.quadraticCurveTo(cpointX5, cpointY5, x11, y11);

context.lineWidth = 5;

context.strokeStyle = "rgba(255,255,255,1.00)";

context.stroke();

//white hair quad 7

var x12 = 125;

var y12 = 300;

var cpointX6 = 315

var cpointY6 = canvas.height / 2 - 300;

context.beginPath();

context.moveTo(x12, y12);

context.quadraticCurveTo(cpointX6, cpointY6, x11, y11);

context.lineWidth = 5;

context.strokeStyle = "rgba(255,255,255,1.00)";

context.stroke();

//white hair quad curve 8

var x13 = 125;

var y13 = 320;

var cpointX5 = 315

var cpointY5 = canvas.height / 2 - 300;

context.beginPath();

context.moveTo(x13, y13);

context.quadraticCurveTo(cpointX, cpointY, x11, y11);

context.lineWidth = 5;

context.strokeStyle = "rgba(255,255,255,1.00)";

context.stroke();

//red hair quad 1

var x14 = 350;

var y14 = 50;

//ending points

var x15 = 700;

var y15 = 250;

var cpointX7 = 450;

var cpointY7 = 25;

context.beginPath();

context.moveTo(x14, y14);

context.quadraticCurveTo(cpointX7, cpointY7, x15, y15);

context.lineWidth = 5;

context.strokeStyle = "rgba(255,3,7,1.00)";

context.stroke();

//red hair quad 2

//ending points

var x16 = 700;

var y16 = 225;

context.beginPath();

context.moveTo(x14, y14);

context.quadraticCurveTo(cpointX7, cpointY7, x16, y16);

context.lineWidth = 5;

context.strokeStyle = "rgba(255,3,7,1.00)";

context.stroke();

//red hair quad 3

//ending points

var x17 = 700;

var y17 = 210;

context.beginPath();

context.moveTo(x14, y14);

context.quadraticCurveTo(cpointX7, cpointY7, x17, y17);

context.lineWidth = 5;

context.strokeStyle = "rgba(255,3,7,1.00)";

context.stroke();

//red hair quad 4

//ending points

  var x18 = 700;

  var y18 = 190;

context.beginPath();

context.moveTo(x14, y14);

context.quadraticCurveTo(cpointX7, cpointY7, x18, y18);

context.lineWidth = 5;

context.strokeStyle = "rgba(255,3,7,1.00)";

context.stroke();

//red hair quad 5

//ending points

var x19 = 700;

var y19 = 275;

var cpointX8 = 460;

var cpointY8 = 25;

context.beginPath();

context.moveTo(x14, y14);

context.quadraticCurveTo(cpointX8, cpointY8, x19, y19);

context.lineWidth = 5;

context.strokeStyle = "rgba(255,3,7,1.00)";

context.stroke();

//red hair quad 6

// ending points

var x20 = 700;

var y20 = 300;

context.beginPath();

context.moveTo(x14, y14);

context.quadraticCurveTo(cpointX8, cpointY8, x20, y20);

context.lineWidth = 5;

context.strokeStyle = "rgba(255,3,7,1.00)";

context.stroke();

//red hair quad 7

//ending points

var x21 = 700;

var y21 = 315;

context.beginPath();

context.moveTo(x14, y14);

context.quadraticCurveTo(cpointX8, cpointY8, x21, y21);

context.lineWidth = 5;

context.strokeStyle = "rgba(255,3,7,1.00)";

context.stroke();

//red hair quad 8

//starting points

var x22 = 350;

var y22 = 55;

//ending points

 var x23 = 700;

 var y23 = 330;

context.beginPath();

context.moveTo(x22, y22);

context.quadraticCurveTo(cpointX8, cpointY8, x23, y23);

context.lineWidth = 5;

context.strokeStyle = "rgba(255,3,7,1.00)";

context.stroke();

//red hair quad 9

//starting points

var x24 = 350;

var y24 = 60;

//ending points

var x25 = 700;

var y25 = 345;

context.beginPath();

context.moveTo(x24, y24);

context.quadraticCurveTo(cpointX8, cpointY8, x25, y25);

context.lineWidth = 5;

context.strokeStyle = "rgba(255,3,7,1.00)";

context.stroke();

//red hair quad 10

//starting points

var x26 = 350;

var y26 = 65;

//ending points

var x27 = 700;

var y27 = 360;

context.beginPath();

context.moveTo(x26, y26);

context.quadraticCurveTo(cpointX8, cpointY8, x27, y27);

context.lineWidth = 5;

context.strokeStyle = "rgba(255,3,7,1.00)";

context.stroke();

//red hair quad 11

//starting points

var x28 = 350;

var y28 = 70;

//ending points

var x29 = 700;

var y29 = 375;

context.beginPath();

context.moveTo(x28, y28);

context.quadraticCurveTo(cpointX8, cpointY8, x29, y29);

context.lineWidth = 5;

context.strokeStyle = "rgba(255,3,7,1.00)";

context.stroke();

//red hair quad 12

// starting points

var x30 = 350;

var y30 = 75;

//ending points

var x31 = 700;

var y31 = 390;

context.beginPath();

context.moveTo(x30, y30);

context.quadraticCurveTo(cpointX8, cpointY8, x31, y31);

context.lineWidth = 5;

context.strokeStyle = "rgba(255,3,7,1.00)";

context.stroke();

//red hair quad 13

//starting points

var x32 = 350;

var y32 = 80;

//ending points

var x33 = 700;

var y33 = 405;

context.beginPath();

context.moveTo(x32, y32);

context.quadraticCurveTo(cpointX8, cpointY8, x33, y33);

context.lineWidth = 5;

context.strokeStyle = "rgba(255,3,7,1.00)";

context.stroke();

//first ice cube

var x34 = 75;

var y34 = 75;

var width1 = 25;

var height1 = 25;

context.beginPath();

context.rect(x34, y34, width1, height1);

context.lineWidth = 10;

context.fillStyle = 'rgba(53,218,255,1.00)';

context.strokeStyle = 'rgba(0,144,255,1.00)';

context.fill();

context.stroke();

//second ice cube

var x35 = 65;

var y35 = 65;

context.beginPath();

context.rect(x35, y35, width1, height1);

context.lineWidth = 10;

context.fillStyle = 'rgba(53,218,255,1.00)';

context.strokeStyle = 'rgba(0,144,255,1.00)';

context.fill();

context.stroke();

//third ice cube

var x36 = 90;

var y36 = 90;

context.beginPath();

context.rect(x36, y36, width1, height1);

context.lineWidth = 10;

context.fillStyle = 'rgba(53,218,255,1.00)';

context.strokeStyle = 'rgba(0,144,255,1.00)';

context.fill();

context.stroke();

//fourth ice cube

var x37 = 145;

var y37 = 35;

context.beginPath();

context.rect(x37, y37, width1, height1);

context.lineWidth = 10;

context.fillStyle = 'rgba(53,218,255,1.00)';

context.strokeStyle = 'rgba(0,144,255,1.00)';

context.fill();

context.stroke();

//fifth ice cube

var x38 = 135;

var y38 = 45;

context.beginPath();

context.rect(x38, y38, width1, height1);

context.lineWidth = 10;

context.fillStyle = 'rgba(53,218,255,1.00)';

context.strokeStyle = 'rgba(0,144,255,1.00)';

context.fill();

context.stroke();

//first fire bezier curve

// starting point coordinates

var x39 = 620;

var y39 = 65;

// control point 1 coordinates ( magnet )

var cpointX9 = 575;

var cpointY9 = 170;

// control point 2 coordinates ( magnet )

var cpointX10 = 680;

var cpointY10 = 15; 

// ending point coordinates 

var x40 = 640;

var y40 = 140;

context.beginPath();

context.moveTo(x39, y39);

context.bezierCurveTo(cpointX9, cpointY9, cpointX10, cpointY10, x40, y40);

context.lineWidth = 6;

context.strokeStyle = "rgba(255,0,1,1.00)";

context.lineCap = 'round' 

context.stroke();

//second fire bezier curve

var x41 = 640;

var y41 = 65;

// control point 1 coordinates ( magnet )

var cpointX11 = 595;

var cpointY11 = 170;

// control point 2 coordinates ( magnet )

var cpointX12 = 690;

var cpointY12 = 15;

// ending point coordinates 

var x42 = 655;

var y42 = 140;

context.beginPath();

context.moveTo(x41, y41);

context.bezierCurveTo(cpointX11, cpointY9, cpointX12, cpointY12, x42, y42);

context.lineWidth = 6;

context.strokeStyle = "rgba(255,0,1,1.00)";

context.lineCap = 'round' 

context.stroke();

//third fire bezier curve

var x43 = 660;

var y43 = 65;

// control point 1 coordinates ( magnet )

var cpointX13 = 615;

var cpointY13 = 170;

// control point 2 coordinates ( magnet )

var cpointX14 = 700;

var cpointY14 = 15; 

// ending point coordinates 

var x44 = 665;

var y44 = 140;

context.beginPath();

context.moveTo(x43, y43);

context.bezierCurveTo(cpointX13, cpointY13, cpointX14, cpointY14, x44, y44);

context.lineWidth = 6;

context.strokeStyle = "rgba(255,0,1,1.00)";

context.lineCap = 'round' 

context.stroke();

//fourth fire bezier curve

var x45 = 660;

var y45 = 30;

// control point 1 coordinates ( magnet )

var cpointX15 = 615;

var cpointY15 = 130;

// control point 2 coordinates ( magnet )

var cpointX16 = 700;

var cpointY16 = 5; 

// ending point coordinates 

var x46 = 665;

var y46 = 120;

context.beginPath();

context.moveTo(x45, y45);

context.bezierCurveTo(cpointX15, cpointY15, cpointX16, cpointY16, x46, y46);

context.lineWidth = 6;

context.strokeStyle = "rgba(255,115,32,0.90)";

context.lineCap = 'round' 

context.stroke();

//fifth fire bezier curve

var x47 = 640;

var y47 = 30;

// control point 1 coordinates ( magnet )

var cpointX17 = 610;

var cpointY17 = 120;

// control point 2 coordinates ( magnet )

var cpointX18 = 700;

var cpointY18 = 5; 

// ending point coordinates 

var x48 = 645;

var y48 = 120;

context.beginPath();

context.moveTo(x47, y47);

context.bezierCurveTo(cpointX17, cpointY17, cpointX18, cpointY18, x48, y48);

context.lineWidth = 6;

context.strokeStyle = "rgba(255,115,32,0.90)";

context.lineCap = 'round' 

context.stroke();

//sixth fire bezier curve

var x49 = 620;

var y49 = 30;

// control point 1 coordinates ( magnet )

var cpointX19 = 605;

var cpointY19 = 120;

// control point 2 coordinates ( magnet )

var cpointX20 = 700;

var cpointY20 = 5; 

// ending point coordinates 

var x50 = 625;

var y50 = 120;

context.beginPath();

context.moveTo(x49, y49);

context.bezierCurveTo(cpointX19, cpointY19, cpointX20, cpointY20, x50, y50);

context.lineWidth = 6;

context.strokeStyle = "rgba(255,115,32,0.90)";

context.lineCap = 'round' 

context.stroke();

//seventh fire bezier curve

var x51 = 620;

var y51 = 10;

// control point 1 coordinates ( magnet )

var cpointX21 = 590;

var cpointY21 = 100;

// control point 2 coordinates ( magnet )

var cpointX22 = 700;

var cpointY22 = 5; 

// ending point coordinates 

var x52 = 625;

var y52 = 90;

context.beginPath();

context.moveTo(x51, y51);

context.bezierCurveTo(cpointX21, cpointY21, cpointX22, cpointY22, x52, y52);

context.lineWidth = 6;

context.strokeStyle = "rgba(255,220,34,0.70)";

context.lineCap = 'round' 

context.stroke();

//eighth fire bezier curve

var x53 = 630;

var y53 = 10;

// control point 1 coordinates ( magnet )

var cpointX23 = 610;

var cpointY23 = 100;

// control point 2 coordinates ( magnet )

var cpointX24 = 710;

var cpointY24 = 5; 

// ending point coordinates 

var x54 = 645;

var y54 = 90;

context.beginPath();

context.moveTo(x53, y53);

context.bezierCurveTo(cpointX23, cpointY23, cpointX24, cpointY24, x54, y54);

context.lineWidth = 6;

context.strokeStyle = "rgba(255,220,34,0.70)";

context.lineCap = 'round' 

context.stroke();

//ninth fire bezier curve

var x55 = 640;

var y55 = 10;

// control point 1 coordinates ( magnet )

var cpointX25 = 630;

var cpointY25 = 100;

// control point 2 coordinates ( magnet )

var cpointX26 = 730;

var cpointY26 = 5; 

// ending point coordinates 

var x56 = 645;

var y56 = 90;

context.beginPath();

context.moveTo(x55, y55);

context.bezierCurveTo(cpointX25, cpointY25, cpointX25, cpointY26, x56, y56);

context.lineWidth = 6;

context.strokeStyle = "rgba(255,220,34,0.70)";

context.lineCap = 'round' 

context.stroke();

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

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

// CREDITS

context.save();

var credits = "Lauren Pubillones, Todoroki Disgraced, FMX 210-1, FA 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>


Comments

Post a Comment

Popular posts from this blog

Somewhere Project

Image
      I Photoshopped myself into a screenshot from the show Criminal Minds. It's not my favorite show ever, but it is my favorite realistic show (my actual favorite is an anime which I felt didn't count for this project). Spencer Reid is my favorite character, so I made sure to find an image with him in the center.     I knew I needed one of them either in the plane or sitting around the table for a case debriefing instead of a scene of them chasing the suspect because I don't have a prop gun to use and there was no way I was going to edit one in. I couldn't find any screenshots with an empty space next to Spencer (the agent in the forefront, if you're not familiar with the show), so I took on the extra challenge of covering up Kate (the agent who's sitting next to him). I didn't feel the need to mess with the agents sitting in the back- Aaron to the left and Derek to the right- because having them included makes the scene feel more whole and realistic.   ...
Read more

Autoscopy Project

Image
      For this project I had to take a photo of myself and edit it however I wanted to. Here is the photo I took specifically for this project.     I'm not making a very pleasant expression here, but it won't show up in the picture for reasons that will quickly become apparent. I downloaded lots of pictures that I could have used, but these are the ones I chose.     This is the final image, which took me 3ish hours to make.     There were a lot of different themes I was interested in doing, but I knew for sure that I wanted at least 3 sets of eyes. I ended up with 4 pairs by accident, but I didn't mind it enough to spend energy fixing it. I think if I wasn't doing this for a grade, I would've gone a lot more crazy with how much I did to the image. There's something appealing to me in a messy image, an image where there's so much going on that you can spend a while looking at it to make sure you're not missing anything.     I love t...
Read more

Business Cards

Image
      Yikes, so these didn't turn out great. I wasn't sure how to get the colored logos from the work I'd already submitted onto the document so I cropped them from the image on my blog and placed them in frames. They look a lot better as JPEGs on this blog than they did in InDesign which is a relief.                    Unfortunately on the last two you can see where I cropped it out of the image from a previous assignment. If it weren't for the lines on the image, I think it would be a good design. I did different shapes for each background to make them all unique. The fake number 42-42-564 comes from the show Soul Eater (it's the number they write on mirrors to call Lord Death) and the website is actually my Tumblr blog URL. You can follow me if you want, haha.
Read more