Calligram Project

Part of Your Words: Carley Heskett

Like a youthful mermaid, "life is the bubbles" for a college student living her childhood dream. For this project, I wanted to capture the beauty of Disney's beloved mermaid, Ariel, from the classic animated film "The Little Mermaid." Growing up, this was my favorite Disney movie. Every year I looked forward to my annual Disneyland visit because it meant I got to see my favorite aquatic friend! Ariel is a strong female character who teaches young girls to go after their dreams no matter how out of this world they may seem. Because she goes to explore that shore up above I had the courage to go after my dream of working at Disney!

I did not know where to start when I began thinking of ideas for creating my own Calligram. So naturally I began to doodle in my notebook. Disney characters are my favorite things to draw because there is a story, emotion, and a personal nostalgic memory towards each character. I created an entire page of Disney doodles ranging from characters like Tinker Bell, Stitch, Dory, and so on. Once the page was completely filled, I had no other choice but to choose my favorite: Ariel. It was then decided for my calligram I would create Ariel in Illustrator. There is no better representation of Ariel's hopes and dreams than her beautiful song "Part of Your World." Because it is, in my opinion, one of the best if not the best Disney song of all time, I decided to use it to fill in my drawing. I began with the Pen tool. Using the points and curves, I was able to create the movement in Ariel's luscious hair. In addition, I used different shades of red to show the shape and depth of its beauty. The pen tool is so useful, I was able to use it for creating the entire profile. Being able to manipulate the anchors and handles on every line allowed me to capture everything on my image I wanted to. I used the text on a line tool to fill the image with text. I chose the most Disney-like font I could find and by changing font size I was able to add more depth within the drawing. This was by far my favorite project thus far. I was able to really use my creative and Disney loving side. Can't wait to continue learning and exploring the Illustrator application!

Thank you for reading! See ya real soon!


P.S. Here is the original doodle of mine that inspired this Calligram!

How to: Illustrator

Hello there!

In class this week we learned how to use Illustrator! For our next project we will manipulate text to create an image - this is known as a Calligram! To help me to better understand this program I looked up some tutorials on youtube! I attached the links to the videos below!

https://www.youtube.com/results?search_query=how+to+use+illustrator
https://www.youtube.com/watch?v=3GzumUieDPY
https://www.youtube.com/watch?v=ZCTPASFKaXk

I hope this helps other Illustrator beginners!

See ya real soon!

Canvas Project

Relax and Go For a Swing: Carley Heskett

College is essentially one big balancing act. As a full time student at the University of Tampa, I have to balance an insane workload. I am a double major and have two jobs, not to mention I would also like to have some sort of social life. We have been in school for almost a month now and as one could imagine, I am a little overwhelmed. For this project I wanted to create an environment that would pull out my calm side and help me envision a place that would relax me. The first thing you witness in my project is a swing in the center of the page. Have you ever seen someone sad come off a swing? Swinging is an instant mood booster because endorphins are released when moving back and forth. The pressure on the body can stimulate skin receptors and elevate the mood. It is similar to the relaxing feeling of a hammock, rocking chair, or float. A special little girl in my life suffers with a processing disorder but she is able to find balance and comfort in her daily routine when she utilizes a swing. It helps her body’s vestibular system neutralize disruptions which can often originate in the inner ear. She reminds me that when I am feeling off, I should go for a swing. My mom is my best friend and I miss her every single day. Going to school on the opposite side of the country leaves a lot of room to miss my mom. Her happy place has always been the ocean, and in-turn that has become my happy place. Some of the best childhood memories have happened at the beach. To reflect those feel good memories, how happy my mom makes me, and the calming sound of waves, I chose to put the swing over a sunset on the ocean.

When creating my project I started with a sketch on graph paper. This helped me conceptualize my piece and then I was able to apply it to Dreamweaver. I started with creating rectangles for the sky, ocean, and tree. I filled in these rectangles with colors and gradients to create time of day and shadows. I then made 8 different small gradient filled rectangles outlining the bottom of the piece to create the illusion of sand. I decided to use a gradient to portray the many layers and colors sand contains. I then used a Bezier Curve to create a branch that is seen to be reaching over the ocean holding the swing up. Then I continued to take advantage of curves and circles which allowed me to create the depth and detail of my piece. Using arcs of several circles, I was able to add a little wood grain to the tree trunk. I used this same technique but in a different direction to create a bird flying over the ocean. Once I moved from circle halves to full colored circles, I was able to illustrate a more abstract version of leaves found on the tree. The way I took on this project head on and accomplished everything I set out to design, forces me to highlight how much of a personal success this is. Last week this application was a foreign concept, but now I have created a complete landscape. The colors and images scene in “Relax and Go For a Swing” create an immediate flux of calming emotions. It takes me back to being a child and how everything was so simple and easy then. This gives me hope that it can one day be like that again and all this work right now will all seem worth it once I get there.

