Canvas HTML5 Project

Blue Hued Car

Blue Hued Car is an art graphic image containing various shapes (rectangles, circles, lines, and octagon) including three Bezier curves and two Quadratic curves. I used Dreamweaver and the HTML5 canvas component as the medium to create Blue Hued Car. Dreamweaver is a software tool and the canvas component provides an easy way to draw graphics on a web page. I wanted to learn how to use the HTML5 canvas component as a medium and create an abstract art piece.

I am a fan of Dada; mostly because it had it's origins during World War I. Dada is an abstract art form where the premise is to create "anti-art"; meaning it is not considered art according to traditional standards. In the spirit of Dada, originally, I was going to create 10 simple shapes; see Sketch #1. 

Sketch #1


However, I felt Sketch #1 would not be challenging enough for me to learn the canvas component. In a conversation I was having with my mom, a computer engineer where she was explaining to me "the grid" (as she called it the grid which is simply a 800 x 600 piece of graph paper); I shared I felt my sketch was too easy and elementary. My mom rearranged my shapes into a car and emailed me my inspiration; see Inspirational Image.

Inspirational Image

I liked the idea of a car and made a sketch of it on graph paper. I chose to alter the car's design as I felt it would be easier to code. Coding was a different experience for me. 

Final Sketch 

I split the work up over 3 days. The first day I created the background (sky, grass, and road). This took me about an hour to complete. Afterwards I felt I was successful and pleased with the background as it was simply 3 large rectangles with color and pleasing to the eye. 

On day two, I created the sun and the stop sign. The sun was simply a circle filled with the color yellow. The stop sign was created using lines and starting at one point then drawing a line to the next point until the octagon was formed and filled with red. Finally, I created the post for the stop sign which is a simple rectangle filled with the color brown. Day two took me a little longer; about 3 hours. I found the coding to be quite enjoyable. 

Day three was the longest, I spent about five hours coding and learning (glad I picked a weekend to finish up). I drew the car using lines and filled it with the color blue. I decided to add 2 windows which are simply rectangles filled with a light gray color. I felt I was an expert at coding rectangles. Next I added the two tires which were two circles filled with the color black. Next, I wanted to make the piece a little more interesting so I added gradients to the sun, stop sign, car, tires, and grass. Gradients give you a rainbow effect where you specify the starting and ending colors then you get all the colors between those two colors.  The gradients gave the piece some dimension. I continued adding dimension by adding fenders and a design on the car using Quadratic and Bezier curves. I chose bright, florescent colors to make the piece more abstract. I feel I was successful using Dreamweaver and the HTML5 canvas component as a medium to create art as Blue Hued Car is a simple, abstract car with pleasing colors, nice details, and somewhat Dada'ish.

