Lane After School Technology: October 2012

Sugar in candy spreadsheet

Today we are going to look up facts about candy and how much sugar is in them. Then we are going to take those facts and assemble them into a collaborative spreadsheet.

Everyone will have a different column, be respectful and just work on your own column, don't mess with others.
I can ban from free time and assign typing practice to those trolls that are not contributing to this healthy learning environment.

Click HERE to get started

Vector vs Bitmap

Today we are going to learn in a hands on way about vector image files verses bitmap image types.

The scenario is that you've found this small image and want to use it covering the full screen.

The screen you are on has 1024 pixels wide and 768 pixels tall, to make this pumpkin image fill the whole screen you need to re-size it to around 1000 wide, lets do that and see what happens.

If you download and use the Bitmap image file, as you scale the image larger it will look blotchy or blurry.

Basically a bitmap image is made up of pixels, tiny dots that made the picture show, this pumpkin image has a pixel definition or size of 150 pixels or dots wide by 137 tall that is quite small and would be considered a low resolution image.
As the individual pixels times by 6 (150 x 6.66 = 999) they will duplicate over and over six times so that the original pixels that made the image are in the same places relational to each other just larger on the screen.

This process is called Pixelization.

Lets do this so that it makes a little more sense.

First load the program Inkscape
(Start > Programs > Inkscape)

Second download this image and open it in Inkscape, or copy and paste this image into Inkscape:

Then export the bitmap (File > Export Bitmap) and set the width to 1000.

Save to Y drive, give it a name, then go look at the image and see what you think of it.

Vector images are geometrical primitives such as points, lines, curves or shapes which the computer makes based on mathematical expressions that represent images. These mathematical expressions are not connected to exact pixels like a bitmap is so that if you want the shape larger or smaller the computer can simply multiply the math that makes that image to get a larger image. Let's try it out and see..

This time while in Inkscape click Path > Trace Bitmap. Then click Ok. (This will turn the bitmap into a vector)

Next select and move the pumpkin vector away from the pumpkin bitmap.

With the vector selected you can change the color if you want, other wise simply export it as a bitmap to Y drive, with the width 1000 pixels again and go compare it with the first.

Compare the two images that are in your Y drive, maybe have them named bitmap.png and vector.png.

If you would like you can turn them into me, but mostly I just want to see that you completed this exercise so that we can build on this concept in later assignments.

password: lane

http://dropitto.me/lane <- click this to upload completed file.

Blender Game Engine (BGE)

Today we are going to learn a little about making video games.

First download this file.
www.pps.k12.or.us/schools-c/pages/lane/pages/bge_spider.blend

Once opened in blender put your mouse on the spider and press P.

wasd, space to move.

Then look on the left to see the sensors and the actuators, expand using the arrow one or two of them to see what input is causing what result.

Try changing colors, sizes, inputs, adding objects, anything to basically learn how this game was put together.

Carve a digital pumpkin

Get started here - theoworlds.com/halloween

Once finished, click DONE CARVING, Done and then the Internet address (URL) copy and paste as a blog comment using the name URL profile.

Portable Apps

Portable Apps Google Form --- Read the directions at the top and fill out.

Make a web page, learn basic HTML code

http://htmledit.squarefree.com/

Today we are going to learn some basic HTML code.

In one tab keep these directions open, in the second tab open this HTMLEDIT.SQUAREFREE.COM site.

WHAT DO YOU NEED TO PUT IN YOUR WEB PAGE?
You can be creative with the wording and images, just so the message remains the same.

Title:
Dance, or Halloween Dance, or Harvest Dance, or fall dance, or autumn dance... etc... You give it a title.

Picture:
Go find an image that shows dancing and copy the URL, (website address).

Information:

$3.00
or
1 quasar = 10 cents

Dance is welcome to ALL students

Permission slip required

Start by setting the background to a color.
<body style="background-color:orange;">

This is how to put a title or heading in:

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

This is a horizontal line:

<hr>

This is how to put in image in:

<img src="THE IMAGE URL">

Example:
<img src="http://www.dance.uptownuk.com/images/streetdance.jpg" width="500" height="400">

This is the code for text size and colors, you apply it within a section, see example.

font-size:55px

style="color:green"

Example: <h3 style="color:DodgerBlue; font-size:30px">School Dance</h3>

Names of colors

Copy the final code to a text document file on your Y drive.

Go to Y drive, Right click, Add new text document.
(IDEALLY name this text document your name_dance.txt, or yourname_dance.htm).

Open and then paste code, save.

Then upload the completed file to me using drop it to me.
password: lane

http://dropitto.me/lane <- click this to upload completed file.

Design your logo

First, what is a logo?

A logo distinguishes, identifies signifies, indicates, symbolizes or represents you or your company/organization, it should be easily recognizable while personal to you.

Look, at some famous logos and see if you can recognize them.

Logo's should be recognizable even if not in color:

Can a logo change over time? Click here to see example.

Today's assignment: Create your own logo using Inkscape.

To get started imagine, brainstorm, visualize what you think a cool logo would look like, consider words that might describe you, or shapes that you identify with.

Save as logo.svg to your Y drive.

Columbus Day Timeline

Research two Christopher Columbus facts that have dates to add to our group time line.

When was he born?
When did he die?
When was a local storm named Columbus day storm?
What happened on the 400th anniversary?
When was it a holiday?
When was it a federal holiday?
???

password: student

Each time line event MUST have an image also.

*Be sure to put your first name in the description of your additions to the time line.

After Supper
Complete this game.

http://www.flashgame6.com/39609/the-discovery-of-america

Initial name in Three dimensions

Today we are going to make your name in 3d where the first initial is the 3D object and the rest of the letters are cut into your first name initial.

First Steps:

Launch the program Inkscape.

First create and edit your name in your choice of fonts, with the first letter being large and the remaining letters small and fitting on top of the first.

SELECT BOTH OBJECTS (by drag selecting both, OR by holding SHIFT and clicking on both)

Next click Path > Difference.

File Save, or save a copy, or save as, whichever is first and works for you to save the file to your Y drive.
Make sure to rename the file you are saving your name.

Next Steps:
Launch the program Blender.

Delete the cube, by right clicking on it
to select it, then pressing the delete key.

File > Import > Scalable Vector Graphics (.svg)
Locate and import your file that you just saved from Inkscape, should be in your Y drive, should be renamed to your name.

Click Origin > Origin to Geometry

Click View > Camera

Use the mouse and keyboard keys G to grab and move, S to scale to position your name in front of the camera.

Use mouse wheel to scroll over to "object data" the two dots and curved line icon
Then on the Geometry : Ex: put either .1 or .2 or similar.

Render by pressing the keyboard key F12

Then Save the image by pressing the keyboard key F3
SAVE TO YOUR Y DRIVE.

IF YOU WANT TO DO EXTRA TO MAKE IT LOOK DIFFERENT...
Feel free to add a background mesh plane and change material colors, add various lighting and rotate the name around to get it to look how you want. Feel free to ask and describe what you image it looking like and Mr. Hurst can help.
See below examples.