Sunday, September 23, 2012

Project 2: Logo Part 1




ARC ANGEL GOLF TRAINING AIDS, INC.


 -ALIGN A PUTT - PUTTING TRAINER
-ARC ANGEL - SWING ARC BULDER >“Endorsed by God”
-GYROSCOPIC PIVOT TRAINER
-TURN IN A BARRELL ROTATOR
-THE STRAIGHT JACKET SWING CONNECTOR
THE WORLDS BEST GOLF TRAINING AIDS!

Critiqing Logo's






            Dell computers have a strong logo with its “E” in a shape of a diamond and with two black lines. Its visibility is simple; when it is shrunk down and or put on a computer it is still obvious that it is a dell logo. It also has strong durability by having this logo since the company first started and made it known by commercials and labeling it on front of computers.

Sony’s visibility is strong because when it is shrunk down to fit on products it is still visible to be known as a Sony product. Sony has strong durability and a made a well-known name for themselves in electronics.

Harley Davidson has a strong logo and is recognized by the colors used outlining the logo. When it is shrunk down it would still be recognized by the bright orange and the shapes used. Harley Davidson is known for their motorcycles, trucks, and other products such as clothing.  

Virgin Mobile made a strong logo by having an oblique circle and an oval shape intersecting through it. It is durable and if it is shrunken down the hot pink is still noticeable with the odd shaped “V” and the line underneath it makes this logo its own for Virgin Mobile. 

Southwest Airlines has a strong logo due to its bright colors such as blue and red filling in the airplane and with the capital bold letters. I don’t think the words will be as visible when it’s a smaller size but the airplane would. Its durability is strong also because Southwest Airlines has had this logo since the beginning. Its usability can be useful on airplane tickets, traveling websites, and actual airplanes.  

Tuesday, September 18, 2012

Project 1: Mr. Snowman!




I finally completed my canvas project and it turned out just the way I pictured it in my head. I love the winter time and this picture I created reminds me of the first time I built a snowman and played in the snow. Each day adding more shapes, curves, and lines to my project it became clearer how to use each code, what it represents and where to place them exactly on my canvas by using high and low numbers as variables. 


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

////////////////////////////////////// start below this line ??????????

//Rectangle
context.beginPath();
context.rect(0, 0, canvas.width, canvas.height);
context.lineWidth = 6;
context.strokeStyle = 'grey';
context.stroke();


//Sky
context.beginPath();
context.rect(0, 0, canvas.width, canvas.height/2.1);
context.fillStyle = 'rgb(135,206,250)';
context.fill();
context.lineWidth = 6;
context.strokeStyle = 'grey';
context.stroke();


//Sun
context.beginPath();
context.arc(800, 50, 65, 0 , 2 * Math.PI, false);
context.lineWidth = 10;
context.fillStyle = 'rgb(255,200,0)';
context.fill();
context.strokeStyle = 'orange';
context.stroke();


/////Snowman Body////

//Circle 1 Bottom
context.beginPath();
context.arc(400, 456, 100, 0 , 2 * Math.PI, false);
context.lineWidth = 5;
context.fillStyle = 'rgb(255,255,255)'
context.fill();
context.strokeStyle = 'grey';
context.stroke();

//Circle 2 Middle
context.beginPath();
context.arc(400, 280, 80, 0 , 2 * Math.PI, false);
context.lineWidth = 5;
context.fillStyle = 'rgb(255,255,255)'
context.fill();
context.strokeStyle = 'grey';
context.stroke();

//Circle 2 Top
context.beginPath();
context.arc(400, 135, 68, 0 , 2 * Math.PI, false);
context.lineWidth = 5;
context.fillStyle = 'rgb(255,255,255)'
context.fill();
context.strokeStyle = 'grey';
context.stroke();

///Snowman Face////

//LEFT EYE
context.beginPath();
context.arc(380, 115, 10, 0, 2*Math.PI, false);
var grd=context.createRadialGradient(400, 300, 50, 400, 300, 200);
grd.addColorStop(0, 'rgb(0, 0, 0)');
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'rgb(0,0,0)';
context.stroke();

//Right EYE
context.beginPath();
context.arc(420, 118, 10, 0, 2*Math.PI, false);
var grd=context.createRadialGradient(400, 300, 50, 400, 300, 200);
grd.addColorStop(0, 'rgb(0, 0, 0)');
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'rgb(0,0,0)';
context.stroke();

//Nose
context.beginPath();
context.moveTo(350, 140);
context.lineTo(400, 150);
context.lineJoin = "round";
context.strokeStyle = 'orange'
context.lineWidth = 7;
context.stroke();

