Jessica Simon: Inside My Mind: Project 1

When I first found out that I was able to create some sort of landscape through HTML for my first project, I knew exactly that I wanted to do something involving water. Growing up on the shore of Long Island and always being on my family's boat all summer influenced this "under the sea" type of graphic. It was easy to create the gradient of the overall background image because the fading of blues made the "water" look even more realistic. It wasn't until I got to the fish that I had to take more time carefully graphing out where I wanted them to be placed and having to connect the fin completely so the color could be filled properly. I tried to make a "Nemo" like figure with the first fish, but got creative and made a more dangerous looking one later on with curves. The shark took time and precision also, since I used a bezier curve for most of it. Quadratic and bezier curves were also used for the tan colored bottom ocean floor surface, giving it the look of sand. Sharp lines were used for the starfish connecting to make a complete star that could be filled with a pattern. I thought the overall image needed a little something else to make it stand out when I thought it was completed, so I added a bubbly, fun treasure chest at the bottom!
There is also a loop running through the picture starting at points (0,0). I thought by adding this the water appeared to be rippled, or perhaps just have some reflection within it going on.

Overall, I had a lot of fun with this project and did not mind spending a long time on it. It made me really get into coding and HTML processes a lot, so I'm excited for future projects.

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

context.beginPath();
context.rect(0, 0, canvas.width, canvas.height);
   context.fillStyle = 'rgb(200,69,141)';
  context.fill();
context.stroke();

context.fillStyle = "#pink";

  var grd = context.createLinearGradient(400, 0, 400, 600);
   // light blue
   grd.addColorStop(0, 'rgb(102,204,205)');
   // dark blue
   grd.addColorStop(.5, "#004CB3");
   grd.addColorStop(1, 'rgb(0,0,204)');
   context.fillStyle = grd;
   context.fill();

   // add stroke
   context.lineWidth = 5;
   context.strokeStyle = "blue";
   context.stroke();

   context.beginPath();
   context.fillStyle = "#pink";
   context.arc(190, 430, 2, 0 , 2 * Math.PI, false);
   context.arc(194, 439, 3, 0 , 2 * Math.PI, false);
   context.arc(199, 441, 2, 0 , 2 * Math.PI, false);
   context.arc(190, 448, 3, 0 , 2 * Math.PI, false);
   context.arc(192, 453, 2, 0 , 2 * Math.PI, false);
   context.arc(199, 459, 2, 0 , 2 * Math.PI, false);
   context.arc(192, 465, 2, 0 , 2 * Math.PI, false);
   context.arc(190, 469, 2, 0 , 2 * Math.PI, false);
  context.arc(194, 465, 2, 0 , 2 * Math.PI, false);
   context.strokeStyle = "#660033";
   context.stroke();

   context.fill();
   context.stroke();

/*
triangle
context.beginPath();
context.moveTo(400,50);
context.lineTo(250,500);
context.lineTo(600,500);
context.lineTo(400,50);
context.stroke();
*/

   context.beginPath();
   context.arc(240, 430, 2, 0 , 2 * Math.PI, false);
   context.arc(244, 439, 3, 0 , 2 * Math.PI, false);
   context.arc(249, 441, 2, 0 , 2 * Math.PI, false);
   context.arc(240, 448, 3, 0 , 2 * Math.PI, false);
   context.arc(242, 453, 2, 0 , 2 * Math.PI, false);
   context.arc(249, 459, 2, 0 , 2 * Math.PI, false);
   context.arc(242, 465, 2, 0 , 2 * Math.PI, false);
   context.arc(249, 469, 2, 0 , 2 * Math.PI, false);
  context.arc(249, 465, 2, 0 , 2 * Math.PI, false);
   context.strokeStyle = "#660033";
   context.fillStyle = "#pink";
   context.stroke();

   context.beginPath();
   context.arc(160, 430, 2, 0 , 2 * Math.PI, false);
   context.arc(164, 439, 3, 0 , 2 * Math.PI, false);
   context.arc(169, 441, 2, 0 , 2 * Math.PI, false);
   context.arc(160, 448, 3, 0 , 2 * Math.PI, false);
   context.arc(162, 453, 2, 0 , 2 * Math.PI, false);
   context.arc(169, 459, 2, 0 , 2 * Math.PI, false);
   context.arc(162, 465, 2, 0 , 2 * Math.PI, false);
   context.arc(169, 469, 2, 0 , 2 * Math.PI, false);
  context.arc(163, 465, 2, 0 , 2 * Math.PI, false);
   context.strokeStyle = "#660033";
   context.fillStyle = "#pink";
   context.stroke();

