Caligramme assignment

Project #2 Part 2

I chose a masquerade mask to be the main focus of my logo because to me, it symbolizes Halloween and a grand event or party which is what my company is mainly about.  It is recognizable and can be identified when decreased in size.  The mask is a great opportunity to be able to experiment with shape, color, and what is the most aesthetically pleasing.  It can also be large enough to fit the abbreviation of my company.  The mask can also be either feminine or masculine.

Project #2 Part 1

5 Fictional Companies/Products

1) The Taste Buds-Catering Company

2)Art from the Heart-My own art gallery

3)From the Cinema to the Canvas-My own art company that caters to films

4)All Hallows Evenings-Halloween themed event/party company

5)Veronica's Irish Pub- Irish pub company


5 Logos from established Companies




1) Disney- Just the first letter of his last name alone is good enough for a logo for Walt Disney's company. His signature is very well-known all around the world and is recognizable enough when decreased to a smaller size.



2) Universal Studios- This logo works well for this very large and successful film company.  They used a globe to go well with their name Universal. It is a simple shape with slight detail which is also recognizable when decreased to a smaller size.






    
  3)Star Wars-The name of the movie franchise being their logo works very well for this company.  It is simple, to the point, and the font sets it aside from different logos.  With it being in all caps, and with the "S" and "T"elongating together in Star along with the "R" and S" elongating in Wars make it a trademark to Star Wars.

4)Xbox- This logo is great for the company Xbox. They came out with logo to represent their new gaming console the Xbox 360.  The silver sphere represents 360 with the glowing green "X" on top make it a very simple and successful logo.  The color green is also reminiscent to the Xbox company. This logo can also be recognized when decreased to a smaller size.

 5)Starbucks-This company has a very successful logo with it being a simple shape and with them continuing to use their colors being primarily green and white.  Throughout the years they have slightly adjusted their logo by editing out the black but their font has remained the same by being all caps and revolving around the circle shape.  The image of the mermaid like woman with bold lines has always been present to represent the company.  This image also works well to be adjusted in size and still recognizable. 

Project #1

Artist Statement
By creating my image for our first project, I started off by figuring out what kind of background I wanted.  Since the background should be the first layer so that the images can be seen on top, I figured that would be easiest.  I then drew out my trees and the location of the flowers on my graph paper to make deciding the coordinates easier.  To create the trees, I used a combination of bezier and quadratic curves.  The flowers are strictly quadratic curves each with a circle in the center to represent the pollen.  This image is actually inspired by a mixed media painting I did for a recent art show.  I thought it would be interesting to create the digital version.  My piece is successful because I followed the guidelines of creating a landscape or portrait, creating a minimum of 10 shapes, and using bezier and quadratic curves.


var grdstartX=400;
var grdstartY=0;
var grdendX=400;
var grdendY=600;
var startx=0;
var starty=0;
var rectwidth=800;
var rectheight=600;

//Background
context.beginPath();
context.rect(startx, starty, canvas.width, canvas.height);
context.lineWidth=5;
var grd = context.createLinearGradient(grdstartX, grdstartY, grdendX, grdendY);
//dark red
grd.addColorStop( 0, "rgb( 51,0,0)");
//light red
grd.addColorStop( 1,"rgb( 255,0,0)");
context.fillStyle=grd;
context.fill();
context.stroke();
var controlX=200;
var controlY=500;
var endX=150;
var endY=400;
var controlX2=100;
var controlY2=300;
var endX2=150;
var endY2=200;
var controlX3=200;
var controlY3=100;
var endX3=150;
var endY3=25;
var controlX4=125;
var controlY4=375;
var endX4=50;
var endY4=350;
var controlX5=150;
var controlY5=100;
var endX5=50;
var endY5=100;
var controlX6=150;
var controlY6=250;
var controlX7=250;
var controlY7=275;
var endX6=250;
var endY6=200;
//Tree #1
context.beginPath();
context.moveTo(150,600);
context.quadraticCurveTo(controlX, controlY, endX, endY);
context.lineWidth = 15;
context.moveTo(150,400);
context.quadraticCurveTo(controlX2, controlY2, endX2, endY2);
context.moveTo(150,200);
context.quadraticCurveTo(controlX3, controlY3, endX3, endY3);
context.moveTo(170,550);
context.quadraticCurveTo(controlX4, controlY4, endX4, endY4);
context.moveTo(110,400);
context.lineTo(25,410);
context.moveTo(130,250);
context.quadraticCurveTo(controlX5, controlY5, endX5, endY5);
context.moveTo(120,130);
context.lineTo(50,150);
context.moveTo(130,325);
context.bezierCurveTo(controlX6, controlY6, controlX7, controlY7, endX6, endY6);
context.moveTo(240,240);
context.lineTo(300,250);
context.moveTo(175,75);
context.lineTo(210,25);
//tree color
context.strokeStyle = 'brown';
context.stroke();
var controlX=650;
var controlY=500;
var endX=575;
var endY=400;
var controlX2=450;
var controlY2=225;
var endX2=675;
var endY2=50;
var controlX3=550;
var controlY3=350;
var endX3=410;
var endY3=410;
var controlX4=600;
var controlY4=375;
var controlX5=750;
var controlY5=425;
var endX4=750;
var endY4=350;
var controlX6=525;
var controlY6=200;
var endX5=425;
var endY5=200;
var controlX7=560;
var controlY7=200;
var controlX8=710;
var controlY8=225;
var endX6=725;
var endY6=125;
//Tree #2
context.beginPath();
context.moveTo(600,600);
context.quadraticCurveTo(controlX, controlY, endX, endY);
context.lineWidth = 15;
context.moveTo(575,400);
context.quadraticCurveTo(controlX2, controlY2, endX2, endY2);
context.moveTo(600,450);
context.quadraticCurveTo(controlX3, controlY3, endX3, endY3);
context.moveTo(600,450);
context.bezierCurveTo(controlX4, controlY4, controlX5, controlY5, endX4, endY4);
context.moveTo(534,310);
context.quadraticCurveTo(controlX6, controlY6, endX5, endY5);
context.moveTo(530,250);
context.bezierCurveTo(controlX7, controlY7, controlX8, controlY8, endX6, endY6);
context.moveTo(600,125);
context.lineTo(525,75);
context.moveTo(500,382);
context.lineTo(475,450);
//tree color
context.strokeStyle = 'brown';
context.stroke();

