Beads of a Feather

For my logo i decided to go with a company that i have always been interested in doing which is called Bead Of A Feather. I had a lot of fun creating this logo on illustrator. I wanted it to have a soft feel to it and contain qualities that appeal to my age group. I think my favorite part of it is the aztec feather i created to the right of the piece, this probably took the most time. Although i have used illustrator before, i am very rusty and it was a lot of fun being able to fool around with it. I chose soft pastel colors for the logo to go along with the bohemian feel of the brand that I was trying to go for.

Butterfly Caligramme

       For my caligramme I decided to do a butterfly! created with words and phrases having to
do with butterfies. I didn't choose is for any specific reason other than that i love butterflies.

Logo ideas

Logo Critique

The Starbucks logo features a twin tailed mermaid, which is a symbol in greek mythology. Although I love Starbucks, and it is a symbol that I recognize anywhere, I never really got how the mermaid correlated with their coffee brand. Then I thought maybe the logo is nice in the sense that it can mean something different to every viewer. The logo and company itself attracts ages ranging from young adult to middle aged, and i think they do a great job at reaching this audience. The simple green earth tone is relaxing to look at, and there is a classiness yet simplicity to the style of the logo itself. I think there are successful for these reasons precisely... along with the fact that they do coffee right.

The Audi logo has four rings to represent the four car makers that merged to create the company. The rings themselves look sharp and as if they are made out of chrome. The logo itself definitely appeals to middle aged to older men or women. I think that the logo is extremely successful because it has this clean edginess about it that brings about feelings of power and strength.

The nike logo is extremely simple yet very memorable at the same time. It appeals to a wide variety of ages because of this reason. It has this feeling of swiftness to it and that is why it goes along so great with a sports brand. It goes without saying that there is power behind simplicity.  It is so successful because of how easy it is to remember and also by how often the sign appears int heir merchandise.

The Music television logo or otherwise known as MTV is well known among young adults. In the beginning, the MTV channel itself was aired to only show music videos. Nowadays there are several other types of shows casted on the channel. Over the years they have been able to keep the classic "MTV"the same but by also spicing it up with new colors and patterns. This way they keep the classics but introduce new flavor to it.

The Instagram logo has become one of the most popular logos in digital media. It appeals to mostly ages ranging from young teens to young adults. It pictures a vintage polaroid camera. I think that this idea really works for them because teens like the idea of having this "retro" camera.  Also, when you think about the idea of a polaroid.. It is a supposed to be a camera that allows you to capture pictures to keep as memories. So in a sense, it really does go along with the whole idea of Instagram itself.

Company Ideas!

Picture Perfect Nails: Nail company. ( bring a picture in and they will turn it into sticker art for your nails).

Son Of A Beach: Tanning salon

Beads of a feather: Company that makes organic jewelry out of feathers.( pun, instead of birds of a feather)

Boho homes: Bohemian home decorators

FroZen creations: A froyo place that has a zen environment

Dream Catcher

 "You may say i'm a dreamer, but i'm not the only one".  Ever since I was little I have always kept a dream catcher hanging over my bed, and even to this day I wear a dream catcher necklace that i never take off. Needless to say, it is an object that i have always kept dear in my life, which is why i chose to do it for this project. At first i was a little frustrated working with html because numbers and i do not get along. However, after fooling around with it for an hour or so.. i sort found myself kind of attached to the computer.  I think that some positive aspects of this project might be the detail in the dream catcher itself and the layering techniques i used. Some negative aspects might be that i could have included more detail and depth into it, two things that i found a little difficult to do. However, for my first attempt at html, i think that i did pretty well.




// background!!
context.rect(0, 0, canvas.width, canvas.height);
// create radial gradient
var grd = context.createRadialGradient(238, 50, 10, 238, 50, 300);
// light blue
grd.addColorStop(0, 'rgb(10, 80, 100)');
// dark blue
 grd.addColorStop(1, 'rgb(200, 230, 200)');
context.fillStyle = grd;
context.fill();

