Canvas Project

 Canvas Project: 


     For my project, I wanted to create something that reminded me of life in Florida. I saw a drawing online that looked similar to this final project, and I wanted to recreate it. I started with a sketch of the drawing that broke it down into simpler shapes for coding. Then, I went onto Dreamweaver and began with the basics, such as the sky, ocean, clouds, and sun. I used gradient for the sky and sea to make them look more realistic. I added a few Bezier curves to the ocean to make it look like waves. 
    After I had those done, I created the island, which was just a semi circle moved slightly off the page. Then I made the trees, which were pretty difficult. I had to perfectly place eight semi circles and make a Bezier swoosh for the trunks. I thought the control points for the swooshes were the hardest part of this piece. All I had left was the boat. I used a semi circle for the base of the boat, then a couple of lines to tie the sails together. I also added a flag and a small circle on top of the mast. The sails were the hardest for me to figure out, because I had to change the control points many times for them to look how they did in the picture. 
    Overall, this project took me eleven hours. Some parts were easy to complete in a short amount of time, such as the sky, but once I got into the more complicated parts it took a longer time. The boat alone took me over three hours to figure out! I'm glad we had time to space out our work for this project, because if we had only one day to finish it, I don't know if I would've been able to. But over the week, I took one to two hours a day to focus on this work, and I think it turned out very well. My project is successful because it uses a lot of shapes to come together and form a great replica of my inspiration drawing. I had a good time working on this project, because even when it stressed me out when I couldn't figure out a certain shape, in the end I think it turned out well and that's what matters! 

Inspiration Drawing: 

Sketch: 



Full Code: 

 <!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

//sky

var gradient2 = context.createLinearGradient(0, 0, 0, 300);

gradient2.addColorStop(0, 'rgba(0,183,253,1.00)');

gradient2.addColorStop(1, 'rgba(255,237,18,0.99)');

context.fillStyle = gradient2;

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

context.beginPath();

context.arc(100, 75, 50, 0 , 2* Math.PI, true);

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

context.fill();

context.lineWidth =10;

context.beginPath();

context.arc(175, 60, 50, 0 , 2* Math.PI, true);

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

context.fill();

context.lineWidth =10;

context.beginPath();

context.arc(230, 100, 50, 0 , 2* Math.PI, true);

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

context.fill();

context.lineWidth =10;

context.beginPath();

context.arc(160, 120, 50, 0 , 2* Math.PI, true);

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

context.fill();

context.lineWidth =10;

context.beginPath();

context.arc(775, 40, 50, 0 , 2* Math.PI, true);

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

context.fill();

context.lineWidth =10;

context.beginPath();

context.arc(710, 70, 50, 0 , 2* Math.PI, true);

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

context.fill();

context.lineWidth =10;

context.beginPath();

context.arc(640, 55, 60, 0 , 2* Math.PI, true);

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

context.fill();

context.lineWidth =10;

context.beginPath();

context.arc(700, 30, 60, 0 , 2* Math.PI, true);

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

context.fill();

context.lineWidth =10;

context.beginPath();

context.arc(575, 20, 50, 0 , 2* Math.PI, true);

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

context.fill();

context.lineWidth =10;


//ocean 

var gradient3 = context.createLinearGradient(0, 300, 0, 600);

gradient3.addColorStop(0, 'rgba(0,194,255,1.00)');

gradient3.addColorStop(1, 'rgba(21,0,255,1.00)');

context.fillStyle = gradient3;

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

var x = 0;

var y = 350;


var cpointX1 = 250;

var cpointY1 = 450;


var cpointX2 = 550;

var cpointY2 = 300; 


var x1 = 800;

var y1 = 360;


context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 6;

context.strokeStyle = "rgb(0,0,255)";

context.lineCap = 'round' 

context.stroke();

var x = 0;

var y = 450;


var cpointX1 = 250;

var cpointY1 = 550;


var cpointX2 = 550;

var cpointY2 = 400; 


var x1 = 800;

var y1 = 460;


context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 6;

context.strokeStyle = "rgba(0,0,178,1.00)";

context.lineCap = 'round' 

context.stroke();

var x = 0;

var y = 550;


var cpointX1 = 250;

var cpointY1 = 650;


var cpointX2 = 550;

var cpointY2 = 500; 


var x1 = 800;

var y1 = 560;


context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 6;

context.strokeStyle = "rgba(0,0,106,1.00)";

context.lineCap = 'round' 

context.stroke();

//sun

var centerX = 400;

var centerY = 300

var radius = 100;

