Thursday, February 27, 2014

Project 2 Complete


Posted by at No comments:

Tuesday, February 25, 2014

Project 2 Progress


Posted by at No comments:

Thursday, February 20, 2014

Project 2 start progress


Posted by at No comments:

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>

Posted by at No comments:

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();
Posted by at No comments:

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>




Posted by at No comments:
Subscribe to: Posts (Atom)