Sail Away......

05/29/2012

My intentions were to create a colorful fun image which could be used as a child clothing label; because of my love of he ocean and sailing.




context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.strokeStyle = "rgb(255,0,0)";
context.lineWidth = 5;

context.fillStyle = "rgb(100,255,100)";
context.fill();
context.stroke();


for (var yay=0; yay<canvas.height/2*2; yay+=10) {

var startX = -100/2-yay;
var startY = canvas.height-yay/2;
var endX = canvas.width-200;
var endY = canvas.height*0.5;
//control poimt 1
var cpoint1X = canvas.width*yay-500;
var cpoint1Y = canvas.height*3/4;
//control point 2
var cpoint2X = canvas.width*0.75/2;
var cpoint2Y = canvas.height/yay-600;

context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpoint1X, cpoint1Y, cpoint2X, cpoint2Y, endX, endY);
context.fillStyle = "yellow";
context.fill()
context.strokeStyle = "aqua/yellow"
context.lineWidth = 2/3*4;
context.stroke();
//boat
var startX = 150;
var startY = canvas.height/2;
var endX = 600;
var endY = canvas.height/2;

var cpointX = canvas.width/2;
var cpointY = canvas.height;

var start1X = 400;
var start2Y = 300/2;
var end1X = 400;
var end1Y = 275;

var cpoint1X = 400;
var cpoint1Y = 300;
var grd = context.createLinearGradient(150, 250, 380, 200);



        // add linear gradient
        var grd = context.createLinearGradient(230, 0, 370, 200);
        // light blue
        grd.addColorStop(0, "#8ED6FF");
        // dark blue
        grd.addColorStop(1, "#004CB3");
        context.fillStyle = grd;
        context.fill();

        // add stroke
        context.lineWidth = 2;
        context.strokeStyle = "blue";
        context.stroke();


context.closePath();
        context.lineWidth = "aqua";
        context.fillStyle = "#8ED6FF";
        context.fill();
        context.strokeStyle = "yellow";
        context.stroke();


context.beginPath();
context.moveTo(startX, startY);
//context.lineTo(endX, endY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
        context.lineWidth = 1;
        context.fillStyle = "#8ED6FF";
        context.fill();
        context.strokeStyle = "blue";
        context.stroke();
context.closePath();
context.strokeStyle = "rgb(0,10,0)";
context.fillStyle = "rgb(0,5,0)";
        context.lineWidth = 0.0;
        context.fillStyle = "#8ED6FF";
        context.fill();
        context.strokeStyle = "pink";
        context.stroke();
context.fill();
context.lineWidth = 0.1;
context.stroke();

context.beginPath();
     
        context.stroke();

//sail
context.beginPath();
        context.moveTo(100, 198);
        context.quadraticCurveTo(300, cpoint1Y, end1X, end1Y);
// add linear gradient
      context.createLinearGradient(100, 0, 370, 200);
        // light blue
        grd.addColorStop(0, "pink");
        // dark blue
        grd.addColorStop(0.5, "red");

grd.addColorStop(1, "pink");
     
context.fillStyle = grd;
        context.closePath();
     
context.fill();
        context.fillStyle = grd;


context.beginPath();
        context.moveTo(100, 200);
        context.lineTo(400, 0);
        context.lineTo(400, 300);
context.closePath();
context.fillStyle = "#FFFFFF";
        context.fill();
        context.strokeStyle = "pink";
        context.stroke();


 context.beginPath();
        context.moveTo(170, 80);
        context.bezierCurveTo(130, 100, 130, 150, 230, 150);
        context.bezierCurveTo(250, 180, 320, 180, 300, 150);
        context.bezierCurveTo(420, 150, 300, 120, 290, 100);
        context.bezierCurveTo(410, 40, 300, 30, 300, 50);
        context.bezierCurveTo(320, 5, 250, 20, 250, 50);
        context.bezierCurveTo(200, 5, 150, 20, 170, 80);
        context.closePath();


        context.fillStyle = "#8ED6FF";
        context.fill();
        //context.strokeStyle = "pink";
        //context.stroke();/**/


}

It takes time....

I am done, after working on my first HTML5 design, I have multiple versions to share. There is still much to learn; but practice does make perfect. I still have lots of questions to ask..I will post tomorrow after speaking with Professor Echeverry,

The tongue....

Well,I am determined to create this tongue for my smiley face. its not pretty, but I know I need practice. I have formed a pretty solid study group. I am excited to see so many students are ready to help each other succeed. What a great feeling of community. I am unable to load in my current work for some strange reason, I apologize.

What kind of code can create Tylenol !!

While I have the fundamental understanding of code, I have made some small stride forward through trial and error. I have been working on the ARC and still have some questions on the code, but I am optimistic. I have decided to recreate the code from beginning based on the tutorial so get used to the type of structure that is needed to recreated it accurately.

I started by copying and pasting the entire code into Dreamweaver and slowly picking it apart..I am still working on it; I have highlighted items which I am unsure and have questions about this evening


<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px; - " OPX" This code wasnt explained on the tutorial
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898; - Not sure about this
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        var x = canvas.width / 2;
        var y = canvas.height / 2;
        var radius = 75;
        var startAngle = 1.1 * Math.PI;
        var endAngle = 1.9 * Math.PI;
        var counterClockwise = false;

        context.beginPath(); - Do I always need to begin any Shape with " beginPath" or just circles / arches ?
        context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
        context.lineWidth = 15;
        // line color
        context.strokeStyle = "black";
        context.stroke();
      };

    </script>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="250"></canvas>
  </body>
</html>

Just a little bit of me...

Rediscovering myself is my latest adventure; with 2 small children and a quick whitted husband, my days are always filled with simple joys and the love of a wonderful man. Melissa Reel is my name, at 35 years old I am a senior in college feeling like the whole world is within my grasp. Sometimes I feel like I am a late in the " College Game", but often I realize that I bring experience, maturity, and work ethic. I have been finishing school for sometime; I had my youngest son "Wyatt" 9  months ago and my oldest son " Jake" 3 years ago. Everynight I return home to my husband, he cares for my two children while I am at school, when I see him its  reminds me of why I made the decision to finish the chapter in my life called" Education". We all want more for ourselves and the people we love. I enjoy school and pouring my heart into learning and growing, the changes that have taken place in me recently have helped color in those blank spaces which I never knew about.

I am always growing as a person and loving the person I see in myself.