Difference between revisions of "Testing Movie Caption Scroll"

From Viewpoints Intelligent Archive
Jump to: navigation, search
 
(5 intermediate revisions by the same user not shown)
Line 2: Line 2:
 
service=youtubeIA
 
service=youtubeIA
 
|id=R81egpgDzbY
 
|id=R81egpgDzbY
|alignment=center
+
|alignment=left
 +
|autoresize=false
 
}}
 
}}
  
<div id="0"><p class="subtitle">Our first example of Shadama is a simple physics simulation of particles and gravity.</p></div>
+
== Introduction ==
<div id="5"><p class="subtitle">As in the LOGO programming language, we refer to mobile objects as turtles. Here, we
+
<note for="0:00">
declare a breed of turtle such that each turtle will have properties
+
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.  This is an example of image in note [[File:Shadama.png]].
      "x", "y", "r", "g", "b" and "a".</p></div>
+
 
<div id="15"><p class="subtitle">A method is defined with the keyword "def". Methods are executed on
+
Make it even longer. And even longer.
each turtle in a breed. Here, we've defined the "setColor" method to use the turtle's x and y
+
</note>
coordinates to assign them a red and green value.</p></div>
+
<subtitle id="0">Our first example of Shadama is a simple physics simulation of particles and gravity.</subtitle>
<div id="27"><p class="subtitle">In the static function "setup", we set the number of
+
 
turtles in the breed to be 3,000 and then set all turtle's x and y coordinates to be a
+
<note for="0:05">
random number between 0 and 512. We run "setup" by hitting Cmd-S.</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="38"><p class="subtitle">Those dots may be hard to see, but we can increase the number of turtles
+
</note>
to 30,000, 300,000 or 1 million.</p></div>
+
<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>
<div id="47"><p class="subtitle">What we want to do next is to move those turtles around. So we define
+
 
a method called "move". Move increments the x and y of the turtles. We call
+
<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>
the move method from a static function "step".</p></div>
+
 
<div id="58"><p class="subtitle">When we click the "step" clock, "step" is repeatedly executed and the turtles move.</p></div>
+
<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>
<div id="63"><p class="subtitle">Interestingly, while they are moving, we can edit the program on the
+
 
fly and the changes take effect as soon as we hit Cmd-S. We can add an
+
<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>
argument to "move", use it in the code, change the call site and the
+
 
turtles that went off screen come back.</p></div>
+
<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>
<div id="87"><p class="subtitle">We could even allow each individual turtle to have its own
+
 
velocity. So let's add properties "dx" and "dy" to each turtle. Then, we use them in
+
<subtitle id="58">When we click the "step" clock, "step" is repeatedly executed and the turtles move.</subtitle>
"move". Here, instead of "n", we increment the "x" and "y" of each turtle
+
 
according to their "dx" and "dy".</p></div>
+
== Live Code Update ==
<div id="104"><p class="subtitle">We call the primitive "fillRandom" to set the "dx" and "dy" to be the x and y components
+
 
of a randomly-chosen direction vector. Now, all turtles move
+
<note for="63">
in their own individual directions.</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="116"><p class="subtitle">Let's run it again by executing "setup" manually.</p></div>
+
</note>
<div id="122"><p class="subtitle">Now we'll change this to be a simple gravity simulation. To do so, we add constant
+
 
acceleration to the "y" component of the velocity.  Now all turtles are
+
<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>
accelerating toward the bottom.</p></div>
+
 
<div id="133"><p class="subtitle">We don't want those particles to go out of bounds. So we modify
+
<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>
the "move" method. First we store "dx" and "dy", as well as the possible
+
 
new location of "x" and "y" into local variables.</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="143"><p class="subtitle">When "newX" is out of bounds, we make the turtle bounce back.</p></div>
+
 
<div id="149"><p class="subtitle">When "newY" is out of bounds below, we wrap the value around to the top.</p></div>
+
<subtitle id="116">Let's run it again by executing "setup" manually.</subtitle>
<div id="157"><p class="subtitle">After adjusting those variables,
+
 
we write the values back to the turtle's properties. Now one million
+
<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>
turtles are falling down, bouncing off the side walls, and wrapping around
+
 
to the top.</p></div>
+
<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>
<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
+
 
patch is a 2D grid of cells where turtles can store values. Here,
+
<subtitle id="143">When "newX" is out of bounds, we make the turtle bounce back.</subtitle>
we create a patch called "Field", and add "r", "g", "b", and "a" properties for each cell.</p></div>
+
 
<div id="191"><p class="subtitle">And, we define a breed called "Filler" that operates on the Field.</p></div>
+
<subtitle id="149">When "newY" is out of bounds below, we wrap the value around to the top.</subtitle>
<div id="197"><p class="subtitle">Now we define a method called "fill". The argument for this method is the patch, and
+
 
