Canvas Project Using Dreamweaver

<!doctype html>

<html>

<head>

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.00);

border: rgba(255,255,255,1) thin dashed;

cursor: crosshair;

display: inline-block;

}

</style>

</head>

<body>

</div>

///////////////////////////////////////////////////////////////////////

// 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 gradient2 = context.createLinearGradient(100, 0, 0, 600);

gradient2.addColorStop(0, '#A1E4FF');

gradient2.addColorStop(1, 'rgba(0,27,144,1.00)');

context.fillStyle = gradient2;

context.fillRect(0, 300, 800, 800);

var gradient2 = context.createLinearGradient(50, 0, 0, 350);

gradient2.addColorStop(0, '#3B26AA');

gradient2.addColorStop(1, 'rgba(252,191,255,1.00)');

context.fillStyle = gradient2;

context.fillRect(0, 0, 800, 300);

// starting point coordinates

var x7 = 0;

var y7 = 400;

// control point 1 coordinates ( magnet )

var cpointX8 = canvas.width / 4;

var cpointY8 = canvas.height / 3 + 300;

// control point 2 coordinates ( magnet )

var cpointX9 = canvas.width / 5.5;

var cpointY9 = canvas.height / 1.25 - 300;

// ending point coordinates

var x8 = 800;

var y8 = 400;

context.beginPath();

context.moveTo(x7, y7);

context.bezierCurveTo(cpointX8, cpointY8, cpointX9, cpointY9, x8, y8);

context.lineWidth = 2;

context.strokeStyle = "rgba(255,255,255,0.41)";

context.lineCap = 'round'

context.stroke();

// starting point coordinates

var x = 0;

var y = 500;

// control point 1 coordinates ( magnet )

var cpointX1 = canvas.width / 2;

var cpointY1 = canvas.height / 3 + 400;

// control point 2 coordinates ( magnet )

var cpointX2 = canvas.width / 3.5;

var cpointY2 = canvas.height / 1 - 400;

// ending point coordinates

var x1 = 800;

var y1 = 500;

context.beginPath();

context.moveTo(x, y);

context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);

context.lineWidth = 2;

context.strokeStyle = "rgba(255,255,255,0.41)";

context.lineCap = 'round'

context.stroke();

// starting point coordinates

var x4 = 0;

var y4 = 600;

// control point 1 coordinates ( magnet )

var cpointX5 = canvas.width / 1.5;

var cpointY5 = canvas.height / 2 + 300;

// control point 2 coordinates ( magnet )

var cpointX6 = canvas.width / 2.5;

var cpointY6 = canvas.height / 1 - 300;

// ending point coordinates

var x5 = 800;

var y5 = 600;

context.beginPath();

context.moveTo(x4, y4);

context.bezierCurveTo(cpointX5, cpointY5, cpointX6, cpointY6, x5, y5);

context.lineWidth = 2;

context.strokeStyle = "rgba(255,255,255,0.41)";

context.lineCap = 'round'

context.stroke();

context.beginPath();

context.moveTo(400,430)

context.lineTo(400, 350);

context.lineWidth = 7; // STROKE WIDTH

context.strokeStyle = 'rgba(220,133,10,1.00)';

context.stroke(); // STROKE

context.beginPath();

context.moveTo(320,420)

context.lineTo(380, 350);

context.lineWidth = 7; // STROKE WIDTH

context.strokeStyle = 'rgba(220,133,10,1.00)';

context.stroke(); // STROKE

context.beginPath();

context.moveTo(475,420)

context.lineTo(420, 350);

context.lineWidth = 7; // STROKE WIDTH

context.strokeStyle = 'rgba(220,133,20,1.00)';

context.stroke(); // STROKE

context.beginPath();

context.moveTo(265,320)

context.lineTo(525, 310);

context.lineWidth = 7; // STROKE WIDTH

context.strokeStyle = 'rgba(220,133,20,1.00)';

context.stroke(); // STROKE

context.beginPath();

context.moveTo(525,350)

context.lineTo(390,320);

context.lineWidth = 7; // STROKE WIDTH

context.strokeStyle = 'rgba(220,133,20,1.00)';

context.stroke(); // STROKE

context.beginPath();

context.moveTo(275,370)

context.lineTo(390, 310);

context.lineWidth = 7; // STROKE WIDTH

context.strokeStyle = 'rgba(220,133,20,1.00)';

context.stroke(); // STROKE

//top arc

var centerX = 400;

var centerY = 300

var radius = 70;

var startangle = 0* Math.PI;;

var endangle = 1* Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

context.fillStyle = "#F59407";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "#F79C02";

