Monday, December 2, 2019

Coding Assignment


This was by far the hardest project that we did. Learning how to use code so early on in the semester without prior knowledge of Adobe was a struggle. Once I got the hang out of using the X and Y coordinates, it ended up going smoother than I thought. I created an ocean scene because I love spending time at the ocean. I really liked the way the colors turned out and I could draw circles all day long. The most challenging part about this assignment was how time consuming it was, I spent about an hour on one starfish alone. Being a perfectionist it was frustrating when I couldn't get a point quite right. Overall, I'm happy with the way my final product turned out. Here is a sample of what my code ended up looking like!

 This is the code I used:

 UNDERWATER
<html>
<head>
<meta charset="UTF-8">
<title> Dream Big </title>

<style type="text/css">
body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #000;
}

</style>
</head>

<body>

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

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

//DEEP SEA BACKGROUND
      context.beginPath();
      context.rect(0, 0, 600, 600);
      var grd = context.createLinearGradient(300, 0, 300, 500);
      grd.addColorStop(0, "rgb(156,205,210)"); 
      grd.addColorStop(.85, "rgb(18,75,100)");
   grd.addColorStop(1, "rgb(20,48,90)");

      context.fillStyle = grd;
      context.fill();

 //SAND

 var quad = context.createLinearGradient(100,100,400,600);
         
 quad.addColorStop(0, "rgb(210, 180, 140)");

 quad.addColorStop(1, "rgb(265, 230, 179)");

 context.beginPath();
 context.moveTo(0,448);
 context.quadraticCurveTo(15,444,65,445);
 context.quadraticCurveTo(67,420,97,420);
 context.quadraticCurveTo(125,380,155,420);
 context.quadraticCurveTo(205,425,209,452);
 context.quadraticCurveTo(225,469,450,455);
 context.quadraticCurveTo(530,440,800,455);
 context.lineTo(795,795);
 context.lineTo(0,600);
 context.lineTo(0,448);
 context.closePath();
 context.fillStyle = quad;
 context.fill();
 
//STARFISH ONE
      context.beginPath();
      context.moveTo(307, 360);
 
      context.quadraticCurveTo(300,300,330,360);
   context.quadraticCurveTo(385,352,339,378);
   context.quadraticCurveTo(385,435,320,390);
      context.quadraticCurveTo(230,425,295,370);
   context.quadraticCurveTo(230,335,307,360);

      var grd = context.createRadialGradient(307, 435, 20, 390, 50, 310);
      grd.addColorStop(0, "rgb(257,125,9)");
      grd.addColorStop(1, "rgb(0,203,0)");

      context.fillStyle = grd;
      context.fill();

      context.lineWidth = 2.5;
      context.strokeStyle = "rgb(147,223,35)";
      context.stroke();
 
//STARFISH TWO
      context.beginPath();
      context.moveTo(207, 260);
 
      context.quadraticCurveTo(215,200,230,260);
   context.quadraticCurveTo(290,252,240,278);
   context.quadraticCurveTo(280,332,220,283);
      context.quadraticCurveTo(170,343,200,278);
   context.quadraticCurveTo(140,240,210,260);

      var grd = context.createRadialGradient(210, 100, 5, 190, 40, 100);
      grd.addColorStop(0, "rgb(257,125,9)");
      grd.addColorStop(1, "rgb(255,203,159)");

      context.fillStyle = grd;
      context.fill();

      context.lineWidth = 2.5;
      context.strokeStyle = "rgb(247,123,35)";
      context.stroke();

//// TREE TRUNK
 context.beginPath();
 context.moveTo(30,550);
 context.lineTo(30,535);
 context.lineTo(38,535);
 context.lineTo(38,560);
 context.quadraticCurveTo(34,563,30,560);
 context.fillStyle = "rgb(79,42,2)"
 context.fill();
 context.closePath();

//// TREE
 context.beginPath();
 context.arc(36,510,25,0,Math.PI*2,true);
 context.fillStyle = "rgb(255,127,80)";
 context.fill();
 context.closePath();

 context.beginPath();
 context.arc(36,478,20,0,Math.PI*2,true);
 context.fill();
 context.closePath();

 context.beginPath();
 context.arc(36,450,15,0,Math.PI*2,true);
 context.fill();
 context.closePath();

