Page 11: Try it Yourself

So far, this workbook has mainly been you reading code (and html). Hopefully, you also took the opportunity to do some extra reading (for example, reading some JavaScript references). And some tinkering: one way to understand the programs is to try to make changes to see how things work.

On this page, we have three boxes that you need to do yourself.

To help you check that you are getting the concepts, here are a few little programming things to try. In each box, we will ask you to do something. You should edit the HTML and JavaScript files accordingly to do it. These will be the things that the grader will check.

Since we haven’t learned to do any graphics programming yet, we have to practice web programming by manipulating sliders and text. But make sure you understand what you are doing, since they will be the building blocks for doing more interesting things later.

And of course, to correctly use GIT to commit your work and push it back to the repository on GitHub.

Sliders

In this box (01-11-01.html), make 3 sliders. Add event handlers such that the third slider shows the difference in value between the first two. So that slider3=slider2 - slider1. Slider3 should move whenever slider1 or slider2 are moved. Making it such that slider1 and/or slider2 move when slider3 moves is a little trickier (and worth more points) - you need to figure out how to make reasonable values for slider 1 and 2 given a new value for slider 3. Write your code in 01-11-01.js

Hint: Box 01-07-04 is a good starting point. The lower of the two sliders there has a nicer behavior for this exercise. Consider setting the min and max properties of the sliders so that the third slider has the right range. The min can be negative.

Start Stop

In this box (01-11-02.html), make a slider and two buttons. One labeled “start” the other labeled “stop”. When you press “start”, the slider starts moving. When you press “stop” the slider stops. This is sortof like the last slider in Box 3 on Page  9  (Animation Loops), except that you should use two buttons, rather than one checkbox. Write your code in 01-11-02.js

Bounce

The sliders on Page  9  (Animation Loops) and Page  10  (Animation Loops: Timing) all went from left to right, and then restarted at the left.

In this box (01-11-03.html), make the slider move from left to right, but when it hits the right edge, have it move right to left. It should repeat (so it goes back and forth - as if it “bounces” when it hits the edge). You must use a time delta, as explained on Page  10  (Animation Loops: Timing), to control timing. Write your code in 01-11-03.js

Throb, not blink

The “blinking” in 01-10-03 is really annoying. Instead let’s make something a little less annoying: instead of just changing to another color in a flash, have the color slowly (but not too slowly) change from one color to another and back. There should be a continuous fade between colors, not discrete jumps. It should repeat. Again, you must use a time delta, as explained on Page  10  (Animation Loops: Timing), to control timing.

The basic version of this would have the color go between red and white. This is basically the same as 01-11-03, except that rather than changing the position of the slider, you are changing the background color of the text (or the blue and green components of the color).

The box below is 01-11-04.html Write your code in 01-11-04.js

Hint: To move between two numbers a and b, you can weigh them with a parameter t which goes between 0 and 1, and the formula t*a + (1-t)*b. If you plug in t=0, you get b, and if you plug in t=1, you get a. If you plug in a value in between, you get some weighted value in between a and b. For example, t=0.5 gives you 0.5*a + 0.5*b=(a+b)/2, which is the average of the two. This concept is called linear interpolation, and we’ll cover it more later in the class.

Hint: We’ve been using HTML colors as hex (so red is #FF0000). You’ll may want to do your math with regular numbers and convert. Here is a reference page that might be useful. Or, you might find a more convenient way to specify colors using numbers. Also see CS559 Color Tutorial.

Note: you need to make the text background alternate between white and red. It should take 1 second to make the transition in each direction (use the clock!).

Note: you should not try to use any fancy HTML animation/transition features to cause the fading. You should write a program that changes the color every time step.

A Checkpoint

Before we go on, now might be a good time to make a checkpoint of your work.

1. Save the localstore to the file (remember to put the file in the right place)
2. Commit and push your work to github
3. Submit a Checkpoint

Here are the widgets to do that, but remember, you can always go to Local Storage Interface which is listed on the page list on the right side of all of the workbook pages.