Direct, Inverse and Joint Variation Equations

Direct variation is a variation equation , relating one variable to one or more others using multiplication and or division.

We can use this to solve for d in a distance rate time problem. d=rt

if the rate is going to be a constant when the other variables are changing, then :
distance varies directly as time and
the distance is directly proportional to time.

Examples: page 321 in text has lots more
In electronics, Resistance of wire varies directly as its length R=kL
In medicine, dosage is directly proportionate to weight of person d=kw

 

Joint Variation is when one quantity may vary directly as a product of two or more other quantities.

If a variable y varies jointly with variable x and z, then y=kxz where k is the constant of proportionality.

In geometry the area A of a triangle varies jointly as its base b and height h. A=kbh
If F varies jointly as H and G then  F=kHG

Z varies jointly as W and Y . If Z=330 when W=11 and Y=10, find Z when W=60 and Y=10
First find the variation: The variation is Z=kWY.

Second find k using the first set of values 330=k(11)(10) | 330=k(110) | k=330/110 | k=3
Third solve for Z using the second set of values and the k you just found… Z=(3)(60)(10) | z=1800

Inverse variation is when one quantity increases as the other decreases and vice versa. y=k/x

We would use this in a distance rate time equation (d=r/t | t=d/r) when we were solving for t
T=k/r

For the weight of an astronaut problem, the weight W of an object varies inversely as the square of the distance d from the center of the earth.When w=111, d=3978 find k. It really helped me to leave the numbers unmultiplied

W=k/d^2

111=k/3978^2 | k=111(3978^2)

now find w when d=434+3978
w=111(3978^2)/(434+3978)^2
w=90.24

 

Combined variation is awesome..

T varies direclty as the square of D and inversly as F. The variation is : (T=kD^2)/F

The number of phone calls between two cities, N, varies directly as the populations (p1+p2) and inversly as distance between, d

The variation is N=kp1p2/d
If 69000 is N number of calls and d distance between cities  is 340 and p1 p2=(40800)(230000) then find k

69000= k((40800)(230000))/340
69,000=27,600,000k
k=69000/27600000
k=.0025

how many calls, N, are made when d=455and p1p2=(70,000)(160,000) and k=.0025
N=kp1p2/d
N=.0025(70,000)(160,000)/455
N=612538 rounded to nearest integer

F=kq1q2/d^2
F=6 when q1=9 and q2=3 and d=3
6=k(9)(3)/3^2
3k=6
k=2

find f when q1=6 q2=4 and d=2
F=(2)(6)(4)/2^2
f=12

 

 

HTML5 vs Flash Animation

Here is my html5fun file

Here is one that I was messin with background colors to dominate the dom.

Here is the css gradients playground

 

 

The code is pretty straightforward. This solution to Flash is pretty lame to me. The Flash worked well in every device except the ipad, but now we have to code multiple file types for each audio or video we would wish to embed.

 

For example: where I would have made one flash movie to use everywhere, and maybe just skipped the I-audience, now I have to encode three html5 compatible files, as well as the flash player fallback. And honestly, the html5 versions just don’t function the same across platforms. We get a slightly different reaction in every browser, when the Flash one would be exactly the same everywhere it was displayed.

 

<video autoplay="autoplay" controls="controls" preload="auto">
<!-- HTML5 source list: -->
<source src="video/movie.mp4" type="video/mp4">
<source src="video/movie.ogv" type="video/ogg">
<source src="video/movie.webm" type="video/webm">
<!-- Fallback to Flash: -->
<object width="720" height="400" type="application/x-shockwave-flash" data="flash-fallback/FlashVideoPlayer.swf">
<param name="movie" value="flash-fallback/FlashVideoPlayer.swf" /> <param name="flashvars" value="file=video/movie.mp4" />
<!-- Fallback image: -->
<img src="videofail.jpg" width="720" height="400" alt="Can't load video." title="No video playback capabilities" />
</object>
</video>

 

Here are screenshots from a demo I created. Its a small animation , with an audio sound effect that should play on page load. In firefox, the audio is non existent, and even the fallback error isn’t working.

In Internet explorer, the audio plays, but there is an ugly control bar, and the animation won’t play when you click it.

Research on Ipad and android devices coming soon.

Flash is the perfect way to create accents and highlight art and animations on your webpages. Lets start by making a logo for the top of my site here. I would like to have some cool looking text, with animated effects, just to add some spark to my page. Thats what I will go for , a “sparking text” type of effect. It needs to be 627X65. The width is the most important part, as the height will be relative. For this purpose, we are going to use text, with an outline, a gradient fill and a drop shadow.

Now we can try recreate a similar text effect using pure html5. Here is a test of Apple’s “Hype”, an HTML 5 authoring program for graphics and animation. Their answer to the “hype” that they feel flash is riding on. HTML is a text markup language. And it does a great job of marking up the text. you can have fonts, and italics. Trying to make this text markup language perform animations and add graphical effects such as drop shadow and opacity is not what it was made for.

Fire up flash. bust out some cool text. add some sparking effects on touch. export it out and put in a page. now lets test the page on several devices including pc, mac and mobile.




Using Ajax loading animations.

There are some techniques for making the “Loading” animation work when you want it.

During your jquery script calls, you used to initiate the loading anim using:

$.mobile.showPageLoadingMsg(“b”, “Attempting login…”);

The docs say that the mobile pageloading is depreciated and to use this:

$.mobile.loading( 'show') ;

Here is how to customize the call to change the theme, what text is displayed, and whether or not the spinning loader graphic is displayed.

$.mobile.loading( 'show', { theme: "b", text: "foo", textonly: true });
Object Param Arguments
theme (string, default: “a”) The theme swatch for the message.
text (string, default: “loading”) The text of the message.
textonly (boolean, default: false) If true, the “spinner” image will be hidden when the message is shown.
textVisible (boolean, default: false) If true, the text value will be used under the spinner.
html (string, default: “”) If this is set to a non empty string value, it will be used to replace the entirety of the loader’s inner html.
Here is my final version of the loader used in my progress reporting application. I created a custom animation using the school’s logo and scripted the loading animation whenever user interaction required a notice that things were going on behind the scenes.
$.mobile.loading( ‘show’, {
text: ‘Accessing Data…’,
textVisible: true,
theme: ‘b’,
html: “<center>Attempting Login…<br/><img src=’themes/images/svcloader_sm.gif’></center>”
});
I love using the “depreciated” center tag because it works so well on EVERY device and browser that exists. This is one of those rare times when CSS isn’t the answer, since I don’t’ want to make a special style sheet that would need to be included in every situation that I call this from.
When my scripts are done with the user interaction, I close the loading animation as such:
$.mobile.loading( ‘hide’ );

Break My Phone

Here is an app inspired by my friends at the college, where the user touches, the screen cracks and makes a crunching sound effect. This needs some finishing touches to be released into the app market. I made this in Flash CS5 during class at college.

Here is an attempt to have “data bugs” come out from the cracks. Just a start of an idea, not even close to done.

Mouse , cursor and touch detection with Flash CS5

Here is my click, touch and cursor movement practice. This contains some good code examples for detecting whether the user has touched or clicked with a mouse, including mouseover hover.There is even code that lets the touch user drag the object, but not the mouse user. I created this code during my Flash CS5 course winter 2011 at skagit valley college.

Here is a touch detection example with animation on press.