Canvas Project

 

CREATED WITH CODE



REFERENCE PHOTO

This artwork is made of my own original design. I call her "Demon Girl." I made her using Adobe Dreamweaver. It is made entirely of code using quadratic curves, bezier curves, lines, and ellipses. Learning code was actually very enjoyable to me. It taught me to be very mindful of how to stack layers.


<!doctype html>

<html>

<head>

<meta charset="UTF-8">


<title> DEMON GIRL </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="600" height="800"></canvas>


<div id="display"></div>


<img src="demon girl.jpeg" alt="demon girl" id="dg" />



<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

var dg = new Image();

    dg = document.getElementById("dg")

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

// 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.drawImage(dg,0,0, canvas.width, canvas.height);



 //background

ctx.beginPath();

    ctx.rect(0,0,600,800);

ctx.closePath();

ctx.fillStyle = "rgba(89,89,108,1.00)"

ctx.fill();



//background dots Left and down and around

    ctx.beginPath();

        ctx.moveTo(10,0)

         ctx.quadraticCurveTo(20,6,20,54)

         ctx.lineTo(0,62)

         ctx.lineTo(0,0)

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

        ctx.ellipse(61,113,8,14,0,20,20,true)

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

        ctx.ellipse(101,139,9,17,0,20,20,true)

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

         ctx.ellipse(32,164,5,10,0,20,20,true)

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

        ctx.moveTo(99,166)

         ctx.quadraticCurveTo(109,176,105,196)

        ctx.lineTo(116,214)

        ctx.quadraticCurveTo(116,238,114,240)

        ctx.quadraticCurveTo(100,240,91,232)

        ctx.quadraticCurveTo(87,214,91,196)

        ctx.quadraticCurveTo(89,170,99,166)

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

        ctx.moveTo(32,247)

        ctx.lineTo(64,270)

        ctx.quadraticCurveTo(60,287,48,299)

        ctx.quadraticCurveTo(34,301,22,284)

        ctx.quadraticCurveTo(15,255,32,247)

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

        ctx.moveTo(74,286)

        ctx.lineTo(95,277)

        ctx.quadraticCurveTo(102,293,91,311)

        ctx.quadraticCurveTo(75,313,73,304)

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

         ctx.ellipse(127,325,5,10,0,20,20,true)

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

        ctx.moveTo(0,396);

        ctx.lineTo(10,408);

        ctx.lineTo(10,447);

        ctx.lineTo(0,452);

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

        ctx.moveTo(84,423);

        ctx.lineTo(97,425);

        ctx.lineTo(122,479);

        ctx.lineTo(90,505);

        ctx.quadraticCurveTo(76,470,84,423)

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

         ctx.ellipse(33,507,6,13,0,20,20,true)

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

        ctx.moveTo(70,505);

        ctx.quadraticCurveTo(84,520,75,543)

        ctx.lineTo(62,535);

        ctx.quadraticCurveTo(58,505,70,505)

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

        ctx.moveTo(257,584);

        ctx.quadraticCurveTo(269,572,283,571);

        ctx.lineTo(293,603); 

        ctx.lineTo(256,614);      

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

         ctx.ellipse(178,622,8,12,0,20,20,true)

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

         ctx.ellipse(123,629,5,13,0,20,20,true)

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

         ctx.ellipse(163,671,4,11,0,20,20,true)

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

        ctx.moveTo(42,687);

        ctx.lineTo(57,695);

        ctx.lineTo(54,719); 

        ctx.lineTo(40,725); 

        ctx.quadraticCurveTo(30,705,42,687)     

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

        ctx.moveTo(151,727);

        ctx.quadraticCurveTo(161,718,170,733)  

        ctx.quadraticCurveTo(176,750,170,766)

        ctx.lineTo(153,756);

        ctx.quadraticCurveTo(148,742,151,727)

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

        ctx.moveTo(127,800);

        ctx.quadraticCurveTo(125,789,141,780)  

        ctx.quadraticCurveTo(146,787,142,800)

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();



    ctx.beginPath();

         ctx.ellipse(288,713,8,11,0,20,20,true)

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

         ctx.ellipse(338,785,6,12,0,20,20,true)

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

         ctx.ellipse(369,786,5,11,0,20,20,true)

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

        ctx.moveTo(419,800);

        ctx.quadraticCurveTo(419,787,428,789)  

        ctx.quadraticCurveTo(439,766,447,800)

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

        ctx.moveTo(477,711);

        ctx.lineTo(490,709);

        ctx.lineTo(492,733)

        ctx.quadraticCurveTo(473,737,477,712)  

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

        ctx.moveTo(386,704);

        ctx.lineTo(407,686);

        ctx.quadraticCurveTo(424,704,406,716)  

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

        ctx.moveTo(441,664);

        ctx.quadraticCurveTo(452,645,463,651)

        ctx.quadraticCurveTo(477,665,465,688)

        ctx.quadraticCurveTo(434,685,441,664)  

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

         ctx.ellipse(555,586,5,8,0,20,20,true)

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

        ctx.moveTo(476,573);

        ctx.quadraticCurveTo(487,574,477,595)

        ctx.quadraticCurveTo(466,575,476,573)  

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

        ctx.moveTo(415,559);

        ctx.lineTo(424,559)

        ctx.quadraticCurveTo(430,576,417,596)

        ctx.quadraticCurveTo(399,586,415,559)  

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

        ctx.moveTo(347,561);

        ctx.quadraticCurveTo(355,530,359,561);

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

        ctx.moveTo(359,549);

        ctx.quadraticCurveTo(358,522,364,520);

        ctx.quadraticCurveTo(370,520,373,529);

        ctx.lineTo(375,552);

        ctx.quadraticCurveTo(367,556,359,549)

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

         ctx.ellipse(441,350,10,15,0,20,20,true)

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

         ctx.ellipse(504,376,13,15,0,20,20,true)

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

        ctx.moveTo(555,258);

        ctx.quadraticCurveTo(571,257,574,284);

        ctx.quadraticCurveTo(557,300,539,301);

        ctx.quadraticCurveTo(525,303,530,284);

        ctx.quadraticCurveTo(542,260,555,258);

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

        ctx.moveTo(478,203);

        ctx.quadraticCurveTo(499,190,492,229);

        ctx.quadraticCurveTo(475,240,478,203);

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

         ctx.ellipse(552,192,8,16,0,20,20,true)

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

         ctx.ellipse(454,137,10,20,0.2,20,20,true)

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();

    

    ctx.beginPath();

         ctx.ellipse(526,120,10,15,0,20,20,true)

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

         ctx.ellipse(307,12,5,15,0,20,20,true)

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

         ctx.ellipse(427,14,11,18,0,20,20,true)

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


    ctx.beginPath();

        ctx.moveTo(540,12);

        ctx.quadraticCurveTo(552,-9,558,6);

        ctx.quadraticCurveTo(561,18,558,29);

        ctx.quadraticCurveTo(555,31,541,32);

    ctx.closePath();

    ctx.fillStyle = "rgba(214, 202, 182,1)"

    ctx.fill();