Below you will find the code to my completed canvas project.

Thanks for reading! See ya real soon!

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

//////////////////////////////////////SKY start below this line ˇˇˇˇˇˇˇˇˇˇ



var x=0;
var y=0;
var x1=0;
var y1=600
var x2=800;
var y2=600
var x3=800;
var y3=0
var x4=0;
var y4=0
var width = 800
var height= 600;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
//context.fillStyle = 'rgb(0,255,0)';
        var grd = context.createLinearGradient(x, y, 15, y+height);
        // starting color
        grd.addColorStop(0, "rgb(255,153,51)");
        //intermediate color
        grd.addColorStop(0.5, "rgb(255,255,51)");
        // ending color
        grd.addColorStop(1, "rgb(255,255,102)");
        context.fillStyle = grd;
        context.fill();
context.fill();
context.strokeStyle = 'rgb(204,255,255)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

 
//////////////////////////OCEAN starts below

var x=150;
var y=350;
var x1=150;
var y1=600
var x2=800;
var y2=600
var x3=800;
var y3=350
var x4=150;
var y4=350
var width = 650
var height= 250;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 1; //context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(102,204,204)'; // add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height); // starting color
grd.addColorStop(0, "rgb(0,128,255)"); //intermediate color
grd.addColorStop(0.5, "rgb(0,204,204)"); // ending color
grd.addColorStop(1, "rgb(0,204,204)");
        context.fillStyle = grd;
        context.fill();
context.fill();


context.stroke();

//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height

 ////////////////////////////////////// BENCH start below this line ˇˇˇˇˇˇˇˇˇˇ

var x=320;
var y=400;
var x1=320;
var y1=450
var x2=490;
var y2=450
var x3=490;
var y3=400
var x4=320;
var y4=400
var width = 170
var height= 50;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 5;
//context.fillStyle = 'rgb(0,255,0)';
        var grd = context.createLinearGradient(x, y, x+width, y+height);
        // starting color
        grd.addColorStop(0, "rgb(102,0,0)");
 //intermediate color
        grd.addColorStop(0.40, "rgb(102,51,0)");
        //intermediate color
        grd.addColorStop(0.65, "rgb(102,51,0)");
        // ending color
        grd.addColorStop(1, "rgb(102,0,0)");
        context.fillStyle = grd;
        context.fill();
context.fill();
context.strokeStyle = "rgb(32,32,32)"; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height

// for a square width = height , the width and the height have the same value

////////////////////////////////////// BENCH ROPE1 start below this line ˇˇˇˇˇˇˇˇˇˇ

var x=350;
var y=120;
var x1=350;
var y1=400
var x2=355;
var y2=400
var x3=355;
var y3=120
var x4=350;
var y4=120
var width = 5
var height= 280;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 1;
//context.fillStyle = 'rgb(0,255,0)';
        var grd = context.createLinearGradient(x, y, x+width, y+height);
        // starting color
        grd.addColorStop(0, "rgb(153,76,0)");
 //intermediate color
        grd.addColorStop(0.40, "rgb(153,76,0)");
        //intermediate color
        grd.addColorStop(0.65, "rgb(153,76,0)");
        // ending color
        grd.addColorStop(1, "rgb(153,76,0)");
        context.fillStyle = grd;
        context.fill();
context.fill();
context.strokeStyle = "rgb(153,76,0)"; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height

// for a square width = height , the width and the height have the same value

////////////////////////////////////// BENCH ROPE2 start below this line ˇˇˇˇˇˇˇˇˇˇ

var x=455;
var y=120;
var x1=455;
var y1=400
var x2=460;
var y2=400
var x3=460;
var y3=120
var x4=455;
var y4=120
var width = 5
var height= 280;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 1;
//context.fillStyle = 'rgb(0,255,0)';
        var grd = context.createLinearGradient(x, y, x+width, y+height);
        // starting color
       grd.addColorStop(0, "rgb(153,76,0)");
 //intermediate color
        grd.addColorStop(0.40, "rgb(153,76,0)");
        //intermediate color
        grd.addColorStop(0.65, "rgb(153,76,0)");
        // ending color
        grd.addColorStop(1, "rgb(153,76,0)");
        context.fillStyle = grd;
        context.fill();
