Rebecca's Digital Arts Work: HTML5 Illustration

For my HTML5 illustration I chose to do an image of Baymax from Big Hero 6 with a silhouette of the 'San Fransokyo' bridge (the setting of the movie) in the background. First, I placed the reference image of Baymax on the grid in illustrator. Once I completed the code for Baymax, I placed the bridge over him on the graph and lowered the opacity to determine spacing.

This is the finished product.

After completing Baymax and the bridge, I thought the image looked a little silly because Baymax appeared to be floating. In order to correct this, I use rectangles to create a simple silhouette of a city skyline beneath him so he appeared to be standing on a building. I made the background a red gradient which gradually gets darker towards the bottom in order to represent the posters I have seen for the movie which use the colors red, black, and white. In addition, there are a few differences between my Baymax and the original image. I added shadows to give Baymax more of a three dimensional appearance and made some of the darker markings on Baymax slightly different sizes. Once this was completed, I noticed the overall image seemed a bit unbalanced. As a result, I added Baymax's 'catchphrase' "Hello. I am Baymax, your personal healthcare companion." This phrase not only balances out the image out, but fits with the picture as a whole. There are a few things that could be improved, for example I couldn't quite get the head to be as symmetrical as the original image, but overall I am happy with the outcome. This was the first time I have worked with HTML and, while it is not my favorite method of designing a digital image, I am glad that I now have a better understanding of how to use it.

**Neither of the reference images are mine. I simply used them to approximate points*

Here is the code for my image:

<!DOCTYPE HTML>

<html>

<head>

