CANVAS Final Project

 

Alright needless to say this thing took me about good whopping 8 hours to complete but considering that this is my first time ever doing code I'm am quite pleased with myself. Using the Adobe Dreamweaver with just HTML5 was a definite challenge to say the least. My inspiration came from 1920's art deco style as not only are they geometric in shape but almost hold no outlines in most works.

                           

There's something about these works that feel so futuristic and it fascinates me to see so many people from back then think about what the future could look like.  But I am a gamer and I loved the fallout series along with Bioshock as they both held strong ties to 1920 to 1940's style of living along with the old crackling music from the past. Dystopian themes but using bright vibrant but muted colors to bring the whole image together. I came up with two designs but ended up going with the much more simpler robot design as it was easier to shape rather than a full bodied man.

                                          

I believe I got it pretty darn close to my original sketch. Unfortunately I wanted to imbed text within the piece to really tie it all in together but I had no idea how to place text within html. Needless to say I'm very pleased with the piece as a whole and I definitely feel that old school 1920's vibe from it. Color scheme was inspired by the Vault Boy from fallout but the style of the robot came from Bendy and the Ink machine.                                                                                                                                        

I really enjoyed this project as it most definitely made me move out of my comfort zone and explore something completely new. I never thought I would ever touch code nor did I think I could make something out of it with art. I feel like I leveled up in this instance.   (๑¯ω¯๑)

My Code:

var x1 = 100;

 var y1 = 200;

 var x2 = 500;

 var y2 = 500;

 

 var startx = 0;

 var starty = 0;

 var width = 800;

 var height = 600;

//Gold Line accents

//Goldline1

 var x3= 575;

 var y3= 13;

 var x4= 575;

 var y4= 320;

//GoldLine 2

 var x5= 555;

 var y5= 13;

 var x6= 555;

 var y6= 320;

 //Sleeve Bolt Line

 var x7= 515;

 var y7= 549;

 var x8= 515;

 var y8= 795;

//Collar

var tx1 = 295;

var ty1 = 582;

var tx2 = 221;

var ty2 = 471;

var tx3 = 375;

var ty3 = 471;

//Tie

//Tie Top

var tx7 = 295;

var ty7 = 582;

var tx8 = 250;

var ty8 = 650;

var tx9 = 335;

var ty9 = 650;

//Tie Bottom

var tx4 = 292;

var ty4 = 750;

var tx5 = 250;

var ty5 = 650;

var tx6 = 335;

var ty6 = 650;

//Body Shade

var rectx2  = 135;

var recty2 = 515;

var rectwidth2 = 15;

var rectheight2 = 300;

//Background

// Rectangler

context.beginPath();

context.rect(startx, starty, canvas.width, canvas.height);

  var grd = context.createLinearGradient(0, 600, 800, 0);

  grd.addColorStop(0, 'rgba(24,36,49,1.00)');

  grd. addColorStop(.5, 'rgba(11,199,241,1.00)');

  grd.addColorStop(1, 'rgba(9,21,180,1.00)');

  context.fillStyle = grd;

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

  context.fill();

  context.strokeStyle = 'rgba(200,190,14,1.00)' ;

 context.lineWidth = 27;

context.stroke();

context.beginPath();

for (var i=4; i<canvas.height; i+=68) {

context.moveTo(0,i);

//context.lineTo(canvas.width,i);

context.lineTo(canvas.width-i,i);

context.lineTo(i,i);

context.lineWidth = 2;

context.strokeStyle = "rgba(253,255,188,0.22)";

context.stroke();

}

context.closePath();

////circle

  var centerX = canvas.width / 2;

        var centerY = canvas.height / 3.5;

        var radius = 200;

        var startangle = 0;

        var endangle = 2 * Math.PI;

  

//Fill with lining

        context.beginPath();

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

context.fillStyle = 'rgba(7,7,32,0.80)' ;

context.fill();

context.lineWidth =10;

context.strokeStyle = 'rgba(200,190,14,1.00)';

context.stroke();

//Part of Head

//Neck

var x=250;

var y=420;

var width = 100

var height= 50;

context.beginPath();

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

context.lineWidth = 5;

context.fillStyle = 'rgba(163,163,176,1.00)';

context.strokeStyle = 'rgba(149,149,172,1.00)';

context.fill();

context.stroke();

//Left Ear

//Rectangle

var x=410;

var y=247;

var width = 70

var height= 110;

context.beginPath();

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

context.lineWidth = 5;

context.fillStyle = 'rgba(163,163,176,1.00)';

context.strokeStyle = 'rgba(149,149,172,1.00)';

context.fill();

context.stroke();

//Right Ear

//Rectangle

var x=120;

var y=250;

var width = 70

var height= 110;

context.beginPath();

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

context.lineWidth = 5;

context.fillStyle = 'rgb(163,163,176,1.00)';

context.strokeStyle = 'rgb(149,149,172,1.00)';

context.fill();

context.stroke();

//Antenna Base

// starting point coordinates

var x = 90;

var y = 150;

// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 100;

var cpointY = canvas.height / 2 - 450;

// ending point coordinates

var x1 = 300;