context.fill();
context.strokeStyle = "rgb(153,76,0)"; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height

// for a square width = height , the width and the height have the same value

 ////////////////////////// TREE TRUNK starts below

var x=0;
var y=0;
var x1=0;
var y1=600
var x2=150;
var y2=600
var x3=150;
var y3=600
var x4=0;
var y4=0
var width = 150
var height= 600;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 1; //context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgb(102,51,0)'; // add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height); // starting color
grd.addColorStop(0, "rgb(102,51,0)"); //intermediate color
grd.addColorStop(0.5, "rgb(102,51,0)"); // ending color
grd.addColorStop(1, "rgb(102,51,0)");
        context.fillStyle = grd;
        context.fill();
context.fill();


context.stroke();

//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height
//////////////////////////////// BIRD ARC1 starts below

// x and y coordinates of the tracing circle 
      var x = 620;
      var y = 300;
// radius of the tracing circle 
      var radius = 35;
      
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle       
      var startAngle = 2 * Math.PI;
      var endAngle = 1.3 * Math.PI;
      
// draw the arc clockwise or counterclockwise       
      var counterClockwise = true; // if set to true it draws the complimentary arc
      context.beginPath();

// draw the arc      
      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);
      context.lineWidth = 7;

// line color
      context.strokeStyle = "rgb(32,32,32)";
      context.stroke();
 //////////////////////////////// BIRD ARC2 starts below

// x and y coordinates of the tracing circle 
      var x = 695;
      var y = 300;
// radius of the tracing circle 
      var radius = 35;
      
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle       
      var startAngle = 1.8 * Math.PI;
      var endAngle = 1 * Math.PI;
      
// draw the arc clockwise or counterclockwise       
      var counterClockwise = true; // if set to true it draws the complimentary arc
      context.beginPath();

// draw the arc      
      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);
      context.lineWidth = 7;

// line color
      context.strokeStyle = "rgb(32,32,32)";
      context.stroke();
//////////////////////////////// TREE ARC1 starts below

// x and y coordinates of the tracing circle 
      var x = 150;
      var y = 350;
// radius of the tracing circle 
      var radius = 65;
      
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle       
      var startAngle = 0.5 * Math.PI;
      var endAngle = 1.5 * Math.PI;
      
// draw the arc clockwise or counterclockwise       
      var counterClockwise = false; // if set to true it draws the complimentary arc
      context.beginPath();

// draw the arc      
      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);
      context.lineWidth = 7;

// line color
      context.strokeStyle = "rgb(51,25,0)";
      context.stroke();
 
//////////////////////////////// TREE ARC2 starts below

// x and y coordinates of the tracing circle 
      var x = 150;
      var y = 350;
// radius of the tracing circle 
      var radius = 55;
      
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle       
      var startAngle = 0.5 * Math.PI;
      var endAngle = 1.5 * Math.PI;
      
// draw the arc clockwise or counterclockwise       
      var counterClockwise = false; // if set to true it draws the complimentary arc
      context.beginPath();

// draw the arc      
      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);
      context.lineWidth = 6.5;

// line color
      context.strokeStyle = "rgb(51,25,0)";
      context.stroke();
 
 //////////////////////////////// TREE ARC3 starts below

// x and y coordinates of the tracing circle 
      var x = 150;
      var y = 350;
// radius of the tracing circle 
      var radius = 45;
      
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle       
      var startAngle = 0.5 * Math.PI;
      var endAngle = 1.5 * Math.PI;
      
// draw the arc clockwise or counterclockwise       
      var counterClockwise = false; // if set to true it draws the complimentary arc
      context.beginPath();

// draw the arc      
      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);
      context.lineWidth = 6;

// line color
      context.strokeStyle = "rgb(51,25,0)";
      context.stroke();
 
//////////////////////////////// TREE ARC4 starts below

// x and y coordinates of the tracing circle 
      var x = 150;
      var y = 350;
// radius of the tracing circle 
      var radius = 35;
      
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle       
      var startAngle = 0.5 * Math.PI;
      var endAngle = 1.5 * Math.PI;
      