turtles executing this method update the patch cell value at their x and y coordinates.</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="208"><p class="subtitle">We modify "setup" to use a primitive called
+
 
"fillSpace", which creates turtles of the Filler breed and
+
== Patch Variables ==
places 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, resulting
+
<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>
in this color gradient.</p></div>
+
 
<div id="225"><p class="subtitle">Let's make some shapes now. We define
+
<subtitle id="191">And, we define a breed called "Filler" that operates on the Field.</subtitle>
the "fillCircle" method to replace "fill". Let's also add the "clear" method, which clears the field's values.</p></div>
+
 
<div id="238"><p class="subtitle">"fillCircle" works by having each Filler turtle
+
<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>
check whether it is within the radius of the circle. If it is, it writes
+
 
the value into their corresponding cell.</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="256"><p class="subtitle">In the "setup" function, we call "fillCircle" and get a circle at (100, 100).</p></div>
+
 
<div id="265"><p class="subtitle">Shadama programs can also be interactive. Let's split the "setup" function and
+
<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>
create another one called "loop".</p></div>
+
 
<div id="280"><p class="subtitle">Notice to the right that there is a variable
+
<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>
called "mousemove", which changes its value as we move the mouse pointer in the
+
 
display. That is an indication that we can use the value in our
+
<subtitle id="256">In the "setup" function, we call "fillCircle" and get a circle at (100, 100).</subtitle>
program.</p></div>
+
 
<div id="297"><p class="subtitle">Now let's tie it all together. This code has methods we used
+
<subtitle id="265">Shadama programs can also be interactive. Let's split the "setup" function andcreate another one called "loop".</subtitle>
previously, such as "setColor". "fillCircle" is slightly modified so that
+
 
it sets normal vectors for the circle in the patch.</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="309"><p class="subtitle">In the "move"
+
 
method, each turtle checks the normal in the patch cell where the turtle is
+
<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>
located and computes a new direction from the dot product with the normal. When we run
+
 
this, particles bounce off the circle and make a beautiful pattern.</p></div>
+
<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>
<div id="336"><p class="subtitle">However, it is a bit hard to see because the colors of the turtles are too
+
 
similar. Here, we change the "setColor" method so that instead of using "x"
+
<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>
and "y" position, we use the velocity "dx" and "dy" to determine the turtles'
+
 
color.</p></div>
+
<subtitle id="349">Then we call "setColor" from "loop", so that the colors are updated continuously.</subtitle>
<div id="349"><p class="subtitle">Then we call "setColor" from "loop", so that the colors are updated continuously.</p></div>
+
 
<div id="354"><p class="subtitle">Here, horizontal velocity corresponds with reddish color, and vertical
+
<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>
velocity corresponds with greenish color. The visualization can be quickly adjusted
+
 
to match how you prefer to view the simulation.</p></div>
+
<subtitle id="364">For fun, you can make two circles that move symmetrically.</subtitle>
<div id="364"><p class="subtitle">For fun, you can make two circles that move symmetrically.</p></div>
+
 
<div id="373"><p class="subtitle">Here's an interesting variation of our program. Instead of modeling gravity as pulling downward, gravity follows
+
<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>
the inverse square law in relation to the mouse pointer location. It looks like
+
 
there are large structures, but it's actually just a
+
<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>
quarter million particles from regular initial positions, all following the inverse square law.</p></div>
+
 
<div id="411"><p class="subtitle">Shadama allows the user to import images. The built-in "fillImage"
+
<subtitle id="431">We reuse our previous "move" method, set thedirection vectors randomly, create the "loop" method that calls "move", and run "loop".</subtitle>
takes an image object, creates enough turtles to cover it, and sets the turtle colors
+
 
based on the image's pixel values. This looks like an image but it is
+
<subtitle id="455">For fun,We can use the turtles' red and green values to determine turtle velocity, causing anan interesting effect.</subtitle>
actually a bunch of turtles.</p></div>
+
 
<div id="431"><p class="subtitle">We reuse our previous "move" method, set the
+
<subtitle id="477">Let's use those pixels in our gravity simulation.</subtitle>
direction vectors randomly, create the "loop" method that calls "move", and run "loop".</p></div>
+
 
<div id="455"><p class="subtitle">For fun,
+
<subtitle id="489">The code checks the timer, and every 10 seconds, it gathers all turtles to their original position.</subtitle>
We can use the turtles' red and green values to determine turtle velocity, causing an
+
 
an interesting effect.</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="477"><p class="subtitle">Let's use those pixels in our gravity simulation.</p></div>
+
 
<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>
+
<subtitle id="520">This is Conway's Game of Life.</subtitle>
<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
+
<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>
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>
 

Latest revision as of 04:11, 9 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. This is an example of image in note File:Shadama.png.

Make it even longer. And even longer.

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.