Canvas Project

 


Artist Statement:

My art is inspired by my hobbies and passions. My creations are unique because they reflect me and there is not anyone exactly like me. I usually like to express what I am interested in, so I can give others the opportunity to try and enjoy my passions. I think it is important to share what brings joy in someone's life. 

In this project, I created a scuba diver in its natural habitat. I currently am a scuba diver intern at the Clearwater Marine Aquarium. I am there 5 days a week, so lately it has been my life. I enjoy it very much and I think everyone should at least try it once in their life. I hope with this piece of artwork it can inspire others to change up their life and try something unique. This was significant to me because my future career goal is to be an underwater photographer. 

This project was very challenging for me because I have never coded in my life. I appreciate the people who code all the time even more because it takes a lot of time and patience. This project taught me how to be more patient and use as many resources as possible. I had a few bumps in the road, but I managed to solve those issues eventually. I am happy I was able to learn this new technique of creating art. 

Code:


<!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="600" 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


//Ocean BACKGROUND

      context.beginPath();

      context.rect(0, 0, 600, 600);

      var grd = context.createLinearGradient(300, 0, 300, 500);

      grd.addColorStop(0, "rgb(154,230,245)");   

      grd.addColorStop(.85, "rgb(15,140,200)");

   grd.addColorStop(1, "rgb(15,140,230)");


      context.fillStyle = grd;

      context.fill();

   

//Tank

var x=225;

var y=265;

var width = 22

var height= 85;


context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgb(0,0,200)';

context.strokeStyle = 'rgb(0,0,200)';

context.fill();

context.stroke();

 


//Left UPPER ARM

      context.beginPath();

      context.moveTo(185, 240);


      context.quadraticCurveTo(150, 200, 210, 270);

   context.quadraticCurveTo(220, 290, 205, 280);

   context.quadraticCurveTo(130, 200, 185, 240);

   

      context.fillStyle = "rgb(0,0,0)";

   context.fill();


      context.lineWidth = 3;

      context.strokeStyle = "rgb(0,0,0";

      context.stroke();

   context.lineJoin = 'round';

   

     

//Left LOWER ARM

      context.beginPath();

      context.moveTo(210, 275);


      context.quadraticCurveTo(230, 270, 275, 272);

   context.quadraticCurveTo(290, 280, 283, 279);

   context.quadraticCurveTo(190, 295, 210, 275);

      

      context.fillStyle = "rgb(0,0,0)";

   context.fill();


      context.lineWidth = 3;

      context.strokeStyle = "rgb(0,0,0";

      context.stroke();

   context.lineJoin = 'round';


//Body


var x=250;

var y=260;

var width = 75

var height= 120;


context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgb(0,0,0)';

context.strokeStyle = 'rgb(0,0,0)';

context.fill();

context.stroke();


//Right Arm


var x=330;

var y=270;

var width = 10

var height= 80;


context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgb(0,0,0)';

context.strokeStyle = 'rgb(0,0,0)';

context.fill();

context.stroke();

//Right Leg


var x=303;

var y=380;

var width = 22

var height= 80;


context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgb(0,0,0)';

context.strokeStyle = 'rgb(0,0,0)';

context.fill();

context.stroke();


//Left Leg


var x=250;

var y=380;

var width = 22

var height= 80;


context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgb(0,0,0)';

context.strokeStyle = 'rgb(0,0,0)';

context.fill();

context.stroke();


//Head


var centerXEricHead = canvas.width / 2.08;

var centerYEricHead = canvas.height / 3.0;


context.beginPath();

for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {

    xPos = centerXEricHead - (58 * Math.sin(i)) * Math.sin(1 * Math.PI) + (65 * Math.cos(i)) * Math.cos(1 * Math.PI);

    yPos = centerYEricHead + (79 * Math.cos(i)) * Math.sin(1 * Math.PI) + (58 * Math.sin(i)) * Math.cos(1 * Math.PI);


    if (i == 0) {

        context.moveTo(xPos, yPos);

    } else {

        context.lineTo(xPos, yPos);

    }

}

context.lineWidth = 1;

context.strokeStyle = "#232323";

context.stroke();

context.fillStyle="#fbd9b4";

context.fill();

context.closePath();

     

      //Right Eye