window.onload = function() {

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

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

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

//Rectangle Variables

var startx = 0;

var starty = 0;

var width = 800;

var height = 600;

//Gradient Variables

var grdstartx = 400;

var grdstarty = 0;

var grdendx = 400;

var grdendy = 600;

context.beginPath();

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

context.lineWidth = 0;

var grd = context.createLinearGradient(grdstartx, grdstarty, grdendx, grdendy);

grd.addColorStop(0, 'rgb(200, 0, 0)');

grd.addColorStop(.3, 'rgb(120, 0, 0)');

grd.addColorStop(.7, 'rgb(95, 0, 0)');

grd.addColorStop(.8, 'rgb(70, 0, 0)');

grd.addColorStop(1, 'rgb(60, 0, 0)');

context.fillStyle = grd;

context.fill();

//bridge

var x41 = 415;

var y41 = 25;

var controlx40 = 600;

var controly40 = 100;

var endx40 = 775;

var endy40 = 25;

var controlx41 = 775;

var controly41 = 75;

var endx41 = 625;

var endy41 = 77;

var endx42 = 500;

var endy42 = 77;

var controlx42 = 425;

var controly42 = 68;

var startx = 485;

var starty = 65;

var width = 10;

var height = 550;

var startx2 = 675;

var starty2 = 65;

var width2 = 10;

var height2 = 550;

context.beginPath();

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

context.lineWidth = 10;

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

context.fill();

context.stroke();

context.beginPath();

context.rect(startx2, starty2, width2, height2);

context.lineWidth = 10;

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

context.fill();

context.stroke();

context.beginPath();

context.moveTo(x41, y41);

context.quadraticCurveTo(controlx40, controly40, endx40, endy40)

context.quadraticCurveTo(controlx41, controly41, endx41, endy41)

context.lineTo(endx42, endy42);

context.quadraticCurveTo(controlx42, controly42, x41, y41)

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

context.lineWidth = 2;

context.fill();

context.stroke();

var x45 = 437;

var y45 = 212;

var controlx43 = 600;

var controly43 = 250;

var endx48 = 765;

var endy48 = 212;

var controlx44 = 750;

var controly44 = 250;

var endx46 = 735;

var endy46 = 250;

var endx47 = 450;

var endy47 = 250;

var controlx45 = 448;

var controly45 = 252;

context.beginPath();

context.moveTo(x45, y45);

context.quadraticCurveTo(controlx43, controly43, endx48, endy48)

context.quadraticCurveTo(controlx44, controly44, endx46, endy46)

context.lineTo(endx47, endy47);

context.quadraticCurveTo(controlx45, controly45, x45, y45)

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

context.lineWidth = 2;

context.fill();

context.stroke();

var x49 = 425;

var y49 = 386;

var controlx46 = 450;

var controly46 = 420;

var endx50 = 500;

var endy50 = 420;

var endx51 = 700;

var endy51 = 420;

var controlx47 = 725;

var controly47 = 425;

var endx52 = 767;

var endy52 = 385;

var controlx48 = 750;

var controly48 = 450;

var endx53 = 700;

var endy53 = 450;

var endx54 = 500;

var endy54 = 450;

var x50 = 485;

var y50 = 65;

var endx55 = 0;

var endy55 = 565;

var x51 = 685;

var y51 = 65;

var endx56 = 800;

var endy56 = 175;

var endy57 = 600;

context.beginPath();

context.moveTo(x49, y49);

context.quadraticCurveTo(controlx46, controly46, endx50, endy50)

context.lineTo(endx51, endy51);

context.quadraticCurveTo(controlx47, controly47, endx52, endy52)

context.quadraticCurveTo(controlx48, controly48, endx53, endy53)

context.lineTo(endx54, endy54);

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

context.lineWidth = 2;

context.fill();

context.stroke();

//Bridge Lines

context.beginPath();

context.moveTo(x50, y50);

context.lineTo(endx55, endy55);

context.lineWidth = 7;

context.stroke();

context.beginPath();

context.moveTo(x51, y51);

context.lineTo(endx56, endy56);

context.lineWidth = 7;

context.lineCap = 'round'

context.stroke();

context.beginPath();

context.moveTo(475, 50);

context.lineTo(475, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(450, 100);

context.lineTo(450, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(425, 124);

context.lineTo(425, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(400, 148);

context.lineTo(400, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(375, 175);

context.lineTo(375, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(350, 200);

context.lineTo(350, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(325, 225);

context.lineTo(325, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(300, 250);

context.lineTo(300, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(275, 280);

context.lineTo(275, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(250, 310);

context.lineTo(250, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(225, 326);

context.lineTo(225, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(200, 353);

context.lineTo(200, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(175, 387);

context.lineTo(175, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(150, 410);

context.lineTo(150, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(125, 440);

context.lineTo(125, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(100, 462);

context.lineTo(100, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(75, 490);

context.lineTo(75, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(50, 515);

context.lineTo(50, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(25, 535);

context.lineTo(25, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(705, 80);

context.lineTo(705, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(725, 108);

context.lineTo(725, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(750, 125);

context.lineTo(750, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(775, 150);

context.lineTo(775, endy57);

context.lineWidth = 2;

context.stroke();

//City

var startx3 = 285;

var starty3 = 580;

var width3 = 251;

var height3 = 550;

context.beginPath();

context.rect(startx3, starty3, width3, height3);

context.lineWidth = 1;

context.fillStyle = 'rgb(0, 0, 5)'

context.fill();

context.stroke();

var startx4 = 536;

var starty4 = 530;

var width4 = 200;

var height4 = 550;

context.beginPath();

context.rect(startx4, starty4, width4, height4);

context.lineWidth = 1;

context.fillStyle = 'rgb(0, 0, 5)'

context.fill();

context.stroke();

var startx5 = 736;

var starty5 = 560;

var width5 = 200;

var height5 = 550;

context.beginPath();

context.rect(startx5, starty5, width5, height5);

context.lineWidth = 1;

context.fillStyle = 'rgb(0, 0, 5)'

context.fill();

context.stroke();

var startx6 = 185;

var starty6 = 550;

var width6 = 100;

var height6 = 550;

context.beginPath();

context.rect(startx6, starty6, width6, height6);

context.lineWidth = 1;

context.fillStyle = 'rgb(0, 0, 5)'

context.fill();

context.stroke();

var startx7 = 65;

var starty7 = 515;

var width7 = 120;

var height7 = 550;

context.beginPath();

context.rect(startx7, starty7, width7, height7);

context.lineWidth = 1;

context.fillStyle = 'rgb(0, 0, 5)'

context.fill();

context.stroke();

var startx8 = 0;

var starty8 = 540;

var width8 = 65;

var height8 = 550;

context.beginPath();

context.rect(startx8, starty8, width8, height8);

context.lineWidth = 1;

context.fillStyle = 'rgb(0, 0, 5)'

context.fill();

context.stroke();

//Left arm

var xx = 305;

var yy = 177;

var controlx5 = 150;

var controly5 = 300;

var endx5 = 203;

var endy5 = 462;

var controlx6 = 235;

var controly6 = 524;

var endx6 = 286;

var endy6 = 500;

var controlx7 = 390;

var controly7 = 490;

context.beginPath();

context.moveTo(xx, yy);

context.quadraticCurveTo(controlx5, controly5, endx5, endy5)

context.quadraticCurveTo(controlx6, controly6, endx6, endy6)

context.quadraticCurveTo(controlx7, controly7, xx, yy)

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

context.lineWidth = 10;

context.fill();

context.stroke();

//right arm

var aa = 500;

var bb = 250;

var xcontrol = 625;

var ycontrol = 200;

var xend = 637;

var yend = 100;

var c = 647;

var d = 1;

var e = 575;

var f = 12;

var xcontrol2 = 548;

var ycontrol2 = 13;

var xend2 = 529;

var yend2 = 50;

var xcontrol3 = 548;

var ycontrol3 = 13;

var xend3 = 473;

var yend3 = 150;

var xcontrol4 = 400;

var ycontrol4 = 150;

var xend4 = 400;

var yend4 = 150;

context.beginPath();

context.moveTo(aa, bb);

context.quadraticCurveTo(xcontrol, ycontrol, xend, yend);

context.quadraticCurveTo(c, d, e, f);

context.quadraticCurveTo(xcontrol2, ycontrol2, xend2, yend2);

context.quadraticCurveTo(xcontrol3, ycontrol3, xend3, yend3);

context.quadraticCurveTo(xcontrol4, ycontrol4, xend4, yend4);

context.lineTo(aa, bb);

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

context.lineWidth = 10;

context.fill();

context.stroke();

//left leg

var a3 = 275;

var b3 = 425;

var xcontrol5 = 263;

var ycontrol5 = 555;

var xend5 = 350;

var yend5 = 575;

var xcontrol6 = 433;

var ycontrol6 = 585;

var xend6 = 400;

var yend6 = 425;

context.beginPath();

context.moveTo(a3, b3);

context.quadraticCurveTo(xcontrol5, ycontrol5, xend5, yend5);

context.quadraticCurveTo(xcontrol6, ycontrol6, xend6, yend6);

context.lineTo(a3, b3);

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

context.lineWidth = 10;

context.fill();

context.stroke();

//right leg

var a4 = 536;

var b4 = 400;

var xcontrol7 = 551;

var ycontrol7 = 570;

var xend7 = 450;

var yend7 = 575;

var xcontrol8 = 350;

var ycontrol8 = 577;

var xend8 = 453;

var yend8 = 300;

context.beginPath();

context.moveTo(a4, b4);

context.quadraticCurveTo(xcontrol7, ycontrol7, xend7, yend7);

context.quadraticCurveTo(xcontrol8, ycontrol8, xend8, yend8);

context.lineTo(a4, b4);

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

context.lineWidth = 10;

context.fill();

context.stroke();

//right leg marking

var legx = 535;

var legy = 445;

var controllegx = 540;

var controllegy = 475;

var endx20 = 525;

var endy20= 510;

var controllegx2 = 475;

var controllegy2 = 475;

context.beginPath();

context.moveTo(legx, legy);

context.quadraticCurveTo(controllegx, controllegy, endx20, endy20)

context.quadraticCurveTo(controllegx2, controllegy2, legx, legy)

context.fillStyle = 'rgb(227, 215, 212)'

context.lineWidth = 2;

context.fill();

context.stroke();

//left leg marking

var legx2 = 275;

var legy2 = 425;

var controllegx3 = 277;

var controllegy3 = 490;

var endx21 = 287;

var endy21= 516;

var controllegx4 = 350;

var controllegy4 = 450;

context.beginPath();

context.moveTo(legx2, legy2);

context.quadraticCurveTo(controllegx3, controllegy3, endx21, endy21)

context.quadraticCurveTo(controllegx4, controllegy4, legx2, legy2)

context.fillStyle = 'rgb(227, 215, 212)'

context.lineWidth = 2;

context.fill();

context.stroke();

//body

var a = 450;

var b = 150;

var controlx8= 500;

var controly8= 152;

var endx7 = 515;

var endy7 = 275;

var controlx9= 615;

var controly9= 400;

var endx8 = 500;

var endy8 = 473;

var controlx10= 387;

var controly10= 538;

var endx9 = 276;

var endy9 = 450;

var controlx11= 210;

var controly11= 380;

var endx10 = 296;

var endy10 = 270;

var controlx12= 287;

var controly12= 225;

var endx11 = 325;

var endy11 = 175;

var controlx13= 357;

var controly13= 125;

context.beginPath();

context.moveTo(a, b);

context.quadraticCurveTo(controlx8, controly8, endx7, endy7)

context.quadraticCurveTo(controlx9, controly9, endx8, endy8)

context.quadraticCurveTo(controlx10, controly10, endx9, endy9)

context.quadraticCurveTo(controlx11, controly11, endx10, endy10)

context.quadraticCurveTo(controlx12, controly12, endx11, endy11)

context.quadraticCurveTo(controlx12, controly12, a, b)

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

context.lineWidth = 10;

context.fill();

context.stroke();

//body markings left

var markx2 = 306;

var marky2 = 214;

var controlx16= 293;

var controly16= 234;

var endx13 = 299;

var endy13 = 270;

var controlx17= 262;

var controly17= 312;

var endx14 = 258;

var endy14 = 340;

var controlx18= 350;

var controly18= 325;

context.beginPath();

context.moveTo(markx2, marky2);

context.quadraticCurveTo(controlx16, controly16, endx13, endy13)

context.quadraticCurveTo(controlx17, controly17, endx14, endy14)

context.quadraticCurveTo(controlx18, controly18, markx2, marky2)

context.fillStyle = 'rgb(227, 215, 212)'

context.lineWidth = 2;

context.fill();

context.stroke();

//body markings right

var markx3 = 495;

var marky3 = 200;

var controlx19= 506;

var controly19= 224;

var endx15 = 515;

var endy15 = 275;

var controlx20= 535;

var controly20= 300;

var endx16 = 553;

var endy16 = 345;

var controlx21= 450;

var controly21= 300;

context.beginPath();

context.moveTo(markx3, marky3);

context.quadraticCurveTo(controlx19, controly19, endx15, endy15)

context.quadraticCurveTo(controlx20, controly20, endx16, endy16)

context.quadraticCurveTo(controlx21, controly21, markx3, marky3)

context.fillStyle = 'rgb(227, 215, 212)'

context.lineWidth = 2;

context.fill();

context.stroke();

//circle on body

var centerx = 450;

var centery = 225;

var radius = 20;

var accesslx = 430;

var accessly = 225;

var accesslx2 = 440;

var accesslx3 = 446;

var accessly3 = 215;

var accesslx4 = 456;

var accesslx5 = 461;

var accesslx6 = 470;

context.beginPath();

context.arc(centerx, centery, radius, 0, 2*Math.PI, true);

context.lineWidth = 3;

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

context.closePath();

context.fill();

context.stroke();

context.beginPath();

context.moveTo(accesslx, accessly);

context.lineTo(accesslx2, accessly);

context.lineTo(accesslx3, accessly3);

context.lineTo(accesslx4, accessly3);

context.lineTo(accesslx5, accessly);

context.lineTo(accesslx6, accessly);

context.lineWidth = 2;

context.stroke();

//Head

var x = 400;

var y = 195;

var controlx = 275;

var controly = 225;

var endx = 289;

var endy = 125;

var controlx2 = 315;

var controly2 = 30;

var endx2 = 420;

var endy2 = 49;

var controlx3 = 490;

var controly3 = 70;

var endx3 = 473;

var endy3 = 138;

var controlx4 = 450;

var controly4 = 180;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(controlx, controly, endx, endy)

context.quadraticCurveTo(controlx2, controly2, endx2, endy2)

context.quadraticCurveTo(controlx3, controly3, endx3, endy3)

context.quadraticCurveTo(controlx4, controly4, x, y)

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

context.lineWidth = 10;

context.fill();

context.stroke();

//left eye

var centerx = 330;

var centery = 135;

var radius = 11;

context.beginPath();

context.arc(centerx, centery, radius, 0, 2*Math.PI, true);

context.lineWidth = 6;

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

context.closePath();

context.fill();

context.stroke();

//right eye

var centerx2 = 425;

var centery2 = 102;

var radius2 = 11;

context.beginPath();

context.arc(centerx2, centery2, radius2, 0, 2*Math.PI, true);

context.lineWidth = 6;

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

context.closePath();

context.fill();

context.stroke();

context.beginPath();

context.moveTo(centerx, centery);

context.lineTo(centerx2, centery2);

context.lineWidth = 4;

context.stroke();

//left arm marking

var markx = 198;

var marky = 337;

var controlx14 = 200;

var controly14 = 300;

var endx12 = 245;

var endy12 = 240;

var controlx15 = 275;

var controly15 = 325;

context.beginPath();

context.moveTo(markx, marky);

context.quadraticCurveTo(controlx14, controly14, endx12, endy12)

context.quadraticCurveTo(controlx15, controly15, markx, marky)

context.fillStyle = 'rgb(227, 215, 212)'

context.lineWidth = 2;

context.fill();

context.stroke();

//Shadow1

var shx = 350;

var shy = 475;

var controlx25 = 262;

var controly25 = 450;

var endx25 = 263;

var endy25 = 375;

var controlx26 = 300;

var controly26 = 450;

context.beginPath();

context.moveTo(shx, shy);

context.quadraticCurveTo(controlx25, controly25, endx25, endy25)

context.quadraticCurveTo(controlx26, controly26, shx, shy)

context.fillStyle = 'rgba(0, 0, 0, .08)'

context.strokeStyle = 'rgba(173, 161, 158, .08)'

context.fill();

context.stroke();

//shadow2

var shx2 = 386;

var shy2 = 55;

var controlx27 = 440;

var controly27 = 50;

var endx26 = 463;

var endy26 = 100;

var controlx28 = 450;

var controly28 = 75;

context.beginPath();

context.moveTo(shx2, shy2);

context.quadraticCurveTo(controlx27, controly27, endx26, endy26)

context.quadraticCurveTo(controlx28, controly28, shx2, shy2)

context.fillStyle = 'rgba(0, 0, 0, .08)'

context.strokeStyle = 'rgba(173, 161, 158, .08)'

context.fill();

context.stroke();

//shadow3

var shx3 = 525;

var shy3 = 225;

var controlx29 = 650;

var controly29 = 150;

var endx29 = 625;

var endy29 = 50;

var controlx30 = 625;

var controly30 = 125;

context.beginPath();

context.moveTo(shx3, shy3);

context.quadraticCurveTo(controlx29, controly29, endx29, endy29)

context.quadraticCurveTo(controlx30, controly30, shx3, shy3)

context.fillStyle = 'rgba(0, 0, 0, .08)'

context.strokeStyle = 'rgba(173, 161, 158, .08)'

context.fill();

context.stroke();

//shadow4

var shx4 = 300;

var shy4 = 525;

var controlx31 = 325;

var controly31 = 565;

var endx30 = 350;

var endy30 = 563;

var controlx32 = 325;

var controly32 = 550;

context.beginPath();

context.moveTo(shx4, shy4);

context.quadraticCurveTo(controlx31, controly31, endx30, endy30)

context.quadraticCurveTo(controlx32, controly32, shx4, shy4)

context.fillStyle = 'rgba(0, 0, 0, .08)'

context.strokeStyle = 'rgba(173, 161, 158, .08)'

context.fill();

context.stroke();

//shadow5

var shx5 = 415;

var shy5 = 525;

var controlx33 = 420;

var controly33 = 575;

var endx31 = 462;

var endy31 = 560;

var controlx34 = 425;

var controly34 = 560;

context.beginPath();

context.moveTo(shx5, shy5);

context.quadraticCurveTo(controlx33, controly33, endx31, endy31)

context.quadraticCurveTo(controlx34, controly34, shx5, shy5)

context.fillStyle = 'rgba(0, 0, 0, .08)'

context.strokeStyle = 'rgba(173, 161, 158, .08)'

context.fill();

context.stroke();

//shadow6

var shx6 = 200;

var shy6 = 350;

var controlx35 = 210;

var controly35 = 475;

var endx32 = 250;

var endy32 = 500;

var controlx36 = 190;

var controly36 = 455;

context.beginPath();

context.moveTo(shx6, shy6);

context.quadraticCurveTo(controlx35, controly35, endx32, endy32)

context.quadraticCurveTo(controlx36, controly36, shx6, shy6)

context.fillStyle = 'rgba(0, 0, 0, .08)'

context.strokeStyle = 'rgba(173, 161, 158, .08)'

context.fill();

context.stroke();

//Quote

context.font = 'bold 18pt Chalkduster';

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

context.fillText('"Hello. I am Baymax,', 5, 80);

context.font = 'bold 18pt Chalkduster';

context.fillText('your personal', 30, 120);

context.fillText('healthcare', 50, 160);

context.fillText('companion."', 70, 200);

////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>

</head>

<body>

</body>

</html>

Rebecca's Digital Arts Work

Monday, March 16, 2015

HTML5 Illustration

No comments:

Post a Comment

Archive