context.beginPath();
   context.arc(150, 150, 14, 0, 2 * Math.PI, false);
   context.fillStyle = "orange";
   context.fill();
   context.lineWidth = 2;
   context.strokeStyle = "orange";
   context.stroke();
  var x1=0;
var y1=0;
var x2=canvas.width;

for (var i=0; i<canvas.height/1; i+=19){
context.beginPath();
context.moveTo(x1,y1);
context.lineTo(x2,i);
   context.lineWidth = 1;
   context.strokeStyle = 'rgb(51,102,204)';
context.stroke();
}



   context.beginPath();
  context.moveTo(150,150);
  context.lineTo(190,200);
  context.lineTo(190,120);
  context.strokeStyle = "orange";
  context.fillStyle = "orange";
  context.fill();
  context.stroke();

context.beginPath();
   context.arc(145, 147, 1, 0, 2 * Math.PI, false);
   context.fillStyle = "black";
   context.fill();
   context.lineWidth = 2;
   context.strokeStyle = "black";
   context.stroke();

context.beginPath();
   context.arc(690, 459, 16, 0, 2 * Math.PI, false);
   context.fillStyle = "#black";
   context.fill();
   context.lineWidth = 5;
   context.strokeStyle = "black";
   context.stroke();



context.beginPath();
context.moveTo(300,690)
context.bezierCurveTo(200, 400, 750, 600, 699, 699);
   context.fillStyle = "tan";
   context.fill();
context.strokeStyle = "tan";
context.stroke();

context.beginPath();
context.moveTo(560,670)
context.bezierCurveTo(600, 490, 750, 600, 869, 699);
   context.fillStyle = "tan";
   context.fill();
context.strokeStyle = "tan";
context.stroke();

context.beginPath();
context.moveTo(560,670)
context.bezierCurveTo(600, 490, 750, 600, 1469, 619);
   context.fillStyle = "tan";
   context.fill();
context.strokeStyle = "tan";
context.stroke();

context.beginPath();
context.moveTo(160,670)
context.bezierCurveTo(100, 490, 150, 500, 469, 619);
   context.fillStyle = "tan";
   context.fill();
context.strokeStyle = "tan";
context.stroke();

context.beginPath();
context.moveTo(0,670)
context.bezierCurveTo(100, 490, 150, 500, 469, 619);
   context.fillStyle = "tan";
   context.fill();
context.strokeStyle = "tan";
context.stroke();

context.beginPath();
context.moveTo(0,670)
context.bezierCurveTo(0, 420, 0, 380, 469, 619);
   context.fillStyle = "tan";
   context.fill();
context.strokeStyle = "tan";
context.stroke();

//PEBBLES
context.beginPath();
   context.arc(782, 580, 2, 0 , 2 * Math.PI, false);
   context.fillStyle = "#666666";
   context.strokeStyle = "#666666";
   context.stroke();
   context.fill();
   context.stroke();
   context.beginPath();
   context.arc(772, 590, 3, 0 , 2 * Math.PI/4, false);
   context.fillStyle = "#666666";
   context.strokeStyle = "#666666";
   context.stroke();
   context.fill();
   context.stroke();

   context.beginPath();
   context.arc(765, 588, 1, 0 , 2 * Math.PI, false);
   context.fillStyle = "#666666";
   context.strokeStyle = "#666666";
   context.stroke();
   context.fill();
   context.stroke();

   context.beginPath();
   context.arc(794, 584, 3, 0 , 2 * Math.PI/3, false);
   context.fillStyle = "#666666";
   context.strokeStyle = "#666666";
   context.stroke();
   context.fill();
   context.stroke();

   context.beginPath();
   context.arc(789, 594, 4, 0 , 2 * Math.PI/5, false);
   context.fillStyle = "#666666";
   context.strokeStyle = "#666666";
   context.stroke();
   context.fill();
   context.stroke();

   context.beginPath();
   context.arc(120, 100, 2, 0 , 2 * Math.PI, false);
   context.strokeStyle = "lightblue";
