Day 12

Here is a secret preview of my final project. It will be removed shortly, so look long and well while you can! THIS IS NOT THE FINISHED PRODUCT- JUST THE FIRST DRAFT:

Final Project: Manifesto and 3 Components

This Hexadecimal Color Picker app demonstrates how methods that aren't necessarily immediately intuitive, but perhaps superior, can be applied in Flash to create an end result that while looking the same to the end user is very different for the creator. It teaches how hexadecimal works, and how it has been thoroughly integrated into modern technology. The app is interesting in its methodology and visuals, as well as background, whilst simultaneously being one of the most practical applications of Flash available (it can even be used to help create something else in Flash or Dreamweaver or Photoshop itself!). This app could be altered to change from hexadecimal or RGB or CMYK or even HTML, while it could also be applied to, say, a CSS font picker that allows for selection and combination of ligatures, stylations, variations, and sizes. The app is appealing to the learner who appreciates art because of the artistic aspect and color involved. It is interesting to the mathematician-type learner because is demonstrates the math behind hexadecimal, including place-values, digital interpretation, and simple mathematical functions. Finally, it is interesting to the programmer because of the rather atypical and roundabout but nevertheless effective manner in which it is coded (using the code from the Circuits starter app). All around, this is an informative, creative, and involved application.
The art for this project is not necessarily designed for the sake of good looks, but for practicality. Nevertheless, take for example the color picker/palette in Flash itself, or Microsoft Word, or the systemwide color picker in Mac or PC: they are functional, but at the very least they are aesthetic, are they not? I want my graphics to look smooth and professional, while simple. It will be creating them in Flash if possible, or Illustrator if it will yield better results. Photoshop is not a very good option for the graphics of a color picker. I may recreate elements of Adobe's or Apple's color pickers if they are reasonable in my application. For any color chosen, values will changed and be displayed in text fields. These fields will be labeled clearly and directly for ease of use with the application-- I know that if I'm making something and need a hex color picker, I would hat to have to fiddle around to figure out what I'm looking at! :)
The math to which this application applies includes units of measure and bases (especially base 16 versus base 10 or 2), is a numeral system with a base of 16. It uses sixteen distinct symbols, the symbols 0–9, to represent values zero to nine, and A, B, C, D, E, F (or a through f) to represent values ten to fifteen. Its primary use is as a human-friendly representation of binary coded values that can still be digitally interpreted by a computer in ways base 10 cannot be. Since each hexadecimal digit represents four binary digits (bits)—it is a compact and easily translated shorthand to express values for pixel color, or even fonts/characters. Here is an example of the units of hex being represented in decimal, which is how we learned about it in math on day 2 (or 3?):

"A" ( 9 + 1 = ) 10 in decimal
"B " ( 9 + 2 = ) 11 '' ''
"C" ( 9 + 3 = ) 12 '' ''
...until "F". Then come the numerical values:
"10" (1 x 16) + 0 = 16 in decimal
"11" (1 x 16) + 1 = 17 '' ''
"12" (1 x 16) + 2 = 18 '' ''

...and some examples of combinations: "1D" (1 x 16) + 13 = 29 in decimal; "24" (2 x 16) + 4 = 42 in decimal

Anyhow, that's an explanation and some example of hexadecimal, mathematically.

