Ohshima at 04:11, 9 November 2017

2017-11-09T04:11:09Z

Ohshima at 05:25, 7 November 2017

2017-11-07T05:25:32Z

Show changes

Ohshima: Ohshima moved page First Sand Box for EmbedMovie extension to Testing Movie Caption Scroll without leaving a redirect

2017-11-04T17:23:40Z

Ohshima moved page First Sand Box for EmbedMovie extension to Testing Movie Caption Scroll without leaving a redirect

Ohshima at 17:21, 4 November 2017

2017-11-04T17:21:10Z

Ohshima at 17:19, 4 November 2017

2017-11-04T17:19:47Z

Ohshima at 17:17, 4 November 2017

2017-11-04T17:17:24Z

Ohshima at 17:17, 4 November 2017

2017-11-04T17:17:08Z

Ohshima at 04:20, 2 November 2017

2017-11-02T04:20:18Z

Ohshima: Created page with "https://www.youtube.com/watch?v=pSsYTj9kCHE"

2017-11-02T02:34:57Z

Created page with "<youtube>https://www.youtube.com/watch?v=pSsYTj9kCHE</youtube>"

New page

<youtube>https://www.youtube.com/watch?v=pSsYTj9kCHE</youtube>

@@ Line 2: / Line 2: @@
 service=youtubeIA
 |id=R81egpgDzbY
-|alignment=center
+|alignment=left
 |autoresize=false
 }}
@@ Line 8: / Line 8: @@
 == 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.
+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]].
 </note>
 <subtitle id="0">Our first example of Shadama is a simple physics simulation of particles and gravity.</subtitle>

@@ Line 5: / Line 5: @@
 }}
+<subtitle>
 <div id="0"><p class="subtitle">Our first example of Shadama is a simple physics simulation of particles and gravity.</p></div>
 <div id="5"><p class="subtitle">As in the LOGO programming language, we refer to mobile objects as turtles. Here, we
@@ Line 108: / Line 107: @@
 the simulation is running, and the code change is reflected in the
 simulation right away, without needing to restart.</p></div>

@@ Line 2: / Line 2: @@
 service=youtubeIA
 |id=R81egpgDzbY
-|alignment=left
+|alignment=center
 }}
 <div id="0"><p class="subtitle">Our first example of Shadama is a simple physics simulation of particles and gravity.</p></div>

@@ Line 2: / Line 2: @@
 service=youtubeIA
 |id=R81egpgDzbY
-|alignment=center
+|alignment=left
 }}

← Older revision		Revision as of 17:17, 4 November 2017
Line 1:		Line 1:
−	<~~youtube~~>~~https:~~//~~www~~.~~youtube~~.~~com~~/~~watch?v~~=~~WJzi9R_55Iw~~</~~youtube~~>	+	{{#evt:
		+	service=youtubeIA
		+	\|id=R81egpgDzbY
		+	\|alignment=center
		+	}}
		+
		+	<div id="0"><p class="subtitle">Our first example of Shadama is a simple physics simulation of particles and gravity.</p></div>
		+	<div id="5"><p class="subtitle">As in the LOGO programming language, we refer to mobile objects as turtles. Here, we
		+	declare a breed of turtle such that each turtle will have properties
		+	"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
		+	each turtle in a breed. Here, we've defined the "setColor" method to use the turtle's x and y
		+	coordinates to assign them a red and green value.</p></div>
		+	<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
		+	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
		+	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
		+	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>
		+	<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
		+	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
		+	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
		+	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
		+	according to their "dx" and "dy".</p></div>
		+	<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
		+	in their own individual directions.</p></div>
		+	<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
		+	acceleration to the "y" component of the velocity. Now all turtles are
		+	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
		+	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>
		+	<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>
		+	<div id="157"><p class="subtitle">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.</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
		+	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>
		+	<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
		+	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
		+	"fillSpace", which creates turtles of the Filler breed and
		+	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
		+	in this color gradient.</p></div>
		+	<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>
		+	<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
		+	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>
		+	<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>
		+	<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
		+	display. That is an indication that we can use the value in our
		+	program.</p></div>
		+	<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
		+	it sets normal vectors for the circle in the patch.</p></div>
		+	<div id="309"><p class="subtitle">In the "move"
		+	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
		+	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
		+	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'
		+	color.</p></div>
		+	<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
		+	velocity corresponds with greenish color. The visualization can be quickly adjusted
		+	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>
		+	<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
		+	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>
		+	<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
		+	based on the image's pixel values. This looks like an image but it is
		+	actually a bunch of turtles.</p></div>
		+	<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>
		+	<div id="455"><p class="subtitle">For fun,
		+	We can use the turtles' red and green values to determine turtle velocity, causing an
		+	an interesting effect.</p></div>
		+	<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>
		+	<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>

← Older revision	Revision as of 17:23, 4 November 2017
(No difference)

← Older revision		Revision as of 04:20, 2 November 2017
Line 1:		Line 1:
−	<youtube>https://www.youtube.com/watch?v=~~pSsYTj9kCHE~~</youtube>	+	<youtube>https://www.youtube.com/watch?v=WJzi9R_55Iw</youtube>

Testing Movie Caption Scroll - Revision history

Ohshima at 04:11, 9 November 2017

Ohshima at 05:25, 7 November 2017

Ohshima: Ohshima moved page First Sand Box for EmbedMovie extension to Testing Movie Caption Scroll without leaving a redirect

Ohshima at 17:21, 4 November 2017

Ohshima at 17:19, 4 November 2017

Ohshima at 17:17, 4 November 2017

Ohshima at 17:17, 4 November 2017

Ohshima at 04:20, 2 November 2017

Ohshima: Created page with "https://www.youtube.com/watch?v=pSsYTj9kCHE"