var y1 = 250;

context.beginPath();

context.moveTo(x, y);

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

context.lineWidth = 9;

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

context.stroke();

//Antenna Ball

var centerX = canvas.width / 6.8;

        var centerY = canvas.height / 5;

        var radius = 35;

        var startangle = 0;

        var endangle = 2 * Math.PI;

  

//Fill with lining

        context.beginPath();

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

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

context.fill();

context.lineWidth =5;

//circle

//Robot Head

  var centerX = canvas.width / 2;

        var centerY = canvas.height / 2.7;

        var radius = 150;

        var startangle = 0;

        var endangle = 2 * Math.PI;

  

//Fill with lining

        context.beginPath();

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

context.fillStyle = 'rgba(163,163,176,1.00)' ;

context.fill();

context.lineWidth =5;

context.strokeStyle = 'rgba(149,149,172,1.00)';

context.stroke();

//Face of Robot

//Eye Right eye

var centerX = canvas.width / 2.5;

        var centerY = canvas.height / 2.7;

        var radius = 41;

        var startangle = 0;

        var endangle = 2 * Math.PI;

//Fill 

        context.beginPath();

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

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

context.fill();

//Left Eye Closed

//top arc

var centerX = 368;

        var centerY = 320

        var radius = 39;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;

        context.beginPath();

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

      context.lineWidth = 18;

        context.strokeStyle = "#000000";

        context.stroke();

//Right eye Cut out

context.beginPath(); // begin a shape

context.moveTo(150,278); // point A coordinates

context.lineTo(230, 250); // point B coords

context.lineTo(235,300); // point C coords

context.closePath(); // close the shape

context.lineWidth = 15; 

context.lineJoin = "square";

context.fillStyle = "rgba(163,163,176,1.00)";

context.fill();

//Body

//Rectangle

var x=130;

var y=470;

var width = 330

var height= 350;

context.beginPath();

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

context.lineWidth = 7;

context.lineJoin = "round";

context.fillStyle = 'rgba(16,1,77,1.00)';

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

context.fill();

context.stroke();

//Left Arm

//Rectangle

var x=405;

var y=535;

var width = 125

var height= 260;

context.beginPath();

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

context.lineWidth = 7;

context.lineJoin = "round";

context.fillStyle = 'rgba(16,1,77,1.00)';

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

context.fill();

context.stroke();

//Part of Arm

//Hand

var x=435;

var y=494;

var width = 130

var height= 35;

context.beginPath();

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

context.lineWidth = 5;

context.fillStyle = 'rgba(163,163,176,1.00)';

context.strokeStyle = 'rgba(149,149,172,1.00)';

context.fill();

context.stroke();

//Highlight on arm

var x=413;

var y=544;

var width = 50

var height= 270;

context.beginPath();

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

context.lineWidth = 5;

context.lineJoin = "round";

context.fillStyle = 'rgba(171,162,206,0.13)';

context.fill();

//top arc

//Apple

var centerX = 505;

        var centerY = 435

        var radius = 55;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;

        context.beginPath();

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

        context.fillStyle = "#C40000";

context.fill();

      context.lineWidth = 5;

        context.strokeStyle = "#AD0000";

        context.stroke();

//botom arc   

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.fillStyle = "red";

      context.lineWidth = 50;

        context.strokeStyle = "black";

        context.stroke();

//top arc

var centerX = 480;

        var centerY = 435

        var radius = 30;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;

        context.beginPath();

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

        context.fillStyle = "C40000";

context.fill();

      context.lineWidth = 5;

        context.strokeStyle = "#AD0000";

        context.stroke();

//botom arc

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, true);

        //context.fillStyle = "red";

      context.lineWidth = 50;

        context.strokeStyle = "black";

        context.stroke();

//top arc

var centerX = 530;

        var centerY = 435

        var radius = 30;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;

        context.beginPath();

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

        context.fillStyle = "#C40000";

context.fill();

      context.lineWidth = 5;

        context.strokeStyle = "#AD0000";

        context.stroke();

//bottom arc    

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, true);

        //context.fillStyle = "red";

      context.lineWidth = 50;

        context.strokeStyle = "black";

        context.stroke();

//Line for bolts

context.moveTo(242,157); // COORDINATES OF STARTING POINT

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

context.lineWidth = 3; // STROKE WIDTH

context.strokeStyle = "rgb(149,149,172,1.00)";

context.stroke(); // STROKE

context.moveTo(325,466); // COORDINATES OF STARTING POINT

context.lineTo(325,445); // COORDS OF ENDING POINT 1

context.lineWidth = 3; // STROKE WIDTH

context.strokeStyle = "rgb(149,149,172,1.00)";

context.stroke(); // STROKE

//Bolts

//1.

var centerX = canvas.width / 2.6;

        var centerY = canvas.height / 4.5;

        var radius = 5;

        var startangle = 0;

        var endangle = 2 * Math.PI;

  

//Fill with lining

        context.beginPath();

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

context.lineWidth =2;

context.strokeStyle = 'rgba(139,134,182,1.00)';

context.stroke();

//2.