//outer circle
var centerX = canvas.width / 2;
var centerY = canvas.height / 3;
var radius = 140;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 20;
context.strokeStyle = 'rgb(150, 100, 100)';
context.stroke();
//circle outline
var centerX = canvas.width / 2;
var centerY = canvas.height / 3;
var radius = 150;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 3;
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();

//middle circle
var centerX = canvas.width / 2;
var centerY = canvas.height / 3;
var radius = 130;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 4;
context.strokeStyle = 'rgb(150, 100, 100)';
context.stroke();
//inner cirlce outline
var centerX = canvas.width / 2;
var centerY = canvas.height / 3;
var radius = 130;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 3;
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();

// inner circle
var centerX = canvas.width / 2;
var centerY = canvas.height / 3;
var radius = 30;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 2;
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();

// fourth cirle in
var centerX = canvas.width / 2;
var centerY = canvas.height / 3;
var radius = 60;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 2;
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();

// third circle in
var centerX = canvas.width / 2;
var centerY = canvas.height / 3;
var radius = 90;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 1;
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();

//top left curve
context.beginPath();
context.moveTo(375, 70);
context.quadraticCurveTo(440, 255, 295, 120);
context.lineWidth = 2;
 // line color
context.strokeStyle = 'black';
context.stroke();

//top center curve
context.beginPath();
context.moveTo(460, 85);
context.quadraticCurveTo(390, 260, 360, 75);
context.lineWidth = 2;
// line color
context.strokeStyle = 'black';
context.stroke();
//
//top right curve
context.beginPath();
context.moveTo(440, 75);
context.quadraticCurveTo(350, 245, 510, 130);
context.lineWidth = 2;
// line color
context.strokeStyle = 'black';
context.stroke();
//

// right middle curve
context.beginPath();
context.moveTo(500, 114);
context.quadraticCurveTo(345, 215, 525, 230);
context.lineWidth = 2;
// line color
context.strokeStyle = 'black';
context.stroke();

// bottom right curve
context.beginPath();
context.moveTo(530, 210);
context.quadraticCurveTo(330, 195, 480, 300);
context.lineWidth = 2;
// line color
context.strokeStyle = 'black';
context.stroke();

//bottom curve
context.beginPath();
context.moveTo(400, 330);
context.quadraticCurveTo(360, 145, 495, 290);
context.lineWidth = 2;
// line color
context.strokeStyle = 'black';
context.stroke();

// bottom left curve
context.beginPath();
context.moveTo(320, 300);
context.quadraticCurveTo(400, 140, 420, 330);
context.lineWidth = 2;
// line color
context.strokeStyle = 'black';
context.stroke();

// left left bottom curve
context.beginPath();
context.moveTo(336, 315);
context.quadraticCurveTo(450, 165, 280, 242);
context.lineWidth = 2;
// line color
context.strokeStyle = 'black';
context.stroke();

// last curve
context.beginPath();
context.moveTo(300, 118);
context.quadraticCurveTo(450, 180, 280, 258);
context.lineWidth = 2;
// line color
context.strokeStyle = 'black';
context.stroke();

// green bead
var centerX = canvas.width / 2.4;
var centerY = canvas.height / 4;     
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(10,80,90)';
context.fill();
context.lineWidth = 2;
context.strokeStyle = '#003300';
context.stroke();

// pink bead
var centerX = canvas.width / 2.53;  
var centerY = canvas.height / 4.3;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(200, 100, 100)';
context.fill();
context.lineWidth = 2;
context.strokeStyle = '#003300';
context.stroke();

//  maroon bead
var centerX = canvas.width / 1.68;  
var centerY = canvas.height / 2.5;  
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(200, 30, 100)';
context.fill();
context.lineWidth = 2;
context.strokeStyle = '#003300';
context.stroke();

// right string
context.beginPath();
context.moveTo(530, 440);
context.quadraticCurveTo(515, 350, 480, 320);
context.lineWidth = 10;
 // line color
context.strokeStyle = 'rgb(150, 100, 100)';
context.stroke();

// middle string
context.beginPath();
context.moveTo(400, 350);
context.quadraticCurveTo(390, 320, 400, 470);
context.lineWidth = 10;
 // line color
context.strokeStyle = 'rgb(150, 100, 100)';
context.stroke();