//horns 

    //left

    ctx.beginPath();

        ctx.moveTo(169,152);

        ctx.quadraticCurveTo(179,138,192, 134);

        ctx.quadraticCurveTo(152,126,174, 68);

        ctx.quadraticCurveTo(121,124,169, 152);

    ctx.closePath();

    ctx.fillStyle = "rgba(109,11,0,1.00)";

    ctx.fill();

    ctx.stroke();

    ctx.lineWidth = 3

    

    //right

    ctx.beginPath();

        ctx.moveTo(408,132);

        ctx.quadraticCurveTo(421,137,430, 151);

        ctx.quadraticCurveTo(480,112,434, 74);

        ctx.quadraticCurveTo(449,106,408, 132);

    ctx.closePath();

    ctx.fillStyle = "rgba(109,11,0,1.00)";

    ctx.fill();

    ctx.stroke();

    ctx.lineWidth = 3

var fc4 = ctx.createRadialGradient(300,600, 50, 300, 300, 200);

    fc4.addColorStop(0, "rgba(253,168,161,1.00)")

    fc4.addColorStop(0.5, "rgba(254,129,111,1.00)")

    fc4.addColorStop(1, "rgba(221,76,57,1.00)")

//neck

    ctx.beginPath();

        ctx.moveTo(269,617);

        ctx.quadraticCurveTo(285,516, 249,508);

        ctx.quadraticCurveTo(297,461, 346,508);

        ctx.quadraticCurveTo(322,556, 343,617);

        ctx.quadraticCurveTo(312,660,269,617)

    ctx.closePath();

    ctx.fillStyle = fc4;

    ctx.fill();

    ctx.stroke();

    ctx.lineWidth = 3