// draw the arc clockwise or counterclockwise       
      var counterClockwise = false; // if set to true it draws the complimentary arc
      context.beginPath();

// draw the arc      
      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);
      context.lineWidth = 5.5;

// line color
      context.strokeStyle = "rgb(51,25,0)";
      context.stroke();
 
//////////////////////////////// TREE ARC5 starts below

// x and y coordinates of the tracing circle 
      var x = 150;
      var y = 350;
// radius of the tracing circle 
      var radius = 25;
      
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle       
      var startAngle = 0.5 * Math.PI;
      var endAngle = 1.5 * Math.PI;
      
// draw the arc clockwise or counterclockwise       
      var counterClockwise = false; // if set to true it draws the complimentary arc
      context.beginPath();

// draw the arc      
      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);
      context.lineWidth = 5;

// line color
      context.strokeStyle = "rgb(51,25,0)";
      context.stroke();

 //////////////////////////////// TREE ARC6 starts below

// x and y coordinates of the tracing circle 
      var x = 150;
      var y = 350;
// radius of the tracing circle 
      var radius = 15;
      
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle       
      var startAngle = 0.5 * Math.PI;
      var endAngle = 1.5 * Math.PI;
      
// draw the arc clockwise or counterclockwise       
      var counterClockwise = false; // if set to true it draws the complimentary arc
      context.beginPath();

// draw the arc      
      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);
      context.lineWidth = 4.5;

// line color
      context.strokeStyle = "rgb(51,25,0)";
      context.stroke();
////////////////////////////////////// BRANCH start below this line ˇˇˇˇˇˇˇˇˇˇ

// starting point coordinates
var x = 0;
var y = 150;

// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 3.5;
var cpointY1 = canvas.height / 100+ 300;

// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width / 5.5;
var cpointY2 = canvas.height / 1 - 550; 

// ending point coordinates 
var x1 = 550;
var y1 = 135;


context.beginPath();
context.moveTo(x, y);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);

context.lineWidth = 20;
context.strokeStyle = "rgb(102,51,0)";
context.lineCap = 'round' 
context.stroke();

//context.lineCap = Lines can have one of three cap styles: butt, round, or square
// lineCap property must be set before calling stroke()

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

////////////////////////////////////// SAND1 start below this line ˇˇˇˇˇˇˇˇˇˇ

var x=153;
var y=570;
var x1=153;
var y1=600
var x2=256;
var y2=600
var x3=256;
var y3=570
var x4=153;
var y4=550
var width = 103
var height= 30;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 5;
//context.fillStyle = 'rgb(0,255,0)';
        var grd = context.createLinearGradient(x, y, x+width, y+height);
        // starting color
        grd.addColorStop(0, "rgb(255,204,153)");
 //intermediate color
        grd.addColorStop(0.40, "rgb(255,229,204)");
        //intermediate color
        grd.addColorStop(0.65, "rgb(255,229,204)");
        // ending color
        grd.addColorStop(1, "rgb(255,204,153)");
        context.fillStyle = grd;
        context.fill();
context.fill();
context.strokeStyle = "rgb(255,229,204)"; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height

// for a square width = height , the width and the height have the same value

////////////////////////////////////// SAND2 start below this line ˇˇˇˇˇˇˇˇˇˇ

var x=256;
var y=570;
var x1=256;
var y1=600
var x2=356;
var y2=600
var x3=356;
var y3=570
var x4=256;
var y4=550
var width = 100
var height= 30;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 5;
//context.fillStyle = 'rgb(0,255,0)';
        var grd = context.createLinearGradient(x, y, x+width, y+height);
        // starting color
        grd.addColorStop(0, "rgb(255,204,153)");
 //intermediate color
        grd.addColorStop(0.40, "rgb(255,229,204)");
        //intermediate color
        grd.addColorStop(0.65, "rgb(255,229,204)");
        // ending color
        grd.addColorStop(1, "rgb(255,204,153)");
        context.fillStyle = grd;
        context.fill();
context.fill();
context.strokeStyle = "rgb(255,229,204)"; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height

// for a square width = height , the width and the height have the same value
 
////////////////////////////////////// SAND3 start below this line ˇˇˇˇˇˇˇˇˇˇ