var centerXStanRightEye = canvas.width / 2.25;

var centerYStanRightEye = canvas.height / 3.0;


      context.beginPath();

for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {

    xPos = centerXStanRightEye - (18 * Math.sin(i)) * Math.sin(0.71 * Math.PI) + (20 * Math.cos(i)) * Math.cos(0.71 * Math.PI);

    yPos = centerYStanRightEye + (22 * Math.cos(i)) * Math.sin(0.71 * Math.PI) + (17 * Math.sin(i)) * Math.cos(0.71 * Math.PI);


    if (i == 0) {

        context.moveTo(xPos, yPos);

    } else {

        context.lineTo(xPos, yPos);

    }

}


context.lineWidth = 2.5;

context.strokeStyle = "#232323";

context.stroke();

context.fillStyle="white";

context.fill();

context.closePath();



//Left Eye

var centerXStanLeftEye = canvas.width / 1.95;

var centerYStanLeftEye = canvas.height / 3.0;


context.beginPath();

for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {

    xPos = centerXStanLeftEye - (17 * Math.sin(i)) * Math.sin(1.27 * Math.PI) + (22 * Math.cos(i)) * Math.cos(1.27 * Math.PI);

    yPos = centerYStanLeftEye + (20 * Math.cos(i)) * Math.sin(1.27 * Math.PI) + (19 * Math.sin(i)) * Math.cos(1.27 * Math.PI);


    if (i == 0) {

        context.moveTo(xPos, yPos);

    } else {

        context.lineTo(xPos, yPos);

    }

}

context.lineWidth = 2.5;

context.strokeStyle = "#232323";

context.stroke();

context.fillStyle="white";

context.fill();

context.closePath();

     


//Left Eye Pupil


      var centerXStanLeftEyePupil = canvas.width / 2;

      var centerYStanLeftEyePupil = canvas.height / 3.0;

      var radiusStanLeftEyePupil = 1.9;


      context.beginPath();

      context.arc(centerXStanLeftEyePupil, centerYStanLeftEyePupil, radiusStanLeftEyePupil, 0, 2 * Math.PI, false);

      context.lineWidth = 6;

      context.strokeStyle = 'black';

      context.stroke();    

      context.fillStyle = 'black';

      context.fill();

     

      //Right Eye Pupil


      var centerXStanRightEyePupil = canvas.width / 2.17;

      var centerYStanRightEyePupil = canvas.height / 3.0;

      var radiusStanRightEyePupil = 1.9;


      context.beginPath();

      context.arc(centerXStanRightEyePupil, centerYStanRightEyePupil, radiusStanRightEyePupil, 0, 2 * Math.PI, false);

      context.fillStyle = 'black';

      context.fill();

      context.lineWidth = 6;

      context.strokeStyle = 'black';

      context.stroke();

//Cap

       

var centerX = canvas.width / 2.08;

        var centerY = canvas.height / 3.4;

        var radius = 60;

        var startangle = 0;

        var endangle =  1* Math.PI;


       context.beginPath();

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

        context.fillStyle = "black";

context.fill();

      context.lineWidth = 5;

        context.strokeStyle = "blue";

        context.stroke();

     

//Goggles


var x=230;

var y=168;

var width = 118

var height= 5;


context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgb(0,0,200)';

context.strokeStyle = 'rgb(0,0,200)';

context.fill();

context.stroke();

//Googles Lense

       

var centerX = canvas.width / 2.08;

        var centerY = canvas.height / 3.4;

        var radius = 60;

        var startangle = 0;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        //context.fillStyle = "red";

      context.lineWidth = 7;

        context.strokeStyle = "black";

        context.stroke();

//Regulator


      var centerXStanRightEyePupil = canvas.width / 2.08;

      var centerYStanRightEyePupil = canvas.height / 2.5;

      var radiusStanRightEyePupil = 10;


      context.beginPath();

      context.arc(centerXStanRightEyePupil, centerYStanRightEyePupil, radiusStanRightEyePupil, 0, 2 * Math.PI, false);

      context.fillStyle = 'black';

      context.fill();

      context.lineWidth = 15;

      context.strokeStyle = 'black';

      context.stroke();

     

