Thursday, April 10, 2014

Final project Storyboard

Idea: Little character (maybe 2) On a piece of paper will do some things on the paper but then figures out how to break off of the paper and he does things around my room.

Storyboard: Starts out with just a close view of the paper on my desk, I then draw the first stick figure, and a basic background (ground, simple tree, etc). I draw another character (maybe a monster) in the "sky" of the background, and it falls to the ground next to the stick figure.

The monster will rawr and my stick figure will make a "scared" movement, and start to run away. I then draw a sword in the sky, which drops down to in front of the stick figure as he's running away from the monster.
He'll grab the sword, turn around all defiantly, and start to fight the monster. They battle it out for a little while, but the monster eventually is defeated. The monster will disappear with a giant poof, after which a triforce will appear (a legend of Zelda reference). My character will go grab the shining gold relic and his sword will get bigger and a bit more intricate.
The scene will start to move as he walks through the land. Eventually the trees will get more numerous, and he'll end up in a forest.
He slowly walks through the forest and comes upon an interesting looking obelisk type stone, with a slot in it. He looks at his sword then back at the obelisk, and decides to stick his sword in the stone. the stone then sends a huge beam of energy up to the top of the paper, and then the paper will start to rip.
the figure will jump up into the beam and get shot up through the rip in the paper, and wind up in the "real world".

The camera angles will then start to shift and change as the figure moves around my room and starts to discover real things. (fall into boxes, try to figure out a water bottle, climb my desk, open the fridge etc.) At the end he'll decide he doesnt like the real world, so he'll hope back into the rip in the paper, grab his sword out of the obelisk (which will then stop the beam and mend the rip in the paper), and start to walk back out of the forest.

With his sword in tow,  he gets back to his own house, set it on his weapon rack in the front room, climbs up the ladder to the loft, get into bed, and the screen will fade black, ending the story.

Tuesday, February 18, 2014

Final


<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// Sunset /////////////////////

        var x = 50;
        var y = 100;
        var width = 2000;
        var height = 2000;
      
        context.beginPath();
        context.rect(x,y,width,height);
      
        context.fillStyle = 'green';
        // add linear gradient
        var grd = context.createLinearGradient(310, 100, 350, 400);
        // light blue
        grd.addColorStop(0, "#FF3300");
        // dark blue
        grd.addColorStop(1, "#FF9933");
        context.fillStyle = grd;
        context.fill();
        context.closePath();
       
        //////////////////sun////////////
        var centerX = canvas.width / 1.9;
        var centerY = canvas.height / 2.75;
        var radius = 100;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(centerX, centerY, 5, centerX, centerY, 200);
        // STARTING COLOR
        grd.addColorStop(0, "#FFF000");
        // INTERMEDIATE COLOR 1
        grd.addColorStop(0.30, "#FF6633");
        // ENDING COLOR
        grd.addColorStop(1, "#660000");
        context.fillStyle = grd;
        context.fill();
       
        /////////////////WATER/////////////
       
        var x = 50;
        var y = 200;
        var width = 800;
        var height = 400;
      
        context.beginPath();
        context.rect(x,y,width,height);
      
        context.fillStyle = 'green';
        // add linear gradient
        var grd = context.createLinearGradient(310, 150, 311, 450);
        // light blue
        grd.addColorStop(0, "#33FFFF");
        // dark blue
        grd.addColorStop(1, "#0066FF");
        context.fillStyle = grd;
        context.fill();
       
        ///////////////SAND////////////
       
context.beginPath();
context.rect(50, 550, 800, 70);
context.fillStyle = '#CC9966';
context.fill();

////////////SEAWEED///////////////////
  
       
        var centerX = canvas.width / 1.1;
        var centerY = canvas.height / 1.32;
        var radius = 25;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#336633";
        context.fill();
        context.closePath();
       
        var centerX = canvas.width / 1.015;
        var centerY = canvas.height / 1.45;
        var radius = 25;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#336633";
        context.fill();
        context.closePath();
       
        var centerX = canvas.width / 1.1;
        var centerY = canvas.height / 1.6;
        var radius = 25;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#336633";
        context.fill();
        context.closePath();
       
        var centerX = canvas.width / 1.015;
        var centerY = canvas.height / 1.8;
        var radius = 25;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#336633";
        context.fill();
        context.closePath();
       
        var centerX = canvas.width / 1.1;
        var centerY = canvas.height / 2;
        var radius = 25;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#336633";
        context.fill();
        context.closePath();
       
        var centerX = canvas.width / 1.014;
        var centerY = canvas.height / 1.2;
        var radius = 25;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#336633";
        context.fill();
        context.closePath();
       
       
