Mine:
Inspiration:
- Possibly one of the best and most fun project I have done using HTML Code!
- This was done over a course of 3 class Periods.
- 448 Lines of Code
BB8 is one of those characters that everyone at least knows by what the tiny little robot looks like. Even though BB8 is tiny he still brings big things to the table. I wanted to make this to illustrate what power and extravagance this little guy has as he is on Star Wars. In order to do that I first created his figure with a bold outline and inserted all the curves bolts and screws and his eye on. I made it look as realistic as I could have made it using code.
As I completed the figure, I started to see what I would be able to do in order to showcase the grand character he is for all Star Wars lovers. I inserted a silver circle gradient in back of him to make him pop out with the outer later outside of the circle in all black. This left BB8 looking like he is ready to take over the world giving him a super hero look. I decided to outline the circle with orange lines going around him in order to represent how grand and extravagant he is. This was a project that I loved to work on because it brought my childhood one step closer to come alive.
My Code:
<html>
<head>
<meta charset="UTF-8">
<title> FMX 210 DIGITAL MEDIA - CANVAS PROJECT </title>
<style type="text/css">
body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: rgba(255,255,255,1);
}
body {
background-color: rgba(0,0,0,1);
}
#myCanvas { border: rgba(102,0,255,1) medium dashed; background-color: rgba(255,255,255,1); }
</style>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE
//Background
var x = 0;
var y = 0;
var width = canvas.width;
var height = canvas.height;
var centerX = 400;
var centerY = 300;
var radius = 200;
// Gradient
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 20;
context.fillStyle = 'rgb(200, 200, 200)';
context.fill();
context.stroke();
var x = 0;
var y = 0;
var width = canvas.width;
var height = canvas.height;
var centerX = 400;
var centerY = 300;
var radius = 200;
var startX = 300;
var startY = 200;
var startRadius = 50;
var endX = 400;
var endY = 300;
var endRadius = 200;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 20;
context.fillStyle = 'rgb(0, 0, 0)';
context.fill();
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);
var grd = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);
grd.addColorStop(0, 'rgb(128, 120, 127)');
grd.addColorStop(1, 'rgb(200, 224, 215)');
context.fillStyle = grd;
context.fill();
context.stroke();
//// big circle
var centerX = canvas.width / 2.0;
var centerY = canvas.height / 2.0;
var radius = 100;
var startangle = 0;
var endangle = 90 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.lineWidth = 10;
context.strokeStyle = "black";
context.stroke();
//top arc
var centerX = 400;
var centerY = 215
var radius = 80;
var startangle = 3.0* Math.PI;;
var endangle = 2.0* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "clear";
context.fill();
context.lineWidth = 10;
context.strokeStyle = "black";
context.stroke();
//Simple lines
context.moveTo(317,215); // COORDINATES OF STARTING POINT
context.lineTo(483,215); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.stroke(); // STROKE
//// small circle
var centerX = canvas.width / 2.0;
var centerY = canvas.height / 3.3;
var radius = 20;
var startangle = 0;
var endangle = 90 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.lineWidth = 15;
context.strokeStyle = "black";
context.stroke();
//// small circle 2 int.
var centerX = canvas.width / 2.0;
var centerY = canvas.height / 3.3;
var radius = 10;
var startangle = 0;
var endangle = 90 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.lineWidth = 20;
context.strokeStyle = "navy";
context.stroke();
//// smaller circle 3 ext.
var centerX = canvas.width / 1.8;
var centerY = canvas.height / 3.2;
var radius = 3;
var startangle = 0;
var endangle = 90 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.lineWidth = 7;
context.strokeStyle = "black";
context.stroke();
// Black TRIANGLE
context.beginPath(); // begin a shape
context.moveTo(345,250); // point A coordinates
context.lineTo(475, 275); // point B coords
context.lineTo(400,360); // point C coords
context.closePath(); // close the shape
context.lineWidth = 5
; // you can use a variable that changes wherever you see a number
context.lineJoin = "round";
context.strokeStyle = "rgb(0,0,0)"; // Reb Green Blue Alpha
context.stroke();
//bottom arc 1
var centerX = 300;
var centerY = 255
var radius = 70;
var startangle = 3.8* Math.PI;;
var endangle = 2.5* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "clear";
context.fill();
context.lineWidth = 15;
context.strokeStyle = "orange";
context.stroke();
//bottom arc 2
var centerX = 400;
var centerY = 400
var radius = 70;
var startangle = 5.1* Math.PI;;
var endangle = 3.9* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "clear";
context.fill();
context.lineWidth = 15;
context.strokeStyle = "orange";
context.stroke();
//bottom arc 3
var centerX = 510;
var centerY = 290
var radius = 55;
var startangle = 4.6* Math.PI;;
var endangle = 3.3* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "clear";
context.fill();
context.lineWidth = 15;
context.strokeStyle = "orange";
context.stroke();
//// smaller circle 4 ext. bottom
var centerX = canvas.width / 2.0;
var centerY = canvas.height / 2.1;
var radius = 5;
var startangle = 0;
var endangle = 90 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.lineWidth = 7;
context.strokeStyle = "black";
context.stroke();
//bottom bottom arc 3
var centerX = 510;
var centerY = 290
var radius = 40;
var startangle = 4.6* Math.PI;;
var endangle = 3.3* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "clear";
context.fill();
context.lineWidth = 15;
context.strokeStyle = "Orange";
context.stroke();
//bottom bottom arc 2
var centerX = 400;
var centerY = 400
var radius = 55;
var startangle = 5.1* Math.PI;;
var endangle = 3.9* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "clear";
context.fill();
context.lineWidth = 15;
context.strokeStyle = "orange";
context.stroke();
//bottom bottom arc 1
var centerX = 300;
var centerY = 255
var radius = 55;
var startangle = 3.8* Math.PI;;
var endangle = 2.5* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "clear";
context.fill();
context.lineWidth = 15;
context.strokeStyle = "orange";
context.stroke();
//// big circle
var centerX = canvas.width / 2.0;
var centerY = canvas.height / 2.0;
var radius = 100;
var startangle = 0;
var endangle = 90 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.lineWidth = 10;
context.strokeStyle = "black";
context.stroke();
//top arc
var centerX = 400;
var centerY = 215
var radius = 80;
var startangle = 3.0* Math.PI;;
var endangle = 2.0* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "clear";
context.fill();
context.lineWidth = 10;
context.strokeStyle = "black";
context.stroke();
//Simple lines
context.moveTo(317,215); // COORDINATES OF STARTING POINT
context.lineTo(483,215); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.stroke(); // STROKE
//// small circle
var centerX = canvas.width / 2.0;
var centerY = canvas.height / 3.3;
var radius = 20;
var startangle = 0;
var endangle = 90 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.lineWidth = 15;
context.strokeStyle = "black";
context.stroke();
//// small circle 2 int.
var centerX = canvas.width / 2.0;
var centerY = canvas.height / 3.3;
var radius = 10;
var startangle = 0;
var endangle = 90 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.lineWidth = 20;
context.strokeStyle = "navy";
context.stroke();
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
// this needs to be included with the repeat once in a document
var canvas2 = document.createElement('canvas');
var context2 = canvas2.getContext('2d');
canvas2.width = canvas.width;
canvas2.height = canvas.height;
//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE
context2.beginPath();
context2.moveTo(canvas.width/3, canvas.height/10);
context2.lineTo(canvas.width*2/3, canvas.height*3/3);
///context2.rect(canvas.width/3, canvas.height/3, canvas.width/3, canvas.height/3);
context2.strokeStyle = "orange";
context2.lineWidth = 2;
context2.stroke();
context2.closePath();
for (var x=0; x<canvas.width; x+=10) {
context.save();
context.translate(canvas.width/2, canvas.height/2);
context.rotate(Math.PI*2*x/canvas.width);
//context.drawImage(canvas2,-canvas.width/2, -canvas.height/2);
// context.drawImage(canvas2,-canvas.width/4, -canvas.height/4);
context.drawImage(canvas2,0, 0);
context.restore();
}
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE
// CHANGE THE CREDITS: ADD YOUR NAME AND CLASS INFORMATION
var credits = "Javier Rodriguez, FMX 210, spring, 2020";
context.beginPath();
context.font = 'bold 20px Arial';
context.fillStyle = "rgba(200,200,200,200)";
context.fillText(credits, 200, 590);
context.closePath();
</script>
</body>
</html>
Javier, I really like the end result of your canvas project because it looks so similar to the original, and is probably one of my favorite projects of yours. The orange spiral really brings out the colors in BB8. Great Job!
ReplyDelete