//neck shading

    ctx.beginPath();

        ctx.moveTo(268,522);

        ctx.quadraticCurveTo(276,558, 305,555);

        ctx.quadraticCurveTo(324,554, 333,543);

        ctx.quadraticCurveTo(333,534, 342,516);

        ctx.quadraticCurveTo(286,449, 268,522);

    ctx.closePath();

    ctx.fillStyle = "rgba(216,79,60,1.00)";

    ctx.fill();


//shirt

    ctx.beginPath();

        ctx.moveTo(272,598);

        ctx.lineTo(151,647);

        ctx.quadraticCurveTo(285,799,463,663)

        ctx.lineTo(338,598)

        ctx.quadraticCurveTo(316,654,272,598);

    ctx.closePath();

    ctx.fillStyle = "rgba(89,23,35,1.00)";

    ctx.fill();

    ctx.stroke();

    ctx.lineWidth = 3

//ribbons

    //ribbon left

    ctx.beginPath();

        ctx.moveTo(169,358);

        ctx.quadraticCurveTo(103,288,44,344);

        ctx.quadraticCurveTo(120,326,169,358)

    ctx.closePath();

    ctx.fillStyle = "rgba(109,11,0,1.00)";

    ctx.fill();

    ctx.stroke();

    ctx.lineWidth = 3

    //ribbon right

    ctx.beginPath();

        ctx.moveTo(427,361);

        ctx.quadraticCurveTo(504,277,569,351);

        ctx.quadraticCurveTo(510,308,427,361)

    ctx.closePath();

    ctx.fillStyle = "rgba(109,11,0,1.00)";

    ctx.fill();

    ctx.stroke();

    ctx.lineWidth = 3


var bc = ctx.createRadialGradient(190,431, 1, 200, 100, 400);

    bc.addColorStop(0, "rgba(196,155,151,1.00)")

    bc.addColorStop(0.5, "rgba(169,120,113,1.00)")

    bc.addColorStop(1, "rgba(142,95,85,1.00)")

var bc2 = ctx.createRadialGradient(429,420, 1, 200, 100, 500);

    bc2.addColorStop(0, "rgba(196,155,151,1.00)")

    bc2.addColorStop(0.5, "rgba(169,120,113,1.00)")

    bc2.addColorStop(1, "rgba(142,95,85,1.00)")

var bc3 = ctx.createRadialGradient(297,10, 1, 200, 100, 500);

    bc3.addColorStop(0, "rgba(196,155,151,1.00)")

    bc3.addColorStop(0.5, "rgba(169,120,113,1.00)")

    bc3.addColorStop(1, "rgba(142,95,85,1.00)")

var bc4 = ctx.createLinearGradient(300,256,300,300)

    bc4.addColorStop(0, "rgba(196,155,151,1.00)")

    bc4.addColorStop(0.5, "rgba(169,120,113,1.00)")

    bc4.addColorStop(1, "rgba(157,114,108,1.00)")

//buns

    //bun left

    ctx.beginPath();

        ctx.ellipse(172,434,81,88,-0.5,20,20,true)

    ctx.closePath();

    ctx.fillStyle = bc;

    ctx.fill();

    ctx.stroke();

    ctx.lineWidth = 3


    //bun right

    ctx.beginPath();

        ctx.ellipse(443,444,81,92,0.48,20,20,true)

    ctx.closePath();

    ctx.fillStyle = bc2;

    ctx.fill();

    ctx.stroke();

    ctx.lineWidth = 3

