HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> BELFI CANVAS </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="800" 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
// 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.
