Saturday, August 31, 2013

Canvas Practice

"Why are you fishing in my bowl?"

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="600" height="600"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 4;
      var centerY = canvas.height / 4;
      var radius = 70;

//BACKGROUND

      context.beginPath();
      context.rect(0, 0, 600, 600);
      context.fillStyle = "rgb( 23, 156, 233)";
      context.fill();
     
            // add linear gradient
      var grd = context.createLinearGradient(600, 1, canvas.width, canvas.height);
      // light blue
      grd.addColorStop(0, '#8ED6FF');  
      // dark blue
      grd.addColorStop(1, '#004CB3');
     
      context.fillStyle = grd;
      context.fill();
      context.stroke();

//SAND

        context.beginPath();
      context.rect(0, 500, 600, 100);
      context.fillStyle = "rgb( 23, 156, 233)";
      context.fill();
     
            // add linear gradient
      var grd = context.createLinearGradient(600, 1, canvas.width, canvas.height);
      grd.addColorStop(0, "rgb(246, 255, 101)");  
      grd.addColorStop(1, 'tan');
     
      context.fillStyle = grd;
      context.fill();
      context.stroke();
     
//LARGE BUBBLE
   
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
           // add linear gradient
      var grd = context.createLinearGradient(1, 1, canvas.width, canvas.height);
      // light blue
      grd.addColorStop(0, "rgb(18, 255, 232)");  
      // dark blue
      grd.addColorStop(1, "rgb(13, 34, 220)");
      context.fillStyle = grd;
      context.fill();
     
      context.lineWidth = 5;
      context.strokeStyle = 'blue';
      context.stroke();

//MEDIUM BUBBLE

      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 3;
      var centerY = canvas.height / 2;
      var radius = 30;
     
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 8 * Math.PI, false);
      context.fillStyle = "rgba(78, 191, 255, 0.5)";
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'blue';
      context.stroke();
     
//BUBBLE OVERLAP

       var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 3;
      var centerY = canvas.height / 7;
      var radius = 50;
     
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = "rgba(78, 191, 255, 0.5)";
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'blue';
      context.stroke();
     
//FISH EYE

      var centerX = canvas.width / 2;
      var centerY = canvas.height / 1.6;
      var radius = 30;

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

      context.beginPath();
      context.moveTo(500, 500);
      context.lineTo(460, 250);
      context.lineTo(380, 430);
      context.lineTo(500, 500);
      context.stroke();
      context.lineWidth = 5;
      context.fillStyle = 'orange';
      context.fill();
      context.strokeStyle = 'orange';
      context.stroke();
      
//FISH

      var centerX = canvas.width / 1.5;
      var centerY = canvas.height / 1.3;
      var radius = 110;

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

//SIDE FIN

      // begin custom shape
      context.beginPath();
      context.moveTo(550, 550);
      context.bezierCurveTo(550, 550, 550, 450, 450, 450);
      context.bezierCurveTo(550, 550, 550, 550, 550, 550);
      context.fillStyle = "rgba(255, 128, 0, 0.5)";
      context.fill();

      // complete custom shape
      context.closePath();
      context.lineWidth = 5;
      context.strokeStyle = "rgb(255, 128, 0)";
      context.stroke();
     
//TAIL FIN

  // miter line join (left)
      context.beginPath();
      context.moveTo(550, 300);
      context.lineTo(500, 420);
      context.lineTo(570, 480);
      context.lineTo(590, 500);
      context.lineTo(560, 420);
      context.lineTo(550, 400);
      context.lineTo(550, 300);
      context.lineJoin = 'miter';
     context.fillStyle = 'orange';
      context.fill();
      context.strokeStyle = 'orange';
      context.stroke();
 
  //FISH EYE

      var centerX = canvas.width / 1.6;
      var centerY = canvas.height / 1.6;
      var radius = 30;

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

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

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

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

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

//FISH HOOK
      context.beginPath();
      context.moveTo(120, 200);
      context.bezierCurveTo (10, 330, 40, 10, 38, 17);
      context.lineWidth = 12

      // line color
      context.strokeStyle = 'silver';
      context.stroke();
     
  
//FISH MOUTH
      context.beginPath();
      context.moveTo(320, 490);
      context.lineTo(370, 490);
      context.lineTo(360, 500);
      context.lineJoin = 'round';
      context.strokeStyle = "rgb(242, 64, 100)";
      context.stroke();
    </script>
  </body>
</html>
     
Posted by at No comments:

Wednesday, August 28, 2013

Let's Get Started!

Hello, Lindsey here! Welcome to my new art blog! With one day of class under my belt, I feel that there will be many new and interesting challenges to face. It will not be a walk in the park, but I feel excited to be taking this course, and to interact with my fellow classmates! I have never taken a digital arts class before, so this will certainly be an adventure!

Having switched from Marine Biology major to a Graphic Design Major with a minor in Writing, I feel nervous but thrilled at the same time. For years, I express my thoughts and feelings through art, writing, and music. They all fit together hand and hand: music paints the pictures of the mind and sets our imaginations free, while words describe this blissful feelings to others in the form of stories. Although I am no longer studying marine bio, keeping the ocean in my works in certainly a goal I hope to maintain, as well as explore all the other wonderful styles and endless possibilities that art and life have to offer.

I expect this class to be a challenging. This will not be easy by any means. And for that I am grateful. I want to be serious about my new major and these skills will carry over as I progress through college. And I won't be alone in this. There are many wonderful and creative students in this class that share the same passion for art as I do. Each of us will be pushed to the limit, some of us harder than others. I believe this class will make me grow in new ways, become stronger as an individual, and gain more confidence in myself and my art.
Posted by at No comments:
Subscribe to: Posts (Atom)