//// TREE TWO
 context.beginPath();
 context.arc(400,510,25,0,Math.PI*2,true);
 context.fillStyle = "rgb(0,127,0)";
 context.fill();
 context.closePath();

 context.beginPath();
 context.arc(400,478,20,0,Math.PI*2,true);
 context.fill();
 context.closePath();

 context.beginPath();
 context.arc(400,450,15,0,Math.PI*2,true);
 context.fill();
 context.closePath();

 context.beginPath();
 context.arc(400,545,20,0,Math.PI*2,true);
 context.fill();
 context.closePath();

 context.beginPath();
 context.arc(400,570,15,0,Math.PI*2,true);
 context.fill();
 context.closePath();

 context.beginPath();
 context.arc(400,590,10,0,Math.PI*2,true);
 context.fill();
 context.closePath();

 context.beginPath();
 context.arc(400,430,10,0,Math.PI*2,true);
 context.fill();
 context.closePath();


//// TREE THREE
 context.beginPath();
 context.arc(450,510,25,0,Math.PI*2,true);
 context.fillStyle = "rgb(0,207,0)";
 context.fill();
 context.closePath();

 context.beginPath();
 context.arc(450,478,20,0,Math.PI*2,true);
 context.fill();
 context.closePath();

 context.beginPath();
 context.arc(450,450,15,0,Math.PI*2,true);
 context.fill();
 context.closePath();

 context.beginPath();
 context.arc(450,545,20,0,Math.PI*2,true);
 context.fill();
 context.closePath();

 context.beginPath();
 context.arc(450,570,15,0,Math.PI*2,true);
 context.fill();
 context.closePath();

 context.beginPath();
 context.arc(450,590,10,0,Math.PI*2,true);
 context.fill();
 context.closePath();

 context.beginPath();
 context.arc(450,430,10,0,Math.PI*2,true);
 context.fill();
 context.closePath();

 
//BUBBLE
   var centerX = canvas.width / 1.1;
   var centerY = canvas.height / 1.5;
     var radius = 13;

   context.beginPath();
   context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
 
   context.fillStyle = "rgba(161,242,255,.5)";
   context.fill();
   context.lineWidth = 1.5;
   context.strokeStyle = "rgba(145,213,242,.5)";
   context.stroke();

//BUBBLE  HIGHLIGHT
   var x = canvas.width / 1.1;
   var y = canvas.height / 1.5;
   var radius = 10;
   var startAngle = 1.6 * Math.PI;
   var endAngle = 1.9 * Math.PI;
   var counterClockwise = false;

   context.beginPath();
   context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
   context.lineWidth = 2;
   context.strokeStyle = "rgba(250,250,250,.9)";
   context.stroke();
 
//BUBBLE THREE
   var centerX = canvas.width / 1.15;
   var centerY = canvas.height / 1.6;
     var radius = 10;

   context.beginPath();
   context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
 
   context.fillStyle = "rgba(161,242,255,.5)";
   context.fill();
   context.lineWidth = 1.5;
   context.strokeStyle = "rgba(145,213,242,.5)";
   context.stroke();

//BUBBLE THREE HIGHLIGHT
   var x = canvas.width / 1.15;
   var y = canvas.height / 1.6;
   var radius = 7;
   var startAngle = 1.6 * Math.PI;
   var endAngle = 1.9 * Math.PI;
   var counterClockwise = false;

   context.beginPath();
   context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
   context.lineWidth = 2;
   context.strokeStyle = "rgba(250,250,250,.9)";
   context.stroke();
 
//BUBBLE FOUR
   var centerX = canvas.width / 25;
   var centerY = canvas.height / 8;
     var radius = 11;

   context.beginPath();
   context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
 
   context.fillStyle = "rgba(161,242,255,.5)";
   context.fill();
   context.lineWidth = 1.5;
   context.strokeStyle = "rgba(145,213,242,.5)";
   context.stroke();

