Meghan Belfi: CANVAS PROJECT

HTML:

<!doctype html>

<html>

<head>

<title> BELFI CANVAS </title>

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

// BACKGROUND

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

context.beginPath();

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

context.fillStyle = 'rgba(50,150,200,1.00)';

context.fill();

// REPEAT LOOP

for (var w=0; w<canvas.width; w+=50) {

for (var h=0; h<canvas.height; h+=50) {

context.beginPath();

context.moveTo(w,h);

context.lineTo(canvas.width - w, canvas.height - h);

var R = Math.round( w / canvas.width * 225 );

var B = Math.round( h / canvas.height * 225 );

var G = Math.round( (w*h) / (canvas.width * canvas.height) * 255);

var A = 1;

context.strokeStyle = "rgba("+R-","-G-","-B-","+A+")";

context.stroke();

}

// RECTANGLE

context.beginPath();

context.moveTo(500,500);

context.lineTo(400,250);

context.lineTo(700,50);

context.closePath();

context.lineWidth = 20;

context.stroke();

context.beginPath();

context.moveTo(500,500);

context.lineTo(800,650);

context.lineTo(100,650);

context.closePath();

context.lineWidth = 40;

context.stroke();

// B CURVE / LEFT LEG

var x = 10;

var y = 550;

var cpointX1 = canvas.width / 6;

var cpointY1 = canvas.height / 2 + 300;

var cpointX2 = canvas.width / 1.5;

var cpointY2 = canvas.height / 2 - 300;

var x1 = 500;

var y1 = 250;

context.beginPath();

context.moveTo(x, y);

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

context.lineWidth = 15;

context.strokeStyle = "orange";

context.lineCap = 'round'

context.stroke();

// B CURVE / RIGHT LEG

var x = 790;

var y = 550;

var cpointX1 = canvas.width / 6;

var cpointY1 = canvas.height / 3 + 300;

var cpointX2 = canvas.width / 1.5;

var cpointY2 = canvas.height / 3 - 300;

var x1 = 450;

var y1 = 330;

context.beginPath();

context.moveTo(x, y);

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

context.lineWidth = 15;

context.strokeStyle = "orange";

context.lineCap = 'round'

context.stroke();

// SMILE FACE

context.beginPath();

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

context.fillStyle = 'yellow';

context.fill();

context.lineWidth =10;

context.strokeStyle = 'black';

context.stroke();

// LASHES

context.moveTo(490,230)

context.lineTo(510,200);

context.lineWidth = 5;

context.stokeStyle = 'black';

context.stroke();

context.moveTo(475,230)

context.lineTo(495,200);

context.lineWidth = 5;

context.stokeStyle = 'black';

context.stroke();

context.moveTo(320,230)

context.lineTo(300,200);

context.lineWidth = 5;

context.stokeStyle = 'black';

context.stroke();

context.moveTo(305,230)

context.lineTo(285,200);

context.lineWidth = 5;

context.stokeStyle = 'black';

context.stroke();

// NOSE

context.beginPath();

context.arc(400, 310, 15, 0 , 2* Math.PI, true);

context.fillStyle = 'black' ;

context.fill();

context.lineWidth =5;

context.strokeStyle = 'black';

context.stroke();

// LEFT EYE

context.beginPath();

context.arc(325, 250, 40, 0 , 2* Math.PI, true);

context.fillStyle = 'blue' ;

context.fill();

context.lineWidth =5;

context.strokeStyle = 'black';

context.stroke();

// RIGHT EYE

context.beginPath();

context.arc(475, 250, 40, 0 , 2* Math.PI, true);

context.fillStyle = 'blue' ;

context.fill();

context.lineWidth =5;

context.strokeStyle = 'black';

context.stroke();

// LEFT MIDDLE EYE

context.beginPath();

context.arc(325, 250, 15, 0 , 2* Math.PI, true);

context.fillStyle = 'white' ;

context.fill();

context.lineWidth =5;

context.strokeStyle = 'black';

context.stroke();

// RIGHT MIDDLE EYE

context.beginPath();

context.arc(475, 250, 15, 0 , 2* Math.PI, true);

context.fillStyle = 'white' ;

context.fill();

context.lineWidth =5;

context.strokeStyle = 'black';

context.stroke();

// TEETH/SMILE

var centerX = 400;

var centerY = 350

var radius = 100;

var startangle = 0* Math.PI;;

var endangle = 1* Math.PI;

context.beginPath();

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

context.fillStyle = "white";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "pink";

context.stroke();

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 = 50;

context.strokeStyle = "black";

context.stroke();

// RECTANGLES (1)

var rectx2 = 30;

var recty2 = 30;

var rectwidth2 = 150;

var rectheight2 = 100;

context.beginPath();

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

context.lineWidth = 5;

context.strokeStyle = 'purple';

context.fillStyle = 'lime';

context.fill();

context.stroke();

var tx1 = 500;

var ty1 = 200;

var tx2 = 500;

var ty2 = 500;

var tx3 = 300;

var ty3 = 500;

var startx = 575;

var starty = 400;

var endx = 250;

var endy = 50;

// (2)

var rectx2 = 650;

var recty2 = 130;

var rectwidth2 = 100;

var rectheight2 = 150;

context.beginPath();

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

context.lineWidth = 5;

context.strokeStyle = 'blue';

context.fillStyle = 'pink';

context.fill();

context.stroke();

var tx1 = 500;

var ty1 = 200;

var tx2 = 500;

var ty2 = 500;

var tx3 = 300;

var ty3 = 500;

var startx = 575;

var starty = 400;

var endx = 250;

var endy = 50;

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

ARTIST STATEMENT:

The sketch turned into a coded master piece. The design has a focal point with a smiley face, vertical lines, abstracting shapes, and a body for the face in life work. The pieces uses contradicting colors and lines to make it appear abstract. It utilizes concepts like composition, focal point, eye movement, contrast, and other artist elements. The main focus of the design was to highlight the smiley face and the elements found within it.

I came to realize how incredibly difficult Dreamer can really be while creating an art piece. I started off with a simple sketch of a smiley face, shapes, and cursive lines. I planned on making the design more detailed as I developed my skills through Dreamweaver. Being a Junior with much experience in Adobe, I figured this assignment would be some what simple for my to complete. I was rudely awaken to how difficult coding can truthfully be. I would easily say that Dreamweaver is the hardest softwares I have ever worked with in the Adobe Suite. I bumped into so many major errors. I overcame a vast majority of them; however, some I just could not figure out.

Overall, I probably worked around 10 hours on this assignment. I had to do some serious research on Dreamweaver and do lots of calculations. From this experience, I hope to never have to work with Dreamweaver ever again. I love experiences like these, because I learn something within my major I absolutely hate. In a way, it helps me narrow down what I should do after college.

Non-the-less, I completed the project to the best of my ability. I would say this was a defeating assignment which has never happened to me in the Adobe Suite. Hours were spent on doing calculations and sizing. Personally, I know this is not my best work and comparable to some of the other great examples. I, however, can confidently say I tried my hardest at this project. To me, that's really all I can do. I learned so much from this project and grew a huge appreciation to Coders.

I do believe that this project is successful. It reflects back to my original design with even more detail then originally planned. I used focal points, layout/structure, color theory, and contrast to really make this art. My goal was to bring your eyes to the center smiley face. By adding the radial lines, I truly believe my main goal was successful. While the background in chaotic, your eyes follow towards that main smiley face. Being that smiley faces are a reoccurring feature in my art, I'm pleased to have created that in code for the first time. Overall with the difficulties in consideration, I think this turned out to be a successful piece.

Meghan Belfi

Sunday, February 14, 2021

CANVAS PROJECT

No comments:

Post a Comment

Final Portfolio

Search This Blog