context.beginPath();
context.rect(750, 250, 15, 320);
context.fillStyle = '#336633';
context.fill();
context.lineWidth = 5;

////////////////CORAL//////////////

 var x = 100;
  var y = 580;
  var x1 = 100;
  var y1 = 500;
 
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
 
  context.lineWidth = 10;
  context.strokeStyle = '#FF0033';
  context.lineCap = "round";
  context.stroke();
 
  var x = 150;
  var y = 500;
  var x1 = 100;
  var y1 = 550;
 
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
 
  context.lineWidth = 10;
  context.strokeStyle = '#FF0033';
  context.lineCap = "round";
  context.stroke();
 
  var x = 115;
  var y = 470;
  var x1 = 130;
  var y1 = 518;
 
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
 
  context.lineWidth = 10;
  context.strokeStyle = '#FF0033';
  context.lineCap = "round";
  context.stroke();
 
  var x = 60;
  var y = 500;
  var x1 = 100;
  var y1 = 550;
 
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
 
  context.lineWidth = 10;
  context.strokeStyle = '#FF0033';
  context.lineCap = "round";
  context.stroke();
 
  var x = 90;
  var y = 455;
  var x1 = 60;
  var y1 = 500;
 
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
 
  context.lineWidth = 10;
  context.strokeStyle = '#FF0033';
  context.lineCap = "round";
  context.stroke();
 
  var x = 80;
  var y = 525;
  var x1 = 70;
  var y1 = 550;
 
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
 
  context.lineWidth = 10;
  context.strokeStyle = '#FF0033';
  context.lineCap = "round";
  context.stroke();
 
  ///////////////////Me (head and hair)/////////////////
 
      var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 50;
       
        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#660000";
        context.fill();
        context.closePath();
       
context.beginPath();
context.rect(350, 292, 100, 119);
context.fillStyle = "#660000";
context.fill();

context.closePath();

      
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 40;
      
        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#FFCC99";
        context.fill();
        context.closePath();

///////////////Body/////////////////
  var x = 400;
  var y = 300;
  var x1 = 400;
  var y1 = 400;

  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.lineWidth = 50;
  context.strokeStyle = '#FFCC99';
  context.lineCap = "round";
  context.stroke(); 
 
  //////////////Arms & Legs//////////////
  var x = 370;
  var y = 445;
  var x1 = 383;
  var y1 = 420;

  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.lineWidth = 10;
  context.strokeStyle = '#FFCC99';
  context.lineCap = "round";
  context.stroke();
 
  var x = 370;
  var y = 445;
  var x1 = 383;
  var y1 = 420;

  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.lineWidth = 10;
  context.strokeStyle = '#FFCC99';
  context.lineCap = "round";
  context.stroke();
 
  var x = 385;
  var y = 480;
  var x1 = 370;
  var y1 = 445;

  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.lineWidth = 10;
  context.strokeStyle = '#FFCC99';
  context.lineCap = "round";
  context.stroke();
 
  var x = 410;
  var y = 400;
  var x1 = 420;
  var y1 = 500;

  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.lineWidth = 10;
  context.strokeStyle = '#FFCC99';
  context.lineCap = "round";
  context.stroke();
 
   var x = 425;
  var y = 352;
  var x1 = 470;
  var y1 = 420;

  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.lineWidth = 10;
  context.strokeStyle = '#FFCC99';
  context.lineCap = "round";
  context.stroke();
 
   var x = 390;
  var y = 330;
  var x1 = 340;
  var y1 = 420;

  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.lineWidth = 10;
  context.strokeStyle = '#FFCC99';
  context.lineCap = "round";
  context.stroke();
      

      
       //////////////////////////FACE///////////////////
  var x = 375;
  var y = 294;
  var x1 = 420;
  var y1 = 294;

  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.lineWidth = 40;
  context.strokeStyle = 'black';
  context.lineCap = "round";
  context.stroke();
      
       context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.lineWidth = 30;
  context.strokeStyle = '#FFCC99';
  context.lineCap = "round";
  context.stroke();
      
       var centerX = 415;
        var centerY = 292;
        var radius = 10;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "white";
        context.fill();
        context.closePath();
      
        var centerX = 385;
        var centerY = 292;
        var radius = 10;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "white";
        context.fill();
        context.closePath();
        
        var centerX = 385;
        var centerY = 292;
        var radius = 6;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#66CC66";
        context.fill();
        context.closePath();
       
        var centerX = 415;
        var centerY = 292;
        var radius = 6;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#66CC66";
        context.fill();
        context.closePath();
       
       
        var centerX = 415;
        var centerY = 292;
        var radius = 3;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "black";
        context.fill();
        context.closePath();
       
        var centerX = 385;
        var centerY = 292;
        var radius = 3;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "black";
        context.fill();
        context.closePath();
       
       
              
       ///////////////////SUIT//////////////////
  var x = 420;
  var y = 365;
  var x1 = 380;
  var y1 = 365;

  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.lineWidth = 15;
  context.strokeStyle = '#9900FF';
  context.lineCap = "round";
  context.stroke();
 
 