var controlX15=700;
var controlY15=140;
var endX15=710;
var endY15=110;
var controlX16=700;
var controlY16=75;
var endX16=730;
var endY16=90;
var controlX17=770;
var controlY17=50;
var endX17=760;
var endY17=90;
var controlX18=790;
var controlY18=125;
var endX18=760;
var endY18=125;
var controlX19=750;
var controlY19=150;
var endX19=725;
var endY19=125;
//Flower #3
context.beginPath();
context.moveTo(725,125);
context.quadraticCurveTo(controlX15, controlY15, endX15, endY15);
context.quadraticCurveTo(controlX16, controlY16, endX16, endY16);
context.quadraticCurveTo(controlX17, controlY17, endX17, endY17);
context.quadraticCurveTo(controlX18, controlY18, endX18, endY18);
context.quadraticCurveTo(controlX19, controlY19, endX19, endY19);
context.lineWidth=5;
//Flower color
context.fillStyle='white';
context.fill();
context.strokeStyle='white';
context.stroke();
var centerX=740;
var centerY=110;
var radius=5;
//Center of flower #3
context.beginPath();
context.arc(centerX, centerY, radius, 0 , 2 * Math.PI, false);
context.fillStyle='yellow';
context.fill();
context.lineWidth=3;
context.strokeStyle='red';
context.stroke();
var controlX10=390;
var controlY10=450;
var endX10=375;
var endY10=400;
var controlX11=300;
var controlY11=400;
var endX11=350;
var endY11=350;
var controlX12=375;
var controlY12=300;
var endX12=400;
var endY12=350;
var controlX13=450;
var controlY13=300;
var endX13=450;
var endY13=360;
var controlX14=500;
var controlY14=375;
var endX14=440;
var endY14=400;
//flower #2
context.beginPath();
context.moveTo(440,400);
context.quadraticCurveTo(controlX10, controlY10, endX10, endY10);
context.quadraticCurveTo(controlX11, controlY11, endX11, endY11);
context.quadraticCurveTo(controlX12, controlY12, endX12, endY12);
context.quadraticCurveTo(controlX13, controlY13, endX13, endY13);
context.quadraticCurveTo(controlX14, controlY14, endX14, endY14);
context.lineWidth=5;
context.fillStyle='white';
context.fill();
context.strokeStyle='white';
context.stroke();
var centerX=400;
var centerY=375;
var radius=10;
//Center of flower #2
context.beginPath();
context.arc(centerX, centerY, radius, 0 , 2 * Math.PI, false);
context.fillStyle='yellow';
context.fill();
context.lineWidth=3;
context.strokeStyle='red';
context.stroke();
var controlX20=10;
var controlY20=375;
var endX20=25;
var endY20=325;
var controlX21=0;
var controlY21=260;
var endX21=50;
var endY21=275;
var controlX22=100;
var controlY22=250;
var endX22=75;
var endY22=310;
var controlX23=110;
var controlY23=330;
var endX23=70;
var endY23=340;
var controlX24=75;
var controlY24=370;
var endX24=50;
var endY24=350;
//Flower #4
context.beginPath();
context.moveTo(50,350);
context.quadraticCurveTo(controlX20, controlY20, endX20, endY20);
context.quadraticCurveTo(controlX21, controlY21, endX21, endY21);
context.quadraticCurveTo(controlX22, controlY22, endX22, endY22);
context.quadraticCurveTo(controlX23, controlY23, endX23, endY23);
context.quadraticCurveTo(controlX24, controlY24, endX24, endY24);
context.lineWidth=5;
context.fillStyle='white';
context.fill();
context.strokeStyle='white';
context.stroke();