context.stroke();

context.beginPath();

context.moveTo(275,240)

context.lineTo(405, 290);

context.lineWidth = 7; // STROKE WIDTH

context.strokeStyle = 'rgba(239,184,27,1.00)';

context.stroke(); // STROKE

context.beginPath();

context.moveTo(265,290)

context.lineTo(325, 290);

context.lineWidth = 7; // STROKE WIDTH

context.strokeStyle = 'rgba(239,184,27,1.00)';

context.stroke(); // STROKE

context.beginPath();

context.moveTo(525,290)

context.lineTo(300, 290);

context.lineWidth = 7; // STROKE WIDTH

context.strokeStyle = 'rgba(239,184,27,1.00)';

context.stroke(); // STROKE

context.beginPath();

context.moveTo(525,240)

context.lineTo(350, 300);

context.lineWidth = 7; // STROKE WIDTH

context.strokeStyle = 'rgba(239,184,27,1.00)';

context.stroke(); // STROKE

context.beginPath();

context.moveTo(400,250)

context.lineTo(400, 155);

context.lineWidth = 7; // STROKE WIDTH

context.strokeStyle = 'rgba(239,184,27,1.00)';

context.stroke(); // STROKE

context.beginPath();

context.moveTo(415,270)

context.lineTo(480, 180);

context.lineWidth = 7; // STROKE WIDTH

context.strokeStyle = 'rgba(239,184,27,1.00)';

context.stroke(); // STROKE

context.beginPath();

context.moveTo(370,250)

context.lineTo(320, 180);

context.lineWidth = 7; // STROKE WIDTH

context.strokeStyle = 'rgba(239,184,27,1.00)';

context.stroke(); // STROKE

var centerX1 = 400;

var centerY1 = 300

var radius1 = 70;

var startangle1 = 1* Math.PI;;

var endangle1 = 0* Math.PI;

context.beginPath();

context.arc(centerX1, centerY1, radius1, startangle1, endangle1, false);

context.fillStyle = "#FAD500";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "#EEC300";

context.stroke();

context.beginPath();

context.moveTo(0,300)

context.lineTo(850, 300);

context.lineWidth = 5; // STROKE WIDTH

context.strokeStyle = 'rgba(17,0,250,0.49)';

context.stroke(); // STROKE

// TUrtle Tail

context.beginPath(); // begin a shape

context.moveTo(150,460); // point A coordinates

context.lineTo(200, 500); // point B coords

context.lineTo(150,495); // point C coords

context.closePath(); // close the shape

context.lineWidth = 2; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle = "rgba(2,85,0,1.00)"; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "rgba(9,107,0,1.00)";

context.fill();

//Turtle Head

context.beginPath();