Basically, the code from the Circuits lab correlates a user-specified distance in pixels in the Flash app to a larger scale unit, like miles, and then correlates the larger scale unit to a value that can by dynamically displayed. An interesting way to turn this concept into a color picker is to calculate hex values from constant pixel values using a formula in code, and dynamically assign this hex value to a text field, and then correlate the hex value to a standard 256 part color key name, like "OrangeRed" (#FF2400) or MediumSeaGreen (#426F42). Along with this the algorithm that determines the hex values can be picked apart and place in separate text fields such that the user can see each place value in the 16 base number and what it represents in decimal, in order to demonstrate the math aspect. Currently, I cannot write out the code itself because I do need assistance from an instructor on how to write such a function, but in terms of determining variables, referencing text fields, and then incorporating these into functions, along with the distance-related codes from the starter app, the code should end up being fairly direct, I think. In all, the programming provides for an unusual, but nonetheless highly effective and informative way to create a practical hexadecimal color picker in Adobe Flash CS4.

Day 8

Although I was very tired this rainy morning, it turned out to be a great day here at the 8th session of DigitalCUrrents. We came in and began to learn how to make rotoscopes of videos in Flash. Rotoscoping is an animation technique in which animators trace over live-action film movement, frame by frame, to produce a hand-drawn version of the video. Here's mine (see how short it is? That took about an hour):



In our math lesson we looked at the Pythagorean theorem, sin, cos, and tan. We then toured the ITLL, or Integrated Teaching and Learning Lab, which is a giant scientific lab and enviornment for CU engineering. It was awesome! We had lunch, and played ultimate frisbee. Finally, we came back for programming, during which I made this game to apply our math lesson about right triangles:



Best,
Carson
www.CarsonKahn.co.nr

Day 7... One Week's Worth Was Worth It!

Today, we reviewed more art techniques and exponential population growth. Today's post is a short one-- the title says it all :). Here's my final project for the day:

Best,
Carson

PS:
To see some of my other projects, don't forget to look at my older posts below. Also, you may need to enlarge this webpage with Ctrl+"=" (PC) or Command+"=" (Mac) in order to see the flash project below better. :D

Today's Project:

Day 6...A NEW WEEK!

It's week #2 here at Digital CUrrents, and it's starting off very well. Today we covered the (limited) graphics capability already built in to Flash, and learned how to use them to make a quick logo and how to make those special shiny buttons that Apple uses on the iPhone (oooooo, shiny!). We further explored creating independent movie clips, and we learned how to have a button forward a Flash program through a certain ammount of frames (ie a "skip" button like you'd see on a TV remote). Then came our math lesson. We looked at probability, and at the Monty Hall problem: Suppose you're on a game show, and you're given the choice of three doors: Behind one door is a car; behind the others, goats. You pick a door, say No. 1, and the host, who knows what's behind the doors, opens another door, say No. 3, which has a goat. He then says to you, "Do you want to pick door No. 2?" Is it to your advantage to switch your choice? The answer is that it is indeed in your favor to switch your choice, becuase it increases your odds from 1/3 to 2/3. For the mathematical proof and logical explanation, click here. Anyhow, we then did experiments with flipping coins and calculating theoretical probability versus imperical probability. It was active and engaging. Then came lunch. While I ate, I began the beginning of our coding lesson to get a head start, making a flash game of the Monty Hall Problem. You can play it below this post. :)

Best,
Carson
www.CarsonKahn.co.nr

(If the game looks too small, press Ctrl & "+" on PC or Command & "+" on Mac to enlarge the text and the game on the page...)

Day 5 of CUrrents

Schweet man! Today, Friday, was a very engaging, and rather different day. We didn't quite follow our usual program. First, we learned from Ian how to make an animation its own movie so that it can be imported into a different project, which is very useful in any multi-layer SWF. Then we, went onto blogger (this site) and created user profiles to make our blogs (like this one) more complete. Next, most interestingly, we look at Google Knol. Knol is a collective, peer-based knowledge base initiated by Google in early 2008. I wrote an article for it on how to embed Flash with HTML-- see the post right below this one to read it. We then had break, and returned to our math lesson in which we reviewed a) demensional analysis and b) exponential probability. We did two activities to reinforce the concepts, one involving dice, which was creative and got us moving around, and one with m&ms candies, which was yum. Then we headed over to the Alfred-Packer Grill at the UMC for lunch. I had a tasty avocodo panini. Finally, we returned for 1.75 hours of "catch-up time," in which we completed any projects that weren't finished, wrote some more Knolls, and wrote this blog post. Over all, really a good experience. I'm really looking forward to next week!!!

Best,
Carson
www.CarsonKahn.co.nr

-

Knol

I wrote an article for knol here: check it out:

http://knol.google.com/k/carson-kahn/flash-embedded-in-html/1efaqilalojrs/5#

Best,
Carson
www.CarsonKahn.co.nr

Day 4 of Camp

A lot of moving around today. :) We learned how to make a walk cycle, for example. A walk cycle is an animation of someone--or something--walking in a lifelike manner. We made ours with this old woocut of this guy that looks like the Guiness Beer guy (lol), and I added a little red wagon following him around into mine. Then, we left for the CU Planetarium! We looked a Science on a Sphere. SOAS is a multisource projection system onto a globe, onto which we can display images and models of the earth, so that you get a full, digitally customizable model of earth (or saturn, or marz, etc). We then toured the Applied Math and Computer Science departments of the Engineering Building; very cool. We had lunch in the beautiful sun there, and then we returned for programming, in which we made a predictive model that compares how polar ice melting will raise sea levels in ratio to the scale statue of liberty (and, in mine, and random t-rex). I don't want to embed flash right now, so here's a screenshot:



Anyhow, it was really fun. See you in another post again soon!

Best,
Carson
www.CarsonKahn.co.nr

Day 3

What a blast! This has so far been my favorite day. To begin, we learned about integrating Photoshop with Flash. We learned that different image formats can handle different layers and types of alpha a dropshadow, and that Flash responds to this accordingly. We then learned how to animate these imported images in 3D. It's pretty awesome. Next, we played around with the bone tools. This tool allows you to make "joints" and "bones" in any object you've drawn to animate it like hinges and stuff, to make it seem alive. Creepy. :) The math lesson, which followed snack, was the most practical lesson we've had so far. We learned about Interest and Loans. We spent a lot of time learning how to calculate different kinds of Compound Interest. For example, to calculate how much you'll end up paying a a loan you take out because of a fixed APR, principle payment, and time, and how much per installment you'll have to pay, use the formula A = PMT[((1+APR/n)^(nY)-1)/APR/n]. THen was luch, catered by Udi sandwhich co. It was tasty! Programming was our final lesson. We worked on two different integrated calculators for loans and interest earnings based off of different principles and interest rates. Mine is finished and working well. :)

Best,
Carson Kahn
www.CarsonKahn.co.nr

2nd Day of Camp

Today was a very interesting, packed day. First, we had our art lesson. We learned about alpha, or transparency, along with animations and keyframes. After that, of course, was snack, but we then returned for our math lesson. In math we learned about Consumer Price Index, or CPI. CPI is calculated for determining inflation. We also looked at how college and university tuition change in comparison to each other-- tuition fees have tended to increase at a drastically larger rate than inflation has, so we learned that we need to set aside more money for college than we might have thought the year we were born. Then came lunch. For lunch, we went on a small field trip and went to one of CU's 5 dining halls. From the all-you-can-eat style buffett we were admitted into via MealCards, I got a Greek Peta Sandwhich, chicken taco, and salad, It was great! We finally returned for our programming lesson, in which we designed a calculator program to calculate all of the stuff we talked about during our math lesson. Mine needs a bit of tweaking, and I can't put it up live on this blog, but here's a picture:



Anyhow, I'm looking forward to the next day of camp. Thanks for reading!

Best,
Carson
www.CarsonKahn.co.nr

Day 1 of Digital Currents

Today was the first day of camp. It was awesome! We held the first session in room 200 of the Atlas building. The first thing we did was "icebreakers." We played this game where as a group we had to move from one location to another while passing around numbered tennis balls in a certain way as a team building activity-- it got the group warmed up. :) The next thing we did was to come inside an be introduced to all of the counselhttp://amath.colorado.edu/courses/DigitalCUrrents/2009Sum/images/DigitalCUrrents.jpgors, and review what we'd be doing for the rest of the 2.85 weeks. We then had our first Applied Math lesson. In it, which lasted one hour, we reviewed the different types of numbers (whole, real, imaginary, irrational, complex, etc), and how they were related to each other. We then did a basic lesson regarding Venn Diagrams, how they are used, and why. We made logic-type comparisons which we solved using two-circle Venns, and then the lesson ended. We took a break, and then came and learned about the WYSIWYG part of Adobe Flash CS4, like the drawing tool, selection tool, etcetera. Then came lunch, which was fun. Lastly, we learned programming in Action Scripting, or the math and typing-based part of Flash. We edited the following script, which created a basic Venn Diagram program:

package {

import flash.display.*;
import flash.events.*;
import flash.geom.Point;
import flash.text.*;

public class Board extends MovieClip {

private var NUM_CIRCLES:int = 100;

private var NONE:int = 0;
private var PARTIAL:int = 1;
private var FULL:int = 2;

private var gameLegend:Legend;

private var circles:Array;
private var circleClickedId:int = -1;
private var mouseDownPos:Point;
private var createdCircleId:int = -1;

private var circleCount:int = 0;

private var conclusions:Array;

public function Board():void {

circles = new Array(NUM_CIRCLES);
conclusions = new Array(NUM_CIRCLES);

for (var i:int = 0; i < gamelegend =" new" x =" 377;" int =" 0;" circleclickedid =" i;">= NUM_CIRCLES) {
return;
}

// Since a shape was not clicked, we will be creating a new
// shape at this position
mouseDownPos = new Point(evt.stageX, evt.stageY);

var venn:VennCircle = new VennCircle(mouseDownPos);

// Get the spot in the array for the circle
for (var j:int = 0; j < createdcircleid =" j;" legenditem =" new" circleclickedid =" -1;" createdcircleid =" -1;" mousedownpos =" null;">= 0) {

// Move the object, but make sure it is still on the board
circles[circleClickedId].updatePosition(evt.stageX, evt.stageY);

// Update the conclusions to display the logic
// behind the venn diagrams
checkConclusions();

} else if (createdCircleId >= 0) {

// Need to update the size of the circle
var xDiff:Number = Math.abs(mouseDownPos.x - evt.stageX);
var yDiff:Number = Math.abs(mouseDownPos.y - evt.stageY);

if (xDiff > yDiff) {
circles[createdCircleId].setRadius(xDiff);
} else {
circles[createdCircleId].setRadius(yDiff);
}

checkConclusions();
}
}
private function deleteItem(evt:Event):void {

//trace("Board: Deleting Item: " + gameLegend.itemTBD);
circleCount--;
this.removeChild(circles[gameLegend.itemTBD]);
circles[gameLegend.itemTBD] = null;
}

private function checkConclusions():void {

// Loop through all of the circle and determine if they
// overlap with any of the other circles
for (var i:int = 0; i < int =" 0;" text = "" int =" 0;" int =" 0;" string = ""> 0) {
if (conclusions[i][j] == PARTIAL) {

tempTxt = "SOME " + gameLegend.itemText(i)
+ " ARE " + gameLegend.itemText(j) + "\n";

txtConclusions.appendText(tempTxt);

} else {
tempTxt = "ALL " + gameLegend.itemText(i)
+ " ARE " + gameLegend.itemText(j) + "\n";

txtConclusions.appendText(tempTxt);
}
} else {
tempTxt = gameLegend.itemText(i)
+ " ARE NOT " + gameLegend.itemText(j) + "\n";

txtConclusions.appendText(tempTxt);
}
}
}
}
}


private function calculateOverlap(cir1:VennCircle, cir2:VennCircle):int {

var pt1:Point = cir1.getPosition();
var pt2:Point = cir2.getPosition();
var rad1:int = cir1.getRadius();
var rad2:int = cir2.getRadius();

var retVal:int = NONE;

if ((Math.pow(pt1.x - pt2.x, 2) +
Math.pow(pt1.y - pt2.y, 2)) < (Math.pow(rad1 + rad2, 2))) { retVal = PARTIAL; // The two circles overlap, now we need to check and // see if one is completely inside of the other one if ((Math.pow(pt1.x - pt2.x, 2) + Math.pow(pt1.y - pt2.y, 2)) < (Math.pow(rad1 - rad2, 2))) { retVal = FULL; if (rad1 < retval =" FULL;" retval =" PARTIAL;" retval =" NONE;">

And then we created this blog! It was really fun, and I'm looking forward to day #2!

Best,
Carson Kahn
www.CarsonKahn.co.nr