//back hair

    ctx.beginPath();

        ctx.moveTo(300,470);

        ctx.quadraticCurveTo(202,448,173,378);

        ctx.quadraticCurveTo(118,225,209,146);

        ctx.quadraticCurveTo(292,61,401,146);

        ctx.quadraticCurveTo(504,244,416,379);

        ctx.quadraticCurveTo(375,427,300,470);

    ctx.closePath();

    ctx.fillStyle = bc3;

    ctx.fill();

    ctx.stroke();

    ctx.lineWidth = 3

var fc = ctx.createRadialGradient(184,494, 100, 50, 100, 300);

    fc.addColorStop(0, "rgba(255,163,155,1.00)")

    fc.addColorStop(0.5, "rgba(254,156,143,1.00)")

    fc.addColorStop(1, "rgba(253,122,104,1.00)")

var fc2 = ctx.createRadialGradient(417,481, 30, 400, 600, 200);

    fc2.addColorStop(0, "rgba(255,163,155,1.00)")

    fc2.addColorStop(0.5, "rgba(254,156,143,1.00)")

    fc2.addColorStop(1, "rgba(253,122,104,1.00)")

var fc3 = ctx.createRadialGradient(273,244, 50, 300, 300, 200);

    fc3.addColorStop(0, "rgba(253,174,161,1.00)")

    fc3.addColorStop(0.5, "rgba(253,126,108,1.00)")

    fc3.addColorStop(1, "rgba(250,167,159,1.00)")

//ears

    //outer ear left

    ctx.beginPath();

        ctx.ellipse(173,404,27,34,-0.16,20,20,true)

    ctx.closePath();

    ctx.fillStyle = fc;

    ctx.fill();

    ctx.stroke();

    ctx.lineWidth = 3


    //outer ear right

    ctx.beginPath();

        ctx.ellipse(419,402,27,35,0.4,20,20,true)

    ctx.closePath();

    ctx.fillStyle = fc2;

    ctx.fill();

    ctx.stroke();

    ctx.lineWidth = 3


    //inner ear left

    ctx.beginPath();

        ctx.ellipse(174,402,11,17,-0.18,20,20,true)

    ctx.closePath();

    ctx.fillStyle = fc;

    ctx.fill();

    ctx.stroke();

    ctx.lineWidth = 3


    //inner ear right

    ctx.beginPath();

        ctx.ellipse(424,401,11,17,0.3,20,20,true)

    ctx.closePath();

    ctx.fillStyle = fc2;

    ctx.fill();

    ctx.stroke();

    ctx.lineWidth = 3

//earrigs

    //earring left

    ctx.beginPath();

        ctx.ellipse(190,462,7,39,0,20,20,true)

    ctx.closePath();

    ctx.fillStyle = "rgba(204,150,88,1.00)";

    ctx.fill();

    ctx.stroke();

    ctx.lineWidth = 3


    //earring right

    ctx.beginPath();

        ctx.ellipse(405,462,7,39,0,20,20,true)

    ctx.closePath();

    ctx.fillStyle = "rgba(204,150,88,1.00)";

    ctx.fill();

    ctx.stroke();

    ctx.lineWidth = 3


//face

    ctx.beginPath();

        ctx.moveTo(300,139);

        ctx.quadraticCurveTo(188,148,168,264);

        ctx.bezierCurveTo(157,280,175,342, 172,369);

        ctx.bezierCurveTo(175,455,235,500,248, 511);

        ctx.quadraticCurveTo(313,558,364,494)

        ctx.bezierCurveTo(460,390,397,413, 436,295);

        ctx.quadraticCurveTo(444,142,300,139);

    ctx.closePath();

    ctx.fillStyle = fc3;

    ctx.fill();

    ctx.stroke();

    ctx.lineWidth = 3