//left string
context.beginPath();
context.moveTo(330, 330);
context.quadraticCurveTo(310, 320, 270, 430);
context.lineWidth = 10;
 // line color
context.strokeStyle = 'rgb(150, 100, 100)';
context.stroke();

//right feather
// right of feather
context.beginPath();
context.moveTo(200, 570);
context.quadraticCurveTo(320, 540, 270, 420);
context.lineWidth = 2;
 // line color
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
// left of feather
context.beginPath();
context.moveTo(200, 570);
context.quadraticCurveTo(180, 500, 280, 420);
context.lineWidth = 2;
 // line color
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
//middle string
context.beginPath();
context.moveTo(200, 570);
context.quadraticCurveTo(280, 470, 270, 435);
context.lineWidth = 2;
 // line color
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
//middle string
context.beginPath();
context.moveTo(200, 570);
context.quadraticCurveTo(265, 470, 270, 435);
context.lineWidth = 2;
 // line color
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();

//middle feather
//right of the feather
context.beginPath();
context.moveTo(398, 450);
context.quadraticCurveTo(470, 520, 450, 580);
context.lineWidth = 2;
 // line color
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
//left of the feather
context.beginPath();
context.moveTo(400, 460);
context.quadraticCurveTo(370, 560, 450, 580);
context.lineWidth = 2;
 // line color
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
 //middle lines
context.beginPath();
context.moveTo(400, 460);
context.quadraticCurveTo(470, 600, 445, 580);
context.lineWidth = 2;
 // line color
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
 //second middle line
context.beginPath();
context.moveTo(400, 460);
context.quadraticCurveTo(460, 600, 445, 580);
context.lineWidth = 2;
 // line color
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();


//right feather
// left of feather
context.beginPath();
context.moveTo(530, 430);
context.quadraticCurveTo(490, 510, 630, 550);
context.lineWidth = 2;
 // line color
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
//right of feather
context.beginPath();
context.moveTo(530, 430);
context.quadraticCurveTo(580, 430, 630, 550);
context.lineWidth = 2;
 // line color
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
//middle line
context.beginPath();
context.moveTo(540, 430);
context.quadraticCurveTo(480, 410, 630, 550);
context.lineWidth = 2;
 // line color
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();
//second middle line
context.beginPath();
context.moveTo(540, 430);
context.quadraticCurveTo(490, 410, 630, 550);
context.lineWidth = 2;
 // line color
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();

// blue left bead
var centerX = canvas.width / 2.95;  
var centerY = canvas.height / 1.4;  
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(200, 200, 200)';
context.fill();
context.lineWidth = 2;
context.strokeStyle = '#003300';
context.stroke();
// left dark blue bead
var centerX = canvas.width / 2.89;  
var centerY = canvas.height / 1.45;  
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(100, 100, 180)';
context.fill();
context.lineWidth = 2;
context.strokeStyle = '#003300';
context.stroke();

//middle bottom bead
var centerX = canvas.width / 1.99;  
var centerY = canvas.height / 1.3;  
var radius = 9;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(20, 90, 110)';
context.fill();
context.lineWidth = 2;
context.strokeStyle = '#003300';
context.stroke();
//middle top bead
var centerX = canvas.width / 2.01;  
var centerY = canvas.height / 1.35;  
var radius = 9;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(200, 200, 200)';
context.fill();
context.lineWidth = 2;
context.strokeStyle = '#003300';
context.stroke();

//right beads
var centerX = canvas.width / 1.51;  
var centerY = canvas.height / 1.39;  
var radius = 9;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(200, 200, 200)';
context.fill();
context.lineWidth = 2;
context.strokeStyle = '#003300';
context.stroke();
//top bead
var centerX = canvas.width / 1.52;  
var centerY = canvas.height / 1.44;  
var radius = 8;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(100, 100, 180)';
context.fill();
context.lineWidth = 2;
context.strokeStyle = '#003300';
context.stroke();

