Canvas Final Project

Cat by window 

         Trying to find inspiration for this project was a little hard. While walking through the city of Tampa, I stopped by a cafe in front of an apartment complex. By the corner of the building, on a window sill, was a cream-and-black spotted cat standing outside the window. I tried recreating it through sketches but struggled in the end result. I used bezier cures, triangles, circles, too many triangles, and small quadratic curves to fill in the curves in curtains. In the end, it took me 8 hours to do this. I had too much difficulty with figuring out the mathematical formulas for the shapes. 

I was inspired by anime backgrounds as well. Anime has simplistic lines that can curate such complex animations. That was very interesting to use as a reference. 

Aesthetic Anime Room Background - 720x879 - Download HD Wallpaper - WallpaperTip


My sketch was angled from my point of view, when it came to start coding the canvas it became difficult to continue in the perspective that I wanted. 






<!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(76,31,2,0.97); 

}


#container {

position: relative;

text-align: left;

width: 95%;

height: 800px;

} 


#fmxCanvas { 

position: relative; 

background-color:rgba(101,48,39,1.00); 

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="500" height="800"></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


 

//edge of wall for depth 


//window rectangle 

var x=10;

var y=20;

var width = 460

var height= 700;


context.beginPath();

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

context.lineWidth = 10;

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

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

// add linear gradient

        var grd = context.createLinearGradient(x, y, x+width, y+height);

        // starting color

        grd.addColorStop(0, "rgba(149,196,231,1.00)");

        //intermediate color

        grd.addColorStop(0.5, "rgba(65,124,255,1.00)");

        // ending color

        grd.addColorStop(1, "rgba(130,201,241,1.00)");

        context.fillStyle = grd;

        context.fill();

context.fill();



context.stroke();

//color fillingthe panels

var x=15;

var y=305 ;

var width = 250

var height= 40;


context.beginPath();

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

context.lineWidth = 10;

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

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

context.fill();

context.stroke();

var x=275;

var y=305 ;

var width = 190;

var height= 40;


context.beginPath();

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

context.lineWidth = 10;

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

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

context.fill();

context.stroke();

var x=235;

var y= 25;

var width = 40;

var height= 280;


context.beginPath();

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

context.lineWidth = 10;

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

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

context.fill();

context.stroke();

var x=235;

var y= 350;

var width = 40;

var height= 370;


context.beginPath();

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

context.lineWidth = 10;

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

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

context.fill();

context.stroke();

//Simple lines for edge of window 

context.moveTo(50,743); 

context.lineTo(483,743); 

context.lineWidth = 5; 

context.stroke(); 

context.moveTo(50,723); 

context.lineTo(475,723); 

context.lineWidth = 5; 

context.stroke();

context.moveTo(50,723); 

context.lineTo(55,745); 

context.lineWidth = 5; 

context.stroke();

context.moveTo(10,723); 

context.lineTo(50,723); 

context.lineWidth = 5; 

context.stroke();

context.moveTo(473,723); 

context.lineTo(481,745); 

context.lineWidth = 5; 

context.stroke();

//side wall for depth


var x = 57;

var y = 744;

var cpointX = canvas.width / 1 - 500;

var cpointY = canvas.height / 1 - 40;

var x1 = 15;

var y1 = 780;



context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 5;

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

context.stroke();



 

//Window panels 

context.moveTo(230,20); 

context.lineTo(230,200); 

context.lineWidth = 5; 

context.stroke();


 

context.moveTo(280,20); 

context.lineTo(280,200); 

context.lineWidth = 5; 

context.stroke();

  context.moveTo(230,425); 

context.lineTo(230,720); 

context.lineWidth = 5; 

context.stroke();


 

context.moveTo(280,425); 

context.lineTo(280,720); 

context.lineWidth = 5; 

context.stroke();

//side panels 

context.moveTo(10,300); 

context.lineTo(130,300); 

context.lineWidth = 5; 

context.stroke();

context.moveTo(10,350); 

context.lineTo(130,350); 