//shading face

    //left eye top

    ctx.beginPath();

        ctx.moveTo(197,314)

        ctx.quadraticCurveTo(280,282,270,366);

        ctx.quadraticCurveTo(250,314,197,314);

    ctx.closePath();

    ctx.fillStyle = "rgba(216,79,60,1.00)";

    ctx.fill();


    //right eye top

    ctx.beginPath();

        ctx.moveTo(332,355)

        ctx.bezierCurveTo(321,343,327,269,412,316)

        ctx.quadraticCurveTo(349,304,332,355)


    ctx.closePath();

    ctx.fillStyle = "rgba(216,79,60,1.00)";

    ctx.fill();


     //left eye inner

    ctx.beginPath();

        ctx.moveTo(262,389)

        ctx.quadraticCurveTo(210,292,175,357);

        ctx.quadraticCurveTo(192,422,262,389)


    ctx.closePath();

    ctx.fillStyle = "rgba(216,79,60,1.00)";

    ctx.fill();


    //right eye inner

    ctx.beginPath();

        ctx.moveTo(338,385)

        ctx.quadraticCurveTo(386,295,419,353);

        ctx.quadraticCurveTo(407,419,338,385)


    ctx.closePath();

    ctx.fillStyle = "rgba(216,79,60,1.00)";

    ctx.fill();


    //nose

    ctx.beginPath();

        ctx.moveTo(275,499)


    ctx.closePath();

    ctx.fillStyle = "rgba(216,79,60,1.00)";

    ctx.fill();

    //lower lip

    ctx.beginPath();

        ctx.moveTo(287,507)

        ctx.quadraticCurveTo(301,522,314,507)


    ctx.closePath();

    ctx.fillStyle = "rgba(216,79,60,1.00)";

    ctx.fill();

//topleft

ctx.beginPath();

ctx.moveTo(168,294)

ctx.bezierCurveTo(230,222,307,214,300,163)

ctx.quadraticCurveTo(155,238,168,294)

ctx.fillStyle = "rgba(216,79,60,1.00)";

    ctx.fill();

//topright

ctx.beginPath();

ctx.moveTo(432,296)

ctx.bezierCurveTo(412,268,314,219,292,170)

ctx.quadraticCurveTo(450,228,432,296)

ctx.fillStyle = "rgba(216,79,60,1.00)";

    ctx.fill();

//front hair

    ctx.beginPath();

        ctx.moveTo(166,298)

        ctx.bezierCurveTo(154,262,304,190,299,166);

        ctx.bezierCurveTo(315,205,443,261,434,298);

        ctx.quadraticCurveTo(457,148,300,120);

        ctx.quadraticCurveTo(158,125,166,298);

    ctx.closePath();

    ctx.fillStyle = bc3;

    ctx.fill();

    ctx.lineWidth = 3

//front hair lines

ctx.beginPath()

ctx.moveTo(165,295)

ctx.bezierCurveTo(190,230,280,213,300,168)

ctx.bezierCurveTo(317,202,425,254,436,294)

ctx.stroke()

//front hair shading


ctx.beginPath()

ctx.moveTo(313,153)

ctx.quadraticCurveTo(372,192,435,266)

ctx.closePath();

ctx.fillStyle = "rgba(170,122,115,1.00)"

ctx.fill()


ctx.beginPath()

ctx.moveTo(303,122)

ctx.quadraticCurveTo(421,185,439,243)

ctx.quadraticCurveTo(388,176,303,122)

ctx.closePath();

ctx.fillStyle = "rgba(170,122,115,1.00)"

ctx.fill()

ctx.beginPath()

ctx.moveTo(285,139)

ctx.quadraticCurveTo(216,159,174,256)

ctx.quadraticCurveTo(214,147,285,139)

ctx.closePath();

ctx.fillStyle = "rgba(170,122,115,1.00)"

ctx.fill()

ctx.beginPath()

ctx.moveTo(267,118)

ctx.quadraticCurveTo(177,150,159,263)

ctx.quadraticCurveTo(194,149,267,118)

ctx.closePath();

ctx.fillStyle = "rgba(170,122,115,1.00)"

ctx.fill()

//mouth lines

ctx.beginPath();

ctx.moveTo(255,471)

ctx.bezierCurveTo(260,489,347,486,348,475)

ctx.stroke();

ctx.lineWidth = 3

ctx.beginPath();

ctx.moveTo(251,471)

ctx.quadraticCurveTo(257,474,261,470)