var x=356;
var y=570;
var x1=356;
var y1=600
var x2=456;
var y2=600
var x3=456;
var y3=570
var x4=356;
var y4=550
var width = 100
var height= 30;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 5;
//context.fillStyle = 'rgb(0,255,0)';
        var grd = context.createLinearGradient(x, y, x+width, y+height);
        // starting color
       grd.addColorStop(0, "rgb(255,204,153)");
 //intermediate color
        grd.addColorStop(0.40, "rgb(255,229,204)");
        //intermediate color
        grd.addColorStop(0.65, "rgb(255,229,204)");
        // ending color
        grd.addColorStop(1, "rgb(255,204,153)");
        context.fillStyle = grd;
        context.fill();
context.fill();
context.strokeStyle = "rgb(255,229,204)"; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height

// for a square width = height , the width and the height have the same value
 
////////////////////////////////////// SAND4 start below this line ˇˇˇˇˇˇˇˇˇˇ

var x=456;
var y=570;
var x1=456;
var y1=600
var x2=556;
var y2=600
var x3=556;
var y3=570
var x4=456;
var y4=550
var width = 100
var height= 30;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 5;
//context.fillStyle = 'rgb(0,255,0)';
        var grd = context.createLinearGradient(x, y, x+width, y+height);
        // starting color
        grd.addColorStop(0, "rgb(255,204,153)");
 //intermediate color
        grd.addColorStop(0.40, "rgb(255,229,204)");
        //intermediate color
        grd.addColorStop(0.65, "rgb(255,229,204)");
        // ending color
        grd.addColorStop(1, "rgb(255,204,153)");
        context.fillStyle = grd;
        context.fill();
context.fill();
context.strokeStyle = "rgb(255,229,204)"; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height

// for a square width = height , the width and the height have the same value

////////////////////////////////////// SAND5 start below this line ˇˇˇˇˇˇˇˇˇˇ

var x=556;
var y=570;
var x1=556;
var y1=600
var x2=656;
var y2=600
var x3=656;
var y3=570
var x4=556;
var y4=550
var width = 100
var height= 30;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 5;
//context.fillStyle = 'rgb(0,255,0)';
        var grd = context.createLinearGradient(x, y, x+width, y+height);
        // starting color
       grd.addColorStop(0, "rgb(255,204,153)");
 //intermediate color
        grd.addColorStop(0.40, "rgb(255,229,204)");
        //intermediate color
        grd.addColorStop(0.65, "rgb(255,229,204)");
        // ending color
        grd.addColorStop(1, "rgb(255,204,153)");
        context.fillStyle = grd;
        context.fill();
context.fill();
context.strokeStyle = "rgb(255,229,204)"; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height

// for a square width = height , the width and the height have the same value

////////////////////////////////////// SAND6 start below this line ˇˇˇˇˇˇˇˇˇˇ

var x=656;
var y=570;
var x1=656;
var y1=600
var x2=756;
var y2=600
var x3=756;
var y3=570
var x4=656;
var y4=550
var width = 100
var height= 30;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 5;
//context.fillStyle = 'rgb(0,255,0)';
        var grd = context.createLinearGradient(x, y, x+width, y+height);
        // starting color
       grd.addColorStop(0, "rgb(255,204,153)");
 //intermediate color
        grd.addColorStop(0.40, "rgb(255,229,204)");
        //intermediate color
        grd.addColorStop(0.65, "rgb(255,229,204)");
        // ending color
        grd.addColorStop(1, "rgb(255,204,153)");
        context.fillStyle = grd;
        context.fill();
context.fill();
context.strokeStyle = "rgb(255,229,204)"; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height

// for a square width = height , the width and the height have the same value

////////////////////////////////////// SAND7 start below this line ˇˇˇˇˇˇˇˇˇˇ

var x=756;
var y=570;
var x1=756;
var y1=600
var x2=800;
var y2=600
var x3=800;
var y3=570
var x4=756;
var y4=550
var width = 44
var height= 30;

context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 5;
//context.fillStyle = 'rgb(0,255,0)';
        var grd = context.createLinearGradient(x, y, x+width, y+height);
        // starting color
        grd.addColorStop(0, "rgb(255,204,153)");
        //intermediate color
        grd.addColorStop(0.5, "rgb(255,229,204)");
        // ending color
        grd.addColorStop(1, "rgb(255,204,153)");
        context.fillStyle = grd;
        context.fill();
context.fill();
context.strokeStyle = "rgb(255,229,204)"; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height

// for a square width = height , the width and the height have the same value

////////////////////////// BENCH BOLT1

// x and y coordinates of the tracing circle 
      var x = 327;
      var y = 406;