context.stroke();
   context.stroke();

   context.beginPath();
   context.arc(90, 89, 3.5, 0 , 2 * Math.PI, false);
   context.fillStyle = "lightblue";
   context.fill();
   context.stroke();

   context.beginPath();
   context.arc(130, 130, 2.8, 0 , 2 * Math.PI, false);
   context.fillStyle = "lightblue";
   context.fill();
   context.stroke();

   context.beginPath();
   context.arc(112, 110, 2, 0 , 2 * Math.PI, false);
   context.fillStyle = "lightblue";
   context.fill();
   context.stroke();

   context.beginPath();
   context.arc(122, 114, 1, 0 , 2 * Math.PI, false);
   context.fillStyle = "lightblue";
   context.fill();
   context.stroke();



context.beginPath();
   context.moveTo(328, 230);
   context.bezierCurveTo(140, 100, 288, 120, 488, 150);
   context.quadraticCurveTo(958, 249, 325, 228);
   context.lineWidth = 8;
   context.fillStyle = "gray";
   context.fill();
   // line color
   context.strokeStyle = "gray";
   context.stroke();

context.beginPath();

   context.lineWidth = 10;
   // line color
   context.strokeStyle = "gray";
   context.stroke();

   context.beginPath();
   context.arc(282, 150, 2, 0 , 2 * Math.PI, false);
   context.fillStyle = "black";
   context.strokeStyle = "black";

   context.stroke();
   context.fill();
   context.stroke();



//seaweed
   context.beginPath();
   context.arc(350, 530, 5, 0 , 2 * Math.PI, false);
   context.lineWidth = 10;
   context.fillStyle = "green";
   context.strokeStyle = "green";
   context.fill();
   context.stroke();
  context.beginPath();
   context.arc(350, 541, 7, 0 , 2 * Math.PI, false);
   context.arc(350, 552, 4, 0 , 2 * Math.PI, false);
   context.arc(353, 561, 3, 0 , 2 * Math.PI, false);
   context.arc(352, 569, 5, 0 , 2 * Math.PI, false);
   context.arc(348, 576, 4, 0 , 2 * Math.PI, false);
   context.arc(349, 584, 5, 0 , 2 * Math.PI, false);
   context.arc(350, 599, 7, 0 , 2 * Math.PI, false);
   context.fillStyle = "green";
   context.strokeStyle = "green";
   context.fill();
   context.stroke();


context.beginPath();
   context.arc(450, 541, 7, 0 , 2 * Math.PI, false);
   context.arc(450, 552, 4, 0 , 2 * Math.PI, false);
   context.arc(453, 561, 3, 0 , 2 * Math.PI, false);
   context.arc(452, 569, 5, 0 , 2 * Math.PI, false);
   context.arc(448, 576, 4, 0 , 2 * Math.PI, false);
   context.arc(449, 584, 5, 0 , 2 * Math.PI, false);
   context.arc(450, 599, 7, 0 , 2 * Math.PI, false);
   context.fillStyle = "#009900";
   context.strokeStyle = "#009900";
   context.fill();
   context.stroke();


context.beginPath();
   context.arc(389, 550, 5, 0 , 2 * Math.PI, false);
   context.arc(393, 561, 3, 0 , 2 * Math.PI, false);
   context.arc(392, 569, 5, 0 , 2 * Math.PI, false);
   context.arc(390, 576, 4, 0 , 2 * Math.PI, false);
   context.arc(396, 584, 5, 0 , 2 * Math.PI, false);
   context.arc(390, 599, 7, 0 , 2 * Math.PI, false);
   context.fillStyle = "#009933";
   context.strokeStyle = "#009933";
   context.fill();
   context.stroke();

   context.beginPath();
   context.arc(419, 518, 5, 0 , 2 * Math.PI, false);
   context.arc(423, 520, 3, 0 , 2 * Math.PI, false);
   context.arc(420, 527, 6, 0 , 2 * Math.PI, false);
   context.arc(419, 533, 4, 0 , 2 * Math.PI, false);
   context.arc(418, 539, 7, 0 , 2 * Math.PI, false);
   context.arc(420, 541, 7, 0 , 2 * Math.PI, false);
   context.arc(422, 552, 4, 0 , 2 * Math.PI, false);
   context.arc(423, 561, 3, 0 , 2 * Math.PI, false);
   context.arc(420, 569, 5, 0 , 2 * Math.PI, false);
   context.arc(425, 576, 4, 0 , 2 * Math.PI, false);
   context.arc(422, 584, 5, 0 , 2 * Math.PI, false);
   context.arc(420, 599, 7, 0 , 2 * Math.PI, false);
   context.fillStyle = "#006600";
   context.strokeStyle = "#006600";
   context.fill();
   context.stroke();

  context.beginPath();
   context.moveTo(319, 229);
   context.lineTo(389, 189);
   context.lineTo(306, 219);
   context.lineWidth = 6;
   context.lineJoin = "round";
   context.strokeStyle = "black";
   context.fillStyle = "white";
   context.fill();
   context.stroke();

   context.beginPath();
   context.moveTo(439, 150);
   context.lineTo(499, 50);
   context.lineTo(529, 190);
   context.lineJoin = "miter";