//Hand


      var centerXStanRightEyePupil = canvas.width / 1.82;

      var centerYStanRightEyePupil = canvas.height / 1.7;

      var radiusStanRightEyePupil = 10;


      context.beginPath();

      context.arc(centerXStanRightEyePupil, centerYStanRightEyePupil, radiusStanRightEyePupil, 0, 2 * Math.PI, false);

      context.fillStyle = 'black';

      context.fill();

      context.lineWidth = 15;

      context.strokeStyle = 'black';

      context.stroke();


//Belt


var x=249;

var y=360;

var width = 77

var height= 5;


context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgb(0,70,100)';

context.strokeStyle = 'rgb(0,70,100)';

context.fill();

context.stroke();

//Pocket


var x=282;

var y=360;

var width = 10

var height= 5;


context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgb(0,0,100)';

context.strokeStyle = 'rgb(0,0,100)';

context.fill();

context.stroke();

//Regulator   

    

    context.beginPath();

    context.moveTo(230,265)

    context.lineTo(315, 230);

context.lineWidth = 8; // STROKE WIDTH

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

context.stroke(); // STROKE

//BUBBLE ONE

   var centerX = canvas.width / 1.7;

   var centerY = canvas.height / 2.6;

     var radius = 15;


   context.beginPath();

   context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

   

   context.fillStyle = "rgba(161,242,255,.5)";

   context.fill();

   context.lineWidth = 1.5;

   context.strokeStyle = "rgba(145,213,242,.5)";

   context.stroke();


//BUBBLE ONE HIGHLIGHT

   var x = canvas.width / 1.7;

   var y = canvas.height / 2.6;

   var radius = 12;

   var startAngle = 1.6 * Math.PI;

   var endAngle = 1.9 * Math.PI;

   var counterClockwise = false;


   context.beginPath();

   context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

   context.lineWidth = 2;

   context.strokeStyle = "rgba(250,250,250,.9)";

   context.stroke();

   

//BUBBLE TWO

   var centerX = canvas.width / 1.6;

   var centerY = canvas.height / 2.9;

     var radius = 13;


   context.beginPath();

   context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

   

   context.fillStyle = "rgba(161,242,255,.5)";

   context.fill();

   context.lineWidth = 1.5;

   context.strokeStyle = "rgba(145,213,242,.5)";

   context.stroke();


//BUBBLE TWO HIGHLIGHT

   var x = canvas.width / 1.6;

   var y = canvas.height / 2.9;

   var radius = 10;

   var startAngle = 1.6 * Math.PI;

   var endAngle = 1.9 * Math.PI;

   var counterClockwise = false;


   context.beginPath();

   context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

   context.lineWidth = 2;

   context.strokeStyle = "rgba(250,250,250,.9)";

   context.stroke();

   

//BUBBLE THREE

   var centerX = canvas.width / 1.55;

   var centerY = canvas.height / 3.5;

     var radius = 10;


   context.beginPath();

   context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

   

   context.fillStyle = "rgba(161,242,255,.5)";

   context.fill();

   context.lineWidth = 1.5;

   context.strokeStyle = "rgba(145,213,242,.5)";

   context.stroke();


//BUBBLE THREE HIGHLIGHT

   var x = canvas.width / 1.55;

   var y = canvas.height / 3.5;

   var radius = 7;

   var startAngle = 1.6 * Math.PI;

   var endAngle = 1.9 * Math.PI;

   var counterClockwise = false;


   context.beginPath();

   context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

   context.lineWidth = 2;

   context.strokeStyle = "rgba(250,250,250,.9)";

   context.stroke();

   

//BUBBLE FOUR

   var centerX = canvas.width / 1.55;

   var centerY = canvas.height / 4.2;

     var radius = 11;


   context.beginPath();

   context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

   

   context.fillStyle = "rgba(161,242,255,.5)";

   context.fill();

   context.lineWidth = 1.5;

   context.strokeStyle = "rgba(145,213,242,.5)";

   context.stroke();


//BUBBLE FOUR HIGHLIGHT

   var x = canvas.width / 1.55;

   var y = canvas.height / 4.2;

   var radius = 8;

   var startAngle = 1.6 * Math.PI;

   var endAngle = 1.9 * Math.PI;

   var counterClockwise = false;


   context.beginPath();

   context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

   context.lineWidth = 2;

   context.strokeStyle = "rgba(250,250,250,.9)";

   context.stroke();

            