ctx.stroke();

ctx.beginPath();

ctx.moveTo(342,473)

ctx.quadraticCurveTo(347,477,353,475)

ctx.stroke();

//teeth

ctx.beginPath();

ctx.ellipse(302,484,10,20,1.5,0*Math.PI,2*Math.PI,false);

ctx.fillStyle = "rgba(245,200,194,1.00)"

ctx.fill();

//lips

//upper

ctx.beginPath();

ctx.moveTo(276,482)

ctx.bezierCurveTo(288,453,324,466,326,484)

ctx.quadraticCurveTo(317,488,300,478)

ctx.quadraticCurveTo(281,486,276,482)

ctx.fillStyle = "rgba(175,39,13,1.00)"

ctx.fill();

ctx.stroke();

//lower

ctx.beginPath();

ctx.moveTo(276,482)

ctx.bezierCurveTo(282,523,328,514,326,484)

ctx.quadraticCurveTo(312,492,300,492)

ctx.quadraticCurveTo(288,490,276,482)

ctx.fillStyle = "rgba(182,54,41,1)"

ctx.fill();

ctx.stroke();

//highlight

ctx.beginPath();

ctx.ellipse(302,500,2,7,1.7,0*Math.PI,2*Math.PI)

ctx.fillStyle = "rgba(225,80,49,1.00)"

ctx.fill();

ctx.beginPath();

ctx.ellipse(288,496,2,5,2,0*Math.PI,2*Math.PI)

ctx.fillStyle = "rgba(225,80,49,1.00)"

ctx.fill();


//nose

ctx.beginPath();

ctx.moveTo(283,454);

ctx.quadraticCurveTo(264,450,280,431)

ctx.stroke();

ctx.beginPath();

ctx.moveTo(318,429)

ctx.quadraticCurveTo(337,442,320,455)

ctx.stroke();

ctx.beginPath();

ctx.ellipse(287,451,1,3,1.85,0*Math.PI,2*Math.PI,false);

ctx.stroke();

ctx.beginPath();

ctx.ellipse(311,451,1,3,1.15,0*Math.PI,2*Math.PI,false);

ctx.stroke();

ctx.beginPath();

ctx.moveTo(290,451);

ctx.quadraticCurveTo(300,464,309,451)

ctx.stroke();

//whites of eyes

//left eye

ctx.beginPath();

ctx.moveTo(175,346)

ctx.quadraticCurveTo(196,411,260,386)

ctx.quadraticCurveTo(234,310,175,346)

ctx.fillStyle = "rgba(246,205,201,1.00)"

ctx.fill();

//left shading

ctx.beginPath();

ctx.moveTo(175,345)

ctx.lineTo(179,356)

ctx.quadraticCurveTo(220,340,249,389)

ctx.lineTo(261,386)

ctx.quadraticCurveTo(236,311,175,345)

ctx.fillStyle = "rgba(196,168,156,1.00)"

ctx.fill();


//right eye

ctx.beginPath();

ctx.moveTo(340,386)

ctx.quadraticCurveTo(406,405,417,343)

ctx.quadraticCurveTo(354,315,340,386)

ctx.fillStyle = "rgba(246,205,201,1.00)"

ctx.fill();

//right shading

ctx.beginPath();

ctx.moveTo(340,386)

ctx.lineTo(347,387)

ctx.quadraticCurveTo(375,330,413,354)

ctx.lineTo(417,345)

ctx.quadraticCurveTo(366,304,340,386)

ctx.fillStyle = "rgba(196,168,156,1.00)"

ctx.fill();

//eye shade 1

//left

ctx.beginPath();

ctx.ellipse(233,363,18,20,0,0*Math.PI,2*Math.PI,false)

ctx.fillStyle = "rgba(29,41,101,1.00)"

ctx.fill();

ctx.stroke();

//right

ctx.beginPath();

ctx.ellipse(364,362,18,20,0,0*Math.PI,2*Math.PI,false)

ctx.fillStyle = "rgba(29,41,101,1.00)"

ctx.fill();

ctx.stroke();

//eye shade 2

//left

ctx.beginPath();