var x = 400;
var y = 370;
var x1 = 377;
var y1 = 345;

context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);

context.lineWidth = 5;
context.stroke();
context.closePath();

  var x = 380;
  var y = 400;
  var x1 = 427;
  var y1 = 400;
  var x2 = 400;
  var y2 = 430;
  var x3 = 373;
  var y3 = 400;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.lineTo(x2, y2);
  context.lineTo(x3, y3);
  context.fillStyle = '#9900FF';
  context.fill();
  context.closePath();
 
  var x = 400;
  var y = 370;
  var x1 = 425;
  var y1 = 345;

  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.lineWidth = 5;
  context.strokeStyle = '#9900FF';
  context.lineCap = "round";
  context.stroke();


/////////////SNORKEL/////////////////

        var centerX = 400;
        var centerY = 320;
        var radius = 5;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "black";
        context.fill();
        context.closePath();
       
       
    context.beginPath();
    context.rect(395, 317, 40, 7);
    context.fillStyle = 'black';
    context.fill();
    context.closePath();
   
    context.beginPath();
    context.rect(430, 260, 7, 65);
    context.fillStyle = 'black';
    context.fill();
    context.closePath();
   
 
 
////////////////////////////////////// end above this line //////////////////

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>

Tuesday, February 11, 2014

Progress 2/11/14
















////////////////CORAL//////////////

 var x = 100;
  var y = 580;
  var x1 = 100;
  var y1 = 500;
 
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
 
  context.lineWidth = 10;
  context.strokeStyle = '#FF0033';
  context.lineCap = "round";
  context.stroke();
 
  var x = 150;
  var y = 500;
  var x1 = 100;
  var y1 = 550;
 
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
 
  context.lineWidth = 10;
  context.strokeStyle = '#FF0033';
  context.lineCap = "round";
  context.stroke();
 
  var x = 115;
  var y = 470;
  var x1 = 130;
  var y1 = 518;
 
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
 
  context.lineWidth = 10;
  context.strokeStyle = '#FF0033';
  context.lineCap = "round";
  context.stroke();
 
  var x = 60;
  var y = 500;
  var x1 = 100;
  var y1 = 550;
 
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
 
  context.lineWidth = 10;
  context.strokeStyle = '#FF0033';
  context.lineCap = "round";
  context.stroke();
 
  var x = 90;
  var y = 455;
  var x1 = 60;
  var y1 = 500;
 
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
 
  context.lineWidth = 10;
  context.strokeStyle = '#FF0033';
  context.lineCap = "round";
  context.stroke();
 
  var x = 80;
  var y = 525;
  var x1 = 70;
  var y1 = 550;
 
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
 
  context.lineWidth = 10;
  context.strokeStyle = '#FF0033';
  context.lineCap = "round";
  context.stroke();
 
  ///////////////////Me (head and hair)/////////////////
 
      var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 50;
       
        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#660000";
        context.fill();
        context.closePath();
       
context.beginPath();
context.rect(350, 292, 100, 119);
context.fillStyle = "#660000";
context.fill();

context.closePath();

      
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 40;
      
        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#FFCC99";
        context.fill();
        context.closePath();

