Monday, September 24, 2012

Logos


5 Fictional Companies:

WWJR (What Would Jesus Ride) – I love snowboarding, long boarding, surfing, wake boarding and kite boarding…any kind of boarding. WWJR would be your traditional board maker. I think the play on words from “what would Jesus do” would attract a younger audience, the only problem would be making logos and designs that play on the name with out boarding on the line of blasphemy.

Snow Bum – Another snowboarding company. However, this company would specialize in all snowboarding apparel (gloves, hats, goggles, etc.). The idea behind this company would be to “love the mountain and love the snow”.

Spazz- All college students and working adults know there are times when coffee won’t get the job done. Spazz is just what it sounds like, an energy drink that will get you going!

Veritas –This fragrance line for men is available in a variety of scents. Like its name, Veritas, not only smells great, but it will continue to smell great and outlast other colognes. The slogan might be something like, “Veritas: why not smell great?”

Diuntless – (pronounced “dauntless”) Based on fashion by Hugo Boss and Dolce and Gabbana, this is a stylish and modern clothing line for men. Unlike other designer clothing companies, this company features affordable styles with available sizes for everyone (boys-men).


5 Real Logos:

Burton – Burton is a snowboarding company that specializes in boards. The Burton logo is a simple arrow, but is often mistaken for a “G”. Regardless, anyone who has basic knowledge of snowboarding knows the Burton logo anywhere.

Quicksilver – Quicksilver is surfing company. Unmistakable by its wave-like pattern, Quicksilver is company that cannot be confused with anything else.

RVCA – RVCA is also a skate company. RVCA’s logo is simply the letters, however, there is a common mistake made by people who are not familiar with this brand. The name is often pronounced “R-V-C-A” and appears that way on all the clothing, however, the “V” is actually a “U” and it is pronounced “RUCA”. I don’t know if this common misconception hurts the company in any way, but if you know what it is, skaters may feel like they are part of a special group that knows the secret.

Adidas – although Adidas has changed its signature logo multiple times in order to adapt to new clothing and shoe trends, no one can mistake the three-color stripes for anything but Adidas.













New York Yankees – the logo for this baseball team is a simple, overlapping NY. Because the Yankees are such a dynasty and marketing powerhouse throughout the world, even non-baseball fans can identify this world-renowned logo (It is the second second most-recognozed logo in the world) 





Tuesday, September 18, 2012







Here is my picture! I didn't really know what I wanted to create, but for some reason I really wanted to make mountains, so I decided to make a desert-type landscape with mountains. I also included a house, hills, trees, river and a sun. I'm not very good at coding, so I am sure I made this much harder on myself than it needed to be...but I am happy with it!


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

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var grdstartX = 500
var grdstartY = 10
var grdendX = 500
var grdendY = 600

//Rectangle
context.beginPath();
context.rect(0, 0, canvas.width, canvas.height);
var grd = context.createLinearGradient(grdstartX, grdstartY, grdendX, grdendY);
//Yellow
grd.addColorStop(0, 'rgb(255, 255, 255)');
//white
grd.addColorStop(1, 'rgb(255, 200, 50)');
context.fillStyle = grd;
context.fill();
context.stroke();

//Mountains

context.beginPath();
context.moveTo(0,250);
context.lineTo(200,100);
context.lineWidth = 3
context.strokeStyle = 'brown'
context.stroke();

context.beginPath();
context.moveTo(200,100);
context.lineTo(300,190);
context.lineWidth = 3
context.strokeStyle = 'brown'
context.stroke();

context.beginPath();
context.moveTo(200,300);
context.lineTo(400,75);
context.lineWidth = 3
context.strokeStyle = 'brown'
context.stroke();

context.beginPath();
context.moveTo(400,70);
context.lineTo(600,300);
context.lineWidth = 3
context.strokeStyle = 'brown'
context.stroke();

context.beginPath();
context.moveTo(570,270);
context.lineTo(670,200);
context.lineWidth = 3
context.strokeStyle = 'brown';
context.stroke();

context.beginPath();
context.moveTo(670,200);
context.lineTo(800,270);
context.lineWidth = 3
context.strokeStyle = 'brown';
context.stroke();

//Sun
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 3;
var centerY = canvas.height / 3;
var radius = 50;