var centerX = canvas.width / 2.6;

        var centerY = canvas.height / 4.1;

        var radius = 5;

        var startangle = 0;

        var endangle = 2 * Math.PI;

  

//Fill with lining

        context.beginPath();

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

context.lineWidth =2;

context.strokeStyle = 'rgba(139,134,182,1.00)';

context.stroke();

//3.

var centerX = canvas.width / 2.6;

        var centerY = canvas.height / 3.7;

        var radius = 5;

        var startangle = 0;

        var endangle = 2 * Math.PI;

  

//Fill with lining

        context.beginPath();

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

context.lineWidth =2;

context.strokeStyle = 'rgba(139,134,182,1.00)';

context.stroke();

.//4

var centerX = canvas.width / 2.8;

        var centerY = canvas.height / 3.7;

        var radius = 5;

        var startangle = 0;

        var endangle = 2 * Math.PI;

  

//Fill with lining

        context.beginPath();

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

context.lineWidth =2;

context.strokeStyle = 'rgba(139,134,182,1.00)';

context.stroke();

//5.

var centerX = canvas.width / 1.8;

        var centerY = canvas.height / 1.8;

        var radius = 3;

        var startangle = 0;

        var endangle = 2 * Math.PI;

  

//Fill with lining

        context.beginPath();

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

context.lineWidth =2;

context.strokeStyle = 'rgba(139,134,182,1.00)';

context.stroke();

//Mouth

//Goldline 1

context.beginPath();

context.moveTo(x3,y3);

context.lineTo(x4,y4);

context.lineWidth = 5;

context.strokeStyle = 'rgb(200,190,14,1.00)';

context.lineCap = 'butt';

    context.stroke();

//GoldLine 2

context.beginPath();

    context.moveTo(x5,y5);

  context.lineTo(x6,y6);

  context.lineWidth = 5;

  context.strokeStyle = 'rgb(200,190,14,1.00)';

  context.lineCap = 'butt';

  context.stroke();

//Collar (Base)

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 5;

context.fillStyle = 'rgba(255,255,255,0.81)';

context.fill();

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

context.stroke();

//Top of Tie

context.beginPath();

context.moveTo(tx7, ty7);

context.lineTo(tx8, ty8);

context.lineTo(tx9, ty9);

context.lineTo(tx7, ty7);

context.closePath();

context.lineWidth = 5;

context.fillStyle = 'rgba(223,212,69,1.00)';

context.fill();

//Bottom of Tie

context.beginPath();

context.moveTo(tx4, ty4);

context.lineTo(tx5, ty5);

context.lineTo(tx6, ty6);

context.lineTo(tx4, ty4);

context.closePath();

context.lineWidth = 5;

context.fillStyle = 'rgba(223,212,69,1.00)';

context.fill();

//Body Shade

    context.beginPath();

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

context.lineWidth = 15;

context.fillStyle = 'rgba(171,162,206,0.13)';

context.fill();

//Mouth

var centerX = 300;

        var centerY = 355

        var radius = 65;

        var startangle = 0* Math.PI;;

        var endangle =  1* Math.PI;

        context.beginPath();

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

        context.fillStyle = "#D2D2D3";

context.fill();

      context.lineWidth = 3;

        context.strokeStyle = "#848DB0";

        context.stroke();

//Bottom Lip

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.fillStyle = "red";

      context.lineWidth = 50;

        context.strokeStyle = "black";

        context.stroke();

//Bolt line Sleeve

context.beginPath();

context.moveTo(x7,y7);

context.lineTo(x8,y8);

context.lineWidth = 5;

context.strokeStyle = 'rgba(10,15,28,0.94)';

context.lineCap = 'round';

context.stroke();

//Bolts

//1

var centerX = canvas.width / 1.2;

        var centerY = canvas.height / 1.4;

        var radius = 6;

        var startangle = 0;

        var endangle = 2 * Math.PI;

  

//Fill with lining

        context.beginPath();

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

context.lineWidth =3;

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

context.stroke();

//Bolt 2

var centerX = canvas.width / 1.2;

        var centerY = canvas.height / 1.3;

        var radius = 6;

        var startangle = 0;

        var endangle = 2 * Math.PI;

  

//Fill with lining

        context.beginPath();

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

context.lineWidth =3;

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

context.stroke();

//Bolt 3

var centerX = canvas.width / 1.2;

        var centerY = canvas.height / 1.2;

        var radius = 6;

        var startangle = 0;

        var endangle = 2 * Math.PI;

  

//Fill with lining

        context.beginPath();

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

context.lineWidth =3;

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

context.stroke();

//Bolt 4

var centerX = canvas.width / 1.2;

        var centerY = canvas.height / 1.1;

        var radius = 6;

        var startangle = 0;

        var endangle = 2 * Math.PI;

  

//Fill with lining

        context.beginPath();

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

context.lineWidth =3;

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

context.stroke();

    //Apple Shine

var centerX = canvas.width / 1.1;

        var centerY = canvas.height / 1.9;

        var radius = 4;

        var startangle = 0;

        var endangle = 2 * Math.PI;

  

//Fill with lining

        context.beginPath();

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

context.lineWidth =2;

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

context.fill();