//BUBBLE FOUR HIGHLIGHT
   var x = canvas.width / 25;
   var y = canvas.height / 8;
   var radius = 8;
   var startAngle = 1.6 * Math.PI;
   var endAngle = 1.9 * Math.PI;
   var counterClockwise = false;

   context.beginPath();
   context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
   context.lineWidth = 2;
   context.strokeStyle = "rgba(250,250,250,.9)";
   context.stroke();
     
//BUBBLE FIVE
   var centerX = canvas.width / 20;
   var centerY = canvas.height / 11;
     var radius = 8;

   context.beginPath();
   context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
 
   context.fillStyle = "rgba(161,242,255,.5)";
   context.fill();
   context.lineWidth = 1.5;
   context.strokeStyle = "rgba(145,213,242,.5)";
   context.stroke();

//BUBBLE FIVE HIGHLIGHT
   var x = canvas.width / 20;
   var y = canvas.height / 11;
   var radius = 5;
   var startAngle = 1.6 * Math.PI;
   var endAngle = 1.9 * Math.PI;
   var counterClockwise = false;

   context.beginPath();
   context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
   context.lineWidth = 2;
   context.strokeStyle = "rgba(250,250,250,.9)";
   context.stroke();
   
//BUBBLE SIX
   var centerX = canvas.width / 2.5;
   var centerY = canvas.height / 4;
     var radius = 5;

   context.beginPath();
   context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
 
   context.fillStyle = "rgba(161,242,255,.5)";
   context.fill();
   context.lineWidth = 1.5;
   context.strokeStyle = "rgba(145,213,242,.5)";
   context.stroke();

//BUBBLE SIX HIGHLIGHT
   var x = canvas.width / 2.5;
   var y = canvas.height / 4;
   var radius = 2;
   var startAngle = 1.6 * Math.PI;
   var endAngle = 1.9 * Math.PI;
   var counterClockwise = false;

   context.beginPath();
   context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
   context.lineWidth = 2;
   context.strokeStyle = "rgba(250,250,250,.9)";
   context.stroke();
     

   context.beginPath();
   context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
   context.lineWidth = 2;
   context.strokeStyle = "rgba(250,250,250,.9)";
   context.stroke();

//// FLOWER
  // STEM
   context.beginPath();
   context.moveTo(242,578);
   context.bezierCurveTo(225,567,260,550,240,535);
   context.strokeStyle = "rgb(58,92,3)";
   context.stroke();
   context.closePath();
 
  // PETALS
   context.beginPath();
   context.moveTo(240,525);
   context.bezierCurveTo(237,500,260,500,250,525);
   context.bezierCurveTo(270,515,263,537,250,530);
   context.bezierCurveTo(260,540,250,550,240,537);
   context.bezierCurveTo(237,550,225,510,240,530);
   context.quadraticCurveTo(220,500,250,525);
   context.fillStyle = "rgb(268,44,245)"
   context.fill();
   context.closePath();


 //STARFISH THREE

 var quad = context.createLinearGradient(0,100,240,800);
         
 quad.addColorStop(0, "red");

 quad.addColorStop(1, "pink");

 context.beginPath();
 context.moveTo(135,400);
 context.quadraticCurveTo(130,370,120,400); //top fin
 context.quadraticCurveTo(85,390,115,408); //left fin
 context.quadraticCurveTo(95,435,125,415); //bottom left fin
 context.quadraticCurveTo(145,435,140,410); //bottom right fin
 context.quadraticCurveTo(155,388,135,400); //top right fin
 context.closePath();
 context.fillStyle = quad;
 context.fill();
     


</script>



at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Final Blog Post

As the semester comes to an end, we were asked to create a portfolio for our final project. After a semest...

  • Self Portrait
    For this assignment we were asked to create a poster that represents who we are. We used gradient mesh to recreate a picture of ourselves. T...
  • Calligram
    For this assignment we had to create an image using text. I chose to do a mushroom because I grew up hating mushrooms, but I recently was f...
  • Logo
    When creating this logo, I had to go back to my roots. I wanted something with meaning, without being too obvious. I chose...