Digital Art GO!

Monday, September 30, 2013

Mesh Project

Sadly my beach ball did not turn out as well as I hoped. I had difficulties creating a more even curve. I attempted to use the handle bars on the anchor points, however, the distortions created crevices that did more injustice to mesh than helped.

Wednesday, September 25, 2013

Business Cards

Logos

Monday, September 23, 2013

Caligram Project

Nothing Gold Can Stay

by Rober Frost

Nature's first green is gold,
Her hardest hue to hold.
Her early leafs a flower;
But only so an hour.
Then leaf subsides to leaf.
So Eden sank to grief,
So dawn goes down to day.
Nothing gold can stay.

Original Image: http://images2.layoutsparks.com/1/175857/Fall-Leaves-beautiful-Autumn.jpg

Monday, September 16, 2013

Pepsi Logo on Adobe Illustrator

Sunday, September 8, 2013

Final Canvas WIP: Killer Whale Swimming at Night Under Northern Lights

<!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');

//REFLECTION
      context.beginPath();
      context.rect(0, 0, 600, 600);

    var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
      // light blue
      grd.addColorStop(1, "rgb(31,63,169)");
      // dark blue
      grd.addColorStop(1, "rgb(31,83,202)");
      context.fillStyle = grd;
      context.fill();

      context.rect(0, 0, 600, 600);
      context.fillStyle = ("rgba(0,0,0,0.2)");
      context.fill();

//BLACK BACKDROP SPACE
      context.beginPath();
      context.rect(0, 0, 600, 320);
       // add linear gradient
      var grd = context.createLinearGradient(0, 0, 0.4, canvas.height);
      // light blue
      grd.addColorStop(0, 'green');
      // dark blue
      grd.addColorStop(0.5,"rgb(0,0,0)");
      context.fillStyle = grd;
      context.fill();


//AURORA
      var grd = context.createLinearGradient(0, 600, 600, 600);

// PURPLE
      grd.addColorStop(.12, "rgb(94,3,101)");
// GREEN
      grd.addColorStop(.25, "rgb(19,145,40)");
//PURPLE 2
        grd.addColorStop(.55, "rgb(94,3,101)");
// LIGHT BLUE
      grd.addColorStop(.656, "rgb(37,241,255)");
// PURPLE 3
      grd.addColorStop(.855, "rgb(94,3,101)");

// Bezier Curve
      context.beginPath();
      context.moveTo(0, 120);
                  context.bezierCurveTo(200, 250, 388, 10, 600, 190);
                  context.lineTo(600,0);
                  context.lineTo(0,0);
                  context.lineTo(0,120);
                  context.lineWidth = 5;

var grd = context.createLinearGradient(0, 600, 600, 600);

// PURPLE
      grd.addColorStop(.12, "rgb(94,3,101)");
// GREEN
      grd.addColorStop(.25, "rgb(19,145,40)");
//PURPLE 2
        grd.addColorStop(.55, "rgb(94,3,101)");
// LIGHT BLUE
      grd.addColorStop(.656, "rgb(37,241,255)");
// PURPLE 3
      grd.addColorStop(.855, "rgb(94,3,101)");

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

var grd = context.createLinearGradient(0, 600, 600, 600);

// PURPLE
      grd.addColorStop(.12, "rgb(94,3,101)");
// GREEN
      grd.addColorStop(.25, "rgb(19,145,40)");
//PURPLE 2
        grd.addColorStop(.55, "rgb(94,3,101)");
// LIGHT BLUE
      grd.addColorStop(.656, "rgb(37,241,255)");
// PURPLE 3
      grd.addColorStop(.855, "rgb(94,3,101)");

      context.fillStyle = grd;
      context.strokeStyle = grd;
      context.stroke();

//WATER RIPPLE BEHIND ONE

    context.beginPath();
    context.moveTo(140,420);
    context.bezierCurveTo(260,300,800,100,300,300);
    context.lineWidth = 3;
    context.strokeStyle = "rgb(15,47,121)";
    context.stroke();

//WATER RIPPLE BEHIND TWO

    context.beginPath();
    context.moveTo(140,400);
    context.bezierCurveTo(260,300,800,100,300,300);
    context.lineWidth = 3;
    context.strokeStyle = "rgb(15,47,121)";
    context.stroke();