//dream catcher detail
var centerX = canvas.width / 2.76;  
var centerY = canvas.height / 2.08;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 2.64;  
var centerY = canvas.height / 2;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 2.52;  
var centerY = canvas.height / 1.92;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 2.39;  
var centerY = canvas.height / 1.85;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 2.26;  
var centerY = canvas.height / 1.81;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 2.14;  
var centerY = canvas.height / 1.78;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 2.03;  
var centerY = canvas.height / 1.77;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 1.93;  
var centerY = canvas.height / 1.77;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke()

var centerX = canvas.width / 1.84;  
var centerY = canvas.height / 1.79;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke()

var centerX = canvas.width / 1.76;  
var centerY = canvas.height / 1.82;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke()

var centerX = canvas.width / 1.69;  
var centerY = canvas.height / 1.87;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke()

var centerX = canvas.width / 1.69;  
var centerY = canvas.height / 1.87;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke()

var centerX = canvas.width / 1.63;  
var centerY = canvas.height / 1.95;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke()

var centerX = canvas.width / 1.59;  
var centerY = canvas.height / 2.04;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke()

var centerX = canvas.width / 1.55;  
var centerY = canvas.height / 2.14;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke()

var centerX = canvas.width / 1.52;  
var centerY = canvas.height / 2.29;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke()

var centerX = canvas.width / 1.50;  
var centerY = canvas.height / 2.45;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 1.49;  
var centerY = canvas.height / 2.67;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 1.48;  
var centerY = canvas.height / 2.92;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 1.48;  
var centerY = canvas.height / 3.25;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 1.49;  
var centerY = canvas.height / 3.67;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 1.51;  
var centerY = canvas.height / 4.2;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 1.54;  
var centerY = canvas.height / 4.8;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 1.58;  
var centerY = canvas.height / 5.5;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 1.62;  
var centerY = canvas.height / 6.29;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 1.68;  
var centerY = canvas.height / 7.23;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 1.74;  
var centerY = canvas.height / 8.28;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 1.82;  
var centerY = canvas.height / 9;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 1.91;  
var centerY = canvas.height / 9.6;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 2.01;  
var centerY = canvas.height / 9.9;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 2.12;  
var centerY = canvas.height / 9.82;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 2.24;  
var centerY = canvas.height / 9.1;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 2.36;  
var centerY = canvas.height / 8.32;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 2.49;  
var centerY = canvas.height / 7.2;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 2.62;  
var centerY = canvas.height / 6.3;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 2.74;  
var centerY = canvas.height / 5.5;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var centerX = canvas.width / 2.85;  
var centerY = canvas.height / 4.8;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var context = canvas.getContext('2d');
var centerX = canvas.width / 2.93;  
var centerY = canvas.height / 4.2;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var context = canvas.getContext('2d');
var centerX = canvas.width / 3.0;  
var centerY = canvas.height / 3.7;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var context = canvas.getContext('2d');
var centerX = canvas.width / 3.06;  
var centerY = canvas.height / 3.3;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var context = canvas.getContext('2d');
var centerX = canvas.width / 3.07;  
var centerY = canvas.height / 2.97;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var context = canvas.getContext('2d');
var centerX = canvas.width / 3.07;  
var centerY = canvas.height / 2.7;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var context = canvas.getContext('2d');
var centerX = canvas.width / 3.;  
var centerY = canvas.height / 2.48;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var context = canvas.getContext('2d');
var centerX = canvas.width / 2.93;  
var centerY = canvas.height / 2.34;  
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var context = canvas.getContext('2d');
var centerX = canvas.width / 2.85;  
var centerY = canvas.height / 2.2;  
var radius = 9.7;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);     
context.fillStyle = 'rgb(150, 100, 100)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#003300';
context.stroke();

var x = 400;
var y = 400;
var controlx = 200;
var controly = 10;
var endx = 400;
var endy = 200;

var x2 = 400;
var y2 = 400;
var controlx2 = 600;
var controly2 = 30;
var endx2 = 400;
var endy2 = 200;


context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(controlx, controly, endx, endy);
context.quadraticCurveTo(controlx2, controly2, x, y);
context.closePath();
context.lineWidth = 15;
context.fillStyle = 'rgb(255, 0, 0)';
context.fill();
context.strokeStyle = 'rgb(100, 0, 0)';
context.stroke();