context.fillStyle = "gray";
   context.fill();
   context.strokeStyle = "gray";
   context.stroke();


   context.beginPath();
   context.moveTo(600, 190);
   context.lineTo(690, 310);
   context.lineTo(690, 110);
   context.lineTo(610, 190);
   context.fillStyle = "gray";
   context.fill();
   context.stroke();

   context.beginPath();
   context.fillStyle = "black";
   context.moveTo(450, 190);
   context.lineTo(420, 234);
   context.strokeStyle = "black";
   context.lineWidth = 2;
   context.stroke();


   context.beginPath();
   context.moveTo(480, 190);
   context.lineTo(460, 234);
   context.strokeStyle = "black";
   context.lineWidth = 2;
   context.stroke();

   context.beginPath();
   context.arc(636, 435, 40, 0, Math.PI/3, false);
   context.arc(639, 435, 40, 0, Math.PI/3, false);
   context.closePath();
   context.lineWidth = 5;
   context.fillStyle = "#black";
   context.fill();
   context.strokeStyle = "black";
   context.stroke();

   context.beginPath();
   context.arc(630, 430, 40, 0, Math.PI/3, false);
   context.arc(625, 425, 40, 0, Math.PI/3, false);
   context.arc(620, 424, 40, 0, Math.PI/3, false);
   context.arc(619, 422, 40, 0, Math.PI/3, false);
   context.arc(620, 424, 40, 0, Math.PI/2, false);
   context.arc(620, 419, 40, 0, Math.PI/3, false);
   context.arc(620, 410, 40, 0, Math.PI/3, false);
   context.closePath();
   context.lineWidth = 5;
   context.fillStyle = "#black";
   context.fill();
   context.strokeStyle = "black";
   context.stroke();
   context.closePath();
   context.lineWidth = 5;

   context.beginPath();
   context.arc(742, 444, 1, 0 , 2 * Math.PI, false);
   context.fillStyle = "lightblue";
   context.strokeStyle = "lightblue";
   context.fill();
   context.stroke();

   context.beginPath();
   context.arc(732, 434, 2, 0 , 2 * Math.PI, false);
   context.fillStyle = "lightblue";
   context.strokeStyle = "lightblue";
   context.fill();
   context.stroke();

   context.beginPath();
   context.arc(755, 424, 2, 0 , 2 * Math.PI, false);
   context.fillStyle = "lightblue";
   context.strokeStyle = "lightblue";
   context.fill();
   context.stroke();

   context.beginPath();
   context.arc(722, 454, 1, 0 , 2 * Math.PI, false);
   context.fillStyle = "lightblue";
   context.strokeStyle = "lightblue";
   context.fill();
   context.stroke();


   context.beginPath();
   context.fillStyle = "pink";
   context.fill();
   context.stroke();

   context.beginPath();
   context.arc(695, 449, 1.5, 0, Math.PI, true);
   context.closePath();
   context.lineWidth = 5;
   context.fillStyle = "#yellow";
   context.fill();
   context.strokeStyle = "yellow";
   context.stroke();

   context.beginPath();
   context.moveTo(709, 463);
   context.lineTo(690, 460);
   context.lineWidth = 1;
   context.stroke();


   context.beginPath();
   context.moveTo(510, 190);
   context.lineTo(490, 234);
   context.strokeStyle = "black";
   context.lineWidth = 2;
   context.stroke();



   context.beginPath();
   context.arc(208, 425, 50, 0, Math.PI, true);
   context.closePath();
   context.lineWidth = 5;