var startangle = 0* Math.PI;;

var endangle =  1* Math.PI;


context.beginPath();

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

context.fillStyle = "orange";

context.fill();

context.lineWidth = 5;

//trees

var centerX = 450;

var centerY = 150

var radius = 50;

var startangle = 0.25* Math.PI;;

var endangle =  1.25* Math.PI;


context.beginPath();

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

context.fillStyle = "green";

context.fill();

context.lineWidth = 5;

var centerX = 540;

var centerY = 190

var radius = 50;

var startangle = 0* Math.PI;;

var endangle =  1* Math.PI;


context.beginPath();

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

context.fillStyle = "green";

context.fill();

context.lineWidth = 5;

var centerX = 530;

var centerY = 150

var radius = 50;

var startangle = 0.75* Math.PI;;

var endangle =  1.75* Math.PI;


context.beginPath();

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

context.fillStyle = "green";

context.fill();

context.lineWidth = 5;

var centerX = 440;

var centerY = 190

var radius = 50;

var startangle = 0.01* Math.PI;;

var endangle =  0.70* Math.PI;


context.beginPath();

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

context.fillStyle = "green";

context.fill();

context.lineWidth = 5;

var centerX = 720;

var centerY = 270

var radius = 50;

var startangle = 0* Math.PI;;

var endangle =  1* Math.PI;


context.beginPath();

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

context.fillStyle = "green";

context.fill();

context.lineWidth = 5;

var centerX = 615;

var centerY = 270

var radius = 50;

var startangle = 0.01* Math.PI;;

var endangle =  0.70* Math.PI;


context.beginPath();

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

context.fillStyle = "green";

context.fill();

context.lineWidth = 5;

var centerX = 625;

var centerY = 235

var radius = 50;

var startangle = 0.25* Math.PI;;

var endangle =  1.25* Math.PI;


context.beginPath();

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

context.fillStyle = "green";

context.fill();

context.lineWidth = 5;

var centerX = 710;

var centerY = 235

var radius = 50;

var startangle = 0.75* Math.PI;;

var endangle =  1.75* Math.PI;


context.beginPath();

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

context.fillStyle = "green";

context.fill();

context.lineWidth = 5;

var x = 440;

var y = 500;

var controlX = 700;

var controlY = 700;

var x1 = 485;

var y1 = 150;

var controlX1 = 525;

var controlY1 = 650;

var x2 = 525;

var y2 = 450;


context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(controlX, controlY, x1, y1);

context.quadraticCurveTo(controlX1, controlY1, x2, y2);

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

context.fill();


var x = 670;

var y = 500;

var controlX = 700;

var controlY = 700;

var x1 = 670;

var y1 = 250;

var controlX1 = 525;

var controlY1 = 650;

var x2 = 700;

var y2 = 450;


context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(controlX, controlY, x1, y1);

context.quadraticCurveTo(controlX1, controlY1, x2, y2);

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

context.fill();


//island

var centerX = 750;

var centerY = 750

var radius = 400;

var startangle = 0* Math.PI;;

var endangle =  1* Math.PI;


context.beginPath();

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

context.fillStyle = "tan";

context.fill();

context.lineWidth = 5;

//boat

var x = 50;

var y = 400;


var cpointX = canvas.width / 2 - 175;

var cpointY = canvas.height / 2 + 300;


var x1 = 400;

var y1 = 400;


context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 15;

context.strokeStyle = "rgba(70,38,0,1.00)";

context.stroke();

context.moveTo(50,400); 

context.lineTo(400,400); 

context.lineWidth = 15; 

context.stroke(); 

context.moveTo(44,403); 

context.lineTo(260,200); 

context.lineWidth = 5; 

context.stroke(); 

 

var x = 80;

var y = 410;


var cpointX = canvas.width / 2 - 175;

var cpointY = canvas.height / 2 + 250;


var x1 = 370;

var y1 = 410;


context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 40;

context.strokeStyle = "rgba(70,38,0,1.00)";

context.stroke();

context.moveTo(75,420); 

context.lineTo(375,420); 

context.lineWidth = 30; 

var x = 80;

var y = 410;


var cpointX = canvas.width / 2 - 175;

var cpointY = canvas.height / 2 + 200;


var x1 = 375;

var y1 = 410;


context.beginPath();

context.moveTo(x, y);

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


context.lineWidth = 40;

context.strokeStyle = "rgba(70,38,0,1.00)";

context.stroke();

 

context.moveTo(75,420); 

context.lineTo(375,420); 

context.lineWidth = 30; 

