Stevie Handwerk!!!!: February 2013

Wednesday, February 27, 2013

Text Shape

I decided to do this even though it was simple because I could use this for a little girl that my cousin just had. Her name is Noel Star and so I thought I could use this project to create her this Twinkle Little Star Poem. When creating something for a purpose makes it easier for me to create it. So I know it is more of a simple project but it meant something to me which is what I am trying to do.

Wednesday, February 20, 2013

Logos

5 Logos

1. The Amazon Logo - I believe this is a nice logo that is easy to remember since the name is in it. The little smile underneath the name is being used in a good way. I believe people can recognize it very easily and so that makes it a good logo.

2. Starbucks - This logo is very unique looking. It has the name in the logo but just seeing the green circle and the person with the crown stands out so you could pick it out easily. I think it works well for Starbucks.

3. Apple - This is one of my favorite logos. It is so simple yet means so much. Just looking at that you know exactly what company it is from. Since it is put on on their products that makes it stand out as well because you are always seeing it.

4. Facebook- This is another logo that is simple with just one letter but one letter can do the trick. Everyone knows what this stands for and that is what a logo is supposed to do.

5. Target - It's always a good idea to incorporate an image with the name of a company and that is what target did. The target sign represents a way to use "a target" as its logo. It makes it easy to remember because the name and logo go together.

Monday, February 18, 2013

Ideas!

1. Sweetie Pie - If you want something sweet, this is the place to go. It's a shop that has everything sweet. They cater for desserts.

2. Happy Puppy - Dog Training, Grooming, Playground, Store for supplies and toys. Anything you need for your puppy.

3. Under The Sea - Scuba Diving School. Learn how to Scuba Dive and go under the water and explore.

4. Classic Theater - A theater that brings movies back on the big screen.

Wednesday, February 13, 2013

Project 1

I did this to show more of me. I am not a very flashy person, I like nice and simple so this design is nothing special i just wanted something simple that had a nice soft color to it and nice symmetry.

<!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 x = 0;
var y = 0;
var width = 800;
var height = 600;

//Rectangle
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 20;
context.fillStyle = 'rgb(200, 200, 255)';
context.fill();
context.strokeStyle = 'rgb(200, 255, 200)';
context.stroke();

//Bezier 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 Variables
var controlX3 = 425;
var controlY3 = 385;
var endX3 = 450;
var endY3 = 480;
//Quadratic Variables
var controlX4 = 475;
var controlY4 = 375;
var endX4 = 550;
var endY4 = 325;
//Bezier Variables
var controlX5 = 755;
var controlY5 =180;
var controlX6 =550;
var controlY6 = 15;
var endX5 = x;
var endY5 = y;

//Bezier Curve
context.beginPath();
context.moveTo(x, y);
context.lineWidth = 10;
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, 155, 155)';
context.fill();
context.strokeStyle = 'rgb(255, 100, 100)';
context.stroke();

//Rectangle
context.beginPath();
context.rect(650, 40, 100, 100);
context.fillStyle = 'rgb(200, 200, 255)';
context.fill();
context.stroke();

context.beginPath();
context.lineWidth = 10;
context.arc(700, 90, 20, 0 , 2 * Math.PI, false);
context.fillStyle = 'rgb(255, 100, 100)';
context.fill();
context.strokeStyle = 'rgb(255, 100, 100)';
context.stroke();

//Rectangle
context.beginPath();
context.rect(80, 40, 100, 100);
context.fillStyle = 'rgb(255, 200, 200)';
context.fill();
context.stroke();

//Circle Variables
var x = 130
var y = 90
var radius = 20

// Circle
context.beginPath();
context.lineWidth = 10;
context.arc(x, y, radius, 0 , 2 * Math.PI, false);
context.fillStyle = 'rgb(200, 255, 200)';
context.fill();
context.strokeStyle = 'rgb(200, 255, 200)';
context.stroke();

//Line
context.beginPath();
context.moveTo(400, 400);
context.lineTo(200, 300);
context.lineCap = 'round';
context.stroke();

//Line
context.beginPath();
context.moveTo(400,400);
context.lineTo(400, 550);
context.lineCap = 'round';
context.stroke();

//Green Circle 9 Variables
var x9 = 140
var y9 = 500
var radius9 = 60

//GreenCircle 9
context.beginPath();
context.lineWidth = 10;
context.arc(x9, y9, radius9, 0 , 2 * Math.PI, false);
context.fillStyle = 'rgb(200, 255, 200)';
context.fill();
context.strokeStyle = 'rgb(255, 100, 100)';
context.stroke();

//Green Circle 12 Variables
var x12 = 700
var y12 = 500
var radius12 = 60

//Green Circle 12
context.beginPath();
context.lineWidth = 10;
context.arc(x12, y12, radius12, 0 , 2 * Math.PI, false);
context.fillStyle = 'rgb(255, 100, 100)';
context.fill();
context.strokeStyle = 'rgb(200, 255, 200)';
context.stroke();

//Line
context.beginPath();
context.moveTo(500, 400);
context.lineTo(500,550);
context.lineCap = 'round';
context.stroke();

//Line
context.beginPath();
context.moveTo(500,400);
context.lineTo(710,315);
context.lineCap = 'round';
context.stroke();

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

};

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

Monday, February 11, 2013

Heart!

This heart was difficult to begin with but once I started it I got the hang of it. It's interesting to see how this works and its pushing me to try new things. It's getting easier now

<!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 x = 0;
var y = 0;
var width = 800;
var height = 600;

//Rectangle
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 20;
context.fillStyle = 'rgb(200, 255, 200)';
context.fill();
context.strokeStyle = 'rgb(200, 255, 200)';
context.stroke();

//Bezier 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 Variables
var controlX3 = 425;
var controlY3 = 385;
var endX3 = 450;
var endY3 = 480;
//Quadratic Variables
var controlX4 = 475;
var controlY4 = 375;
var endX4 = 550;
var endY4 = 325;
//Bezier Variables
var controlX5 = 755;
var controlY5 =180;
var controlX6 =550;
var controlY6 = 15;
var endX5 = x;
var endY5 = y;

//Bezier Curve
context.beginPath();
context.moveTo(x, y);
context.lineWidth = 10;
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, 155, 155)';
context.fill();
context.strokeStyle = 'rgb(100, 100, 255)';
context.stroke();

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

};

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