Wednesday, February 12, 2020

Html5 Canvas

Blake Gottlieb
Html5 Canvas
For this html5 canvas experiment I drew inspiration from a favorite album cover design from my childhood, the Kanye West Graduation album cover. This is an album cover that I think is very well put together aesthetically and has a lot to interpret. I like to think that the bear is being sent to a new platform and everyone else in the picture is celebrating his success. In addition to being interested in the visual aspects, I also have been a big fan of the artist Kanye West, listening to his music for years. 

For my project, I wanted to interpret the album cover in a more simplistic approach. I wanted to show the bear post graduation in the working world, but still holding on to what got him there. Whether this be a symbolic representation, or a physical representation through the graduation cap. I am fairly pleased with my work for my first ever coding project. I like the symmetry and perfectly straight lines, especially in the neck down portion. I also really like the ears on the bear. I created these by making circles and adjusting the angles on the starting and ending points to make semi circles that fit the head shape. A couple of things I would have liked to experiment with more are colors and curves. However, my lack of coding knowledge and experience limited my artistic capabilities. Overall, I am pleased with my persistence with all the issues that came up while working on this project. I am proud of my work with curves and symmetry. As well as creating a meaningful interpretative image.
Inspiration:

 Image result for kanye west graduation

 Canvas:




Hours worked on: 15-20 hours