context.lineWidth = 5; 

context.stroke();

context.moveTo(340,300); 

context.lineTo(470,300); 

context.lineWidth = 5; 

context.stroke();


context.moveTo(340,350); 

context.lineTo(470,350); 

context.lineWidth = 5; 

context.stroke();

//curves of the panels 

// starting point coordinates

var x = 130;

var y = 350;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 18;

var cpointY = canvas.height / 2 - 50;


// ending point coordinates

var x1 = 230;

var y1 = 425;



context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 5;

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

context.stroke();

 

var x = 350;

var y = 350;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - -30;

var cpointY = canvas.height / 2 - 50;


// ending point coordinates

var x1 = 280;

var y1 = 425;



context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 5;

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

context.stroke();

var x = 229;

var y = 180;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 10;

var cpointY = canvas.height / 2 - 95;


// ending point coordinates

var x1 = 130;

var y1 = 300;



context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 5;

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

context.stroke();

var x = 280;

var y = 200;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - -25;

var cpointY = canvas.height / 2 - 110;


// ending point coordinates

var x1 = 352;

var y1 = 300;



context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 5;

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

context.stroke();

//Center triangles

context.beginPath(); // begin a shape

context.moveTo(170,340); // point A coordinates

context.lineTo(250, 350); // point B coords

context.lineTo(240,390); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

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

context.stroke();

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

context.fill();

context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 5;

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

context.stroke();

context.beginPath(); // begin a shape

context.moveTo(330,340); // point A coordinates

context.lineTo(250, 350); // point B coords

context.lineTo(275,390); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

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

context.stroke();

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

context.fill();

context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 5;

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

context.stroke();

context.beginPath(); // begin a shape

context.moveTo(243,240); // point A coordinates

context.lineTo(170, 310); // point B coords

context.lineTo(275,390); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

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

context.stroke();

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

context.fill();

context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 5;

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

context.stroke();

context.beginPath(); // begin a shape

context.moveTo(270,250); // point A coordinates

context.lineTo(330, 310); // point B coords

context.lineTo(275,390); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

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

context.stroke();

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

context.fill();

// side edge of wall for depth 

context.moveTo(0,0); 

context.lineTo(0,800); 

context.lineWidth = 5; 

context.stroke();

//// 

///// 

//CAT 

//Body 

context.beginPath();