//Mouth
context.beginPath();
context.moveTo(408,169.8);
context.bezierCurveTo(440, 190, 330, 175, 410, 170);
context.strokeStyle = 'red'
context.lineWidth = 5;
context.stroke();

////Arms////

//Right Arm
context.beginPath();
context.moveTo(480,270);
context.lineTo(600,200);
context.strokeStyle = 'rgb(239,125,11)';
context.stroke();

//Little Stick 1
context.beginPath();
context.moveTo(530,240);
context.lineTo(550,180);
context.strokeStyle = 'rgb(239,125,11)';
context.stroke();

//Little Stick 2
context.beginPath();
context.moveTo(533,240);
context.lineTo(610,240);
context.strokeStyle = 'rgb(239,125,11)';
context.stroke();

//Left Arm
context.beginPath();
context.moveTo(322,270);
context.lineTo(220,190);
context.stroke();

//Little Stick 1
context.beginPath();
context.moveTo(280,235);
context.lineTo(280,180);
context.strokeStyle = 'rgb(239,125,11)';
context.stroke();

//Little Stick 2
context.beginPath();
context.moveTo(280,238);
context.lineTo(210,240);
context.strokeStyle = 'rgb(239,125,11)';
context.stroke();

//Buttons///

//Button 1
context.beginPath();
context.arc(400, 250, 3, 0, 2*Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0,0,0)';
context.stroke();

//Button 2
context.beginPath();
context.arc(400, 280, 3, 0, 2*Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0,0,0)';
context.stroke();

//Button 3
context.beginPath();
context.arc(400, 310, 3, 0, 2*Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0,0,0)';
context.stroke();


//Hat
context.beginPath();
context.moveTo(468,80);
context.lineTo(330,80);
context.rect(356.5, 20, 85, 60);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.lineWidth = 8;
context.strokeStyle = 'black'
context.stroke();

//House
context.beginPath();
context.rect(10, 140, 180, 150);
context.fillStyle = 'rgb(220,120,50)';
context.strokeStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();

//Door
context.beginPath();
context.rect(86, 235, 30, 50);
context.fillStyle = 'rgb(180,0,0)';
context.fill();
context.stroke();

//Window 1
context.beginPath();
context.rect(30, 160, 40, 50);
context.moveTo(70,185);
context.lineTo(30,185);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

//Window 2
context.beginPath();
context.rect(130, 160, 40, 50);
context.moveTo(170,185);
context.lineTo(130,185);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();

//Roof
context.beginPath();
context.moveTo(100,50);
context.lineTo(190,140);
context.lineTo(20,140);
context.lineTo(6,140);
context.strokeStyle = 'rgb(100,0,0)';
context.fillStyle = 'rgb(100,0,0)';
context.fill();
context.stroke();

//Roof Window
context.beginPath();
context.moveTo(65,142);
context.quadraticCurveTo(105, 80, 140, 142);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.strokeStyle = 'rgb(0,0,0)';
context.stroke();

//Tree Stump
context.beginPath();
context.rect(695, 260, 20, 28);
context.fillStyle = 'rgb(239,125,11)';
context.fill();
context.strokeStyle = 'rgb(239,125,11)';
context.stroke();

//Tree
context.beginPath();
context.moveTo(700,180);
context.lineTo(750,250);
context.lineTo(660,250);
context.lineTo(700,180);
context.lineCap = 'round';
context.fillStyle = 'green';
context.fill();
context.strokeStyle = 'green';
context.stroke();

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

};

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

Monday, September 10, 2012

My Heart!

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

////////////////////////////////////// start below this line ??????????


//Quadratic Curve
context.beginPath();
context.moveTo(315,400);
context.quadraticCurveTo(115, 5, 410, 230);
context.lineWidth = 19;
context.fillStyle = 'rgb(100, 25, 155)';
context.fill();
context.stroke();

//Quadratic Curve
context.beginPath();
context.moveTo(500,400)
context.quadraticCurveTo(715, 5, 410, 230);
context.lineWidth = 19;
context.fillStyle = 'rgb(200, 0, 155)';
context.fill();
context.stroke();

//Bezier Curve
context.beginPath();
context.moveTo(312,395);
context.bezierCurveTo(450, 600, 380, 580, 500, 399);
context.lineWidth = 19;
context.fillStyle = 'rgb(255, 0, 100)';
context.fill();
context.stroke();


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

};

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

The Digital Era

In Mass Media and Society I read a section about the digital era that reminded me about what we learned in the first week of class. In digital communication images, texts, and sounds are converted or encoded into electronic signals represented as binary numbers that are than reassembled as a precise reproduction of a TV picture, a magazine article, a song or even a telephone voice.