context.fillStyle = "#pink";
   context.strokeStyle = "#660033";
   context.fill();
   context.stroke();


   context.beginPath();
   context.fillStyle = "#pink";
   context.strokeStyle = "#660033";
   context.fillStyle = "#660033";
   context.lineWidth = 6;

   context.fill();
   context.stroke();
   context.beginPath();
   context.arc(212, 430, 2, 0 , 2 * Math.PI, false);
   context.arc(217, 439, 2, 0 , 2 * Math.PI, false);
   context.arc(216, 441, 2, 0 , 2 * Math.PI, false);
   context.arc(215, 445, 2, 0 , 2 * Math.PI, false);
   context.arc(210, 452, 3, 0 , 2 * Math.PI, false);
   context.arc(218, 460, 2, 0 , 2 * Math.PI, false);
   context.arc(211, 468, 2, 0 , 2 * Math.PI, false);
   context.arc(206, 468, 2, 0 , 2 * Math.PI, false);
   context.arc(210, 473, 2, 0 , 2 * Math.PI, false);
   context.fill();
   context.stroke();


   //STARFISH
   context.beginPath();
  context.moveTo(155,550);
  context.lineTo(160,530);
  context.lineTo(170,550);
  context.lineTo(185,550);
  context.lineTo(170,561);
  context.lineTo(185,576);
  context.lineTo(163,569);
  context.lineTo(147,579);
  context.lineTo(152,562);
  context.lineTo(136,557);
  context.lineTo(155,550);
  context.lineCap = 'round';
   context.lineWidth = 4;
   context.strokeStyle = "#ff3333";
   context.fillStyle = "#FF6666";
  context.stroke();
  context.fill();


   context.beginPath();
   context.arc(157, 560, 2, 0 , 2 * Math.PI, false);
   context.fillStyle = "#white";
   context.strokeStyle = "#white";
  context.stroke();
  context.fill();

   context.beginPath();
   context.arc(167, 563, 1, 0 , 2 * Math.PI, false);
   context.fillStyle = "#white";
   context.strokeStyle = "#";
  context.stroke();
  context.fill();

   context.beginPath();
   context.arc(165, 555, 2, 0 , 2 * Math.PI, false);
   context.fillStyle = "#white";
   context.strokeStyle = "#";
  context.stroke();
  context.fill();

   context.beginPath();
   context.arc(162, 544, 1, 0 , 2 * Math.PI, false);
   context.fillStyle = "#white";
   context.strokeStyle = "#";
  context.stroke();
  context.fill();

   context.beginPath();
   context.arc(146, 555, 1, 0 , 2 * Math.PI, false);
   context.fillStyle = "#white";
   context.strokeStyle = "#";
  context.stroke();
  context.fill();

   context.beginPath();
   context.arc(154, 570, 2, 0 , 2 * Math.PI, false);
   context.fillStyle = "#white";
   context.strokeStyle = "#";
  context.stroke();
  context.fill();

   context.beginPath();
   context.arc(177, 571, 1, 0 , 2 * Math.PI, false);
   context.fillStyle = "#white";
   context.strokeStyle = "#";
  context.stroke();
  context.fill();


   context.beginPath();
   context.moveTo(500, 650);
   context.lineTo(500, 550);
   context.lineTo(670, 550);
   context.lineTo(670, 650);
   context.lineTo(500, 650);
   context.fillStyle = 'rgb(102,51,0)';
   context.strokeStyle = 'rgb(102,51,0)';
   context.stroke();
   context.fill();

   context.beginPath();
   context.moveTo(540, 650);
   context.lineTo(540, 549);
   context.strokeStyle = "black";
   context.lineWidth = 4;
   context.stroke();


   context.beginPath();
   context.moveTo(630, 650);
   context.lineTo(630, 549);
   context.strokeStyle = "black";
   context.lineWidth = 4;
   context.stroke();

   context.beginPath();
   context.moveTo(500, 560);
   context.lineTo(670, 560);
   context.strokeStyle = "black";
   context.lineWidth = 4;
   context.stroke();

   context.beginPath();
   context.lineCap = 'round';
   context.moveTo(560, 550);
   context.lineTo(610, 550);
context.lineTo(610, 580);
context.lineTo(560, 580);
context.lineTo(560, 550);
   context.fillStyle = "#yellow";
   context.strokeStyle = "#yellow";
   context.stroke();
   context.fill();

   context.beginPath();
   context.arc(586, 566, 6, 0 , 2 * Math.PI, false);
   context.fillStyle = "#black";
   context.strokeStyle = "#black";
   context.stroke();
   context.fill();






////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>

Jessica Simon: Inside My Mind

Tuesday, September 18, 2012

Project 1

No comments:

Post a Comment