Canvas Project- Ocean Landscape


CANVAS PROJECT


This project was definitely the hardest one for me this year as I struggled a lot with dreamweaver. I don't know what it is but I guess coding just isn't my thing... This picture is actually funny to look back at and laugh at how terrible it is. The fact that this was the first project in this class really made me nervous for the rest of the projects, but towards the end of the semester, I realized that this was by far the most challenging assignment and the one that I enjoyed the least. But... here it is! My beautiful masterpiece :) If you want a great laugh, take a look at the picture below. I promise you won't be disappointed. 





<head>
<meta charset="UTF-8">
<title> ART 210 - CANVAS PROJECT </title>
<style type="text/css">


body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: rgba(0,0,0,1);
}


body {
background-color: rgba(255,255,255,1);
}


#myCanvas { border: rgba(102,0,255,1) medium dashed; }


</style>


</head>

<body>

<canvas id="myCanvas" width="800" height="600"></canvas>

<script>


var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE



context.rect(0, 0, canvas.width, canvas.height);

      // add linear gradient
var grd = context.createLinearGradient(50, 500, 650, 800);
 
      grd.addColorStop(0, 'blue');
      grd.addColorStop(1, 'beige');
      context.fillStyle = grd;
      context.fill();


//seaweed 1-far left
 context.beginPath();
      context.moveTo(100, 570);
      context.quadraticCurveTo(0,300, 150, 400);

context.moveTo(100,570);

context.quadraticCurveTo(0,400, 130,300);
      context.lineWidth = 15;




  // line color
      context.strokeStyle = 'green';
      context.stroke();

///bubble outline
  context.beginPath();
      context.moveTo(100, 570);
      context.quadraticCurveTo(0, 300, 150, 275);
      context.lineWidth = 4

context.strokeStyle = 'blue';
context.stroke
context.closePath();

///seaweed 2- right

context.beginPath();
      context.moveTo(750, 570);
      context.quadraticCurveTo(780,480, 650, 350, 400);

context.moveTo(100,570);

context.quadraticCurveTo(0,400, 130,300);
      context.lineWidth = 15;




  // line color
      context.strokeStyle = 'green';
      context.stroke();


context.beginPath();
      context.moveTo(750, 570);
      context.quadraticCurveTo(780,480, 600, 350, 400);

context.moveTo(100,570);

context.quadraticCurveTo(0,400, 130,300);
      context.lineWidth = 15;




  // line color
      context.strokeStyle = 'green';
      context.stroke();




///bubble 1
 var rdg = context.createRadialGradient(400,300,20,400,300,300);
 rdg.addColorStop(0.3, "white");
 rdg.addColorStop(0.3, "blue");
 rdg.addColorStop(0.7, "silver");

var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2;
      var y = canvas.height / 4;
      var radius = 20;
      var startAngle = 1.1 * Math.PI;
      var endAngle = 3.1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 3;



context.fillStyle = rdg;
context.fill();
context.stroke();
context.closePath();


///bubble 2

var rdg = context.createRadialGradient(400,300,20,400,300,300);
 rdg.addColorStop(0.3, "white");
 rdg.addColorStop(0.3, "blue");
 rdg.addColorStop(0.7, "silver");

var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2.2;
      var y = canvas.height / 5.2;
      var radius = 15;
      var startAngle = 1.1 * Math.PI;
      var endAngle = 3.1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 3;



context.fillStyle = rdg;
context.fill();
context.stroke();
context.closePath();

///bubble 3

var rdg = context.createRadialGradient(400,300,20,400,300,300);
 rdg.addColorStop(0.6, "white");
 rdg.addColorStop(0.8, "blue");
 rdg.addColorStop(0.9, "silver");

var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2.6;
      var y = canvas.height / 5.8;
      var radius = 13;
      var startAngle = 1.1 * Math.PI;
      var endAngle = 3.1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 3;



context.fillStyle = rdg;
context.fill();
context.stroke();
context.closePath();

////bubble 4

var rdg = context.createRadialGradient(400,300,20,400,300,300);
 rdg.addColorStop(0.7, "white");
 rdg.addColorStop(0.8, "blue");
 rdg.addColorStop(0.9, "silver");

var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 3;
      var y = canvas.height / 7;
      var radius = 10;
      var startAngle = 1.1 * Math.PI;
      var endAngle = 3.1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 3;



context.fillStyle = rdg;
context.fill();
context.stroke();
context.closePath();






///bubble 5

var rdg = context.createRadialGradient(400,300,20,400,300,300);
 rdg.addColorStop(0.3, "white");
 rdg.addColorStop(0.9, "blue");
 rdg.addColorStop(0.7, "silver");

var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2.5;
      var y = canvas.height / 8;
      var radius = 7;
      var startAngle = 1.1 * Math.PI;
      var endAngle = 3.1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 1;



context.fillStyle = rdg;
context.fill();
context.stroke();
context.closePath();


//// starfish

context.beginPath();

context.moveTo(550,500); // START POINT
 context.lineTo(500,460);

context.lineTo(480,490); // end point

context.lineTo(550,500);
 context.lineWidth = 5;
 context.lineCap = 'round';
 context.lineJoin = 'round';

context.fillStyle = 'orange';
context.fill();
context.strokeStyle = 'orange';
context.stroke();

context.closePath();

context.beginPath();
context.moveTo(500,460);
context.lineTo(495,405);
context.lineTo(450,455);
context.lineTo(500,460);




context.fillStyle = 'orange';
context.fill();
context.strokeStyle = 'orange';
context.stroke();

context.closePath();