Code

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Jacob Canvas HTML5 </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;
margin: 10px;
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>
<br><br>
Add your personal notes or additional information here
<!-- 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 ctx;
canvas = document.getElementById("fmxCanvas");
ctx = canvas.getContext("2d");
var canvas1;
var ctx1;
canvas1 = document.createElement("canvas");
ctx1 = canvas1.getContext("2d");
canvas1.width = canvas.width;
canvas1.height = canvas.height;
var canvas2;
var ctx2;
canvas2 = document.createElement("canvas");
ctx2 = canvas2.getContext("2d");
canvas2.width = canvas.width;
canvas2.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() {
ctx.clearRect(0,0,canvas.width, canvas.height);
ctx1.clearRect(0,0,canvas.width, canvas.height);
ctx2.clearRect(0,0,canvas.width, canvas.height);
// clear additional ctxs 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
///shape retangle sky
ctx.fillStyle = 'rgba(87,195,251,1.00)';
ctx.fillRect(0,0,800,200);
///shape retangle grass
var mygrad = ctx.createLinearGradient(0,200,800,200);
mygrad.addColorStop(0,'rgba(41,178,59,1.00)'); mygrad.addColorStop(1,'rgba(46,139,37,1.00)');
ctx.fillStyle = mygrad;
ctx.fillRect(0,200,800,200);
 
///shape retangle road
ctx.fillStyle = 'rgba(91,94,91,1.00)';
ctx.fillRect(0,400,800,200);
 
// shape circle sun
  var mygrad = ctx.createRadialGradient(75, 75, 3, 75, 75, 75);
  mygrad.addColorStop(0,'rgba(255,255,255,1)');
  mygrad.addColorStop(1,'rgba(255,192,0,1)');
  ctx.beginPath();
  ctx.arc(75, 75, 50, 0, 2 * Math.PI, false);
  ctx.closePath();
  ctx.strokeStyle ='rgba(255,192,0,1.00)';
  ctx.lineWidth = 2;
  ctx.stroke();
  ctx.fillStyle = mygrad;
  ctx.fill();
   
 
// shape octagon stopsign
var mygrad = ctx.createRadialGradient(675, 125, 3, 675, 125, 75);
mygrad.addColorStop(0,'rgba(255,0,0,.75)');
mygrad.addColorStop(1,'rgba(255,0,0,1.00)');
ctx.beginPath();
ctx.moveTo(650,75);
ctx.lineTo(700,75);
ctx.lineTo(725,100);
ctx.lineTo(725,150);
ctx.lineTo(700,175);
ctx.lineTo(650,175);
ctx.lineTo(625,150);
ctx.lineTo(625,100);
ctx.closePath();
ctx.lineWidth=10;
ctx.strokeStyle='rgba(255,255,255,1.00)';
ctx.stroke();
ctx.fillStyle= mygrad;
ctx.fill();
 
///shape retangle post
ctx.fillStyle = 'rgba(73,40,40,0.94)';
ctx.fillRect(664,178,15,200);
 // shape car
var mygrad = ctx.createLinearGradient(300,300,700,475);
mygrad.addColorStop(0,'rgba(0,27,250,1.00)'); 
mygrad.addColorStop(.50,'rgba(164,7,254,1.00)'); 
mygrad.addColorStop(1,'rgba(46,0,255,1.00)');
ctx.beginPath();
ctx.moveTo(300,300);
ctx.lineTo(600,300);
ctx.lineTo(600,400);
ctx.lineTo(700,400);
ctx.lineTo(700,475);
ctx.lineTo(675,475);
ctx.lineTo(650,450);
ctx.lineTo(600,450);
ctx.lineTo(575,475);
ctx.lineTo(425,475);
ctx.lineTo(400,450);
ctx.lineTo(350,450);
ctx.lineTo(325,475);
ctx.lineTo(300,475);
ctx.closePath();
ctx.fillStyle= mygrad;
ctx.fill();
 
///shape retangle window front
ctx.fillStyle = 'rgba(204,204,204,0.94)';
ctx.fillRect(475,325,100,50);
 ///shape retangle window back
ctx.fillStyle = 'rgba(204,204,204,0.94)';
ctx.fillRect(325,325,125,50);
// shape circle front tire
  var mygrad = ctx.createRadialGradient(625, 500, 5, 625, 500, 50);
  mygrad.addColorStop(0,'rgba(255,255,255,1)');
  mygrad.addColorStop(1,'rgba(0,0,0,.75)');
  ctx.beginPath();
  ctx.arc(625, 500, 50, 0, 2 * Math.PI, false);
  ctx.fillStyle = mygrad;
  ctx.fill();
  ctx.lineWidth = 1;
  ctx.strokeStyle ='rgba(0,0,0,1.00)';
  ctx.stroke(); 
  
//quadratic front tire fender
  ctx.beginPath();
  ctx.moveTo (575,475);
  ctx.quadraticCurveTo (625,400,675,475);
  ctx.lineWidth=10;
  ctx.strokeStyle ='rgba(232,0,255,1.00)';
  ctx.stroke();
// shape circle rear tire
  var mygrad = ctx.createRadialGradient(375, 500, 5, 375, 500, 50);
  mygrad.addColorStop(0,'rgba(255,255,255,1)');
  mygrad.addColorStop(1,'rgba(0,0,0,.75)');
  ctx.beginPath();
  ctx.arc(375, 500, 50, 0, 2 * Math.PI, false);
  ctx.fillStyle = mygrad;
  ctx.fill();
  ctx.lineWidth = 1;
  ctx.strokeStyle ='rgba(0,0,0,1.00)';
  ctx.stroke(); 
//quadratic rear tire fender
  ctx.beginPath();
  ctx.moveTo (325,475);
  ctx.quadraticCurveTo (375,400,425,475);
  ctx.lineWidth=10;
  ctx.strokeStyle ='rgba(232,0,255,1.00)';
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo (600,425);
  ctx.bezierCurveTo (550,350,425,450,325,425);
  ctx.lineWidth=5;
  ctx.strokeStyle = 'rgba(0,255,25,1.00)';
  ctx.stroke();
  
  ctx.beginPath();
  ctx.moveTo (600,425);
  ctx.bezierCurveTo (550,350,425,450,325,400);
  ctx.lineWidth=5;
  ctx.strokeStyle = 'rgba(0,255,25,1.00)';
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo (600,425);
  ctx.bezierCurveTo (550,350,425,450,325,375);
  ctx.lineWidth=5;
  ctx.strokeStyle = 'rgba(0,255,25,1.00)';
  ctx.stroke();
// <<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE
///////////////////////////////////////////////////////////////////
// CREDITS
ctx.save();
var credits = "Richard Jacob, Canvas HTML5 , FMX 210, SP 2022";
ctx.font = 'bold 12px Helvetica';
ctx.fillStyle = "rgba(0,0,0,1)"; // change the color here
ctx.shadowColor = "rgba(255,255,255,1)"; // change shadow color here
ctx.shadowBlur = 12;
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.fillText(credits, 10, canvas.height - 10); // CHANGE THE LOCATION HERE
ctx.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>

Comments

Post a Comment

Popular posts from this blog

walk cycle

 I made a walk cycle. I made an avali walking away from KFC. avalis are bird like raptors from space and the joke is that avalis are space chickens and KFC makes chicken wings out of them. The avali was difficult to make but i was able to make the walk cycle. 
Read more

Digital Media Final Portfolio

Image
My name is Richard Jacob and I am a freshman at the University of Tampa majoring in Film Production. This is my final portfolio including all my work from the FMX 210 Digital Media class. Throughout the semester, I learned how to use multiple Adobe software programs to create various projects. The programs include Dreamweaver, Illustrator, Photoshop, and InDesign. Throughout my art, I showcase elements from my story, War of Dragons. My favorite project was the business cards and it can be found on page 12. The Business Cards project was created in Adobe InDesign . My least favorite project was the HTML5 Canvas because coding isn't my thing. For the portfolio, I used InDesign to create each portfolio page. Each page uses multiple layers for background, text, images of projects, and page title which makes it easier to go back and make adjustments . I followed a film theme for my Portfolio as my major is film production . I used an analogous blue color palette for my portfolio. I ho
Read more

dialogue

 I made a dialogue animation with a ghost saying "i see you". The ghost squints when it says "you" as it makes the ghost have more emotion. The ghost's dialogue was synced up well in my opinion.
Read more