Difference between revisions of "Testing Movie Caption Scroll"
From Viewpoints Intelligent Archive
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 | ||
}} | }} | ||
| − | + | == Introduction == | |
| − | < | + | <note for="0:00"> |
| − | < | + | 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. |
| − | + | </note> | |
| − | + | <subtitle id="0">Our first example of Shadama is a simple physics simulation of particles and gravity.</subtitle> | |
| − | < | + | |
| − | + | <note for="0:05"> | |
| − | + | As a result of font size issue, this is already moved below. The transcript would have to have a reasonable spacing. | |
| − | < | + | </note> |
| − | + | <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> | |
| − | + | ||
| − | < | + | <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.</ | + | |
| − | < | + | <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> |
| − | + | ||
| − | + | <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> | |
| − | < | + | |
| − | + | <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> | |
| − | + | ||
| − | + | <subtitle id="58">When we click the "step" clock, "step" is repeatedly executed and the turtles move.</subtitle> | |
| − | + | ||
| − | < | + | == Live Code Update == |
| − | + | ||
| − | + | <note for="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. | |
| − | + | </note> | |
| − | + | ||
| − | + | <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> | |
| − | < | + | |
| − | < | + | <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> |
| − | + | ||
| − | + | <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> | |
| − | < | + | |
| − | + | <subtitle id="116">Let's run it again by executing "setup" manually.</subtitle> | |
| − | + | ||
| − | < | + | <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> |
| − | < | + | |
| − | < | + | <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.</ | + | |
| − | + | <subtitle id="149">When "newY" is out of bounds below, we wrap the value around to the top.</subtitle> | |
| − | + | ||
| − | we create a patch called "Field", and add "r", "g", "b", and "a" properties for each cell.</ | + | <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> |
| − | < | + | |
| − | < | + | == Patch Variables == |
| − | + | ||
| − | < | + | <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 | + | |
| − | + | <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, | + | |
| − | + | <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> | |
| − | + | ||
| − | + | <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> | |
| − | < | + | |
| − | + | <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> | |
| − | + | ||
| − | < | + | <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> |
| − | < | + | |
| − | + | <subtitle id="256">In the "setup" function, we call "fillCircle" and get a circle at (100, 100).</subtitle> | |
| − | < | + | |
| − | + | <subtitle id="265">Shadama programs can also be interactive. Let's split the "setup" function andcreate another one called "loop".</subtitle> | |
| − | + | ||
| − | + | <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> | |
| − | < | + | |
| − | + | <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> | |
| − | + | ||
| − | < | + | <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 | + | |
| − | + | <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> | |
| − | + | ||
| − | < | + | <subtitle id="349">Then we call "setColor" from "loop", so that the colors are updated continuously.</subtitle> |
| − | + | ||
| − | 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.</ | + | |
| − | < | + | <subtitle id="364">For fun, you can make two circles that move symmetrically.</subtitle> |
| − | < | + | |
| − | + | <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> | |
| − | + | ||
| − | < | + | <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> |
| − | < | + | |
| − | + | <subtitle id="431">We reuse our previous "move" method, set thedirection vectors randomly, create the "loop" method that calls "move", and run "loop".</subtitle> | |
| − | + | ||
| − | + | <subtitle id="455">For fun,We can use the turtles' red and green values to determine turtle velocity, causing anan interesting effect.</subtitle> | |
| − | < | + | |
| − | takes an image object, creates enough turtles to cover it, and sets the turtle | + | <subtitle id="477">Let's use those pixels in our gravity simulation.</subtitle> |
| − | + | ||
| − | + | <subtitle id="489">The code checks the timer, and every 10 seconds, it gathers all turtles to their original position.</subtitle> | |
| − | < | + | |
| − | + | <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> | |
| − | < | + | |
| − | We can use the turtles' red and green values to determine turtle velocity, causing | + | <subtitle id="520">This is Conway's Game of Life.</subtitle> |
| − | + | ||
| − | < | + | <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> |
| − | < | ||
| − | |||
| − | |||
| − | |||
| − | < | ||
| − | |||
| − | |||
| − | |||
| − | </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.
