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.
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