657 lines of code

 Code:

 <!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(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="600" 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 //background var x = 0; var y = 0; var width = canvas.width; var height = canvas.height; var centerX = 300; var centerY = 400; var radius = 200; context.beginPath(); context.rect(x, y, width, height); context.lineWidth = 0; var gradient1 = context.createLinearGradient(0, 0, 100, 0); gradient1.addColorStop(0, 'rgba(0, 0, 0, 1)'); gradient1.addColorStop(1, 'rgba(128, 0, 0, 0.9)'); context.fillStyle = gradient1; context.fill(); context.strokeStyle = 'rgba(0, 0, 0, 1)'; //outline context.stroke(); context.closePath(); //grad cap top context.moveTo(200,100); // COORDINATES OF STARTING POINT (left) context.lineTo(300,170); // COORDS OF ENDING POINT 1 (down) //context.moveTo(300,160); // COORDINATES OF STARTING POINT (bottom right) context.lineTo(400,100); // COORDS OF POINT 2 (right) context.lineTo(300,30); // COORDS OF POINT 3 (up) context.lineTo(200,100); // COORDS OF POINT 4 (connect left) context.lineWidth = 4; // STROKE WIDTH context.lineCap = 'round' context.strokeStyle = 'rgba(0, 0, 0, 0)'; //outline context.stroke(); // STROKE context.fillStyle = 'rgba(0,191,255,.5)'; //blue context.fill (); context.closePath(); //grad cap bottom var centerX = 300; var centerY = 180 var radius = 56; var startangle = .9* Math.PI;; // left var endangle = .1* Math.PI; // right context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, false); context.lineWidth = 5; context.strokeStyle = 'rgba(0, 0, 0, 0)'; context.stroke(); context.fillStyle = 'rgba(210,180,140,1)'; context.fill (); context.closePath(); // left ear (outter) var centerX = 216; var centerY = 218 var radius = 20; var startangle = 1.75* Math.PI;; // right var endangle = .7* Math.PI; // left context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, true); context.lineWidth = 2; context.strokeStyle = 'rgba(0, 0, 0, 0)'; context.stroke(); context.fillStyle = 'rgba(210,105,30,1)'; //chocolate context.fill (); context.closePath(); // left ear (inner) var centerX = 216; var centerY = 218 var radius = 15; var startangle = 1.75* Math.PI;; // right var endangle = .7* Math.PI; // left context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, true); context.lineWidth = 2; context.strokeStyle = 'rgba(0, 0, 0, 0)'; context.stroke(); context.fillStyle = 'rgba(0,0,0,0.3)'; context.fill (); context.closePath(); // right ear (outter) var centerX = 382; var centerY = 222 var radius = 20; var startangle = 1.3* Math.PI;; // right var endangle = .25* Math.PI; // left context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, false); context.lineWidth = 2; context.strokeStyle = 'rgba(0, 0, 0, 0)'; context.stroke(); context.fillStyle = 'rgba(210,105,30,1)'; //chocolate context.fill (); context.closePath(); // right ear (inner) var centerX = 382; var centerY = 222 var radius = 15; var startangle = 1.3* Math.PI;; // right var endangle = .25* Math.PI; // left context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, false); context.lineWidth = 2; context.strokeStyle = 'rgba(0, 0, 0, 0)'; context.stroke(); context.fillStyle = 'rgba(0,0,0,0.3)'; context.fill (); context.closePath(); //head top var centerX = 300; var centerY = 290 var radius = 110; var startangle = 1* Math.PI;; // left var endangle = 0* Math.PI; // right context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, false); context.moveTo(411,293); context.lineWidth = 0; // context.strokeStyle = 'rgba(255,255,255,0)'; // context.stroke(); context.fillStyle = 'rgba(244,164,96, 1)'; //sandy brown (actually copied body color) context.fill (); context.closePath(); //body context.moveTo(150,440); // COORDINATES OF STARTING POINT (left) context.lineTo(150,510); // COORDS OF ENDING POINT 1 (down) context.lineTo(300,640); // COORDS OF POINT 2 context.lineTo(450,510); // COORDS OF POINT 3 context.lineTo(450,440); // COORDS OF POINT 4 context.lineTo(300,375); // COORDS OF POINT 5 context.lineTo(150,440); // COORDS OF POINT 6 context.lineWidth = 3; // STROKE WIDTH context.strokeStyle = 'rgba(255,255,255,0)'; context.stroke(); // STROKE context.fillStyle = 'rgba(210,105,30,1)'; //chocolate context.fill (); context.closePath(); // name tag var x=230; var y=420; var width = 30 var height= 15; context.beginPath(); context.rect(x, y, width, height); context.lineWidth = 5; context.fillStyle = 'rgba(255,255,255,1)'; //context.strokeStyle = 'rgba(0,0,0,1)'; context.fill(); //context.stroke(); /// cheeks (figure out why collar is causing stroke/outline) context.beginPath(); context.moveTo(190,290); context.quadraticCurveTo(40,375,290,360); context.quadraticCurveTo(560,365,410,290); context.lineWidth = 0; //context.strokeStyle = 'rgba(0,0,0,0)'; //context.stroke(); context.fillStyle = 'rgba(210,105,30,1)'; //sandy brown context.fill (); context.closePath(); //tie (figure out why collar is causing stroke/outline) context.beginPath(); context.moveTo(285,393); // COORDINATES OF STARTING POINT (left) context.lineTo(285,480); // COORDS OF ENDING POINT 1 (down) context.lineTo(300,520); // COORDS OF POINT 2 context.lineTo(315,480); // COORDS OF POINT 3 context.lineTo(315,393); // COORDS OF POINT 4 context.lineWidth = 1; // STROKE WIDTH context.strokeStyle = 'rgba(255,255,255,1.00)'; context.stroke(); // STROKE context.closePath(); //collar** stroke style effects tie and cheeks context.beginPath(); context.moveTo(270,365); // COORDINATES OF STARTING POINT (left) context.lineTo(270,410); // COORDS OF ENDING POINT 1 (down) context.lineTo(300,375); // COORDS OF POINT 2 context.lineTo(330,410); // COORDS OF POINT 3 context.lineTo(330,365); // COORDS OF POINT 4 //context.lineTo(270,365); // COORDS OF POINT 5 context.lineWidth = 1; // STROKE WIDTH context.strokeStyle = 'rgba(255,255,255,1)'; context.stroke(); // STROKE context.closePath(); // mouth context.beginPath(); context.moveTo(300,340); context.quadraticCurveTo(240,346,266,310); context.quadraticCurveTo(295,277,320,305); context.quadraticCurveTo(355,346,300,340); context.lineWidth = 3; context.strokeStyle = 'rgba(0, 0, 0, 0)'; context.fillStyle = 'rgba(210,180,140,1)'; //tan context.fill (); context.stroke(); //nose var centerX = 295; var centerY = 305 var radius = 13; var startangle = 1* Math.PI;; // left var endangle = 0* Math.PI; // right context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, true); context.moveTo(283,305); // COORDINATES OF STARTING POINT (left) context.lineTo(308,305); // COORDS OF ENDING POINT 1 (right) context.lineWidth = 1.5; context.strokeStyle = 'rgba(0, 0, 0, 0)'; context.stroke(); context.fillStyle = 'rgba(139,69,19,1)'; //saddle brown context.fill (); context.closePath(); // nose (nostrail right) var centerX = 300; var centerY = 309 var radius = 2.5; var startangle = 0* Math.PI;; // right var endangle = 2* Math.PI; // left context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, false); context.lineWidth = 4; context.strokeStyle = 'rgba(0, 0, 0, 0)'; context.stroke(); context.fillStyle = 'rgba(0,0,0,.6)'; context.fill (); context.closePath(); // nose (nostrail left) var centerX = 292; var centerY = 309 var radius = 2.5; var startangle = 0* Math.PI;; // right var endangle = 2* Math.PI; // left context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, false); context.lineWidth = 4; context.strokeStyle = 'rgba(0, 0, 0, 0)'; context.stroke(); context.fillStyle = 'rgba(0,0,0,.6)'; context.fill (); context.closePath(); // left eye (outter) var centerX = 265; var centerY = 240 var radius = 19; var startangle = 0* Math.PI;; // right var endangle = 2* Math.PI; // left context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, false); context.lineWidth = 3; context.strokeStyle = 'rgba(0, 0, 0, 0)'; context.stroke(); context.fillStyle = 'rgba(152,251,152,1)'; context.fill (); context.closePath(); // left eye (inner) var centerX = 265; var centerY = 240 var radius = 10; var startangle = 0* Math.PI;; // right var endangle = 2* Math.PI; // left context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, false); context.lineWidth = 3; context.strokeStyle = 'rgba(0, 0, 0, 0)'; context.stroke(); context.fillStyle = 'rgba(255,255,255,1)'; context.fill (); context.closePath(); // left eye (most inward) var centerX = 265; var centerY = 240 var radius = 5; var startangle = 0* Math.PI;; // right var endangle = 2* Math.PI; // left context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, false); context.lineWidth = 3; context.strokeStyle = 'rgba(0, 0, 0, 0)'; context.stroke(); context.fillStyle = 'rgba(0,0,0,1)'; context.fill (); context.closePath(); // right eye (outter) var centerX = 335; var centerY = 240 var radius = 19; var startangle = 0* Math.PI;; // right var endangle = 2* Math.PI; // left context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, false); context.lineWidth = 3; context.strokeStyle = 'rgba(0, 0, 0, 0)'; context.stroke(); context.fillStyle = 'rgba(152,251,152, 1)'; context.fill (); context.closePath(); // right eye (inner) var centerX = 335; var centerY = 240 var radius = 10; var startangle = 0* Math.PI;; // right var endangle = 2* Math.PI; // left context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, false); context.lineWidth = 3; context.strokeStyle = 'rgba(0, 0, 0, 0)'; context.stroke(); context.fillStyle = 'rgba(255,255,255, 1)'; context.fill (); context.closePath(); // right eye (most inward) var centerX = 335; var centerY = 240 var radius = 5; var startangle = 0* Math.PI;; // right var endangle = 2* Math.PI; // left context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, false); context.lineWidth = 3; context.strokeStyle = 'rgba(0, 0, 0, 0)'; context.stroke(); context.fillStyle = 'rgba(0,0,0,.8)'; context.fill (); context.closePath(); // <<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE /////////////////////////////////////////////////////////////////// // CREDITS context.save(); var credits = "Blake Gottlieb, Canvas, FMX 210, SP 2020"; 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 = mouseX + " || " + mouseY + " || counter = " + Math.round(counter); ///////////////////////////////////////////////////////////////// // LAST LINE CREATES THE ANIMATION requestAnimFrame(draw); // CALLS draw() every nth of a second } </script> </body> </html>
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)