Jordan Tries Blogging: Canvas Project

Here is my Canvas Project. Its called "Halloween Plushes" because I'm very unoriginal. I chose two of the super cute plushes I kept seeing on Instagram and decided they seemed simple enough to code. I am a big fan of stuffed animals and plushies so as soon as I found this picture, I knew I had to do it. This project took me between 8 and 10 hours to complete. I lost count so I don't have an exact time.

I was actually very excited to do this project as coding seemed very interesting to me. After having suffered the sleepless nights and stress, it doesn't seem as fun. I made the two plushies simple shapes like arcs, circles, and curves and then used smaller circles and lines for their faces. I'm super proud of how they turned out and considering this is my first time using this program, I'm very surprised with how well it looks. Below is the inspiration picture of the plushies from Instagram.

Code :

<!doctype html>

<html>

<head>

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>

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

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

//Ghost Bear Body

var centerX = 200;

var centerY = 300

var radius = 110;

var startangle = 0* Math.PI;;

var endangle = 1* Math.PI;

context.beginPath();

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

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

context.fill();

context.lineWidth = 10;

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

context.stroke();

//Ghost Bear Bottom of Body

// starting point coordinates

var x = 90;

var y = 300;

// control point 1 coordinates (down)

var cpointX1 = 90;

var cpointY1 = 700;

// control point 2 coordinates (up)

var cpointX2 = 150;

var cpointY2 = 300;

// ending point coordinates

var x1 = 155;

var y1 = 430;

context.beginPath();

context.moveTo(x, y);

context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);

context.lineWidth = 10;

context.strokeStyle = "rgb(182,182,182)";

context.lineCap = 'round'

context.stroke();

// starting point coordinates

var x2 = 155;

var y2 = 430;

// control point 1 coordinates (down)

var cpointX3 = 170;

var cpointY3 = 650;

// control point 2 coordinates (up)

var cpointX4 = 190;

var cpointY4 = 300;

// ending point coordinates

var x3 = 216;

var y3 = 460;

context.beginPath();

context.moveTo(x2, y2);

context.bezierCurveTo(cpointX3, cpointY3, cpointX4, cpointY4, x3, y3);

context.lineWidth = 10;

context.strokeStyle = "rgb(182,182,182)";

context.lineCap = 'round'

context.stroke();

// starting point coordinates

var x4 = 184;

var y4 = 460;

// control point 1 coordinates (down)

var cpointX5 = 210;

var cpointY5 = 300;

// control point 2 coordinates (up)

var cpointX6 = 230;

var cpointY6 = 650;

// ending point coordinates

var x5 = 248;

var y5 = 430;

context.beginPath();

context.moveTo(x4, y4);

context.bezierCurveTo(cpointX5, cpointY5, cpointX6, cpointY6, x5, y5);

context.lineWidth = 10;

context.strokeStyle = "rgb(182,182,182)";

context.lineCap = 'round'

context.stroke();

// starting point coordinates

var x6 = 310;

var y6= 300;

// control point 1 coordinates (down)

var cpointX7 = 310;

var cpointY7 = 700;

// control point 2 coordinates (up)

var cpointX8 = 250;

var cpointY8 = 300;

// ending point coordinates

var x7 = 248;

var y7 = 430;

context.beginPath();

context.moveTo(x6, y6);

context.bezierCurveTo(cpointX7, cpointY7, cpointX8, cpointY8, x7, y7);

context.lineWidth = 10;

context.strokeStyle = "rgb(182,182,182)";

context.lineCap = 'round'

context.stroke();

///Ghost Bear Arms

// starting point coordinates

var x = 90;

var y = 300;

// control point coordinates ( magnet )

var cpointX = -10;

var cpointY = 275;

// ending point coordinates

var x1 = 90;

var y1 = 375;

context.beginPath();

context.moveTo(x, y);

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

context.lineWidth = 10;

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

context.stroke();

// starting point coordinates

var x2 = 310;

var y2 = 300;

// control point coordinates ( magnet )

var cpointX1 = 400;

var cpointY1 = 275;

// ending point coordinates

var x3 = 310;

var y3 = 375;

context.beginPath();

context.moveTo(x2, y2);

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

context.lineWidth = 10;

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

context.stroke();

///Ghost Bear Ears

// starting point coordinates

var x = 100;

var y = 250;

// control point coordinates ( magnet )

var cpointX = 75;

var cpointY = 150;

// ending point coordinates

var x1 = 175;

var y1 = 193;

context.beginPath();

context.moveTo(x, y);

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

context.lineWidth = 10;

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

context.stroke();

// starting point coordinates

var x = 300;

var y = 250;

// control point coordinates ( magnet )

var cpointX = 325;

var cpointY = 150;

// ending point coordinates

var x1 = 225;

var y1 = 193;

context.beginPath();

context.moveTo(x, y);

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

context.lineWidth = 10;

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

context.stroke();

///Ghost Bear Face

//nose

context.beginPath();