//OCEAN
      context.beginPath();
      context.moveTo(0, 520);
                  context.bezierCurveTo(200, 320, 388, 650, 600, 410);
                  context.lineTo(600,600);
                  context.lineTo(0,600);
                  context.lineTo(0,320);
                  context.lineWidth = 5;
                 var grd = context.createLinearGradient(0, 600, 600, 600);

     var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
      // light blue
      grd.addColorStop(0, '#8ED6FF');
      // dark blue
    grd.addColorStop(1, "rgb(13,47,127)");
      context.fillStyle = grd;
      context.fill();

//WHALE BODY
      context.beginPath();
      context.moveTo(175, 350);
      context.bezierCurveTo(350, 120, 500, 400, 420, 100);
      context.bezierCurveTo(450, 3, 600, 400, 500, 310);
      context.bezierCurveTo(600, 300, 50, 550, 175, 350);
      context.lineWidth = 5;
      context.strokeStyle = 'grey';
      context.stroke();

      context.fillStyle = 'black';
      context.fill();

//WHITE PATCH
      context.beginPath();
      context.moveTo(245, 350);
      context.bezierCurveTo(420, 200, 350, 400, 240, 350);
      context.lineWidth = 5;
      context.strokeStyle = 'white';
      context.stroke();

      context.fillStyle = 'white';
      context.fill();

//GREY SADDLE

      context.beginPath();
      context.moveTo(450, 280);
      context.bezierCurveTo(500, 300, 400, 400, 520, 270);
      context.lineTo(450,280);
      context.lineWidth = 5;
      context.strokeStyle = 'silver';
      context.stroke();

      context.fillStyle = 'silver';
      context.fill();

    //WATER SPLASH ONE (overlapped)

      context.beginPath();
      context.moveTo(400, 340);
      context.bezierCurveTo(350, 380, 460, 210, 520,330);
    context.bezierCurveTo(510, 300, 380, 200, 350, 400);

    context.closePath();
      context.lineWidth = 5;
      context.strokeStyle = "rgb(15,47,121)";
    context.stroke();
    context.fillStyle = "rgb(7, 31, 87)";
    context.fill();

//WATER SPLASH TWO

    // begin custom shape
      context.beginPath();
      context.moveTo(350, 400);
      context.bezierCurveTo(350, 380, 400, 280, 450,330);
    context.bezierCurveTo(450, 330, 400, 350, 380, 380);


      context.closePath();
      context.lineWidth = 5;
      context.strokeStyle = "rgb(15,47,121)";
    context.stroke();
    context.fillStyle = "rgb(7, 31, 87)";
    context.fill();

//WATER RIPPLE

    context.beginPath();
    context.moveTo(175,440);
    context.bezierCurveTo(500,550,550,100,700,500);
    context.lineWidth = 3;
    context.strokeStyle = "rgb(15,47,121)";
    context.stroke();

//WATER RIPPLE 2

    context.beginPath();
    context.moveTo(175,440);
    context.bezierCurveTo(550,500,500,100,800,500);
    context.lineWidth = 3;
    context.strokeStyle = "rgb(15,47,121)";
    context.stroke();

//

    context.beginPath();
      context.moveTo(0, 550);
      context.bezierCurveTo(200, 420, 388, 700, 600, 430);
      context.lineTo(600,600);
      context.lineTo(0,600);
      context.lineTo(0,550);
      context.lineWidth = 5;

       var grd = context.createLinearGradient(0, 600, 600, 600);

// PURPLE
      grd.addColorStop(.12, "rgba(94,3,101,0.4)");
// GREEN
      grd.addColorStop(.25, "rgba(19,145,40,0.3)");
//PURPLE 2
        grd.addColorStop(.55, "rgba(94,3,101,0.1)");
// LIGHT BLUE
      grd.addColorStop(.656, "rgba(37,241,255,0.1)");
// PURPLE 3
      grd.addColorStop(.855, "rgba(94,3,101,0.2)");

      context.strokeStyle = grd;
      context.stroke();

var grd = context.createLinearGradient(0, 600, 600, 600);

// PURPLE
      grd.addColorStop(.12, "rgba(94,3,101,0.8)");
// GREEN
      grd.addColorStop(.25, "rgba(19,145,40,0.5)");
//PURPLE 2
        grd.addColorStop(.55, "rgba(94,3,101,0.2)");
// LIGHT BLUE
      grd.addColorStop(.656, "rgba(37,241,255,0.2)");
// PURPLE 3
      grd.addColorStop(.855, "rgba(94,3,101,0.6)");

      context.fillStyle = grd;
      context.fill();
    </script>
</body>
</html>

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>