context.beginPath();
context.moveTo(450,455);
context.lineTo(385,460);
context.lineTo(449,478);
context.lineTo(450,455);


context.fillStyle = 'orange';
context.fill();
context.strokeStyle = 'orange';
context.stroke();

context.closePath();


context.beginPath();
context.moveTo(439,478);
context.lineTo(419,525);
context.lineTo(466,488);
context.lineTo(475,555);
context.lineTo(505,499);


context.fillStyle = 'orange';
context.fill();
context.strokeStyle = 'orange';
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(550,500);
context.lineTo(449,478);

context.fillStyle = 'orange';
context.fill();
context.strokeStyle = 'orange';
context.stroke();
//RGBA = RED GREEN BLUE ALPHA
//THE VALUES FOR RGB go from 0 to 255
//the value for A goes from 0 to 1

context.beginPath();
context.moveTo(435,460);
context.lineTo(425,465);
context.lineTo(500,467);
context.lineTo(495,460);
context.lineTo(435,460);

context.fillStyle = 'orange';
context.fill();
context.strokeStyle = 'orange';
context.stroke();
context.closePath();


//// eyes

var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 1.7;
      var y = canvas.height / 1.35;
      var radius = 7;
      var startAngle = 1.1 * Math.PI;
      var endAngle = 3.1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 3;



context.fillStyle = 'black'
context.fill();
context.strokeStyle = 'white'
context.stroke();
context.closePath();


var context = canvas.getContext('2d');
      var x = canvas.width / 1.62;
      var y = canvas.height / 1.35;
      var radius = 7;
      var startAngle = 1.1 * Math.PI;
      var endAngle = 3.1 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 1;



context.fillStyle = 'black'
context.fill();
context.strokeStyle = 'white'
context.stroke();
context.closePath();

///sand


//jellyfish 1
 context.beginPath();
      context.moveTo(500, 230);
      context.quadraticCurveTo(530, 400, 400, 450);
      context.lineWidth = 10;

      // line color
      context.strokeStyle = 'magenta';
      context.stroke();
   


//string 2
  context.beginPath();
      context.moveTo(515, 230);
      context.quadraticCurveTo(540, 400, 405, 445);
      context.lineWidth = 8;

      // line color
      context.strokeStyle = 'magenta';
      context.stroke();



//string 4
 context.beginPath();
      context.moveTo(525, 232);
      context.quadraticCurveTo(545,405,410,445);
      context.lineWidth = 7;

      // line color
      context.strokeStyle = 'magenta';
      context.lineCap = 'round'
      context.stroke();
   
//string 5
 context.beginPath();
      context.moveTo(535, 232);
      context.quadraticCurveTo(555,415,425,445);
      context.lineWidth = 8;

      // line color
      context.strokeStyle = 'magenta';
      context.lineCap = 'round'
      context.stroke();
 

// frame



 var rdg = context.createRadialGradient(550,300,20,400,300,300);
 rdg.addColorStop(0.3, "blue");
 rdg.addColorStop(0.5, "magenta");
 rdg.addColorStop(1, "blue");
 




var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 1.5;
      var centerY = canvas.height / 3;
      var radius = 50;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = rdg;
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = 'white';
      context.stroke();




 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 1.5;
      var centerY = canvas.height / 2.9;
      var radius = 10;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 3;
      context.strokeStyle = 'white';
      context.stroke();



 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 1.6;
      var centerY = canvas.height / 2.9;
      var radius = 10;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 3;
      context.strokeStyle = 'white';
      context.stroke();






//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE


// CHANGE THE CREDITS

context.beginPath();
context.font = 'bold 20px Arial';
context.fillStyle = "rgba(0,0,0,1)";
context.fillText('ART 210 - CANVAS PROJECT', 20, 550);
context.closePath();

</script>


</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Hoop Animation

Image
HOOP ANIMATION I had a lot of fun with this project! I knew if I had to edit something that would require hours, I would want to be staring at something nice the whole time- so I thought I would record my friend hooping. My least favorite part was going frame by frame and outlining the hoop in different colors -- it was super time consuming but in the end it ended up looking pretty cool. I figured hooping is such a beautiful thing, especially with the scenery in the background- so I tried to tie in some pretty things that stand out to me. I wanted to create a really cool vibe for this project & I think the overall thing was very successful and I can't wait to work more with animating! Creating the audio was also really fun. Using garageband was extremely easy for me and putting together the sounds was the most enjoyable part. I tried to incorporate sound effects that went well with the background images, like the cricket sounds coming out at night and the the
Read more

Seasons

  "Seasons" Seasons remind us of the the consistent and inevitable word so many of us share an unfavorable connotation with: change. The anticipation of patiently waiting for the white snow on the ground to uncover the palette of the earth in full bloom seems to take forever. Maybe I had been living in the sunshine state too long, but living in the north again, I am reminded of what it feels like to wait for change.   There’s beauty in the contrast of each season, with each one reflecting a faithful promise to come. We know roughly when to start digging our summer clothes out of storage or when to finally plan that ski trip, yet each year we warily wait impatiently for the next season to come, as our discontent for the current season grows.   We look outside to see if the barren tree in our front yard has started to signal for spring, when a few months later, we study that same tree to seek out any hints of orange hues that resemble the start of fall.   I think as humans — de
Read more

Photoshopping My Face

Image
Photoshopping My Face This assignment was super easy and also really fun. I figured I would go a little crazy and try to make myself look like a mermaid. By just adding colors on different layers and changing the transparency, it is so easy to alter my skin and hair color, all while making it look somewhat realistic. Photoshop is dope. 
Read more