context.arc(200, 300, 10, 0 , 2* Math.PI, true);

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

context.fill();

context.lineWidth =10;

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

context.stroke();

//eyes

context.beginPath();

context.arc(150, 290, 5, 0 , 2* Math.PI, true);

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

context.fill();

context.lineWidth =10;

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

context.stroke();

context.beginPath();

context.arc(250, 290, 5, 0 , 2* Math.PI, true);

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

context.fill();

context.lineWidth =10;

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

context.stroke();

//mouth lines

context.moveTo(205,300); // COORDINATES OF STARTING POINT

context.lineTo(180,340); // COORDS OF ENDING POINT 1

context.lineWidth = 5; // STROKE WIDTH

context.stroke(); // STROKE

context.moveTo(195,300); // COORDINATES OF STARTING POINT

context.lineTo(220,340); // COORDS OF ENDING POINT 1

context.lineWidth = 5; // STROKE WIDTH

context.stroke(); // STROKE

///BAT

context.beginPath();

context.moveTo(400, 200);

context.bezierCurveTo(250, 600, 900, -200, 700, 200);

context.bezierCurveTo(850, 550, 200, -200, 400, 200);

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

context.fill();

context.closePath();

// line color

context.lineWidth = 10;

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

context.stroke();

var centerX = 555;

var centerY = 200;

var radius = 70;

var startangle = 0;

var endangle = 2 * Math.PI;

///Bat Ears

context.beginPath();

context.arc(500, 147, 15, 0 , 2* Math.PI, true);

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

context.fill();

context.lineWidth =10;

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

context.stroke();

context.beginPath();

context.arc(600, 142, 15, 0 , 2* Math.PI, true);

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

context.fill();

context.lineWidth =10;

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

context.stroke();

///Bat Feets

context.beginPath();

context.arc(520, 260, 20, 0 , 2* Math.PI, true);

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

context.fill();

context.lineWidth =10;

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

context.stroke();

context.beginPath();

context.arc(590, 260, 20, 0 , 2* Math.PI, true);

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

context.fill();

context.lineWidth =10;

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

context.stroke();

/// Bat Body

context.beginPath();

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

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

context.fill();

context.closePath();

context.lineWidth = 10;

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

context.stroke();

///Bat Mouth

// starting point coordinates

var x = 555;

var y = 200;

// control point coordinates ( magnet )

var cpointX = 550;

var cpointY = 220;

// ending point coordinates

var x1 = 525;

var y1 = 220;

context.beginPath();

context.moveTo(x, y);

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

context.lineWidth = 3;

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

context.stroke();

// starting point coordinates

var x2 = 555;

var y2 = 200;

// control point coordinates ( magnet )

var cpointX1 = 550;

var cpointY1 = 220;

// ending point coordinates

var x3 = 585;

var y3 = 220;

context.beginPath();

context.moveTo(x2, y2);

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

context.lineWidth = 3;

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

context.stroke();

///Teefers

context.beginPath();

context.moveTo(532,220);

context.lineTo(540, 220);

context.lineTo(536,225);

context.closePath();

context.lineWidth = 3;

context.lineJoin = "square";

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

context.stroke();

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

context.fill();

context.beginPath();

context.moveTo(570,220);

context.lineTo(580, 220);

context.lineTo(575,225);

context.closePath();

context.lineWidth = 3;

context.lineJoin = "square";

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

context.stroke();

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

context.fill();

///Bat Nose

context.beginPath();

context.arc(555, 200, 5, 0 , 2* Math.PI, true);

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

context.fill();

context.lineWidth =10;

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

context.stroke();

///Bat Eyes

context.beginPath();

context.arc(530, 190, 7, 0 , 2* Math.PI, true);

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

context.fill();

context.lineWidth =10;

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

context.stroke();

context.beginPath();

context.arc(580, 190, 7, 0 , 2* Math.PI, true);

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

context.fill();

context.lineWidth =10;

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

context.stroke();

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

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

// CREDITS

context.save();

var credits = "Jordan Wilchuck, Halloween Plushes, FMX 210-1, FA 2021";

context.font = 'bold 12px Helvetica';

context.fillStyle = "rgba(0,0,0,1)"; // change the color here

context.shadowColor = "rgba(255,255,255,1)"; // change shadow color here

context.shadowBlur = 12;

context.shadowOffsetX = 2;

context.shadowOffsetY = 2;

context.fillText(credits, 10, canvas.height - 10); // CHANGE THE LOCATION HERE

context.restore();

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

// HTML DISPLAY FIELD FOR TESTING PURPOSES

display.innerHTML = Math.round(mouseX) + " || " + Math.round(mouseY) + " || counter = " + Math.round(counter);

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

// LAST LINE CREATES THE ANIMATION

requestAnimFrame(draw); // CALLS draw() every nth of a second

}

</script>

</body>

</html>

Jordan Tries Blogging

Blog Archive

Tuesday, September 28, 2021

Canvas Project

No comments:

Post a Comment

Business Cards

Report Abuse