var centerX=50;
var centerY=315;
var radius=10;

//Center of flower #4
context.beginPath();
context.arc(centerX, centerY, radius, 0 , 2 * Math.PI, false);
context.fillStyle='yellow';
context.fill();
context.lineWidth=3;
context.strokeStyle='red';
context.stroke();

var controlX1=175;
var controlY1=225;
var endX1=200;
var endY1=150;
var controlX2=175;
var controlY2=50;
var endX2=250;
var endY2=100;
var controlX3=300;
var controlY3=50;
var endX3=300;
var endY3=100;
var controlX4=350;
var controlY4=125;
var endX4=300;
var endY4=175;
var controlX5=300;
var controlY5=225;
var endX5=250;
var endY5=200;
//Flower #1
context.beginPath();
context.moveTo(250,200);
context.quadraticCurveTo(controlX1, controlY1, endX1, endY1);
context.quadraticCurveTo(controlX2, controlY2, endX2,endY2);
context.quadraticCurveTo(controlX3, controlY3, endX3, endY3);
context.quadraticCurveTo(controlX4, controlY4, endX4, endY4);
context.quadraticCurveTo(controlX5, controlY5, endX5, endY5);
context.lineWidth = 5;
//Flower color
context.fillStyle='white';
context.fill();
context.strokeStyle='white';
context.stroke();

//Center of flower#1
var centerX=250;
var centerY=150;
var radius=15;
context.beginPath();
context.arc(centerX, centerY, radius, 0 , 2 * Math.PI, false);
context.fillStyle='yellow';
context.fill();
context.lineWidth=3;
context.strokeStyle='red';
context.stroke();

Heart 2

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

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

var controlX1=300;
var controlY1=0;
var controlX2=100;
var controlY2=200;
var endX=250;
var endY=325;

var controlX3=380;
var controlY3=400;
var endX2=400;
var endY2=500;

var controlX4=435;
var controlY4=400;
var endX3=550;
var endY3=325;

var controlX5=700;
var controlY5=200;
var controlX6=500;
var controlY6=0;
var endX4=400;
var endY4=200;

var grdstartX=400;
var grdstartY=0;
var grdendX=400;
var grdendY=600;

//Rectangle
context.beginPath();
context.rect(0, 0, 800, 600);
var grd = context.createLinearGradient(grdstartX, grdstartY, grdendX, grdendY);
//Purple
grd.addColorStop(0, 'rgb(255,0,255)');
//Blue
grd.addColorStop(1, 'rgb(0,0,255)');
context.fillStyle= grd;
context.fill();
context.stroke();

//Heart
context.beginPath();
context.moveTo( 400,200 );
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
context.quadraticCurveTo(controlX3, controlY3, endX2, endY2);
context.quadraticCurveTo(controlX4, controlY4, endX3, endY3);
context.bezierCurveTo(controlX5, controlY5, controlX6, controlY6, endX4, endY4);
context.fillStyle= 'rgb(255,180,180)';
context.fill();
context.lineWidth=5;
context.lineCap='round';
context.strokeStyle='rgb(20,20,255)'
context.stroke();

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

};

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

Heart Assignment

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

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

context.beginPath();
context.moveTo(50, 300);
context.quadraticCurveTo(100, 200, 200, 300);
context.lineWidth = 20;
// line color
context.strokeStyle = "red";
context.stroke();

context.beginPath();
context.moveTo(200,300);
context.quadraticCurveTo(300, 200, 350, 300);
context.lineWidth = 20;
// line color
context.strokeStyle = "red";
context.stroke();

context.beginPath();
context.moveTo(50, 300);
context.bezierCurveTo(50, 500, 150, 425, 200, 500);
context.lineWidth = 20;
// line color
context.strokeStyle = "red";
context.stroke();

context.beginPath();
context.moveTo(350, 300);
context.bezierCurveTo(350, 500, 275, 425, 200, 500);
context.lineWidth = 20;
// line color
context.strokeStyle = "red";
context.stroke();


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

};

</script>
</head>