// radius of the tracing circle 
      var radius = 25;
      
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle       
      var startAngle = 2 * Math.PI;
      var endAngle = 2 * Math.PI;
      
// draw the arc clockwise or counterclockwise       
      var counterClockwise = true; // if set to true it draws the complimentary arc
      context.beginPath();

// draw the arc      
      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);
      context.lineWidth = 13;

// line color
      context.strokeStyle = 'rgb(204, 102, 0)';
      context.stroke();
////////////////////////// BENCH BOLT2

// x and y coordinates of the tracing circle 
      var x = 433;
      var y = 406;
// radius of the tracing circle 
      var radius = 25;
      
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle       
      var startAngle = 2 * Math.PI;
      var endAngle = 2 * Math.PI;
      
// draw the arc clockwise or counterclockwise       
      var counterClockwise = true; // if set to true it draws the complimentary arc
      context.beginPath();

// draw the arc      
      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);
      context.lineWidth = 13;

// line color
      context.strokeStyle = 'rgb(204, 102, 0)';
      context.stroke();
 
 ////////////////////////// TREE SHRUB row 1

// x and y coordinates of the tracing circle 
      var x = 0;
      var y = 30;
// radius of the tracing circle 
      var radius = 25;
      
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle       
      var startAngle = 2 * Math.PI;
      var endAngle = 2 * Math.PI;
      
// draw the arc clockwise or counterclockwise       
      var counterClockwise = true; // if set to true it draws the complimentary arc
      context.beginPath();

// draw the arc      
      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);
      context.lineWidth = 130;

// line color
      context.strokeStyle = 'rgb(0, 153, 0)';
      context.stroke();
 ////////////////////////// TREE SHRUB row 1

// x and y coordinates of the tracing circle 
      var x = 60;
      var y = 30;
// radius of the tracing circle 
      var radius = 25;
      
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle       
      var startAngle = 2 * Math.PI;
      var endAngle = 2 * Math.PI;
      
// draw the arc clockwise or counterclockwise       
      var counterClockwise = true; // if set to true it draws the complimentary arc
      context.beginPath();

// draw the arc      
      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);
      context.lineWidth = 130;

// line color
      context.strokeStyle = 'rgb(0, 204, 0)';
      context.stroke();
 ////////////////////////// TREE SHRUB row 1

// x and y coordinates of the tracing circle 
      var x = 90;
      var y = 30;
// radius of the tracing circle 
      var radius = 25;
      
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle       
      var startAngle = 2 * Math.PI;
      var endAngle = 2 * Math.PI;
      
// draw the arc clockwise or counterclockwise       
      var counterClockwise = true; // if set to true it draws the complimentary arc
      context.beginPath();

// draw the arc      
      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);
      context.lineWidth = 130;

// line color
      context.strokeStyle = 'rgb(102, 204, 0)';
      context.stroke();
 ////////////////////////// TREE SHRUBrow 1

// x and y coordinates of the tracing circle 
      var x = 120;
      var y = 30;
// radius of the tracing circle 
      var radius = 25;
      
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle       
      var startAngle = 2 * Math.PI;
      var endAngle = 2 * Math.PI;
      
// draw the arc clockwise or counterclockwise       
      var counterClockwise = true; // if set to true it draws the complimentary arc
      context.beginPath();

// draw the arc      
      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);
      context.lineWidth = 130;

// line color
      context.strokeStyle = 'rgb(0, 153, 0)';
      context.stroke();
 ////////////////////////// TREE SHRUB row 1

// x and y coordinates of the tracing circle 
      var x = 150;
      var y = 30;
// radius of the tracing circle 
      var radius = 25;
      
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle       
      var startAngle = 2 * Math.PI;
      var endAngle = 2 * Math.PI;
      
// draw the arc clockwise or counterclockwise       
      var counterClockwise = true; // if set to true it draws the complimentary arc
      context.beginPath();

// draw the arc      
      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);
      context.lineWidth = 130;

// line color
      context.strokeStyle = 'rgb(0, 204, 0)';
      context.stroke();
 ////////////////////////// TREE SHRUB row 1

// x and y coordinates of the tracing circle 
      var x = 180;
      var y = 30;
// radius of the tracing circle 
      var radius = 25;
      
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle       
      var startAngle = 2 * Math.PI;
      var endAngle = 2 * Math.PI;
      
// draw the arc clockwise or counterclockwise       
      var counterClockwise = true; // if set to true it draws the complimentary arc
      context.beginPath();

