Digital Media, Blog #3 - Canvas Project
Below is my original drawing along with all of the photos I used for reference and style inspiration.
Below are stills from the animated television series Star Wars Rebels, which uses the art style of Ralph McQuarrie, who created the original concept art for 1977's Star Wars.
<!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="800" height="600"></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
var grd = context.createLinearGradient(0, 0, 0, 350);
grd.addColorStop(0, "black");
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fillRect(0, 000, 800, 350);
context.beginPath();
context.moveTo(518,325);
context.lineTo(382,255);
context.lineTo(398,755);
context.closePath();
context.fillStyle = 'rgb(40,40,40)'
context.fill();
//undercape
context.beginPath();
context.moveTo(0,600);
context.lineTo(460,264);
context.lineTo(496,600);
context.closePath();
context.fillStyle = 'rgb(1,1,2)'
context.fill();0
//cape
context.moveTo(350,405);
context.quadraticCurveTo(600, 300, 150, 850)
context.lineWidth = 3;
context.fillStyle = 'rgb(10,10,10)';
context.strokeStyle = 'rgb(10,10,10)';
context.fill();
context.stroke();
context.moveTo(100,505);
context.quadraticCurveTo(250, 650, 400, 250)
context.lineWidth = 3;
context.fillStyle = 'rgb(0,0,0)';
context.strokeStyle = 'rgb(100,100,100)';
context.fill();
context.stroke();
context.moveTo(200,435);
context.quadraticCurveTo(350, 350, 450, 550)
context.lineWidth = 3;
context.fillStyle = 'rgb(50,50,50)';
context.strokeStyle = 'rgb(100,100,100)';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(200,420);
context.quadraticCurveTo(400, 150, 500, 300)
context.lineWidth = 3;
context.fillStyle = 'rgb(20,20,20)';
context.strokeStyle = 'rgb(100,100,100)';
context.fill();
context.stroke();
context.beginPath();
var x = 300
var y = 320
var x1 = 275
var y1 = 580
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineWidth = 33;// declare the width in pixels of the line
context.strokeStyle = 'rgb(21,21,21)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
var x = 530
var y = 320
var x1 = 575
var y1 = 580
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineWidth = 33;// declare the width in pixels of the line
context.strokeStyle = 'rgb(51,51,51)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
var x = 500
var y = 320
var x1 = 570
var y1 = 580
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineWidth = 33;// declare the width in pixels of the line
context.strokeStyle = 'rgb(51,51,51)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
var x = 330
var y = 300
var x1 = 285
var y1 = 580
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineWidth = 33;// declare the width in pixels of the line
context.strokeStyle = 'rgb(21,21,21)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
var x = 510
var y = 300
var x1 = 565
var y1 = 580
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineWidth = 33;// declare the width in pixels of the line
context.strokeStyle = 'rgb(21,21,21)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
var x = 320
var y = 300
var x1 = 275
var y1 = 580
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineWidth = 33;// declare the width in pixels of the line
context.strokeStyle = 'rgb(11,11,11)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
var x = 280
var y = 460
var x1 = 275
var y1 = 580
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineWidth = 33;// declare the width in pixels of the line
context.strokeStyle = 'rgb(51,51,51)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
var x = 310
var y = 460
var x1 = 285
var y1 = 580
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineWidth = 33;// declare the width in pixels of the line
context.strokeStyle = 'rgb(51,51,51)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
context.beginPath();
context.arc ( 295,
470,
30,
0,
2*Math.PI,
true);
context.lineWidth = 1;
context.strokeStyle = 'rgb(0,0,0)';
context.closePath();
context.fillStyle = 'rgb(75,75,75)';
context.fill();
context.stroke();
context.beginPath();
context.arc ( 295,
490,
30,
0,
2*Math.PI,
true);
context.lineWidth = 1;
context.strokeStyle = 'rgb(0,0,0)';
context.closePath();
context.fillStyle = 'rgb(45,45,45)';
context.fill();
context.stroke();
context.beginPath();
context.arc ( 285,
520,
30,
0,
2*Math.PI,
true);
context.lineWidth = 1;
context.strokeStyle = 'rgb(0,0,0)';
context.closePath();
context.fillStyle = 'rgb(75,75,75)';
context.fill();
context.stroke();
//neck circle
context.beginPath();
context.arc ( 410,
289,
50,
0,
2*Math.PI,
true);
context.lineWidth = 1;
context.strokeStyle = 'rgb(0,0,0)';
context.closePath();
context.fillStyle = 'rgb(45,45,45)';
context.fill();
context.stroke();
//left side shoulder circle
context.beginPath();
context.arc ( 340,
330,
45,
0,
2*Math.PI,
true);
context.lineWidth = 1;
context.strokeStyle = 'rgb(0,0,0)';
context.closePath();
context.fillStyle = 'rgb(45,45,45)';
context.fill();
context.stroke();
//right side shoulder circle
context.beginPath();
context.arc ( 480,
330,
45,
0,
2*Math.PI,
true);
context.lineWidth = 1;
context.strokeStyle = 'rgb(0,0,0)';
context.closePath();
context.fillStyle = 'rgb(45,45,45)';
context.fill();
context.stroke();
//tunic
var x=365;
var y=283;
var width = 100
var height= 328;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 1;
context.fillStyle = 'rgb(55,55,55)';
context.strokeStyle = 'rgb(55,55,55)';
context.fill();
context.stroke();
//bar cloak outline light grey
var x = 470
var y = 290
var x1 = 445
var y1 = 490
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineWidth = 33;// declare the width in pixels of the line
context.strokeStyle = 'rgb(11,11,11)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
var x = 450
var y = 290
var x1 = 425
var y1 = 460
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineWidth = 13;// declare the width in pixels of the line
context.strokeStyle = 'rgb(55,55,55)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.strokeStyle = 'rgb(44,44,44)';
context.stroke();
var x = 360
var y = 290
var x1 = 365
var y1 = 460
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineWidth = 13;// declare the width in pixels of the line
context.strokeStyle = 'rgb(55,55,55)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.strokeStyle = 'rgb(44,44,44)';
context.stroke();
var x = 500
var y = 890
var x1 = 415
var y1 = 410
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineWidth = 13;// declare the width in pixels of the line
context.strokeStyle = 'rgb(55,55,55)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.strokeStyle = 'rgb(44,44,44)';
context.stroke();
var x = 400
var y = 890
var x1 = 365
var y1 = 450
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineWidth = 13;// declare the width in pixels of the line
context.strokeStyle = 'rgb(55,55,55)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.strokeStyle = 'rgb(44,44,44)';
context.stroke();
var x=360;
var y=390;
var width = 65
var height= 65;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 5;
context.fillStyle = 'rgb(0,0,0)';
context.strokeStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//bar cloak outline light grey
var x = 340
var y = 290
var x1 = 365
var y1 = 490
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineWidth = 13;// declare the width in pixels of the line
context.strokeStyle = 'rgb(11,11,11)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
var x = 330
var y = 290
var x1 = 355
var y1 = 490
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineWidth = 13;// declare the width in pixels of the line
context.strokeStyle = 'rgb(11,11,11)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
var x = 330
var y = 290
var x1 = 355
var y1 = 490
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineWidth = 13;// declare the width in pixels of the line
context.strokeStyle = 'rgb(11,11,11)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
var x = 500
var y = 290
var x1 = 475
var y1 = 490
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineWidth = 13;// declare the width in pixels of the line
context.strokeStyle = 'rgb(11,11,11)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
var x = 590
var y = 890
var x1 = 470
var y1 = 490
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineWidth = 13;// declare the width in pixels of the line
context.strokeStyle = 'rgb(11,11,11)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
var x = 380
var y = 890
var x1 = 360
var y1 = 490
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineWidth = 13;// declare the width in pixels of the line
context.strokeStyle = 'rgb(11,11,11)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
var x = 480
var y = 290
var x1 = 455
var y1 = 490
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineWidth = 33;// declare the width in pixels of the line
context.strokeStyle = 'rgb(11,11,11)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
var x = 320
var y = 290
var x1 = 350
var y1 = 490
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineWidth = 13;// declare the width in pixels of the line
context.strokeStyle = 'rgb(11,11,11)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
context.beginPath();
context.arc ( 510,
330,
40,
.5,
1.1*Math.PI,
true);
context.lineWidth = 1;
context.strokeStyle = 'rgb(0,0,0)';
context.closePath();
context.fillStyle = 'rgb(130,130,135)';
context.fill();
context.stroke();
context.beginPath();
context.arc ( 320,
335,
40,
.0,
.9*Math.PI,
true);
context.lineWidth = 1;
context.strokeStyle = 'rgb(0,0,0)';
context.closePath();
context.fillStyle = 'rgb(130,130,135)';
context.fill();
context.stroke();
//control pannel gray box
var x=360;
var y=390;
var width = 60
var height= 60;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 5;
context.fillStyle = 'rgb(64,64,64)';
context.strokeStyle = 'rgb(64,64,64)';
context.fill();
context.stroke();
var x= 365;
var y = 395;
var x1 = 365;
var y1 = 450;
var x2= 416
var y2= 395
var x3= 416
var y3= 450
//comment
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.moveTo(x2, y2);
context.lineTo(x3, y3);
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(255,255,255)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
// 3 gray buttons
var x= 387 //right side of L buttons
var y= 400
var x1= 373 // left side of L buttons
var y1= 400
var x2 = 373
var y2 = 410
var x3 = 387
var y3 = 410
var x4 = 373
var y4 = 420
var x5 = 387
var y5 = 420
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.moveTo(x2, y2);
context.lineTo(x3, y3);
context.moveTo(x4, y4);
context.lineTo(x5, y5);
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(150,150,150)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
// lower pannel
var x = 376
var y = 430
var x1 = 376
var y1 = 445
var x2 = 386
var y2 = 430
var x3 = 386
var y3 = 445
var x4 = 396
var y4 = 430
var x5 = 396
var y5 = 445
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.moveTo(x2, y2);
context.lineTo(x3, y3);
context.moveTo(x4, y4);
context.lineTo(x5, y5);
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(210,210,210)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
/// upper red
var x = 393
var y = 415
var x1 = 405
var y1 = 415
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineWidth = 6;// declare the width in pixels of the line
context.strokeStyle = 'rgb(210,0,0)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
// lower red
var x = 405
var y = 430
var x1 = 405
var y1 = 445
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineWidth = 3;// declare the width in pixels of the line
context.strokeStyle = 'rgb(210,0,0)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//blue button
var x = 393
var y = 405
var x1 = 405
var y1 = 405
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineWidth = 6;
context.strokeStyle = 'rgb(0,0,220)';
context.stroke();
//belt
var x=340;
var y=484;
var width = 150
var height= 28;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 1;
context.fillStyle = 'rgb(64,64,64)';
context.strokeStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//belt square
//belt
var x=382;
var y=483;
var width = 40
var height= 28;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 1;
context.fillStyle = 'rgb(184,184,184)';
context.strokeStyle = 'rgb(184,184,184)';
context.fill();
context.stroke();
// belt circle
context.beginPath();
context.arc ( 420,
497,
14,
0,
2*Math.PI,
true);
context.lineWidth = 1;
context.closePath();
context.strokeStyle = 'rgb(184,184,184)';
context.fillStyle = 'rgb(184,184,184)';
context.fill();
context.stroke();
context.beginPath();
context.arc ( 420,
497,
10,
0,
2*Math.PI,
true);
context.lineWidth = 1;
context.strokeStyle = 'rgb(250,250,250)';
context.closePath();
context.fillStyle = 'rgb(184,184,184)';
context.fill();
context.stroke();
//back of helmate
context.beginPath();
context.moveTo(362,170);
context.lineTo(324,244);
context.lineTo(436,244);
context.closePath();
context.fillStyle = 'rgb(26,26,26)'
context.fill();
context.beginPath();
context.moveTo(452,171);
context.lineTo(492,244);
context.lineTo(356,244);
context.closePath();
context.fillStyle = 'rgb(26,26,26)'
context.fill();
context.beginPath();
context.moveTo(440,160);
context.lineTo(480,240);
context.lineTo(340,240);
context.closePath();
context.fillStyle = 'rgb(40,40,40)'
context.fill();
context.beginPath();
context.moveTo(375,160);//top L
context.lineTo(460,240);//right
context.lineTo(335,240);//bottom L
context.closePath();
context.fillStyle = 'rgb(40,40,40)'
context.fill();
//upper face
context.beginPath();
context.moveTo(365,200);
context.bezierCurveTo(400,50,435,137,450,200);
context.closePath();
context.lineWidth = 2;
context.strokeStyle = 'rgb(0,0,0)';
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//lower face
context.beginPath();
context.moveTo(365,200);
context.bezierCurveTo(400,330,450,240,450,200);
context.closePath();
context.lineWidth = 2;
context.strokeStyle = 'rgb(0,0,0)';
context.fillStyle = 'rgb(81,81,82)';
context.fill();
context.stroke();
//cheeks
context.beginPath();
context.moveTo(436,250);//bottom
context.lineTo(450,202);//right
context.lineTo(425,210);//top left
context.closePath();
context.fillStyle = 'rgb(20,20,20)'
context.fill();0
context.stroke();
context.beginPath();
context.moveTo(383,250);//bottom
context.lineTo(365,200);//left
context.lineTo(391,210);//top right
context.closePath();
context.fillStyle = 'rgb(20,20,20)'
context.fill();0
context.stroke();
//under mouth
context.beginPath();
context.moveTo(408,205);
context.lineTo(382,255);
context.lineTo(438,255);
context.closePath();
context.fillStyle = 'rgb(210,210,220)'
context.fill();
//mouth
context.beginPath();
context.moveTo(408,205);
context.lineTo(384,254);
context.lineTo(436,254);
context.closePath();
context.fillStyle = 'rgb(21,21,22)'
context.fill();0
//upper nose bridge
context.beginPath();
context.moveTo(405,200);
context.bezierCurveTo(407.5,50,413,200,413,200);
context.closePath();
context.lineWidth = 2;
context.strokeStyle = 'rgb(0,0,0)';
context.fillStyle = 'rgb(54,54,54)';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(405,215);
context.bezierCurveTo(402,155,410,155,410,215);
context.closePath();
context.lineWidth = 2;
context.strokeStyle = 'rgb(0,0,0)';
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//eyes
context.beginPath();
context.arc ( 432,
202,
18,
0.85*Math.PI,
0*Math.PI,
true);
context.lineWidth = 1;
context.strokeStyle = 'rgb(0,0,0)';
context.closePath();
context.fillStyle = 'rgb(20,20,20)';
context.fill();
context.beginPath();
context.arc ( 384,
201,
18,
0.17*Math.PI,
1*Math.PI,
false);
context.lineWidth = 1;
context.strokeStyle = 'rgb(0,0,0)';
context.closePath();
context.fillStyle = 'rgb(20,20,20)';
context.fill();
context.beginPath();
context.arc ( 385,
200,
17,
.15*Math.PI,
1*Math.PI,
true);
context.lineWidth = 1;
context.strokeStyle = 'rgb(0,0,0)';
context.closePath();
context.fillStyle = 'rgb(100,4,4)';
context.fill();
context.stroke();
context.beginPath();
context.arc ( 431,
200,
17,
0*Math.PI,
.85*Math.PI,
true);
context.lineWidth = 1;
context.strokeStyle = 'rgb(0,0,0)';
context.closePath();
context.fillStyle = 'rgb(100,4,4)';
context.fill();
context.stroke();
//nose square
var x=404;
var y=205;
var width = 7.9
var height= 10;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 1;
context.fillStyle = 'rgb(184,184,184)';
context.strokeStyle = 'rgb(184,184,184)';
context.fill();
context.stroke();
//nose circle
context.beginPath();
context.arc ( 408,
205,
04,
0,
2*Math.PI,
true);
context.lineWidth = 1;
context.strokeStyle = 'rgb(184,184,184)';
context.closePath();
context.fillStyle = 'rgb(184,184,184)';
context.fill();
context.stroke();
//mouth circle L
context.beginPath();
context.arc ( 388,
250,
04,
0,
2*Math.PI,
true);
context.lineWidth = 1;
context.strokeStyle = 'rgb(184,184,184)';
context.closePath();
context.fillStyle = 'rgb(184,184,184)';
context.fill();
context.stroke();
//mouth circle R
context.beginPath();
context.arc ( 431,
250,
04,
0,
2*Math.PI,
true);
context.lineWidth = 1;
context.strokeStyle = 'rgb(184,184,184)';
context.closePath();
context.fillStyle = 'rgb(184,184,184)';
context.fill();
context.stroke();
//helmate
context.beginPath();
context.moveTo(360,180);
context.quadraticCurveTo(380,100,405,115)
context.quadraticCurveTo(435, 100, 455, 180)
context.closePath();
context.lineWidth = 2;
context.strokeStyle = 'rgb(26,26,25)';
context.fillStyle = 'rgb(26,26,25)';
context.fill();
context.stroke();
//helmate brow back
var x = 375
var y = 170
var x1 = 405
var y1 = 190
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineWidth = 6;// declare the width in pixels of the line
context.strokeStyle = 'rgb(26,26,26)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
var x = 430
var y = 170
var x1 = 405
var y1 = 190
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineWidth = 13;// declare the width in pixels of the line
context.strokeStyle = 'rgb(25,25,25)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//helmate brow
context.beginPath();
context.arc ( 407,
183,
12,
0,
2*Math.PI,
true);
context.lineWidth = 1;
context.strokeStyle = 'rgb(26,26,25)';
context.closePath();
context.fillStyle = 'rgb(26,26,25)';
context.fill();
context.stroke();
// helmate center
var x=401;
var y=110;
var width = 12;
var height= 80;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 3;
context.fillStyle = 'rgb(0,0,0)';
context.strokeStyle = 'rgb(100,100,100)';
context.fill();
context.stroke();
//center chest armor
context.beginPath();
context.arc ( 410,
320,
45,
0,
2*Math.PI,
true);
context.lineWidth = 1;
context.strokeStyle = 'rgb(65,65,65)';
context.closePath();
context.fillStyle = 'rgb(65,65,65)';
context.fill();
context.stroke();
//black 1 L
context.beginPath();
context.arc ( 369,
320,
40,
0,
2*Math.PI,
true);
context.lineWidth = 1;
context.strokeStyle = 'rgb(11,11,11)';
context.closePath();
context.fillStyle = 'rgb(11,11,11)';
context.fill();
context.stroke();
//black 1 r
context.beginPath();
context.arc ( 450,
320,
40,
0,
2*Math.PI,
true);
context.lineWidth = 1;
context.strokeStyle = 'rgb(11,11,11)';
context.closePath();
context.fillStyle = 'rgb(11,11,11)';
context.fill();
context.stroke();
//chest center
var x=403;
var y=280;
var width = 12;
var height= 80;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 3;
context.fillStyle = 'rgb(65,65,65)';
context.strokeStyle = 'rgb(65,65,65)';
context.fill();
context.stroke();
//right armor layer 3
context.beginPath();
context.arc ( 475,
320,
45,
1,
2*Math.PI,
false);
context.lineWidth = 1;
context.strokeStyle = 'rgb(50,50,50)';
context.closePath();
context.fillStyle = 'rgb(65,65,65)';
context.fill();
context.stroke();
//left armor layer 3
context.beginPath();
context.arc ( 348,
320,
45,
0*Math.PI,
.1*Math.PI,
true);
context.lineWidth = 1;
context.strokeStyle = 'rgb(50,50,50)';
context.closePath();
context.fillStyle = 'rgb(65,65,65)';
context.fill();
context.stroke();
context.beginPath();
context.arc ( 339,
320,
40,
2.,
1.3*Math.PI,
true);
context.lineWidth = 1;
context.strokeStyle = 'rgb(11,11,11)';
context.closePath();
context.fillStyle = 'rgb(11,11,11)';
context.fill();
context.stroke();
context.beginPath();
context.arc ( 330,
320,
40,
1.8,
1.1*Math.PI,
true);
context.lineWidth = 1;
context.strokeStyle = 'rgb(55,55,55)';
context.closePath();
context.fillStyle = 'rgb(55,55,55)';
context.fill();
context.stroke();
context.beginPath();
context.arc ( 490,
320,
40,
1.2,
1.8*Math.PI,
false);
context.lineWidth = 1;
context.strokeStyle = 'rgb(11,11,11)';
context.closePath();
context.fillStyle = 'rgb(11,11,11)';
context.fill();
context.stroke();
context.beginPath();
context.arc ( 500,
320,
40,
1.2,
1.8*Math.PI,
false);
context.lineWidth = 1;
context.strokeStyle = 'rgb(55,55,55)';
context.closePath();
context.fillStyle = 'rgb(55,55,55)';
context.fill();
context.stroke();
// lightsaber hilt
var x= 287 //right side of L buttons
var y= 560
var x1= 327 // left side of L buttons
var y1= 490
var x2 = 373
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineWidth = 15;// declare the width in pixels of the line
context.strokeStyle = 'rgb(15,15,15)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//hand lightsaber
context.beginPath();
context.arc ( 285,
540,
30,
0,
2*Math.PI,
true);
context.lineWidth = 1;
context.strokeStyle = 'rgb(0,0,0)';
context.closePath();
context.fillStyle = 'rgb(45,45,45)';
context.fill();
context.stroke();
// lightsaber hilt
var x= 270 //right side of L buttons
var y= 580
var x1= 290 // left side of L buttons
var y1= 550
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineWidth = 15;// declare the width in pixels of the line
context.strokeStyle = 'rgb(15,15,15)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
var x= 135 //right side of L buttons
var y= 780
var x1= 280 // left side of L buttons
var y1= 565
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineWidth = 10;// declare the width in pixels of the line
context.strokeStyle = 'rgb(250,250,250)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
var x= 135 //right side of L buttons
var y= 780
var x1= 280 // left side of L buttons
var y1= 565
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(250,250,250)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
var x= 135 //right side of L buttons
var y= 780
var x1= 280 // left side of L buttons
var y1= 565
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineWidth = 10;// declare the width in pixels of the line
context.strokeStyle = 'rgb(250,0,0)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
context.beginPath();
context.arc ( 550,
460,
30,
0,
2*Math.PI,
true);
context.lineWidth = 1;
context.strokeStyle = 'rgb(0,0,0)';
context.closePath();
context.fillStyle = 'rgb(85,85,85)';
context.fill();
context.stroke();
context.beginPath();
context.arc ( 560,
480,
30,
0,
2*Math.PI,
true);
context.lineWidth = 1;
context.strokeStyle = 'rgb(0,0,0)';
context.closePath();
context.fillStyle = 'rgb(55,55,55)';
context.fill();
context.stroke();
context.beginPath();
context.arc ( 560,
500,
30,
0,
2*Math.PI,
true);
context.lineWidth = 1;
context.strokeStyle = 'rgb(0,0,0)';
context.closePath();
context.fillStyle = 'rgb(85,85,85)';
context.fill();
context.stroke();
context.beginPath();
context.arc ( 570,
530,
30,
0,
2*Math.PI,
true);
context.lineWidth = 1;
context.strokeStyle = 'rgb(0,0,0)';
context.closePath();
context.fillStyle = 'rgb(55,55,55)';
context.fill();
context.stroke();
context.beginPath();
context.arc ( 540,
550,
10,
0,
2*Math.PI,
true);
context.lineWidth = 1;
context.strokeStyle = 'rgb(0,0,0)';
context.closePath();
context.fillStyle = 'rgb(55,55,55)';
context.fill();
context.stroke();
context.beginPath();
context.arc ( 560,
570,
15,
0,
2*Math.PI,
true);
context.lineWidth = 1;
context.strokeStyle = 'rgb(0,0,0)';
context.closePath();
context.fillStyle = 'rgb(95,95,95)';
context.fill();
context.stroke();
context.beginPath();
context.arc ( 570,
570,
10,
0,
2*Math.PI,
true);
context.lineWidth = 1;
context.strokeStyle = 'rgb(0,0,0)';
context.closePath();
context.fillStyle = 'rgb(80,80,80)';
context.fill();
context.stroke();
//overcape
context.beginPath();
context.moveTo(0,600);
context.lineTo(150,464);
context.lineTo(80,600);
context.closePath();
context.fillStyle = 'rgb(1,1,2)'
context.fill();0
// <<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE
///////////////////////////////////////////////////////////////////
// CREDITS
context.save();
var credits = "Joseph Thomas, Lord Vader, FMX 210, FALL 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 = Math.round(mouseX) + " || " + Math.round(mouseY) + " || counter = " + Math.round(counter);
/////////////////////////////////////////////////////////////////
// LAST LINE CREATES THE ANIMATION
requestAnimFrame(draw); // CALLS draw() every nth of a second
}
</script>
</body>
</html>
Joseph, I remember seeing this in class and being so impressed. This was such a difficult project and yours came out amazing! It looks just like Darth Vader. I can tell you put a lot of time and effort into this and it shows. All the simple shapes together made something really great.
ReplyDeleteThank you! It took a long time to complete 😬i believe I poured about 20 hours or more into completing this project. It was quite a bit of effort, haha.
Delete