//BUBBLE SEVEN

   var centerX = canvas.width / 1.51;

   var centerY = canvas.height / 5.8;

     var radius = 20;


   context.beginPath();

   context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

   

   context.fillStyle = "rgba(161,242,255,.5)";

   context.fill();

   context.lineWidth = 1.5;

   context.strokeStyle = "rgba(145,213,242,.5)";

   context.stroke();


//BUBBLE SEVEM HIGHLIGHT

   var x = canvas.width / 1.51;

   var y = canvas.height / 5.8;

   var radius = 17;

   var startAngle = 1.6 * Math.PI;

   var endAngle = 1.9 * Math.PI;

   var counterClockwise = false;


   context.beginPath();

   context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

   context.lineWidth = 2;

   context.strokeStyle = "rgba(250,250,250,.9)";

   context.stroke();

      

//BUBBLE EIGHT

   var centerX = canvas.width / 1.7;

   var centerY = canvas.height / 5.2;

     var radius = 11;


   context.beginPath();

   context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

   

   context.fillStyle = "rgba(161,242,255,.5)";

   context.fill();

   context.lineWidth = 1.5;

   context.strokeStyle = "rgba(145,213,242,.5)";

   context.stroke();


//BUBBLE EIGHT HIGHLIGHT

   var x = canvas.width / 1.7;

   var y = canvas.height / 5.15;

   var radius = 8;

   var startAngle = 1.6 * Math.PI;

   var endAngle = 1.9 * Math.PI;

   var counterClockwise = false;


   context.beginPath();

   context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

   context.lineWidth = 2;

   context.strokeStyle = "rgba(250,250,250,.9)";

   context.stroke();

   

//BUBBLE NINE

   var centerX = canvas.width / 7;

   var centerY = canvas.height / 1.01;

     var radius = 6;


   context.beginPath();

   context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

   

   context.fillStyle = "rgba(161,242,255,.5)";

   context.fill();

   context.lineWidth = 1.5;

   context.strokeStyle = "rgba(145,213,242,.5)";

   context.stroke();


//BUBBLE NINE HIGHLIGHT

   var x = canvas.width / 7;

   var y = canvas.height / 1.01;

   var radius = 3;

   var startAngle = 1.6 * Math.PI;

   var endAngle = 1.9 * Math.PI;

   var counterClockwise = false;


   context.beginPath();

   context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

   context.lineWidth = 2;

   context.strokeStyle = "rgba(250,250,250,.9)";

   context.stroke();


//Stingray tail   

    

    context.beginPath();

    context.moveTo(450,490)

    context.lineTo(500, 420);

context.lineWidth = 5; // STROKE WIDTH

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

context.stroke(); // STROKE

//Stingray

context.beginPath(); // begin a shape

 

context.moveTo(450,372); // point A coordinates

context.lineTo(550, 372); // point B coords

context.lineTo(550,470); // point C coords

context.closePath(); // close the shape

context.lineWidth = 15; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle = "rgba(0,0,0,0.6)"; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "rgba(0,0,0,0.9)";

context.fill();

// Stingray Eye

 var centerXStanRightEyePupil = canvas.width / 1.15;

      var centerYStanRightEyePupil = canvas.height / 1.55;

      var radiusStanRightEyePupil = 4;


      context.beginPath();

      context.arc(centerXStanRightEyePupil, centerYStanRightEyePupil, radiusStanRightEyePupil, 0, 2 * Math.PI, false);

      context.fillStyle = 'black';

      context.fill();

      context.lineWidth = 15;

      context.strokeStyle = 'white';

      context.stroke();

     

// Stingray Eye 2

 var centerXStanRightEyePupil = canvas.width / 1.12;

      var centerYStanRightEyePupil = canvas.height / 1.5;

      var radiusStanRightEyePupil = 4;


      context.beginPath();

      context.arc(centerXStanRightEyePupil, centerYStanRightEyePupil, radiusStanRightEyePupil, 0, 2 * Math.PI, false);

      context.fillStyle = 'black';

      context.fill();

      context.lineWidth = 15;

      context.strokeStyle = 'white';

      context.stroke();

    