context.stroke();

 

context.moveTo(60,410); 

context.lineTo(385,410); 

context.lineWidth = 20; 

context.stroke(); 

 

context.moveTo(200,400); 

context.lineTo(275,150); 

context.lineWidth = 10; 

context.stroke();

context.beginPath(); 

context.moveTo(265,150); 

context.lineTo(150, 175); 

context.lineTo(250,200); 

context.closePath(); 

context.lineWidth = 15; 

context.lineJoin = "round";

context.strokeStyle = "rgba(255,0,0,1.00)"; 

context.stroke();

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

context.fill();

var centerX = 275;

var centerY = 145;

var radius = 5;

var startangle = 0;

var endangle = 2 * Math.PI;


context.beginPath();

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

    

context.lineWidth = 10;

context.strokeStyle = "black";

context.stroke();

context.moveTo(405,405); 

context.lineTo(390,375); 

context.lineWidth = 5; 

context.stroke(); 

//sails 

var x = 152;

var y = 390;

var controlX = 260;

var controlY = 220;

var x1 = 350;

var y1 = 270;

var controlX1 = 375;

var controlY1 = 350;

var x2 = 390;

var y2 = 375;


context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(controlX, controlY, x1, y1);

context.quadraticCurveTo(controlX1, controlY1, x2, y2);

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

context.fill();


context.lineWidth = 5;

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

context.stroke();


var x = 264;

var y = 200;

var controlX = 320;

var controlY = 260;

var x1 = 340;

var y1 = 265;

var controlX1 = 310;

var controlY1 = 235;

var x2 = 242;

var y2 = 275;


context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(controlX, controlY, x1, y1);

context.quadraticCurveTo(controlX1, controlY1, x2, y2);

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

context.fill();


context.lineWidth = 5;

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

context.stroke();


context.lineWidth = 5;

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

context.stroke();

var x = 100;

var y = 395;

var controlX = 160;

var controlY = 300;

var x1 = 240;

var y1 = 250;

var controlX1 = 220;

var controlY1 = 325;

var x2 = 200;

var y2 = 395;


context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(controlX, controlY, x1, y1);

context.quadraticCurveTo(controlX1, controlY1, x2, y2);

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

context.fill();


context.lineWidth = 5;

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

context.stroke();

var x = 50;

var y = 395;

var controlX = 60;

var controlY = 325;

var x1 = 155;

var y1 = 300;

var controlX1 = 125;

var controlY1 = 325;

var x2 = 150;

var y2 = 395;


context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(controlX, controlY, x1, y1);

context.quadraticCurveTo(controlX1, controlY1, x2, y2);

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

context.fill();


context.lineWidth = 5;

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

context.stroke();


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

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


// CREDITS


context.save();

var credits = "Eva Schoen, Ocean Island, FMX 210, FALL 2022";

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

Popular posts from this blog

Somewhere Project

Image
I wanted to put myself into a superhero show, because I love this genre and think it's fun to imagine myself with superpowers. I put myself into a scene from The Defenders, because there was a gap in this elevator scene that I thought I would fit nicely into. This was one of my favorite projects to work on, because I got to put myself into a different world and I think it turned out really well. The hardest part for me was blending the edges of my picture into the background image, because the tools weren't working exactly how I wanted them to. Overall, I had a good time working on the Somewhere project and would definitely try something like this again. 
Read more

The Internet!

      The internet is potentially the most useful piece of technology available today. However, it was not always around for people to be able to learn the answer to any question in a heartbeat. On the first day of 1983, the internet as we know it today was created by Vinton Cerf and Bob Kahn. It was originally designed as a secret way of communication between scientists during the Cold War, and as time went on, engineers realized how great of a tool it could be if available to everyone in the public. The internet now is used for quick and easy research, communication across the world, and entertainment.       The World Wide Web is the collection of all webpages accessible by the public. Known more commonly as the Web, it was created in 1989 by British scientist Tim Berners-Lee. It was originally used as a system for managing and organizing documents. Over time, people realized it could be used for much more, as there are now websites for things such as public forums, media entertainme
Read more

Portfolio

Image
For my final portfolio, I wanted to do something nature related. I've tried incorporating nature into almost all of my projects, and I wanted this one to do the same. I chose a sky theme, because I could add flying birds, which are my favorite animals. I put the projects in timeline order from this year, because I think going in order shows my progress the best. My first project wasn't the best, but once I got to the end, you can see how much I improved. I had a fun time doing the portfolio because I got to really see all my work together, and think about how much I've done in only one semester. 
Read more