Canvas Coding Final

This is a piece that I call "HackerMan" and I created it entirely in code on a computer. Traditionally I've always created digital art inside of a program that has all of the coding done for you. Making this my first experience with writing code from scratch and I truly learned a lot in the process. My inspiration for this piece is how I envision hackers in the 1970's. I've always had an interest in glasses and the reflections that they can show us of the world they see, so I thought it would be fun to incorporate that into this piece. In the reflections on the glasses you can see a CRT monitor which is all green and supposed to show some code on the screens. Sadly I am still learning and couldn't figure out how to make the lettering appear backwards like it would in real life. I had a lot of fun playing around with gradients and almost every single shape in this piece has a small gradient to make it feel more true to life.

I learned a lot with this piece and I'm sure I'll bring these learnings with me if I ever return to coding again. It was very fun to think chronologically on this piece because the program draws the shapes from the bottom layer up. This means, that if I move a section of code that creates the mouth, underneath the section that creates the face you wouldn't be able to see it. I've attached a copy of the original code and the drawing I created as inspiration.

Orignal Drawing:

Total Time Spent on Project:

-Roughly 6 Hours

HTML Code:

<!doctype html>

<html>

<head>

<title> FMX 210 DIGITAL MEDIA - CANVAS PROJECT </title>

body,td,th {

font-family: Helvetica, Arial, sans-serif;

font-size: 12px;

color: rgba(255,255,255,1);

}

body {

background-color: rgba(0,0,0,1);

}

#myCanvas { border: rgba(102,0,255,1) medium dashed; background-color: rgba(255,255,255,1); }

</style>

</head>

<body>

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE

//Background Gradient (Black->Gray)

var startX = 400;

var startY = 350;

var startRadius = 50;

var endX = 400;

var endY = 350;

var endRadius = 500;

var backGrd = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);

backGrd.addColorStop(0, 'rgba(0, 0, 0, 0.5)');

backGrd.addColorStop(1, 'black');

//Background Rectangle

context.beginPath();

context.rect(0, 0, 800, 600);

context.fillStyle = backGrd;

context.fillRect(0, 0, 800, 600);

//Face Creation

context.beginPath();

context.moveTo(-200, -500); //upper left

context.bezierCurveTo(20, 475, 30, 475, 200, 900); //lower left

//context.lineTo(200, 900);

context.lineTo(600,900); //lower right

context.bezierCurveTo(780, 475, 770, 475, 1000, -500); //upper right

//context.lineTo(1000, -500);

context.closePath();

context.lineWidth = 10;

context.strokeStyle = 'black';

context.stroke();

context.fillStyle = 'rgba(255, 51, 255, 0.3)';

context.fill();

//Nose

context.beginPath();

context.moveTo(350, 275); //Top of Nose

context.quadraticCurveTo(250, 525, 400, 425) //Bottom of Nose

context.lineWidth = 10;

context.lineCap = 'round';

context.strokeStyle = 'black';

context.stroke();

//Left Lens Gradient

context.beginPath();

context.arc(150, 200, 175, 0, 2 * Math.PI, false);

context.lineWidth = 10;

context.strokeStyle = 'black';

context.stroke();

var GRD1 = context.createLinearGradient(50, 350, 280, 100);

GRD1.addColorStop(0, 'rgb(240, 10, 10)');

GRD1.addColorStop(1, 'rgb(10, 10, 240)');

context.fillStyle = GRD1;

context.fill();

//Left Screen Reflection

context.beginPath();

context.moveTo(290, 95);

context.lineTo(50, 135);

context.lineTo(50, 345);

//context.quadraticCurveTo(275, 425, 325, 200); //lower right curve?

context.lineTo(100, 370);

context.lineTo(150, 377);

context.lineTo(200, 370);

context.lineTo(250, 345);

context.lineTo(300, 287);

context.lineTo(335, 200);

context.lineTo(325, 175);

context.closePath();

context.lineWidth = 5;

context.strokeStyle = 'black';