//Jellyfish

       

var centerX = canvas.width / 4.98;

        var centerY = canvas.height / 1.5;

        var radius = 50;

        var startangle = 0;

        var endangle =  1* Math.PI;


       context.beginPath();

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

        context.fillStyle = 'rgb(0,100,200)';

context.fill();

      context.lineWidth = 5;

//Jellyfish tentacle  

var x= 150;

var y= 408;

var x1= 150;

var y1= 470;    

    

context.beginPath();

context.moveTo(x,y);

context.lineTo(x1,y1);

context.lineWidth = 15;

context.strokeStyle = 'rgba(0,200,300,0.43)';

context.lineCap = 'round';

context.stroke();

//Jellyfish tentacle  

var x= 90;

var y= 408;

var x1= 90;

var y1= 470;    

    

context.beginPath();

context.moveTo(x,y);

context.lineTo(x1,y1);

context.lineWidth = 15;

context.strokeStyle = 'rgba(0,200,300,0.43)';

context.lineCap = 'round';

context.stroke();

//Jellyfish tentacle  

var x= 120;

var y= 408;

var x1= 120;

var y1= 470;    

    

context.beginPath();

context.moveTo(x,y);

context.lineTo(x1,y1);

context.lineWidth = 15;

context.strokeStyle = 'rgba(0,200,300,0.43)';

context.lineCap = 'round';

context.stroke();

//BUBBLE THREE HIGHLIGHT

   var x = canvas.width / 4.55;

   var y = canvas.height / 1.65;

   var radius = 7;

   var startAngle = 1.6 * Math.PI;

   var endAngle = 1.9 * Math.PI;

   var counterClockwise = false;


   context.beginPath();

   context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

   context.lineWidth = 5;

   context.strokeStyle = "rgba(250,250,250,.9)";

   context.stroke();

   

//Camera


var x=110;

var y=140;

var width = 45

var height= 35;


context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgb(0,0,0)';

context.strokeStyle = 'rgb(0,0,0)';

context.fill();

context.stroke();


//Camera Stick  

var x= 120;

var y= 160;

var x1= 165;

var y1= 230;    

    

context.beginPath();

context.moveTo(x,y);

context.lineTo(x1,y1);

context.lineWidth = 10;

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

context.lineCap = 

context.stroke();

//Lense


      var centerXStanRightEyePupil = canvas.width / 4.48;

      var centerYStanRightEyePupil = canvas.height / 3.8;

      var radiusStanRightEyePupil = 7;


      context.beginPath();

      context.arc(centerXStanRightEyePupil, centerYStanRightEyePupil, radiusStanRightEyePupil, 0, 2 * Math.PI, false);

      context.fillStyle = 'white';

      context.fill();

      context.lineWidth = 15;

      context.strokeStyle = 'white';

      context.stroke();

     

//Lense 2


      var centerXStanRightEyePupil = canvas.width / 4.48;

      var centerYStanRightEyePupil = canvas.height / 3.8;

      var radiusStanRightEyePupil = 3;


      context.beginPath();

      context.arc(centerXStanRightEyePupil, centerYStanRightEyePupil, radiusStanRightEyePupil, 0, 2 * Math.PI, false);

      context.fillStyle = 'black';

      context.fill();

      context.lineWidth = 15;

      context.strokeStyle = 'black';

      context.stroke();

     

//Flash


var x=110;

var y=135;

var width = 5

var height= 5;


context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'white';

context.strokeStyle = 'white';

context.fill();

context.stroke();

//Red Flash


var x=154;

var y=140;

var width = 1.5

var height= 1.5;


context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'red';

context.strokeStyle = 'red';

context.fill();

context.stroke();


//Flash 

var x= 95;

var y= 120;

var x1= 104;

var y1= 128;    

    

context.beginPath();

context.moveTo(x,y);

context.lineTo(x1,y1);

context.lineWidth = 6;

context.strokeStyle = 'yellow';

context.lineCap = 'round';

context.stroke();

//Flash 

var x= 113;

var y= 120;

var x1= 113;

var y1= 126;    

    

context.beginPath();

context.moveTo(x,y);

context.lineTo(x1,y1);

context.lineWidth = 6;

context.strokeStyle = 'yellow';

context.lineCap = 'round';