// draw the arc      
      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);
      context.lineWidth = 130;

// line color
      context.strokeStyle = 'rgb(102, 204, 0)';
      context.stroke();
////////////////////////// TREE SHRUB row 1

// x and y coordinates of the tracing circle 
      var x = 210;
      var y = 30;
// radius of the tracing circle 
      var radius = 25;
      
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle       
      var startAngle = 2 * Math.PI;
      var endAngle = 2 * Math.PI;
      
// draw the arc clockwise or counterclockwise       
      var counterClockwise = true; // if set to true it draws the complimentary arc
      context.beginPath();

// draw the arc      
      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);
      context.lineWidth = 130;

// line color
      context.strokeStyle = 'rgb(0, 153, 0)';
      context.stroke();

////////////////////////// TREE SHRUB row 3

// x and y coordinates of the tracing circle 
      var x = 20;
      var y = 130;
// radius of the tracing circle 
      var radius = 25;
      
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle       
      var startAngle = 2 * Math.PI;
      var endAngle = 2 * Math.PI;
      
// draw the arc clockwise or counterclockwise       
      var counterClockwise = true; // if set to true it draws the complimentary arc
      context.beginPath();

// draw the arc      
      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);
      context.lineWidth = 130;

// line color
      context.strokeStyle = 'rgb(0, 153, 0)';
      context.stroke();
////////////////////////// TREE SHRUB row 3

// x and y coordinates of the tracing circle 
      var x = 60;
      var y = 130;
// radius of the tracing circle 
      var radius = 25;
      
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle       
      var startAngle = 2 * Math.PI;
      var endAngle = 2 * Math.PI;
      
// draw the arc clockwise or counterclockwise       
      var counterClockwise = true; // if set to true it draws the complimentary arc
      context.beginPath();

// draw the arc      
      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);
      context.lineWidth = 130;

// line color
      context.strokeStyle = 'rgb(0, 204, 0)';
      context.stroke();
////////////////////////// TREE SHRUB row 3

// x and y coordinates of the tracing circle 
      var x = 100;
      var y = 130;
// radius of the tracing circle 
      var radius = 25;
      
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle       
      var startAngle = 2 * Math.PI;
      var endAngle = 2 * Math.PI;
      
// draw the arc clockwise or counterclockwise       
      var counterClockwise = true; // if set to true it draws the complimentary arc
      context.beginPath();

// draw the arc      
      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);
      context.lineWidth = 130;

// line color
      context.strokeStyle = 'rgb(102, 204, 0)';
      context.stroke();
 ////////////////////////// TREE SHRUB row 2

// x and y coordinates of the tracing circle 
      var x = 10;
      var y = 80;
// radius of the tracing circle 
      var radius = 25;
      
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle       
      var startAngle = 2 * Math.PI;
      var endAngle = 2 * Math.PI;
      
// draw the arc clockwise or counterclockwise       
      var counterClockwise = true; // if set to true it draws the complimentary arc
      context.beginPath();

// draw the arc      
      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);
      context.lineWidth = 130;

// line color
      context.strokeStyle = 'rgb(0, 204, 0)';
      context.stroke();
////////////////////////// TREE SHRUB row 2

// x and y coordinates of the tracing circle 
      var x = 50;
      var y = 80;
// radius of the tracing circle 
      var radius = 25;
      
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle       
      var startAngle = 2 * Math.PI;
      var endAngle = 2 * Math.PI;
      
// draw the arc clockwise or counterclockwise       
      var counterClockwise = true; // if set to true it draws the complimentary arc
      context.beginPath();

// draw the arc      
      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);
      context.lineWidth = 130;

// line color
      context.strokeStyle = 'rgb(102, 204, 0)';
      context.stroke();
////////////////////////// TREE SHRUB row 2

// x and y coordinates of the tracing circle 
      var x = 90;
      var y = 80;
// radius of the tracing circle 
      var radius = 25;
      
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle       
      var startAngle = 2 * Math.PI;
      var endAngle = 2 * Math.PI;
      
// draw the arc clockwise or counterclockwise       
      var counterClockwise = true; // if set to true it draws the complimentary arc
      context.beginPath();

// draw the arc      
      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);
      context.lineWidth = 130;

// line color
      context.strokeStyle = 'rgb(0, 153, 0)';
      context.stroke();
////////////////////////// TREE SHRUB row 2