context.arc(240, 410, 20, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(0,133,11,1.00)' ;

context.fill();

context.lineWidth =2;

context.strokeStyle = 'rgba(2,98,20,1.00)';

context.stroke();

//Turtle Eye

context.beginPath();

context.arc(250, 415, 2, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(0,0,0,1.00)' ;

context.fill();

context.lineWidth =2;

context.strokeStyle = 'rgba(0,0,0,1.00)';

context.stroke();

//Turtle Eye

context.beginPath();

context.arc(240, 400, 2, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(0,0,0,1.00)' ;

context.fill();

context.lineWidth =2;

context.strokeStyle = 'rgba(0,0,0,1.00)';

context.stroke();

var centerX = 240;

var centerY = 490

var radius = 35;

var startangle = 1.5* Math.PI;;

var endangle = 0* Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

context.fillStyle = "#065A02";

context.fill();

context.lineWidth = 2;

context.strokeStyle = "#015A01";

context.stroke();

var centerX = 150;

var centerY = 410

var radius = 35;

var startangle = 1.5* Math.PI;;

var endangle = 0* Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

context.fillStyle = "#045B00";

context.fill();

context.lineWidth = 2;

context.strokeStyle = "#015A01";

context.stroke();

var centerX = 120;

var centerY = 460

var radius = 35;

var startangle = 1.45* Math.PI;;

var endangle = 0* Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

context.fillStyle = "#055C00";

context.fill();

context.lineWidth = 2;

context.strokeStyle = "#015A01";

context.stroke();

var centerX = 205;

var centerY = 525

var radius = 35;

var startangle = 1.45* Math.PI;;

var endangle = 0* Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

context.fillStyle = "#045E00";

context.fill();

context.lineWidth = 2;

context.strokeStyle = "#015A01";

context.stroke();

//Turtle Body

context.beginPath();

context.arc(195, 450, 50, 0 , 2* Math.PI, true);

context.fillStyle = 'rgba(0,133,11,1.00)' ;

context.fill();

context.lineWidth =2;

context.strokeStyle = 'rgba(2,98,20,1.00)';

context.stroke();

// starting point coordinates

var x = 190;

var y = 410;

// control point coordinates ( magnet )

var cpointX = canvas.width / 3.5 - 2;

var cpointY = canvas.height / 1.5 - 1;

// ending point coordinates

var x1 = 210;

var y1 = 425;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgba(10,108,10,1.00)";

context.stroke();

// starting point coordinates

var x = 215;

var y = 430;

// control point coordinates ( magnet )

var cpointX = canvas.width / 3.5 + 2;

var cpointY = canvas.height / 1.5 - 1;

// ending point coordinates

var x1 = 235;

var y1 = 450;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgba(10,108,10,1.00)";

context.stroke();

// starting point coordinates

var x = 170;

var y = 420;

// control point coordinates ( magnet )

var cpointX = canvas.width / 4 + 1;

var cpointY = canvas.height / 1.5 + 5;

// ending point coordinates

var x1 = 200;

var y1 = 450;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgba(10,108,10,1.00)";

context.stroke();

// starting point coordinates

var x = 205;

var y = 450;

// control point coordinates ( magnet )

var cpointX = canvas.width / 3.75 + 1;

var cpointY = canvas.height / 1.48 - 2;

// ending point coordinates

var x1 = 230;

var y1 = 470;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgba(10,108,10,1.00)";

context.stroke();

// starting point coordinates

var x = 155;

var y = 430;

// control point coordinates ( magnet )

var cpointX = canvas.width / 4 + 1;

var cpointY = canvas.height / 1.5 + 20;

// ending point coordinates

var x1 = 185;

var y1 = 460;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgba(10,108,10,1.00)";

context.stroke();

// starting point coordinates

var x = 185;

var y = 465;

// control point coordinates ( magnet )

var cpointX = canvas.width / 3.5 + 1;

var cpointY = canvas.height / 1.35 + 1;

// ending point coordinates

var x1 = 220;

var y1 = 490;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgba(10,108,10,1.00)";

context.stroke();

// starting point coordinates

var x = 172;

var y = 485;

// control point coordinates ( magnet )

var cpointX = canvas.width / 3.75 + 1;

var cpointY = canvas.height / 1.30 + 1;

// ending point coordinates

var x1 = 210;

var y1 = 495;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgba(10,108,10,1.00)";

context.stroke();

// starting point coordinates

var x = 152;

var y = 450;

// control point coordinates ( magnet )

var cpointX = canvas.width / 4.5 + 2;

var cpointY = canvas.height / 1.40 + .5;

// ending point coordinates

var x1 = 175;

var y1 = 480;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgba(10,108,10,1.00)";

context.stroke();

// <<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE

///////////////////////////////////////////////////////////////////

// CREDITS

context.save();

var credits = "Rutzel Lena, Sunset, FMX 210, FA 2021";

context.font = 'bold 12px Helvetica';

context.fillStyle = "rgba(255,255,255,1.00)"; // change the color here

context.shadowColor = "rgba(0,0,0,1.00)"; // 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>

In this project, I chose to create a turtle swimming toward a sunset. I chose this because I really liked the idea of creating a sunset being reflected over water and I also thought that adding the turtle would add more to it. When creating it I took two gradient rectangles to make the sky and the water. I made them both gradient because I really felt liked it helped emphasize the sun setting and creating a sort of shadow. I also added the bezier curves to the water portion to make it seem like there are waves in the water. For the sunset, I took two arcs that mirrored each other to look like the sun and its reflection as well as created multiple lines around the arcs to look like rays of the sun. After creating the sun I made the turtle by using circles for the head, body, and eyes and then used a triangle for the tail, arcs for the legs, and quadratic curves to make the etchings of a turtle shell.

Overall this project took me 11 hours to make with its ups and downs. It took me this long because it was hard to get the correct placings of shapes to where I would like and it was also hard to get the quadratic curves to be as small as they are in the turtle shell. The rays of the sun were also really hard to do because I wanted them to match up as much as possible and be the same length. The equal coloring of all the shapes was also time-consuming. Even though it was time-consuming and at some times hard the gradient in the sky and water portion of the composition is really nice. The gradient really pulls the whole thing together with the sun and its reflection and makes each little part stand out.

Search This Blog

Lena Rutzel

Canvas Project Using Dreamweaver

Comments

Post a Comment

Popular posts from this blog

Somewhere Project

Business Cards

Autoscopy