Dreamweaver Project
This was an HTML5 coding project created on DreamWeaver. The assignment was to create a graphic image using 10 shapes. I have titled my creation "Another Day" because it is embodying just a normal day in someones life. The piece was not what it was supposed to be and I can't say I am truly happy with the way it came out but I think it is the best I could do. I am proud that I was able to complete this assignment with something that does make sense and easy to see what it is.
Starting off working on this project my idea was to create Scooby Doo and the Mystery Machine. As I started to work on it I had the car done and not even to the standards I wanted it to look like. There were many aspects of the car that I could not figure out how to do, yet creating it in its look now took an immense amount of time. Once I had the basic shape of the car done, thinking about trying to then create Scooby Doo, which would be much harder, was no longer something I was capable of. I set my intentions too high for this project which brought disappointment in the end.
I have never before done any coding or any type of creative software to make graphic images before, so this was completely new. In class watching all the examples and tutorials of creating shapes and working in the programming it seemed challenging to me, but I assumed it would eventually click. However time went on working on the project for hours at a time and there was no lightbulb so I continued to struggle. At this point I decided it was necessary to take the project in a different direction, so with a car and background I thought about what I could turn it into that was a reasonable goal for myself.
In turn I have created "Another Day" which features a car that has a man driving who is wearing a hat. Then there is grass to the left of the car, sprouting a tree with a big bushy head of leaves. The background features the sun shining in the left hand corner of the image. The last detail of the creation is the bird above the car, it is a simple outline of a bird flying through the sky. Adding each shape to the canvas and getting it in the right place was a lot of playing with the numbers, because whenever I thought I knew the coordinates, when I plugged them in it didn't seem to go where I wanted. For me it was trial and error causing the project to be very timely.
Below: My initial sketch for this project & my initial inspiration.
Estimated time: 7 hours
Code for image:
<!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
////Radial Gradient - background
// the radial gradient requires a shape, in this case a rectangle that fills the entire canvas
context.rect(0,0, canvas.width, canvas.height);
// inner circle
var circ1X = 10;
var circ1Y = 10;
var circ1Radius = 200;
// outer circle
var circ2X = 10;
var circ2Y = 10;
var circ2Radius = 400;
// create radial gradient
var grd = context.createRadialGradient(circ1X, circ1Y, circ1Radius, circ2X, circ2Y, circ2Radius);
// inner color
grd.addColorStop(0, "rgba(243,255,86,1.00)");
// you can add intermediate colors using N greater than 0 and smaller then 1
var N = 0.5;
grd.addColorStop(N, "rgba(255,251,191,1.00)");
// outer color
grd.addColorStop(1, "rgba(27,167,248,1.00)");
context.fillStyle = grd;
context.fill();
//Simple line A - left
context.moveTo(500,250); // COORDINATES OF STARTING POINT
context.lineTo(400,450); // COORDS OF ENDING POINT 1
context.lineWidth = 15; // STROKE WIDTH
context.strokeStyle = "rgba(0,0,0,1.00)"; // stroke color
context.stroke(); // STROKE
//Simple line B - right
context.moveTo(700,250); // COORDINATES OF STARTING POINT
context.lineTo(800,450); // COORDS OF ENDING POINT 1
context.lineWidth = 15; // STROKE WIDTH
context.strokeStyle = "rgba(0,0,0,1.00)"; // stroke color
context.stroke(); // STROKE
//Simple line C - top
context.moveTo(500,250); // COORDINATES OF STARTING POINT
context.lineTo(700,250); // COORDS OF ENDING POINT 1
context.lineWidth = 15; // STROKE WIDTH
context.strokeStyle = "rgba(0,0,0,1.00)"; // stroke color
context.stroke(); // STROKE
//Simple line A - right arm
context.moveTo(730,400); // COORDINATES OF STARTING POINT
context.lineTo(680,450); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.strokeStyle = "rgba(250,253,205,1.00)"; // stroke color
context.stroke(); // STROKE
//Simple line B - left arm
context.moveTo(600,400); // COORDINATES OF STARTING POINT
context.lineTo(660,450); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.strokeStyle = "rgba(250,253,205, 1.00)"; // stroke color
context.stroke(); // STROKE
//// circle - body
var centerX = canvas.width / 1.20;
var centerY = canvas.height / 1.4;
var radius = 0.1;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.lineWidth = 60;
context.strokeStyle = "rgba(3,248,27,1.00)";
context.stroke();
//bottom rectangle
///// rectangle with dropshadow code sample 3
context.save()
context.beginPath();
context.rect(390, 445, 410, 450);
context.fillStyle = 'rgba(255,234,0,1.00)';
context.shadowColor = 'gray';
context.shadowBlur = 25;
context.shadowOffsetX = -15;
context.shadowOffsetY = 15;
context.fill();
context.restore()
// bezier curve - line on car
// starting point coordinates
var x = 400;
var y = 600;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 1.5;
var cpointY1 = canvas.height / 2 + 200;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width / 1.5;
var cpointY2 = canvas.height / 2 + 275;
// ending point coordinates
var x1 = 800;
var y1 = 600;
context.beginPath();
context.moveTo(x, y);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);
context.lineWidth = 6;
context.strokeStyle = "rgba(252,252,252,1.00)";
context.lineCap = 'round'
context.stroke();
//context.lineCap = Lines can have one of three cap styles: butt, round, or square
// lineCap property must be set before calling stroke()
////small circle left
var centerX = canvas.width / 1.7;
var centerY = canvas.height / 1.25;
var radius = 5;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.lineWidth = 30;
context.strokeStyle = "rgba(255,0,4,1.00)";
context.stroke();
////small circle right
var centerX = canvas.width / 1.1;
var centerY = canvas.height / 1.25;
var radius = 5;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.lineWidth = 30;
context.strokeStyle = "rgba(255,0,4,1.00)";
context.stroke();
// RECT - on front car
context.beginPath();
context.rect(550, 540, 100, 10);
context.closePath();
context.lineWidth = 30;
context.strokeStyle = "rgba(0,0,0,1.00)";
context.stroke()
//// circle - head
var centerX = canvas.width / 1.20;
var centerY = canvas.height / 1.7;
var radius = 10;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.lineWidth = 70;
context.strokeStyle = "rgba(250,253,205,1.00)";
context.stroke();
//// circle - eye left
var centerX = canvas.width / 1.23;
var centerY = canvas.height / 1.75;
var radius = 3;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.lineWidth = 10;
context.strokeStyle = "rgba(57,62,255,1.00)";
context.stroke();
//// circle - eye right
var centerX = canvas.width / 1.17;
var centerY = canvas.height / 1.75;
var radius = 3;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.lineWidth = 10;
context.strokeStyle = "rgba(57,62,255,1.00)";
context.stroke();
// arck - smile
context.beginPath();
context.arc(665,375,10,0*Math.PI, 0.9857142857*Math.PI,false);
context.lineWidth=10
context.strokeStyle="rgba(255,0,0,1)"
context.stroke();
// RECT - bottom of hat
context.beginPath();
context.rect (630, 310, 70, 10);
context.closePath();
context.lineWidth=10
context.strokeStyle="rgba(255,0,0,1)"
context.stroke()
// RECT - top of hat
context.beginPath();
context.rect (645, 270, 40, 35);
context.closePath();
context.lineWidth= 15
context.strokeStyle="rgba(255,0,0,1)"
context.stroke()
// RECT - tree stump
context.beginPath();
context.rect (150, 400, 30, 200);
context.closePath();
context.lineWidth = 100;
context.strokeStyle = "rgba(38,29,6,1.00)";
context.stroke()
// tree leaves 1
context.beginPath();
context.arc( 120, // CENTER X
300, // CENTER Y
50, // RADIUS
0*Math.PI, // FRACTION OF PI 0*PI
2*Math.PI, // FRACTION OF PI 1*PI
false); // COUNTERCLOCKWISE true = yes, false = no
context.closePath();
context.lineWidth= 100
context.strokeStyle="rgba(0,180,15,1.00)"
context.stroke();
// tree leaves 2
context.beginPath();
context.arc( 150, // CENTER X
200, // CENTER Y
50, // RADIUS
0*Math.PI, // FRACTION OF PI 0*PI
2*Math.PI, // FRACTION OF PI 1*PI
false); // COUNTERCLOCKWISE true = yes, false = no
context.closePath();
context.lineWidth= 100
context.strokeStyle="rgba(0,180,15,1.00)"
context.stroke();
// tree leaves 3
context.beginPath();
context.arc( 250, // CENTER X
250, // CENTER Y
50, // RADIUS
0*Math.PI, // FRACTION OF PI 0*PI
2*Math.PI, // FRACTION OF PI 1*PI
false); // COUNTERCLOCKWISE true = yes, false = no
context.closePath();
context.lineWidth= 100
context.strokeStyle="rgba(0,180,15,1.00)"
context.stroke();
// tree leaves 4
context.beginPath();
context.arc( 220, // CENTER X
350, // CENTER Y
50, // RADIUS
0*Math.PI, // FRACTION OF PI 0*PI
2*Math.PI, // FRACTION OF PI 1*PI
false); // COUNTERCLOCKWISE true = yes, false = no
context.closePath();
context.lineWidth= 100
context.strokeStyle="rgba(0,180,15,1.00)"
context.stroke();
// RECT - grass
context.beginPath();
context.rect (000, 580, 373, 10);
context.closePath();
context.lineWidth = 30;
context.strokeStyle = "rgba(0,46,6,1.00)";
context.stroke()
// left wing bird - quad curve
var x = 500;
var y = 100;
// control point coordinates ( magnet )
var cpointX = canvas.width / 1.5 - 0;
var cpointY = canvas.height / 2 - 300;
// ending point coordinates
var x1 = 400;
var y1 = 100;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);
context.lineWidth = 15;
context.strokeStyle = "rgba(91,91,94,1.00)";
context.stroke();
// right wing bird - quad curve
var x = 500;
var y = 100;
// control point coordinates ( magnet )
var cpointX = canvas.width / 1.5 - 0;
var cpointY = canvas.height / 2 - 300;
// ending point coordinates
var x1 = 600;
var y1 = 100;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);
context.lineWidth = 15;
context.strokeStyle = "rgb(91,91,94,1.00)";
context.stroke();
// <<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE
///////////////////////////////////////////////////////////////////
// CREDITS
context.save();
var credits = "Katie Kopecky, Another Day, FMX 210, FA 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>
Comments
Post a Comment