// x and y coordinates of the tracing circle 
      var x = 130;
      var y = 80;
// radius of the tracing circle 
      var radius = 25;
      
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle       
      var startAngle = 2 * Math.PI;
      var endAngle = 2 * Math.PI;
      
// draw the arc clockwise or counterclockwise       
      var counterClockwise = true; // if set to true it draws the complimentary arc
      context.beginPath();

// draw the arc      
      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);
      context.lineWidth = 130;

// line color
      context.strokeStyle = 'rgb(0, 204, 0)';
      context.stroke();
////////////////////////// TREE SHRUB row 2

// x and y coordinates of the tracing circle 
      var x = 170;
      var y = 80;
// radius of the tracing circle 
      var radius = 25;
      
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle       
      var startAngle = 2 * Math.PI;
      var endAngle = 2 * Math.PI;
      
// draw the arc clockwise or counterclockwise       
      var counterClockwise = true; // if set to true it draws the complimentary arc
      context.beginPath();

// draw the arc      
      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);
      context.lineWidth = 130;

// line color
      context.strokeStyle = 'rgb(102, 204, 0)';
      context.stroke();
 ////////////////////////// TREE SHRUB row 5

// x and y coordinates of the tracing circle 
      var x = -10;
      var y = 210;
// radius of the tracing circle 
      var radius = 25;
      
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle       
      var startAngle = 2 * Math.PI;
      var endAngle = 2 * Math.PI;
      
// draw the arc clockwise or counterclockwise       
      var counterClockwise = true; // if set to true it draws the complimentary arc
      context.beginPath();

// draw the arc      
      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);
      context.lineWidth = 130;

// line color
      context.strokeStyle = 'rgb(102, 204, 0)';
      context.stroke();

////////////////////////// TREE SHRUB row 4

// x and y coordinates of the tracing circle 
      var x = 0;
      var y = 170;
// radius of the tracing circle 
      var radius = 25;
      
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle       
      var startAngle = 2 * Math.PI;
      var endAngle = 2 * Math.PI;
      
// draw the arc clockwise or counterclockwise       
      var counterClockwise = true; // if set to true it draws the complimentary arc
      context.beginPath();

// draw the arc      
      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);
      context.lineWidth = 130;

// line color
      context.strokeStyle = 'rgb(0, 153, 0)';
      context.stroke();
////////////////////////// TREE SHRUB row 4

// x and y coordinates of the tracing circle 
      var x = 50;
      var y = 170;
// radius of the tracing circle 
      var radius = 25;
      
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle       
      var startAngle = 2 * Math.PI;
      var endAngle = 2 * Math.PI;
      
// draw the arc clockwise or counterclockwise       
      var counterClockwise = true; // if set to true it draws the complimentary arc
      context.beginPath();

// draw the arc      
      context.arc(x, y, radius, startAngle, endAngle,  counterClockwise);
      context.lineWidth = 130;

// line color
      context.strokeStyle = 'rgb(0, 204, 0)';
      context.stroke();

//////////////////////////////////////////
};

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

HTML Canvas Assignment 1

Hello there pals! As I discussed in an earlier post, I learned how to use HTML5 Canvas last week! I posted my favorite tutorials that helped me figure out this program! I was able to put my knowledge to the test in our first HTML5 Canvas assignment for this class. We had to create a three lines, a solid colored square, and a gradient rectangle! It took me multiple tries, but eventually figured it out! Below you will find my art I accomplished! Have a creative and colorful rest of your day. I hope you enjoy my art! See ya real soon!

How to: HTML Canvas

Hello there Pals!

This week I learned how to use HTML5 Canvas. I discovered creating something as simple as a rectangle, square, or letter W is more difficult than it seems. I struggled with attempting to create these shapes in the Dreamweaver Adobe application, but I found some tutorials online to help myself out! It's almost like magic! You can find so much helpful tutorials online for almost anything you might find difficult! Here are a few of my favorite tutorials!


https://www.youtube.com/watch?v=3GqUM4mEYKA
https://www.youtube.com/watch?v=N0BNbngr2IY
https://www.youtube.com/watch?v=uh1Sgj2Gt70
https://www.youtube.com/watch?v=hUCT4b4wa-8
https://www.youtube.com/watch?v=wyaEthRt330


If you ever find yourself needing some help on creating shapes when doing HTML5, hopefully this will be as helpful for you as they were for me!

Well folks, that is all for today!
See ya real soon!