context.stroke();

context.fillStyle = 'rgb(0, 255, 0)';

context.fill();

//Left Screen Grid

context.beginPath();

context.moveTo(100, 128); //Far Left

context.lineTo(100, 370);

context.moveTo(150, 120);

context.lineTo(150, 375);

context.moveTo(200, 112);

context.lineTo(200, 370);

context.moveTo(250, 103);

context.lineTo(250, 345);

context.moveTo(300, 120);

context.lineTo(300, 290); //Right Line

context.moveTo(50, 190); //Top Line

context.lineTo(315, 145);

context.moveTo(50, 240);

context.lineTo(320, 195);

context.moveTo(50, 290);

context.lineTo(315, 245);

context.moveTo(50, 340); //Bottom Line

context.lineTo(290, 300);

context.lineWidth = 5;

context.strokeStyle = 'rgba(20, 115, 33, 0.5)';

context.stroke();

//Left Lens Glasses

context.beginPath();

context.arc(150, 200, 175, 0, 2 * Math.PI, false);

context.lineWidth = 10;

context.strokeStyle = 'black';

context.stroke();

//var GRD1 = context.createLinearGradient(50, 350, 280, 100);

//GRD1.addColorStop(0, 'rgb(240, 10, 10)');

//GRD1.addColorStop(1, 'rgb(10, 10, 240)');

//context.fillStyle = GRD1;

//context.fill();

//Right Lens Gradient

context.beginPath();

context.arc(575, 200, 175, 0, 2 * Math.PI, false);

context.lineWidth = 10;

context.strokeStyle = 'black';

context.stroke();

var GRD1 = context.createLinearGradient(750, 350, 475, 100);

GRD1.addColorStop(0, 'rgb(0, 10, 250)');

GRD1.addColorStop(1, 'rgb(250, 10, 0)');

context.fillStyle = GRD1;

context.fill();

//Right Screen Reflection

context.beginPath();

context.moveTo(435, 95);

context.lineTo(670, 120);

context.lineTo(670, 345);

context.lineTo(650, 360);

context.lineTo(600, 375);

context.lineTo(550, 373);

context.lineTo(500, 358);

context.lineTo(475, 342);

context.lineTo(450, 325);

context.lineTo(410, 260);

context.lineTo(400, 200);

context.lineTo(410, 150);

context.closePath();

context.lineWidth = 5;

context.strokeStyle = 'black';

context.stroke();

context.fillStyle = 'rgb(0, 255, 0)';

context.fill();

//Right Screen Grid

context.beginPath();

context.moveTo(670, 170); //I started with the top line for whatver reason

context.lineTo(410, 142);

context.moveTo(670, 220);

context.lineTo(405, 192);

context.moveTo(670, 270);

context.lineTo(405, 242);

context.moveTo(670, 320);

context.lineTo(425, 293);

context.moveTo(615, 365);

context.lineTo(490, 350); //Bottom Line

context.moveTo(620, 115); //Right Line

context.lineTo(620, 365);

context.moveTo(570, 110);

context.lineTo(570, 370); //50 gap

context.moveTo(520, 105);

context.lineTo(520, 365);

context.moveTo(470, 100);

context.lineTo(470, 340);

context.moveTo(420, 120); //Left Line

context.lineTo(420, 275);

context.lineWidth = 5;

context.strokeStyle = 'rgba(20, 115, 33, 0.5)';

context.stroke();

//Right Lens Glasses

context.beginPath();

context.arc(575, 200, 175, 0, 2 * Math.PI, false);

context.lineWidth = 10;

context.strokeStyle = 'black';

context.stroke();

//Glasses Bridge

context.beginPath();

context.moveTo(325, 220);

context.quadraticCurveTo(360, 195, 400, 220);

context.lineTo(400, 190);

context.quadraticCurveTo(360, 165, 325, 190);

context.closePath();

context.lineWidth = 10;

context.strokeStyle = 'black';

context.stroke();

