Difference between revisions of "Testing Movie Caption Scroll"

From Viewpoints Intelligent Archive
Jump to: navigation, search
m (Ohshima moved page First Sand Box for EmbedMovie extension to Testing Movie Caption Scroll without leaving a redirect)
Line 3: Line 3:
 
|id=R81egpgDzbY
 
|id=R81egpgDzbY
 
|alignment=center
 
|alignment=center
 +
|autoresize=false
 
}}
 
}}
  
<subtitle>
+
== Introduction ==
<div id="0"><p class="subtitle">Our first example of Shadama is a simple physics simulation of particles and gravity.</p></div>
+
<note for="0:00">
<div id="5"><p class="subtitle">As in the LOGO programming language, we refer to mobile objects as turtles. Here, we
+
This is the beginning of this movie. The font seems to be too big now.  [http://tinlizzie.org/~ohshima/shadama2] is the working version of this.
declare a breed of turtle such that each turtle will have properties
+
</note>
      "x", "y", "r", "g", "b" and "a".</p></div>
+
<subtitle id="0">Our first example of Shadama is a simple physics simulation of particles and gravity.</subtitle>
<div id="15"><p class="subtitle">A method is defined with the keyword "def". Methods are executed on
+
 
each turtle in a breed. Here, we've defined the "setColor" method to use the turtle's x and y
+
<note for="0:05">
coordinates to assign them a red and green value.</p></div>
+
As a result of font size issue, this is already moved below.  The transcript would have to have a reasonable spacing.
<div id="27"><p class="subtitle">In the static function "setup", we set the number of
+
</note>
turtles in the breed to be 3,000 and then set all turtle's x and y coordinates to be a
+
<subtitle id="5">As in the LOGO programming language, we refer to mobile objects as turtles. Here, wedeclare a breed of turtle such that each turtle will have properties     "x", "y", "r", "g", "b" and "a".</subtitle>
random number between 0 and 512. We run "setup" by hitting Cmd-S.</p></div>
+
 
<div id="38"><p class="subtitle">Those dots may be hard to see, but we can increase the number of turtles
+
<subtitle id="15">A method is defined with the keyword "def". Methods are executed oneach turtle in a breed. Here, we've defined the "setColor" method to use the turtle's x and ycoordinates to assign them a red and green value.</subtitle>
to 30,000, 300,000 or 1 million.</p></div>
+
 
<div id="47"><p class="subtitle">What we want to do next is to move those turtles around. So we define
+
<subtitle id="27">In the static function "setup", we set the number ofturtles in the breed to be 3,000 and then set all turtle's x and y coordinates to be arandom number between 0 and 512. We run "setup" by hitting Cmd-S.</subtitle>
a method called "move". Move increments the x and y of the turtles. We call
+
 
the move method from a static function "step".</p></div>
+
<subtitle id="38">Those dots may be hard to see, but we can increase the number of turtles to 30,000, 300,000 or 1 million.</subtitle>
<div id="58"><p class="subtitle">When we click the "step" clock, "step" is repeatedly executed and the turtles move.</p></div>
+
 
<div id="63"><p class="subtitle">Interestingly, while they are moving, we can edit the program on the
+
<subtitle id="47">What we want to do next is to move those turtles around. So we definea method called "move". Move increments the x and y of the turtles. We callthe move method from a static function "step".</subtitle>
fly and the changes take effect as soon as we hit Cmd-S. We can add an
+
 
argument to "move", use it in the code, change the call site and the
+
<subtitle id="58">When we click the "step" clock, "step" is repeatedly executed and the turtles move.</subtitle>
turtles that went off screen come back.</p></div>
+
 
<div id="87"><p class="subtitle">We could even allow each individual turtle to have its own
+
== Live Code Update ==
velocity. So let's add properties "dx" and "dy" to each turtle. Then, we use them in
+
 
"move". Here, instead of "n", we increment the "x" and "y" of each turtle
+
<note for="63">
according to their "dx" and "dy".</p></div>
+
While a more aggressive form of Liveness, where the behavior changes at each keystroke is conceivable, there are often cases when multiple changes to different code locations constitutes a single logical change. We chose to wait until the user hits save key gesture.
<div id="104"><p class="subtitle">We call the primitive "fillRandom" to set the "dx" and "dy" to be the x and y components
+
</note>
of a randomly-chosen direction vector. Now, all turtles move
+
 
in their own individual directions.</p></div>
+
<subtitle id="63">Interestingly, while they are moving, we can edit the program on thefly and the changes take effect as soon as we hit Cmd-S. We can add anargument to "move", use it in the code, change the call site and theturtles that went off screen come back.</subtitle>
<div id="116"><p class="subtitle">Let's run it again by executing "setup" manually.</p></div>
+
 
<div id="122"><p class="subtitle">Now we'll change this to be a simple gravity simulation. To do so, we add constant
+
<subtitle id="87">We could even allow each individual turtle to have its ownvelocity. So let's add properties "dx" and "dy" to each turtle. Then, we use them in"move". Here, instead of "n", we increment the "x" and "y" of each turtleaccording to their "dx" and "dy".</subtitle>
acceleration to the "y" component of the velocity.  Now all turtles are
+
 
accelerating toward the bottom.</p></div>
+
<subtitle id="104">We call the primitive "fillRandom" to set the "dx" and "dy" to be the x and y componentsof a randomly-chosen direction vector. Now, all turtles movein their own individual directions.</subtitle>
<div id="133"><p class="subtitle">We don't want those particles to go out of bounds. So we modify
+
 
the "move" method. First we store "dx" and "dy", as well as the possible
+
<subtitle id="116">Let's run it again by executing "setup" manually.</subtitle>
new location of "x" and "y" into local variables.</p></div>
+
 
<div id="143"><p class="subtitle">When "newX" is out of bounds, we make the turtle bounce back.</p></div>
+
<subtitle id="122">Now we'll change this to be a simple gravity simulation. To do so, we add constantacceleration to the "y" component of the velocity.  Now all turtles areaccelerating toward the bottom.</subtitle>
<div id="149"><p class="subtitle">When "newY" is out of bounds below, we wrap the value around to the top.</p></div>
+
 
<div id="157"><p class="subtitle">After adjusting those variables,
+
<subtitle id="133">We don't want those particles to go out of bounds. So we modifythe "move" method. First we store "dx" and "dy", as well as the possiblenew location of "x" and "y" into local variables.</subtitle>
we write the values back to the turtle's properties. Now one million
+
 
turtles are falling down, bouncing off the side walls, and wrapping around
+
<subtitle id="143">When "newX" is out of bounds, we make the turtle bounce back.</subtitle>
to the top.</p></div>
+
 
<div id="173"><p class="subtitle">We are now going to create a simulation with large objects. To do so, we use what's called a "patch". A
+
<subtitle id="149">When "newY" is out of bounds below, we wrap the value around to the top.</subtitle>
patch is a 2D grid of cells where turtles can store values. Here,
+
 
we create a patch called "Field", and add "r", "g", "b", and "a" properties for each cell.</p></div>
+
<subtitle id="157">After adjusting those variables, we write the values back to the turtle's properties. Now one million turtles are falling down, bouncing off the side walls, and wrapping around to the top.</subtitle>
<div id="191"><p class="subtitle">And, we define a breed called "Filler" that operates on the Field.</p></div>
+
 
<div id="197"><p class="subtitle">Now we define a method called "fill". The argument for this method is the patch, and
+
== Patch Variables ==
turtles executing this method update the patch cell value at their x and y coordinates.</p></div>
+
 
<div id="208"><p class="subtitle">We modify "setup" to use a primitive called
+
<subtitle id="173">We are now going to create a simulation with large objects. To do so, we use what's called a "patch". Apatch is a 2D grid of cells where turtles can store values. Here,we create a patch called "Field", and add "r", "g", "b", and "a" properties for each cell.</subtitle>
"fillSpace", which creates turtles of the Filler breed and
+
 
places them at all integral grid points. When this "setup" is called,
+
<subtitle id="191">And, we define a breed called "Filler" that operates on the Field.</subtitle>
and the "fill" method is called, each "r" and "g" of the patch get values derived from its position, resulting
+
 
in this color gradient.</p></div>
+
<subtitle id="197">Now we define a method called "fill". The argument for this method is the patch, andturtles executing this method update the patch cell value at their x and y coordinates.</subtitle>
<div id="225"><p class="subtitle">Let's make some shapes now. We define
+
 
the "fillCircle" method to replace "fill". Let's also add the "clear" method, which clears the field's values.</p></div>
+
<subtitle id="208">We modify "setup" to use a primitive called"fillSpace", which creates turtles of the Filler breed andplaces them at all integral grid points. When this "setup" is called,and the "fill" method is called, each "r" and "g" of the patch get values derived from its position, resultingin this color gradient.</subtitle>
<div id="238"><p class="subtitle">"fillCircle" works by having each Filler turtle
+
 
check whether it is within the radius of the circle. If it is, it writes
+
<subtitle id="225">Let's make some shapes now. We definethe "fillCircle" method to replace "fill". Let's also add the "clear" method, which clears the field's values.</subtitle>
the value into their corresponding cell.</p></div>
+
 
<div id="256"><p class="subtitle">In the "setup" function, we call "fillCircle" and get a circle at (100, 100).</p></div>
+
<subtitle id="238">"fillCircle" works by having each Filler turtlecheck whether it is within the radius of the circle. If it is, it writesthe value into their corresponding cell.</subtitle>
<div id="265"><p class="subtitle">Shadama programs can also be interactive. Let's split the "setup" function and
+
 
create another one called "loop".</p></div>
+
<subtitle id="256">In the "setup" function, we call "fillCircle" and get a circle at (100, 100).</subtitle>
<div id="280"><p class="subtitle">Notice to the right that there is a variable
+
 
called "mousemove", which changes its value as we move the mouse pointer in the
+
<subtitle id="265">Shadama programs can also be interactive. Let's split the "setup" function andcreate another one called "loop".</subtitle>
display. That is an indication that we can use the value in our
+
 
program.</p></div>
+
<subtitle id="280">Notice to the right that there is a variablecalled "mousemove", which changes its value as we move the mouse pointer in thedisplay. That is an indication that we can use the value in ourprogram.</subtitle>
<div id="297"><p class="subtitle">Now let's tie it all together. This code has methods we used
+
 
previously, such as "setColor". "fillCircle" is slightly modified so that
+
<subtitle id="297">Now let's tie it all together. This code has methods we usedpreviously, such as "setColor". "fillCircle" is slightly modified so thatit sets normal vectors for the circle in the patch.</subtitle>
it sets normal vectors for the circle in the patch.</p></div>
+
 
<div id="309"><p class="subtitle">In the "move"
+
<subtitle id="309">In the "move"method, each turtle checks the normal in the patch cell where the turtle islocated and computes a new direction from the dot product with the normal. When we runthis, particles bounce off the circle and make a beautiful pattern.</subtitle>
method, each turtle checks the normal in the patch cell where the turtle is
+
 
located and computes a new direction from the dot product with the normal. When we run
+
<subtitle id="336">However, it is a bit hard to see because the colors of the turtles are toosimilar. Here, we change the "setColor" method so that instead of using "x"and "y" position, we use the velocity "dx" and "dy" to determine the turtles'color.</subtitle>
this, particles bounce off the circle and make a beautiful pattern.</p></div>
+
 
<div id="336"><p class="subtitle">However, it is a bit hard to see because the colors of the turtles are too
+
<subtitle id="349">Then we call "setColor" from "loop", so that the colors are updated continuously.</subtitle>
similar. Here, we change the "setColor" method so that instead of using "x"
+
 
and "y" position, we use the velocity "dx" and "dy" to determine the turtles'
+
<subtitle id="354">Here, horizontal velocity corresponds with reddish color, and verticalvelocity corresponds with greenish color. The visualization can be quickly adjustedto match how you prefer to view the simulation.</subtitle>
color.</p></div>
+
 
<div id="349"><p class="subtitle">Then we call "setColor" from "loop", so that the colors are updated continuously.</p></div>
+
<subtitle id="364">For fun, you can make two circles that move symmetrically.</subtitle>
<div id="354"><p class="subtitle">Here, horizontal velocity corresponds with reddish color, and vertical
+
 
velocity corresponds with greenish color. The visualization can be quickly adjusted
+
<subtitle id="373">Here's an interesting variation of our program. Instead of modeling gravity as pulling downward, gravity followsthe inverse square law in relation to the mouse pointer location. It looks likethere are large structures, but it's actually just aquarter million particles from regular initial positions, all following the inverse square law.</subtitle>
to match how you prefer to view the simulation.</p></div>
+
 
<div id="364"><p class="subtitle">For fun, you can make two circles that move symmetrically.</p></div>
+
<subtitle id="411">Shadama allows the user to import images. The built-in "fillImage"takes an image object, creates enough turtles to cover it, and sets the turtle colorsbased on the image's pixel values. This looks like an image but it isactually a bunch of turtles.</subtitle>
<div id="373"><p class="subtitle">Here's an interesting variation of our program. Instead of modeling gravity as pulling downward, gravity follows
+
 
the inverse square law in relation to the mouse pointer location. It looks like
+
<subtitle id="431">We reuse our previous "move" method, set thedirection vectors randomly, create the "loop" method that calls "move", and run "loop".</subtitle>
there are large structures, but it's actually just a
+
 
quarter million particles from regular initial positions, all following the inverse square law.</p></div>
+
<subtitle id="455">For fun,We can use the turtles' red and green values to determine turtle velocity, causing anan interesting effect.</subtitle>
<div id="411"><p class="subtitle">Shadama allows the user to import images. The built-in "fillImage"
+
 
takes an image object, creates enough turtles to cover it, and sets the turtle colors
+
<subtitle id="477">Let's use those pixels in our gravity simulation.</subtitle>
based on the image's pixel values. This looks like an image but it is
+
 
actually a bunch of turtles.</p></div>
+
<subtitle id="489">The code checks the timer, and every 10 seconds, it gathers all turtles to their original position.</subtitle>
<div id="431"><p class="subtitle">We reuse our previous "move" method, set the
+
 
direction vectors randomly, create the "loop" method that calls "move", and run "loop".</p></div>
+
<subtitle id="500">We can also try some mathematical functions. This is a program tovisualize the Mandelbrot set. Notice how we can change the color scheme on thefly.</subtitle>
<div id="455"><p class="subtitle">For fun,
+
 
We can use the turtles' red and green values to determine turtle velocity, causing an
+
<subtitle id="520">This is Conway's Game of Life.</subtitle>
an interesting effect.</p></div>
+
 
<div id="477"><p class="subtitle">Let's use those pixels in our gravity simulation.</p></div>
+
<subtitle id="525">Again, we can change the program whilethe simulation is running, and the code change is reflected in thesimulation right away, without needing to restart.</subtitle>
<div id="489"><p class="subtitle">The code checks the timer, and every 10 seconds, it gathers all turtles to their original position.</p></div>
 
<div id="500"><p class="subtitle">We can also try some mathematical functions. This is a program to
 
visualize the Mandelbrot set. Notice how we can change the color scheme on the
 
fly.</p></div>
 
<div id="520"><p class="subtitle">This is Conway's Game of Life.</p></div>
 
<div id="525"><p class="subtitle">Again, we can change the program while
 
the simulation is running, and the code change is reflected in the
 
simulation right away, without needing to restart.</p></div>
 
</subtitle>
 

Revision as of 05:25, 7 November 2017

Introduction

(time: 0:00)

This is the beginning of this movie. The font seems to be too big now. [1] is the working version of this.

Our first example of Shadama is a simple physics simulation of particles and gravity.
(time: 0:05)

As a result of font size issue, this is already moved below. The transcript would have to have a reasonable spacing.

As in the LOGO programming language, we refer to mobile objects as turtles. Here, wedeclare a breed of turtle such that each turtle will have properties "x", "y", "r", "g", "b" and "a".
A method is defined with the keyword "def". Methods are executed oneach turtle in a breed. Here, we've defined the "setColor" method to use the turtle's x and ycoordinates to assign them a red and green value.
In the static function "setup", we set the number ofturtles in the breed to be 3,000 and then set all turtle's x and y coordinates to be arandom number between 0 and 512. We run "setup" by hitting Cmd-S.
Those dots may be hard to see, but we can increase the number of turtles to 30,000, 300,000 or 1 million.
What we want to do next is to move those turtles around. So we definea method called "move". Move increments the x and y of the turtles. We callthe move method from a static function "step".
When we click the "step" clock, "step" is repeatedly executed and the turtles move.

Live Code Update

(time: 63)

While a more aggressive form of Liveness, where the behavior changes at each keystroke is conceivable, there are often cases when multiple changes to different code locations constitutes a single logical change. We chose to wait until the user hits save key gesture.

Interestingly, while they are moving, we can edit the program on thefly and the changes take effect as soon as we hit Cmd-S. We can add anargument to "move", use it in the code, change the call site and theturtles that went off screen come back.
We could even allow each individual turtle to have its ownvelocity. So let's add properties "dx" and "dy" to each turtle. Then, we use them in"move". Here, instead of "n", we increment the "x" and "y" of each turtleaccording to their "dx" and "dy".
We call the primitive "fillRandom" to set the "dx" and "dy" to be the x and y componentsof a randomly-chosen direction vector. Now, all turtles movein their own individual directions.
Let's run it again by executing "setup" manually.
Now we'll change this to be a simple gravity simulation. To do so, we add constantacceleration to the "y" component of the velocity. Now all turtles areaccelerating toward the bottom.
We don't want those particles to go out of bounds. So we modifythe "move" method. First we store "dx" and "dy", as well as the possiblenew location of "x" and "y" into local variables.
When "newX" is out of bounds, we make the turtle bounce back.
When "newY" is out of bounds below, we wrap the value around to the top.
After adjusting those variables, we write the values back to the turtle's properties. Now one million turtles are falling down, bouncing off the side walls, and wrapping around to the top.

Patch Variables

We are now going to create a simulation with large objects. To do so, we use what's called a "patch". Apatch is a 2D grid of cells where turtles can store values. Here,we create a patch called "Field", and add "r", "g", "b", and "a" properties for each cell.
And, we define a breed called "Filler" that operates on the Field.
Now we define a method called "fill". The argument for this method is the patch, andturtles executing this method update the patch cell value at their x and y coordinates.
We modify "setup" to use a primitive called"fillSpace", which creates turtles of the Filler breed andplaces them at all integral grid points. When this "setup" is called,and the "fill" method is called, each "r" and "g" of the patch get values derived from its position, resultingin this color gradient.
Let's make some shapes now. We definethe "fillCircle" method to replace "fill". Let's also add the "clear" method, which clears the field's values.
"fillCircle" works by having each Filler turtlecheck whether it is within the radius of the circle. If it is, it writesthe value into their corresponding cell.
In the "setup" function, we call "fillCircle" and get a circle at (100, 100).
Shadama programs can also be interactive. Let's split the "setup" function andcreate another one called "loop".
Notice to the right that there is a variablecalled "mousemove", which changes its value as we move the mouse pointer in thedisplay. That is an indication that we can use the value in ourprogram.
Now let's tie it all together. This code has methods we usedpreviously, such as "setColor". "fillCircle" is slightly modified so thatit sets normal vectors for the circle in the patch.
In the "move"method, each turtle checks the normal in the patch cell where the turtle islocated and computes a new direction from the dot product with the normal. When we runthis, particles bounce off the circle and make a beautiful pattern.
However, it is a bit hard to see because the colors of the turtles are toosimilar. Here, we change the "setColor" method so that instead of using "x"and "y" position, we use the velocity "dx" and "dy" to determine the turtles'color.
Then we call "setColor" from "loop", so that the colors are updated continuously.
Here, horizontal velocity corresponds with reddish color, and verticalvelocity corresponds with greenish color. The visualization can be quickly adjustedto match how you prefer to view the simulation.
For fun, you can make two circles that move symmetrically.
Here's an interesting variation of our program. Instead of modeling gravity as pulling downward, gravity followsthe inverse square law in relation to the mouse pointer location. It looks likethere are large structures, but it's actually just aquarter million particles from regular initial positions, all following the inverse square law.
Shadama allows the user to import images. The built-in "fillImage"takes an image object, creates enough turtles to cover it, and sets the turtle colorsbased on the image's pixel values. This looks like an image but it isactually a bunch of turtles.
We reuse our previous "move" method, set thedirection vectors randomly, create the "loop" method that calls "move", and run "loop".
For fun,We can use the turtles' red and green values to determine turtle velocity, causing anan interesting effect.
Let's use those pixels in our gravity simulation.
The code checks the timer, and every 10 seconds, it gathers all turtles to their original position.
We can also try some mathematical functions. This is a program tovisualize the Mandelbrot set. Notice how we can change the color scheme on thefly.
This is Conway's Game of Life.
Again, we can change the program whilethe simulation is running, and the code change is reflected in thesimulation right away, without needing to restart.