context.beginPath();
context.arc(700, 100, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'orange';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'orange';
context.stroke();

var x1 = 0;
var y1 = 400;
var x2 = canvas.width/2;

var controlX = 200;
var controlY = 200;
var endY = canvas.height;


for (var i=0; i<canvas.width/2; i+=10){

context.beginPath();
context.moveTo(x1, y1);
context.quadraticCurveTo(controlX, controlY, i, endY);
context.strokeStyle = 'blue'
context.stroke();

}


//House

context.beginPath();
context.rect(550, 450, 600, 450);
context.fillStyle = 'gray';
context.fill();
context.lineWidth = 3;
context.strokeStyle = 'black';
context.stroke();

context.beginPath();
context.moveTo(600, 600);
context.lineTo(600,525);
context.lineWidth = 4;
context.strokeStyle = 'black';
context.stroke();

context.beginPath();
context.moveTo(600, 525);
context.lineTo(650,525);
context.lineWidth = 4;
context.strokeStyle = 'black';
context.stroke();

context.beginPath();
context.moveTo(650, 525);
context.lineTo(650,600);
context.lineWidth = 4;
context.strokeStyle = 'black';
context.stroke();

context.beginPath();
context.moveTo(450, 350);
context.lineTo(400,300);
context.lineWidth = 4;
context.strokeStyle = 'black';
context.stroke();

//roof
context.beginPath();
context.moveTo(550,450);
context.lineTo(700,350);
context.lineWidth = 3
context.strokeStyle = 'black'
context.stroke();

context.beginPath();
context.moveTo(700,350);
context.lineTo(800,450);
context.lineWidth = 3
context.strokeStyle = 'black'
context.stroke();

//Tree
context.beginPath();
context.moveTo(450, 450);
context.lineTo(450, 350);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(450, 350);
context.lineTo(500, 300);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(450, 450);
context.lineTo(450, 350);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(450, 450);
context.lineTo(450, 275);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(450, 350);
context.lineTo(400,300);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(450, 350);
context.lineTo(400,350);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(450, 350);
context.lineTo(500,350);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(450, 350);
context.lineTo(500,325);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(450, 350);
context.lineTo(500,380);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(450, 350);
context.lineTo(400,380);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(450, 350);
context.lineTo(400,325);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(450, 350);
context.lineTo(425,325);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(450, 350);
context.lineTo(425,300);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(450, 350);
context.lineTo(475,300);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

//Tree 2

context.beginPath();
context.moveTo(50, 450);
context.lineTo(50,350);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(50, 350);
context.lineTo(100,350);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(50, 350);
context.lineTo(50,275);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(50, 350);
context.lineTo(0,350);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(50, 350);
context.lineTo(100,300);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(50, 350);
context.lineTo(0,300);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(50, 350);
context.lineTo(100,350);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(50, 350);
context.lineTo(75,300);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(50, 350);
context.lineTo(25,300);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(50, 350);
context.lineTo(0,325);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(50, 350);
context.lineTo(100,375);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(50, 350);
context.lineTo(0,375);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

//Hills
context.beginPath();
context.moveTo(150, 310);
context.bezierCurveTo(300, 300, 300, 250, 388, 325);
context.lineWidth = 3;
// line color
context.strokeStyle = 'brown';
context.stroke();

context.beginPath();
context.moveTo(510, 320);
context.bezierCurveTo(650, 370, 500, 225, 750, 340);
context.lineWidth = 3;
// line color
context.strokeStyle = 'brown';
context.stroke();

//Sun Ray
context.beginPath();
context.moveTo(670, 50);
context.quadraticCurveTo(580, 30, 560, 10);
context.lineWidth = 2;
// line color
context.strokeStyle = 'orange';
context.stroke();

context.beginPath();
context.moveTo(650, 80);
context.quadraticCurveTo(580, 100, 560, 80);
context.lineWidth = 2;
// line color
context.strokeStyle = 'orange';
context.stroke();

context.beginPath();
context.moveTo(660, 150);
context.quadraticCurveTo(620, 150, 570, 220);
context.lineWidth = 2;
// line color
context.strokeStyle = 'orange';
context.stroke();

context.beginPath();
context.moveTo(720, 150);
context.quadraticCurveTo(700, 180, 760, 250);
context.lineWidth = 2;
// line color
context.strokeStyle = 'orange';
context.stroke();

context.beginPath();
context.moveTo(750, 120);
context.quadraticCurveTo(780, 150, 800, 140);
context.lineWidth = 2;
// line color
context.strokeStyle = 'orange';
context.stroke();

context.beginPath();
context.moveTo(730, 50);
context.quadraticCurveTo(740, 30, 800, 20);
context.lineWidth = 2;
// line color
context.strokeStyle = 'orange';
context.stroke();

context.beginPath();
context.moveTo(700,40);
context.lineTo(710,0);
context.lineWidth = 2
context.strokeStyle = 'orange';
context.stroke();

context.beginPath();
context.moveTo(640,110);
context.lineTo(580,140);
context.lineWidth = 2
context.strokeStyle = 'orange';
context.stroke();

context.beginPath();
context.moveTo(690,160);
context.lineTo(680,220);
context.lineWidth = 2
context.strokeStyle = 'orange';
context.stroke();

context.beginPath();
context.moveTo(760,85);
context.lineTo(800,80);
context.lineWidth = 2
context.strokeStyle = 'orange';
context.stroke();

Tuesday, September 11, 2012

Heart Image

Heart Code




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

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var startX = 400
var startY = 250
var controlPointX = 200
var controlPointY = 100
var endX = 150
var endY = 300 
var startX = 400
var startY = 250
var controlPointX = 600
var controlPointY = 100
var endX = 650
var endY = 300 

context.beginPath ();
context.moveTo (400, 250);
context.quadraticCurveTo(200, 100, 150, 300);
context.lineWidth = 10;
context.strokeStyle = "red";
context.stroke (); 


context.beginPath ();
context.moveTo (400, 250);
context.quadraticCurveTo(600, 100, 650, 300);
context.lineWidth = 10;
context.strokeStyle = "red";
context.stroke (); 

context.beginPath();
context.moveTo(150, 300);
context.lineTo(400, 600);
context.stroke();

context.beginPath();
context.moveTo(650, 300);
context.lineTo(400,600);
context.stroke();


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

};

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