context.fillStyle = 'black';

context.fill();

//Glasses Right Piece

context.beginPath();

context.moveTo(750, 200);

context.lineTo(800, 175);

context.lineTo(800, 205);

context.lineTo(750, 230);

context.closePath();

context.lineWidth = 10;

context.strokeStyle = 'black';

context.stroke();

context.fillStyle = 'black';

context.fill();

//smile

context.beginPath();

context.moveTo(165, 475);

context.quadraticCurveTo(400, 550, 635, 490);

context.quadraticCurveTo(385, 670, 165, 475);

context.closePath();

context.lineWidth = 15;

context.strokeStyle = 'black';

context.stroke();

context.fillStyle = 'white';

context.fill();

//teeth lines

context.beginPath();

context.moveTo(225, 490);

context.lineTo(235, 530);

context.moveTo(275, 500);

context.lineTo(285, 555);

context.moveTo(325, 510);

context.lineTo(335, 570);

context.moveTo(375, 515);

context.lineTo(385, 580);

context.moveTo(425, 515);

context.lineTo(435, 575);

context.moveTo(475, 515);

context.lineTo(485, 570);

context.moveTo(525, 510);

context.lineTo(535, 550);

context.moveTo(575, 503);

context.lineTo(582, 525);

context.lineWidth = '5';

context.strokeStyle = 'black';

context.stroke();

//Upper Left Hair

context.beginPath();

context.moveTo(-150, -80);

context.lineTo(90, 150);

context.lineTo(100, -100);

context.closePath();

context.lineWidth = 5;

var GRD1 = context.createLinearGradient(0, 0, 120, 120);

GRD1.addColorStop(0, 'rgb(217, 217, 0)');

GRD1.addColorStop(1, 'rgb(255, 255, 0)');

context.fillStyle = GRD1;

context.fill();

context.strokeStyle = 'black';

context.stroke();

//Hair #2

context.beginPath();

context.moveTo(220, -20);

context.lineTo(275, 100);

context.lineTo(300, -20);

context.closePath();

context.lineWidth = 5;

var GRD1 = context.createLinearGradient(220, 0, 280, 100);

GRD1.addColorStop(0, 'rgb(240, 240, 10)');

GRD1.addColorStop(1, 'rgb(255, 255, 0)');

context.fillStyle = GRD1;

context.fill();

context.strokeStyle = 'black';

context.stroke();

//Hair #3

context.beginPath();

context.moveTo(485, -20);

context.lineTo(510, 60);

context.lineTo(550, -20);

context.closePath();

context.lineWidth = 5;

var GRD1 = context.createLinearGradient(485, 0, 500, 100);

GRD1.addColorStop(0, 'rgb(240, 240, 10)');

GRD1.addColorStop(1, 'rgb(255, 255, 0)');

context.fillStyle = GRD1;

context.fill();

context.strokeStyle = 'black';

context.stroke();

//Hair #4

context.beginPath();

context.moveTo(700, -200);

context.lineTo(700, 150);

context.lineTo(950, 75);

context.closePath();

context.lineWidth = 5;

var GRD1 = context.createLinearGradient(700, 150, 825, -25);

GRD1.addColorStop(0, 'rgb(240, 240, 10)');

GRD1.addColorStop(1, 'rgb(255, 255, 0)');

context.fillStyle = GRD1;

context.fill();

context.strokeStyle = 'black';

context.stroke();

//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE

// CHANGE THE CREDITS: ADD YOUR NAME AND CLASS INFORMATION

var credits = "Max Puleo, FMX 210, SP20";

context.beginPath();

context.font = 'bold 20px Arial';

//context.fillStyle = "rgba(0,0,0,1)";

context.fillStyle = 'white';

context.fillText(credits, 90, 590);

context.closePath();

</script>

</body>

</html>

Search This Blog

Max Puleo Digital Media

Canvas Coding Final

Comments

Post a Comment

Popular posts from this blog

Gradient Mesh

Business Cards

Autoscopy