1. Sally's Saxophones: A family owned and operated music store that has been in business since the late 19th century. They specialize in instruments but sell other products such as CD's and old Vinyl.
2. Possessed to Skate: A local skate shop, popular hangout for hardcore skaters and amateurs alike. Name is inspired by the Suicidal Tendencies song of the same name.
3. die Famili: Limited, street-art inspired clothing. Collaborations with street artists and other companies are not uncommon.
4. The Pit: A medium-sized concert venue for ska, hardcore, and metal bands. There are no seats, so dancing, moshing, crowd surfing/stage diving etc. is encouraged. Everyone from local bands to legends such as Bad Brains and Slayer will play here. Light security enforced by law, but only to prevent fights. Imagine a modern day CBGB, except kept a lot tidier.
5. Rampage Riot Punch: An alcoholic beverage that goes down incredibly smooth but packs a crazy punch. Marketed towards college students, this crazy concoction is guaranteed to be the talk on campus. Every bottle has 2 ibuprofen attached, perfect for the morning after.
At first I wanted to do the skate shop, however after thinking for a while I decided on The Pit. Concert-going is one of my favorite hobbies and I really hate how CBGB closed while I was still young. I've been to too many concerts where the band was great but the venue was insanely strict. A venue with a great reputation attracts better bands, and is a great place for underground artists to make it big.
Monday, September 24, 2012
Tuesday, September 18, 2012
Rich Stick Man
Here is my project. It is a stick figure "rich guy", complete with a top hat, cane, and monocle. It took me a long time to complete this. Here is the HTML 5 Code:
<!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.rect(0, 0, 800, 600);
var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
grd.addColorStop(0, 'rgb(200, 50, 255)');
grd.addColorStop(0.5, 'rgb(230, 150, 255)');
grd.addColorStop(1, 'rgb(255, 255, 255)');
context.fillStyle = grd;
context.fill();
context.beginPath();
context.arc(425, 210, 100, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(238, 204, 172)';
context.fill();
context.stroke();
context.beginPath();
context.rect(325, 125, 210, 30);
context.fillStyle = 'black';
context.fill();
context.stroke();
context.beginPath();
context.rect(375, 50, 100, 90);
context.fillStyle = 'black';
context.fill();
context.beginPath();
context.arc(370, 193, 5, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.stroke();
context.beginPath();
context.arc(470, 193, 5, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.stroke();
context.beginPath();
context.arc(420, 223, 5, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.stroke();
context.beginPath();
context.arc(470, 193, 15, 0, 2 * Math.PI, false);
context.stroke();
context.beginPath();
context.moveTo(470, 208);
context.lineTo(470, 225);
context.stroke();
context.beginPath();
context.arc(420, 250, 40, 0, Math.PI, false);
context.closePath();
context.lineWidth = 5;
context.fillStyle = 'red';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(425,310);
context.lineTo(425,500);
context.stroke();
context.beginPath();
context.moveTo(325, 600);
context.quadraticCurveTo(425, 400, 525, 600);
context.stroke();
context.beginPath();
context.moveTo(575,390);
context.lineTo(275,390);
context.stroke();
context.beginPath();
context.moveTo(550, 600);
context.bezierCurveTo(490, 400, 575, 400, 575, 390);
context.strokeStyle = 'rgb(139, 90, 43)';
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
<!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.rect(0, 0, 800, 600);
var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
grd.addColorStop(0, 'rgb(200, 50, 255)');
grd.addColorStop(0.5, 'rgb(230, 150, 255)');
grd.addColorStop(1, 'rgb(255, 255, 255)');
context.fillStyle = grd;
context.fill();
context.beginPath();
context.arc(425, 210, 100, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(238, 204, 172)';
context.fill();
context.stroke();
context.beginPath();
context.rect(325, 125, 210, 30);
context.fillStyle = 'black';
context.fill();
context.stroke();
context.beginPath();
context.rect(375, 50, 100, 90);
context.fillStyle = 'black';
context.fill();
context.beginPath();
context.arc(370, 193, 5, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.stroke();
context.beginPath();
context.arc(470, 193, 5, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.stroke();
context.beginPath();
context.arc(420, 223, 5, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.stroke();
context.beginPath();
context.arc(470, 193, 15, 0, 2 * Math.PI, false);
context.stroke();
context.beginPath();
context.moveTo(470, 208);
context.lineTo(470, 225);
context.stroke();
context.beginPath();
context.arc(420, 250, 40, 0, Math.PI, false);
context.closePath();
context.lineWidth = 5;
context.fillStyle = 'red';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(425,310);
context.lineTo(425,500);
context.stroke();
context.beginPath();
context.moveTo(325, 600);
context.quadraticCurveTo(425, 400, 525, 600);
context.stroke();
context.beginPath();
context.moveTo(575,390);
context.lineTo(275,390);
context.stroke();
context.beginPath();
context.moveTo(550, 600);
context.bezierCurveTo(490, 400, 575, 400, 575, 390);
context.strokeStyle = 'rgb(139, 90, 43)';
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Wednesday, September 12, 2012
Heart
My heart. Made with numbers and letters and whatnot.
CODE:
/*
<!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.rect(0, 0, 800, 600);
context.stroke();
var grd = context.createLinearGradient(0, 250, 800, 250);
grd.addColorStop(0, 'rgb(200, 190, 255)');
grd.addColorStop(1, 'rgb(100, 100, 255)');
context.fillStyle = grd;
context.fill();
context.stroke();
context.beginPath();
context.moveTo(400,200);
context.bezierCurveTo(300, 0, 160, 220, 275, 315);
context.quadraticCurveTo(350, 375, 400, 500);
context.quadraticCurveTo(450, 375, 525, 315);
context.bezierCurveTo(650, 200, 520, 0, 400, 200);
context.lineCap = 'round';
context.fillStyle = 'rgb(255, 0, 0)';
context.fill();
context.lineWidth = 19;
context.strokeStyle = 'rgb(255, 160, 160)';
context.stroke();
//context.bezierCurveTo(300, 0, 160, 220, 400, 500);
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
*/
CODE:
/*
<!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.rect(0, 0, 800, 600);
context.stroke();
var grd = context.createLinearGradient(0, 250, 800, 250);
grd.addColorStop(0, 'rgb(200, 190, 255)');
grd.addColorStop(1, 'rgb(100, 100, 255)');
context.fillStyle = grd;
context.fill();
context.stroke();
context.beginPath();
context.moveTo(400,200);
context.bezierCurveTo(300, 0, 160, 220, 275, 315);
context.quadraticCurveTo(350, 375, 400, 500);
context.quadraticCurveTo(450, 375, 525, 315);
context.bezierCurveTo(650, 200, 520, 0, 400, 200);
context.lineCap = 'round';
context.fillStyle = 'rgb(255, 0, 0)';
context.fill();
context.lineWidth = 19;
context.strokeStyle = 'rgb(255, 160, 160)';
context.stroke();
//context.bezierCurveTo(300, 0, 160, 220, 400, 500);
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
*/
Subscribe to:
Posts (Atom)