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

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 hu...
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

First Class Impression

DIGITAL MEDIA: DAY #1 First Impression As I opened the classroom door and started to the back row, I was quickly advised by my new professor that sitting in the back would, "statistically cause me an easy C or D in the class." Yeah... probably a good idea. Fair enough, I thought, as I found my seat in the front row, in front of a large desktop that would block my view of the professor. After reviewing the syllabus, I was able to get a bit of a better understanding of what the course would bring and how I would benefit from taking it. "Cool. Challenging, but a little boring, perhaps,"I thought. But then Professor Echeverry revealed his talents and a look inside his personal life a bit more as he showed us his personal work and film. As he continued, it was clear that he would definitely make this course a bit more interesting and engaging, at the least. Who Am I? Liv is definitely the preferred nickname. I am a sophomore eagerly waiting to take on more c...
Read more