context.arc(160, 515, 45, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(216,221,186,1.00)' ;

context.fill();

context.lineWidth =10;

context.strokeStyle = 'rgba(255,150,150,0.00)';

context.stroke();


/*

  context.beginPath();

  context.lineWidth = 10;

  context.moveTo(x1,y1);

  context.lineTo(x2,y2);

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

  context.stroke();

*/


context.beginPath();

context.arc(123, 580, 48, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(216,221,186,1.00)' ;

context.fill();

context.lineWidth =10;

context.strokeStyle = 'rgba(255,150,150,0.00)';

context.stroke();


/*

  context.beginPath();

  context.lineWidth = 10;

  context.moveTo(x1,y1);

  context.lineTo(x2,y2);

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

  context.stroke();

*/

context.beginPath();

context.arc(88, 630, 51, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(216,221,186,1.00)' ;

context.fill();

context.lineWidth =10;

context.strokeStyle = 'rgba(255,150,150,0.00)';

context.stroke();


/*

  context.beginPath();

  context.lineWidth = 10;

  context.moveTo(x1,y1);

  context.lineTo(x2,y2);

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

  context.stroke();

*/

context.beginPath();

context.arc(100, 610, 48, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(216,221,186,1.00)' ;

context.fill();

context.lineWidth =10;

context.strokeStyle = 'rgba(255,150,150,0.00)';

context.stroke();


/*

  context.beginPath();

  context.lineWidth = 10;

  context.moveTo(x1,y1);

  context.lineTo(x2,y2);

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

  context.stroke();

*/

//Triangle ears 

context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 5;

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

context.stroke();

context.beginPath(); // begin a shape

context.moveTo(120,475); // point A coordinates

context.lineTo(120, 495); // point B coords

context.lineTo(135,480); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.strokeStyle = "rgba(216,221,185,1.00)"; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "rgba(227,167,168,1.00)";

context.fill();

context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 5;

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

context.stroke();

context.beginPath(); // begin a shape

context.moveTo(183,475); // point A coordinates

context.lineTo(198, 492); // point B coords

context.lineTo(198,472); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.strokeStyle = "rgba(216,221,185,1.00)"; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "rgba(227,167,168,1.00)";

context.fill();

//eye patches 

context.beginPath();

context.arc(145, 510, 15, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(36,31,24,1.00)' ;

context.fill();

context.lineWidth =10;

context.strokeStyle = 'rgba(255,150,150,0.00)';

context.stroke();


/*

  context.beginPath();

  context.lineWidth = 10;

  context.moveTo(x1,y1);

  context.lineTo(x2,y2);

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

  context.stroke();

*/

context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 5;

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

context.stroke();

context.beginPath(); // begin a shape

context.moveTo(160,520); // point A coordinates

context.lineTo(173, 520); // point B coords

context.lineTo(167,530); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.strokeStyle = "rgba(216,221,185,1.00)"; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "rgba(227,167,168,1.00)";

context.fill();

// legs 

var rectx2  = 63;

var recty2 = 665;

var rectwidth2 = 20;

var rectheight2 = 50;

context.beginPath();

context.rect(rectx2,recty2,rectwidth2,rectheight2);

context.lineWidth = 15;

context.lineJoin = "butt";

context.strokeStyle = 'rgba(216,221,185,0.00)';

context.fillStyle = '#D8DDB9';

  context.fill();

context.stroke();

//Tail

// starting point coordinates

var x = 55;

var y = 650;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 260;

var cpointY = canvas.height / 2 - -310;


// ending point coordinates

var x1 = 53;

var y1 = 700;



context.beginPath();

context.moveTo(x, y);

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

context.lineJoin= "butt";

context.lineWidth = 10;

context.strokeStyle = "rgba(216,221,185,1.00)";

context.stroke();

context.beginPath();

context.arc(54, 700, 5, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(216,221,185,1.00)' ;

context.fill();

context.lineWidth =10;

context.strokeStyle = 'rgba(255,150,150,0.00)';

context.stroke();


/*

  context.beginPath();

  context.lineWidth = 10;

  context.moveTo(x1,y1);

  context.lineTo(x2,y2);

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

  context.stroke();

*/

 

// paws 

var centerX = 100;

        var centerY = 715

        var radius = 20;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        context.fillStyle = "#D8DCB8";

context.fill();

      context.lineWidth = 5;

        context.stroke();

//botom arc

       

var centerX = canvas.width / 0;

        var centerY = canvas.height / 2;

        var radius = 70;

        var startangle = 1.9;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        //context.fillStyle = "red";

      context.lineWidth = 50;

        context.strokeStyle = "#000000";

        context.stroke();

// front paws 

var rectx3  = 140;

var recty3 = 610;

var rectwidth3 = 20;

var rectheight3 = 100;

context.beginPath();

context.rect(rectx3,recty3,rectwidth3,rectheight3);

context.lineWidth = 15;

context.lineJoin = "butt";

context.strokeStyle = 'rgba(216,221,185,0.00)';

context.fillStyle = '#D8DDB9';

  context.fill();

context.stroke();

var centerX = 160;

        var centerY = 715

        var radius = 20;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        context.fillStyle = "#D8DCB8";

context.fill();

      context.lineWidth = 5;

        context.stroke();

//botom arc

       

var centerX = canvas.width / 0;

        var centerY = canvas.height / 2;

        var radius = 70;

        var startangle = 1.9;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        //context.fillStyle = "red";

      context.lineWidth = 50;

        context.strokeStyle = "#000000";

        context.stroke();

//eyes 

context.beginPath();

context.arc(145, 510, 8, 0 , 2* Math.PI, true);

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

context.fill();

context.lineWidth =10;

context.strokeStyle = 'rgba(255,150,150,0.00)';

context.stroke();


/*

  context.beginPath();

  context.lineWidth = 10;

  context.moveTo(x1,y1);

  context.lineTo(x2,y2);

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

  context.stroke();

*/

context.beginPath();

context.arc(185, 510, 8, 0 , 2* Math.PI, true);

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

context.fill();

context.lineWidth =10;

context.strokeStyle = 'rgba(255,150,150,0.00)';

context.stroke();


/*

  context.beginPath();

  context.lineWidth = 10;

  context.moveTo(x1,y1);

  context.lineTo(x2,y2);

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

  context.stroke();

*/


context.beginPath();

context.arc(185, 510, 5, 0 , 2* Math.PI, true);

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

context.fill();

context.lineWidth =10;

context.strokeStyle = 'rgba(255,150,150,0.00)';

context.stroke();


/*

  context.beginPath();

  context.lineWidth = 10;

  context.moveTo(x1,y1);

  context.lineTo(x2,y2);

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

  context.stroke();

*/


context.beginPath();

context.arc(146, 510, 5, 0 , 2* Math.PI, true);

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

context.fill();

context.lineWidth =10;

context.strokeStyle = 'rgba(255,150,150,0.00)';

context.stroke();


/*

  context.beginPath();

  context.lineWidth = 10;

  context.moveTo(x1,y1);

  context.lineTo(x2,y2);

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

  context.stroke();

*/

// cat mouth 

// starting point coordinates

var x = 143;

var y = 538;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 85;

var cpointY = canvas.height / 2 - -150;


// ending point coordinates

var x1 = 167;

var y1 = 527;



context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 3;

context.strokeStyle = "rgba(217,137,138,1.00)";

context.stroke();

 

// starting point coordinates

var x = 185;

var y = 535;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 70;

var cpointY = canvas.height / 2 - -150;


// ending point coordinates

var x1 = 167;

var y1 = 527;



context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 3;

context.strokeStyle = "rgba(217,137,138,1.00)";

context.stroke();

 

// other front paws 

//botom arc

       

var centerX = canvas.width / 0;

        var centerY = canvas.height / 2;

        var radius = 70;

        var startangle = 1.9;

        var endangle =  1* Math.PI;


        context.beginPath();

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

       

      context.lineWidth = 20;

        context.strokeStyle = "#000000";

        context.stroke();

var centerX = 144;

        var centerY = 715

        var radius = 20;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;


        context.beginPath();

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

        context.fillStyle = "#D8DCB8";

context.fill();

      context.lineWidth = 3;

        context.stroke();

var rectx4  = 120;

var recty4 = 615;

var rectwidth4 = 18;

var rectheight4 = 100;

context.beginPath();

context.rect(rectx4,recty4,rectwidth4,rectheight4);

context.lineWidth = 15;

context.lineJoin = "butt";

context.strokeStyle = 'rgba(216,221,185,0.00)';

context.fillStyle = '#D8DDB9';

  context.fill();

context.stroke();

// Curtains 

var x = 215;

var y = 27;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 100;

var cpointY = canvas.height / 2 - 100;


// ending point coordinates

var x1 = 16;

var y1 = 290;



context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 18;

context.strokeStyle = "rgba(88,166,136,1.00)";

context.stroke();

var x = 298;

var y = 28;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - -100;

var cpointY = canvas.height / 2 - 100;


// ending point coordinates

var x1 = 465;

var y1 = 283;



context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 3;

context.strokeStyle = "rgba(88,166,136,1.00)";

context.stroke();

// curtain triangles to fill color 

context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 30;

context.strokeStyle = "rgba(89,165,140,1.00)";

context.stroke();

context.beginPath(); // begin a shape

context.moveTo(285,25); // point A coordinates

context.lineTo(465, 25); // point B coords

context.lineTo(465,296); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.strokeStyle = "rgba(216,221,185,0.00)"; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "rgba(89,165,140,1.00)";

context.fill();

context.beginPath(); // begin a shape

context.moveTo(310,60); // point A coordinate

context.lineTo(450, 280); // point B coords

context.lineTo(385,250); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "butt";

context.fillStyle = "rgba(89,165,140,1.00)";

context.fill();

context.lineWidth = 30;

context.strokeStyle = "rgba(89,165,140,1.00)";

context.stroke();

context.beginPath(); // begin a shape

context.moveTo(225,25); // point A coordinates

context.lineTo(15, 25); // point B coords

context.lineTo(15,296); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.strokeStyle = "rgba(216,221,185,0.00)"; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "rgba(89,165,140,1.00)";

context.fill();

context.beginPath(); // begin a shape

context.moveTo(200,60); // point A coordinate

context.lineTo(30, 280); // point B coords

context.lineTo(120,230); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "butt";

context.fillStyle = "rgba(89,165,140,1.00)";

context.fill();

context.lineWidth = 30;

context.strokeStyle = "rgba(89,165,140,1.00)";

context.stroke();


// curtain highlights 

var x = 180;

var y = 50;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 150;

var cpointY = canvas.height / 2 - 150;


// ending point coordinates

var x1 = 20;

var y1 = 280;



context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 5;

context.strokeStyle = "rgba(69,128,108,1.00)";

context.stroke();


var x = 320;

var y = 50;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - -100;

var cpointY = canvas.height / 2 - 150;


// ending point coordinates

var x1 = 460;

var y1 = 280;



context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 5;

context.strokeStyle = "rgba(69,128,108,1.00)";

context.stroke();

var x = 350;

var y = 50;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - -100;

var cpointY = canvas.height / 2 - 200;


// ending point coordinates

var x1 = 455;

var y1 = 240;



context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 5;

context.strokeStyle = "rgba(69,128,108,1.00)";

context.stroke();

var x = 150;

var y = 50;


// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 180;

var cpointY = canvas.height / 2 - 150;


// ending point coordinates

var x1 = 20;

var y1 = 240;



context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 5;

context.strokeStyle = "rgba(69,128,108,1.00)";

context.stroke();




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

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


// CREDITS


context.save();

var credits = "Jennifer Rodriguez, Canvas Project, FMX 210-1, FALL 2022";

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

Image
My business cards were inspired by cards I'd happily give to people I meet by chance in the street. It touches on a lot of my personality, especially the Monet one.   
Read more

Internet / World Wide Web / Bluetooth / Wi-Fi

Image
Before the internet, computers had been around since the mid-1950s. During those times, there was limited communication with the few computers that existed around the world. Computers could only interact with other devices if they were nearby, meaning that there had to be a physical connection between them to communicate. J.C. R. Licklider was the one to propose a network with no physical bounds that could go beyond the local devices [1]. After his proposal, the government and MIT began the first developments of packet switches that helped develop networks that contributed to what we call the Internet. Packet-switching was a way for people to break down information data into packets that could then be redistributed across many networks. These networks included: ARPANET, NPL, and UUCP, all played a significant part in the merging of networks to create a global Transmission Control Program (TCP) also known as internetworking or, in modern terms, the internet.  Many were involved in the e
Read more
Image
  Hi... My name is Jennifer. If I gave you my full government name then nobody would know how to pronounce it. I am from San Juan, Puerto Rico. A very small island that is part of the Caribbean archipelago and has approximately 5 million citizens currently. At the moment, I am a senior Public Relations major at UT [just transferred] and hopefully, a future Master's degree here as well.  I came here from a small religious liberal arts college about 20 mins from UT, whose values and morals didn't align with mine. Apart from my transferring journey, I am a violinist, an activist, and a compulsive spender. Small details about me: I used to do sailboating, I love iced coffee, and I am half Puerto Rican and half Cuban.  I hope to learn different media tools for creating my own content. I believe using these types of programs shows a multiskill when entering the workforce, which in turn shows a company you're not a one-trick pony. It also opens up the possibility of working freela
Read more