///////////////Body/////////////////
  var x = 400;
  var y = 300;
  var x1 = 400;
  var y1 = 400;

  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.lineWidth = 50;
  context.strokeStyle = '#FFCC99';
  context.lineCap = "round";
  context.stroke(); 
 
  //////////////Arms & Legs//////////////
  var x = 370;
  var y = 445;
  var x1 = 383;
  var y1 = 420;

  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.lineWidth = 10;
  context.strokeStyle = '#FFCC99';
  context.lineCap = "round";
  context.stroke();
 
  var x = 370;
  var y = 445;
  var x1 = 383;
  var y1 = 420;

  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.lineWidth = 10;
  context.strokeStyle = '#FFCC99';
  context.lineCap = "round";
  context.stroke();

Thursday, February 6, 2014

Feb 6th - HTML Self Portrait Progress




<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// Sunset ˇˇˇˇˇˇˇˇˇˇ

        var x = 50;
        var y = 100;
        var width = 2000;
        var height = 2000;
     
        context.beginPath();
        context.rect(x,y,width,height);
     
        context.fillStyle = 'green';
        // add linear gradient
        var grd = context.createLinearGradient(310, 100, 350, 400);
        // light blue
        grd.addColorStop(0, "#FF3300");
        // dark blue
        grd.addColorStop(1, "#FF9933");
        context.fillStyle = grd;
        context.fill();
        context.closePath();
      
        //////////////////sun////////////
        var centerX = canvas.width / 1.9;
        var centerY = canvas.height / 2.75;
        var radius = 100;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(centerX, centerY, 5, centerX, centerY, 200);
        // STARTING COLOR
        grd.addColorStop(0, "#FFF000");
        // INTERMEDIATE COLOR 1
        grd.addColorStop(0.30, "#FF6633");
        // ENDING COLOR
        grd.addColorStop(1, "#660000");
        context.fillStyle = grd;
        context.fill();
      
        /////////////////WATER/////////////
      
        var x = 50;
        var y = 200;
        var width = 800;
        var height = 400;
     
        context.beginPath();
        context.rect(x,y,width,height);
     
        context.fillStyle = 'green';
        // add linear gradient
        var grd = context.createLinearGradient(310, 150, 311, 450);
        // light blue
        grd.addColorStop(0, "#33FFFF");
        // dark blue
        grd.addColorStop(1, "#0066FF");
        context.fillStyle = grd;
        context.fill();
      
        ///////////////SAND////////////
      
context.beginPath();
context.rect(50, 550, 800, 70);
context.fillStyle = '#CC9966';
context.fill();

////////////SEAWEED///////////////////
 
      
        var centerX = canvas.width / 1.1;
        var centerY = canvas.height / 1.32;
        var radius = 25;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#336633";
        context.fill();
        context.closePath();
      
        var centerX = canvas.width / 1.015;
        var centerY = canvas.height / 1.45;
        var radius = 25;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#336633";
        context.fill();
        context.closePath();
      
        var centerX = canvas.width / 1.1;
        var centerY = canvas.height / 1.6;
        var radius = 25;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#336633";
        context.fill();
        context.closePath();
      
        var centerX = canvas.width / 1.015;
        var centerY = canvas.height / 1.8;
        var radius = 25;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#336633";
        context.fill();
        context.closePath();
      
        var centerX = canvas.width / 1.1;
        var centerY = canvas.height / 2;
        var radius = 25;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#336633";
        context.fill();
        context.closePath();
      
        var centerX = canvas.width / 1.014;
        var centerY = canvas.height / 1.2;
        var radius = 25;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#336633";
        context.fill();
        context.closePath();
      
      
context.beginPath();
context.rect(750, 250, 15, 320);
context.fillStyle = '#336633';
context.fill();
context.lineWidth = 5;

////////////////CORAL//////////////

 var x = 100;
  var y = 580;
  var x1 = 100;
  var y1 = 500;
 
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
 
  context.lineWidth = 10;
  context.strokeStyle = '#FF0033';
  context.lineCap = "round";
  context.stroke();



////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>




Thursday, January 23, 2014

Introduction

I'm an only child from a single parent family. I've lived in a small town in Connecticut my whole life, and I love living in the city now.
I have always been interested in art, and my love for technology drew me to digital art. I'm hoping to get a lot from this class and the others to follow. I want to hone my (if what minimal) abilities in Photoshop and Carrara. I follow many of my favorite digital artists on Deviantart.com and strive to be that skilled. I wish to be able to create something like this some day:
I'm really excited to start my artistic journey.