Rebecca's Digital Arts Work

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

Tuesday, February 24, 2015

Vector Illustration

Tuesday, February 17, 2015

Exquisite Corpse Sketch

Tuesday, February 10, 2015

Logo (Final Product)

Wednesday, February 4, 2015

Calligramme

Sunday, February 1, 2015

Sketches for my Logo

Logo Critique's

Archive