ctx.ellipse(232,367,11,18,2.1,0*Math.PI,2*Math.PI,false)

ctx.fillStyle = "rgba(58,63,95,1.00)"

ctx.fill();


//right

ctx.beginPath();

ctx.ellipse(368,363,11,18,0.75,0*Math.PI,2*Math.PI,false)

ctx.fillStyle = "rgba(58,63,95,1.00)"

ctx.fill();

//eye sahde 3

//right

ctx.beginPath();

ctx.ellipse(366,367,5,18,1.35,0*Math.PI,2*Math.PI,false)

ctx.fillStyle = "rgba(96,101,123,1.00)"

ctx.fill();

//left

ctx.beginPath();

ctx.ellipse(232,369,5,18,1.9,0*Math.PI,2*Math.PI,false)

ctx.fillStyle = "rgba(96,101,123,1.00)"

ctx.fill();

//eye shade 4

//right

ctx.beginPath();

ctx.moveTo(216,363)

ctx.quadraticCurveTo(227,388,247,376)

ctx.closePath();

ctx.fillStyle = "rgba(133,135,184,1.00)"

ctx.fill();

//left

ctx.beginPath();

ctx.moveTo(350,374)

ctx.quadraticCurveTo(367,390,382,365)

ctx.closePath();

ctx.fillStyle = "rgba(133,135,184,1.00)"

ctx.fill();


//highlights of eye

//white middle unedr circles

//left

ctx.beginPath()

ctx.ellipse(233,369,5,5,0,0*Math.PI,2*Math.PI,false)

ctx.fillStyle = "rgba(241,239,253,1.00)"

ctx.fill();

//right

ctx.beginPath()

ctx.ellipse(363,369,5,5,0,0*Math.PI,2*Math.PI,false)

ctx.fillStyle = "rgba(241,239,253,1.00)"

ctx.fill();

//blue center circles

//left

ctx.beginPath()

ctx.ellipse(233,365,5,5,0,0*Math.PI,2*Math.PI,false)

ctx.fillStyle = "rgba(31,38,82,1.00)"

ctx.fill();

//right

ctx.beginPath()

ctx.ellipse(364,364,5,5,0,0*Math.PI,2*Math.PI,false)

ctx.fillStyle = "rgba(31,38,82,1.00)"

ctx.fill();

//left center cirlce

ctx.beginPath()

ctx.ellipse(233,362,3,5,0,0*Math.PI,2*Math.PI,false)

ctx.fillStyle = "rgba(241,239,253,1.00)"

ctx.fill();

//left lower circle

ctx.beginPath()

ctx.ellipse(220,374,5,5,0,0*Math.PI,2*Math.PI,false)

ctx.fillStyle = "rgba(235,222,216,1.00)"

ctx.fill();

//right middle circle

ctx.beginPath()

ctx.ellipse(364,361,3,5,0,0*Math.PI,2*Math.PI,false)

ctx.fillStyle = "rgba(241,239,253,1.00)"

ctx.fill();

//right lower circle

ctx.beginPath()

ctx.ellipse(380,373,5,5,0,0*Math.PI,2*Math.PI,false)

ctx.fillStyle = "rgba(235,222,216,1.00)"

ctx.fill();

//long highlights

//left

ctx.beginPath();

ctx.moveTo(222,355)

ctx.bezierCurveTo(222,343,183,343,190,355)

ctx.bezierCurveTo(207,354,222,359,220,359)

ctx.fillStyle = "rgba(235,222,216,1.00)"

ctx.fill();

//right

ctx.beginPath();

ctx.moveTo(376,354)

ctx.bezierCurveTo(369,348,396,339,408,351)

ctx.bezierCurveTo(409,357,399,353,376,354)

ctx.fillStyle = "rgba(235,222,216,1.00)"

ctx.fill();

//lashes and liner

//low left

ctx.beginPath()

ctx.moveTo(219,392)

ctx.quadraticCurveTo(203,388,193,376)

ctx.lineTo(180,376)

ctx.lineTo(194,381)

ctx.lineTo(186,385)

ctx.lineTo(198,385)