context.stroke();

//Flash 

var x= 122;

var y= 129;

var x1= 129;

var y1= 120;    

    

context.beginPath();

context.moveTo(x,y);

context.lineTo(x1,y1);

context.lineWidth = 6;

context.strokeStyle = 'yellow';

context.lineCap = 'round';

context.stroke();

//Right Fin


var x=303;

var y=460;

var width = 22

var height= 55;


context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgb(200,0,0)';

context.strokeStyle = 'rgb(200,0,0)';

context.fill();

context.stroke();

//Left Fin


var x=250;

var y=460;

var width = 22

var height= 55;


context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgb(200,0,0)';

context.strokeStyle = 'rgb(200,0,0)';

context.fill();

context.stroke();


//Fin line 

    

    context.beginPath();

    context.moveTo(250,520)

    context.lineTo(250, 490);

context.lineWidth = 2; // STROKE WIDTH

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

context.stroke(); // STROKE

//Fin line 

    

    context.beginPath();

    context.moveTo(260,520)

    context.lineTo(260, 490);

context.lineWidth = 2; // STROKE WIDTH

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

context.stroke(); // STROKE

//Fin line 

    

    context.beginPath();

    context.moveTo(270,520)

    context.lineTo(270, 490);

context.lineWidth = 2; // STROKE WIDTH

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

context.stroke(); // STROKE

//Fin line 

    

    context.beginPath();

    context.moveTo(305,520)

    context.lineTo(305, 490);

context.lineWidth = 2; // STROKE WIDTH

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

context.stroke(); // STROKE


//Fin line 

    

    context.beginPath();

    context.moveTo(315,520)

    context.lineTo(315, 490);

context.lineWidth = 2; // STROKE WIDTH

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

context.stroke(); // STROKE

//Fin line 

    

    context.beginPath();

    context.moveTo(325,520)

    context.lineTo(325, 490);

context.lineWidth = 2; // STROKE WIDTH

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

context.stroke(); // STROKE


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

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


// CREDITS


context.save();

var credits = "Name, Title, FMX XYZ, FA/SP YEAR";

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

  1. Sabrina SternApril 14, 2021 at 4:38 PM

    great job for such a difficult program to use

    ReplyDelete
  2. Meghan BelfiApril 15, 2021 at 10:39 AM

    I think this came out really good. We all know how hard coding can be, so I would really say this is impressive!

    ReplyDelete
  3. Carly BernardoApril 17, 2021 at 11:16 AM

    this looks amazing, I could never get my code to look this good. great job, the colors work so well and the design is so cute.

    ReplyDelete
  4. Jude WilferthMay 10, 2021 at 11:29 AM

    This is actually amazing. The character looks like they would actually be in a cartoon. This turned out so great.

    ReplyDelete

Post a Comment

Popular posts from this blog

Autoscopy

Image
  Autoscopy Artist Statement:     I took this picture about a year ago. A butterfly landed on my shoulder and my friend and I thought it would be a great idea to take pictures with it. We tried to direct it towards our noses and it even posed for us. I was inspired to use blue butterflies in this project because the butterfly itself had blue and it would make my eyes pop more. The dark blue makes me think of night, so I also included the moon and galaxy. This ties in all of the colors and themes. I also wanted to add a cloud with a butterfly on it to continue the theme of night and dark blue butterflies. This was a very fun project and I really enjoyed it!
Read more

Logo Project

Image
  Logo Project Sketches Black/White Draft Final Black/White Three Colored Logos Artist Statement:     I was inspired by my passion for the environment. I want to pursue a career in conservation and sustainability. I want to spread awareness, so other people can help me preserve the marine environment. The logo expresses my love for the ocean. The hands represent me taking care of the ocean. The wave is a general concept of the ocean. I wanted to have a marine animal, but I decided to use a wave to represent the ocean as a whole. I am proud of how this turned out. My favorite logo is the last one. 
Read more

BW to Color

Image
 BW to Color Artist Statement:      I was inspired to use a picture I took at the beach because it had a lot of details to work with. I wanted to use vibrant colors in the edited images to simulate tropical vibes. I used similar bright colors in each picture, but I changed the positions of the color to see if some colors make a difference in different parts of the image. Original: Edited:  
Read more