Monday, February 25, 2013
Sunday, February 17, 2013
Logo ideas
customlax.com- online lacrosse store in which the customer can customize their own equitment color dye, decals etc. Will buy copyrights from brand name lacrosse companies and use their heads and shafts
DVR Radio- Make your own playlist, by recording songs as you hear them on the radio
Sneaker Cleats- retractable studs that flip into the sole of the shoe and get replaced with sneakers treds in the push of a button
Budless headphones- Headphones with out the wire that can plug into your ear almost invisibly. will work through bluetooth connection.
Benergy- Natural energy drink with vitamins to start your day for non-coffee drinkers
DVR Radio- Make your own playlist, by recording songs as you hear them on the radio
Sneaker Cleats- retractable studs that flip into the sole of the shoe and get replaced with sneakers treds in the push of a button
Budless headphones- Headphones with out the wire that can plug into your ear almost invisibly. will work through bluetooth connection.
Benergy- Natural energy drink with vitamins to start your day for non-coffee drinkers
Wednesday, February 13, 2013
Heart of the City
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Rectangle Variables
var rectx = 0;
var recty = 0;
//Bezier Curve Variables
var x = 450;
var y = 160;
var controlX1 = 350;
var controlY1 = 15;
var controlX2 = 155;
var controlY2 = 160;
var endX = 350;
var endY = 325;
//Quadratic Curve Variables
var controlX3 = 425;
var controlY3 = 375;
var endX3 = 450;
var endY3 = 480;
//Quadratic Curve Variables
var controlX4 = 475;
var controlY4 = 375;
var endX4 = 550;
var endY4 = 325;
//Bezier Curve Variables
var controlX5 = 755;
var controlY5 = 160;
var controlX6 = 550;
var controlY6 = 15;
var endX5 = x;
var endY5 = y;
//Rectangle Linear Gradient Variables
var startX = 0;
var startY = 0;
var grdendX = canvas.width;
var grdendY = canvas.height;
//Background Rectangle
context.beginPath();
context.rect(rectx, recty, canvas.width, canvas.height);
var grd = context.createLinearGradient(startX, startY, grdendX, grdendY);
grd.addColorStop(0, 'rgb(255, 255, 255)'); //dark purple, white
grd.addColorStop(1, 'rgb(100, 0, 100)');
context.fillStyle = grd;
context.fill();
//Buildings
context.beginPath();
context.moveTo(50,100);
context.lineTo(50,150);
context.lineTo(0,200);
context.lineTo(100,200);
context.lineTo(50,150);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(100,200);
context.lineTo(100,600);
context.lineTo(0,600);
context.lineTo(0,200);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(100,350);
context.lineTo(200,350);
context.lineTo(200,600);
context.lineTo(100,600);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(450,50);
context.lineTo(450,600);
context.lineTo(550,600);
context.lineTo(550,50);
context.lineTo(450,50);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//bridge
context.beginPath();
context.moveTo(200,300);
context.lineTo(250,300);
context.lineTo(250,600);
context.lineTo(200,600);
context.lineTo(200,300);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.beginPath();
context.moveTo(750,300);
context.lineTo(800,300);
context.lineTo(800,600);
context.lineTo(750,600);
context.lineTo(750,300);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.beginPath();
context.moveTo(250,500);
context.lineTo(752,500);
context.lineTo(752,550);
context.lineTo(250,550);
context.lineTo(250,550);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.beginPath();
context.moveTo(245,305);
context.bezierCurveTo(400,450, 550,450,755,305);
context.lineWidth = 10;
context.stroke();
context.beginPath();
context.moveTo(675,350);
context.lineTo(675,500);
context.lineWidth = 3;
context.stroke();
context.beginPath();
context.moveTo(325,363);
context.lineTo(325,500);
context.lineWidth = 3;
context.stroke();
context.beginPath();
context.moveTo(625,380);
context.lineTo(625,500);
context.lineWidth = 3;
context.stroke();
context.beginPath();
context.moveTo(375,388);
context.lineTo(375,500);
context.lineWidth = 3;
context.stroke();
//Arrow
context.beginPath();
context.moveTo(650,75);
context.lineTo(700,75);
context.lineTo(700,125);
context.lineTo(650,75);
context.closePath();
context.fillStyle = 'rgb(232,179,21)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'rgb(232,179,21)';
context.stroke();
context.beginPath();
context.moveTo(675,100);
context.lineTo(325,400);
context.stroke();
context.beginPath();
context.moveTo(325,400);
context.lineTo(325,425);
context.lineTo(300,400);
context.lineTo(325,425);
context.lineTo(300,400);
context.closePath();
context.fillStyle = 'rgb(232,179,21)';
context.fill();
context.stroke();
context.stroke();
context.stroke();
//Heart
context.beginPath();
context.moveTo(x, y);
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
context.quadraticCurveTo(controlX3, controlY3, endX3, endY3);
context.quadraticCurveTo(controlX4, controlY4, endX4, endY4);
context.bezierCurveTo(controlX5, controlY5, controlX6, controlY6, endX5, endY5);
context.closePath();
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Using Text wrangler we were asked to create 10 objects using codes that we learned to create an image. I chose to make a city skyline as well as the heart with cupids arrow through it because it was around the time of valentine's day. I named this project Heart of the City because I thought it was relevant with the heart as the central image to the city, based on the song by Jay-Z as well.
Wednesday, February 6, 2013
Heart
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Rectangle (background)
context.beginPath();
context.rect(0, 0, 800, 600);
context.fillStyle = 'rgb(175,225,240)';
context.fill();
//Bezier curve variables
var x=390;
var y=175;
var controlX1=285;
var controlY1=25;
var controlX2= 125;
var controlY2= 175;
var endX= 300;
var endY= 340;
//Quadratic Curve (left)
var controlX3 = 350;
var controlY3 = 390;
var endX3 = 390;
var endY3 = 470;
//Quadratic curve (right)
var controlX4 = 415;
var controlY4 = 390;
var endX4 = 470;
var endY4 = 350;
//Bezier curve variables
var controlX5= 655;
var controlY5= 185;
var controlX6= 525;
var controlY6= 25;
var endX5= x;
var endY5= y;
context.beginPath();
context.moveTo(x,y);
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
context.quadraticCurveTo(controlX3, controlY3, endX3, endY3);
context.quadraticCurveTo(controlX4, controlY4, endX4, endY4);
context.bezierCurveTo(controlX5, controlY5, controlX6, controlY6, endX5, endY5);
context.fillStyle = 'rgb(242,141,68)';
context.fill();
context.strokeStyle = 'rgb(237,64,12)';
context.lineWidth = 5;
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Subscribe to:
Posts (Atom)