ctx.quadraticCurveTo(203,393,219,392)

ctx.fillStyle = "rgba(0,7,6,1)"

ctx.fill()


//up left

ctx.beginPath();

ctx.moveTo(261,387)

ctx.quadraticCurveTo(228,315,174,350)

ctx.quadraticCurveTo(152,341,154,335)

ctx.quadraticCurveTo(176,338,178,334)

ctx.quadraticCurveTo(171,331,168,324)

ctx.quadraticCurveTo(185,335,191,331)

ctx.quadraticCurveTo(182,327,183,321)

ctx.quadraticCurveTo(193,333,206,329)

ctx.quadraticCurveTo(251,326,261,387)

ctx.fill();

ctx.fillStyle = "rgba(0,7,6,1.00)"

//up right

ctx.beginPath()

ctx.moveTo(338,386)

ctx.quadraticCurveTo(368,311,420,351)

ctx.quadraticCurveTo(429,346,436,333)

ctx.quadraticCurveTo(421,336,414,333)

ctx.quadraticCurveTo(426,328,428,319)

ctx.quadraticCurveTo(406,334,402,329)

ctx.quadraticCurveTo(412,324,413,313)

ctx.quadraticCurveTo(396,330,386,329)

ctx.quadraticCurveTo(342,333,338,386)

ctx.fill();

ctx.fillStyle = "rgba(0,7,6,1)"

//low right

ctx.beginPath()

ctx.moveTo(382,391)

ctx.quadraticCurveTo(400,384,409,367)

ctx.lineTo(420,368)

ctx.lineTo(409,373)

ctx.lineTo(407,376)

ctx.lineTo(417,380)

ctx.lineTo(405,380)

ctx.quadraticCurveTo(397,393,382,391)

ctx.fill();

ctx.fillStyle = "yellow"

//eyelid lines

//left large

ctx.beginPath()

ctx.moveTo(200,314)

ctx.quadraticCurveTo(262,305,267,360)

ctx.stroke();

//left small

ctx.beginPath()

ctx.moveTo(272,330)

ctx.quadraticCurveTo(269,324,266,307)

ctx.stroke();

//right small

ctx.beginPath()

ctx.moveTo(326,336)

ctx.quadraticCurveTo(330,324,331,306)

ctx.stroke();

//right large

ctx.beginPath()

ctx.moveTo(333,362)

ctx.quadraticCurveTo(348,296,408,317)

ctx.stroke();

//eyebrows

//left

    ctx.beginPath();

ctx.moveTo(267,295)

ctx.quadraticCurveTo(268,271,252,258)

ctx.quadraticCurveTo(204,250,171,292)

ctx.quadraticCurveTo(219,264,267,295)

    ctx.fillStyle = bc4;

    ctx.fill();

ctx.stroke()

    //right

ctx.beginPath();

ctx.moveTo(335,293)

ctx.quadraticCurveTo(330,275,342,263)

ctx.quadraticCurveTo(385,245,426,293)

ctx.quadraticCurveTo(378,265,335,293)

    ctx.fillStyle = bc4;

    ctx.fill();

ctx.stroke();

    

    

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

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


// CREDITS


ctx.save();

var credits = "Susanna Triantafillou, Demon Girl, FMX 210, SP 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

Black and White to Color

Image
  FINAL PRODUCTS REFERENCE PROGRESS IMAGES after this point I went back and edited the piece so the colors were not overlapping which ends up becoming the final product. Using the reference  photo, I converted it to black and white using Adobe Photoshop. I then found three color schemes on the Adobe color wheel and utilized Photoshop’s masking tools to create three fun compositions.
Read more

Portfolio

Image
My portfolio used a pixel grid. Using the rulers function in Adobe InDesign, I placed a ruler at ever 0.5 inches both vertically and horizontally.   
Read more

Multiplicity

Image
  FINAL IMAGE INDIVIDUAL PHOTOS With the use of Photoshop's polygon lasso tool and masking layers to insert myself into the same scene 6 times. I like to call this piece "The Waiting Room.” This photoshoot was taken at the R. K. Bailey Art Studio at the University of Tampa.
Read more