Difference between revisions of "W2513 Emergence & Lindenmayer Systems (Part 3)"
(20 intermediate revisions by 2 users not shown) | |||
Line 3: | Line 3: | ||
== Prerequisites == | == Prerequisites == | ||
* [[W2512 Emergence & Lindenmayer Systems (Part 2)]] | * [[W2512 Emergence & Lindenmayer Systems (Part 2)]] | ||
== Experiment == | == Experiment == | ||
=== Getting Started === | === Getting Started === | ||
{{ScenesShellPrepare|LSystemScenes}} | |||
{{ | |||
=== First Steps === | === First Steps === | ||
==== Add your LSystem File ==== | ==== Add your LSystem File ==== | ||
Add your LSystem file from your previous project to your current project. | Add your LSystem file from your previous project to your current project. | ||
{{ | {{Caution|Be careful to '''rename''' this file during the copy operation so that you don't overwrite the current main.swift.}} | ||
cp ~/Merlin/ | Depending upon your directory structure, execute a command similar to: | ||
{{ConsoleLine|john-williams@codermerlin:~/Experiences$|cp ~/Merlin/M2512-10\ \(01\)\ LSystems/C100\ LSystems\ \[Swift\]/main.swift ~/Experiences/LSystemScenes/Sources/ScenesShell/LSystem.swift}} | |||
==== Remove LSystem Global Functions ==== | ==== Remove LSystem Global Functions ==== | ||
Remove your global functions and variables from LSystem.swift, leaving only the classes (e.g. | Remove your global functions and variables from {{Pathname|LSystem.swift}}, leaving only the classes (e.g. {{SwiftClass|ProductionRule}}, {{SwiftClass|ProductionRules}}, {{SwiftClass|LSystem}}) which you've defined. Then, ensure that you're able to successfully compile. | ||
{{ConsoleLine|john-williams@codermerlin:~/Experiences/LSystemScenes/Sources/ScenesShell$| build}} | |||
=== Geometric Structures === | === Geometric Structures === | ||
Line 64: | Line 27: | ||
==== Getting Ready to Use the Turtle ==== | ==== Getting Ready to Use the Turtle ==== | ||
Edit file | Edit the file {{Pathname|Background.swift}}: | ||
Before the {{SwiftIdentifier|init}} constructor, add the following: | |||
<syntaxhighlight lang="swift"> | <syntaxhighlight lang="swift"> | ||
var | private var didRender = false | ||
</syntaxhighlight> | </syntaxhighlight> | ||
This will enable us to keep track of whether or not we need to | This will enable us to keep track of whether or not we need to render. | ||
In order to use the turtle, we need to ensure that we know the size of the canvas in our '''render''' method. Add the following text | In order to use the turtle, we need to ensure that we know the size of the canvas in our '''render''' method. Add the following text: | ||
<syntaxhighlight lang="swift"> | <syntaxhighlight lang="swift"> | ||
override func render(canvas:Canvas) { | override func render(canvas:Canvas) { | ||
if let canvasSize = canvas.canvasSize, ! | if let canvasSize = canvas.canvasSize, !didRender { | ||
didRender = true | |||
} | } | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
The | The {{SwiftIdentifier|render}} method is an event handler which is invoked periodically. The <syntaxhighlight lang='swift' inline>if let</syntaxhighlight> conditional provides us with syntactic sugar which assigns {{SwiftIdentifier|canvas.canvasSize}} to a new, local variable if (and only if) {{SwiftIdentifier|canvas.canvasSize}} is not nil ''and'' we haven't yet rendered. Note that {{SwiftIdentifier|canvas.canvasSize}} will be nil until the browser has calculated and reported the size of the canvas. | ||
==== Creating the Turtle ==== | ==== Creating the Turtle ==== | ||
Line 92: | Line 52: | ||
<syntaxhighlight lang="swift" highlight="3"> | <syntaxhighlight lang="swift" highlight="3"> | ||
override func render(canvas:Canvas) { | override func render(canvas:Canvas) { | ||
if let canvasSize = canvas.canvasSize, ! | if let canvasSize = canvas.canvasSize, !didRender { | ||
let turtle = Turtle(canvasSize:canvasSize) | let turtle = Turtle(canvasSize:canvasSize) | ||
didRender = true | |||
} | } | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
==== | ==== Rendering the Koch Curve ==== | ||
Let's add a function to | Let's add a function to render a Koch Curve. Place this function somewhere within the {{SwiftIdentifier|Background}} class. | ||
<syntaxhighlight lang="swift"> | <syntaxhighlight lang="swift"> | ||
func moveTurtleForKochCurve(turtle:Turtle, generationCount:Int, steps:Int) { | func moveTurtleForKochCurve(turtle:Turtle, generationCount:Int, steps:Int) { | ||
Line 134: | Line 94: | ||
<syntaxhighlight lang="swift" highlight="5-6"> | <syntaxhighlight lang="swift" highlight="5-6"> | ||
override func render(canvas:Canvas) { | override func render(canvas:Canvas) { | ||
if let canvasSize = canvas.canvasSize, ! | if let canvasSize = canvas.canvasSize, !didRender { | ||
let turtle = Turtle(canvasSize:canvasSize) | let turtle = Turtle(canvasSize:canvasSize) | ||
Line 140: | Line 100: | ||
canvas.render(turtle) | canvas.render(turtle) | ||
didRender = true | |||
} | } | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
{{RunProgram|Run the program and refresh the browser page.}} | |||
==== | ==== Add Button Functionality ==== | ||
We | We'll be using the library {{SwiftLibrary|ScenesControls}} in order to enable us to easily add buttons to our project. To use this library: | ||
===== Add the Library ===== | |||
In | Find the current version of the library. You can find the libraries at /usr/local/lib/merlin. In this case: | ||
{{ConsoleLine|ty-cam@codermerlin:~/Experiences/LSystemScenes/Sources/ScenesShell| ls -ld /usr/local/lib/merlin/ScenesControls*}} | |||
You'll see something similar to: | |||
{{ConsoleLines| | |||
drwxr-xr-x 3 root root 4096 Mar 14 11:20 /usr/local/lib/merlin/{{Red|ScenesControls-0.1.0}} | |||
}} | |||
In the above case, the most recent version of {{SwiftLibrary|ScenesControls}} is '''0.1.0'''. Now, edit the file {{Pathname|dylib.manifest}} in the root of your project, adding the required library: | |||
{{ConsoleLines| | |||
Igis 1.3.7<br/> | |||
Scenes 1.1.5<br/> | |||
{{Red|ScenesControls 0.1.0}} | |||
}} | |||
{{Caution|Be sure that your file terminates with a newline character. You can verify this by typing '''dylib''' in your project root and ensuring that all specified libraries are listed.}} | |||
Finally, import the required libraries at the top of your {{Pathname|InteractionLayer.swift}}: | |||
<syntaxhighlight lang="swift" highlight="1,3"> | |||
{{ | |||
<syntaxhighlight lang="swift"> | |||
import Igis | import Igis | ||
import Scenes | |||
import ScenesControls | |||
</syntaxhighlight> | </syntaxhighlight> | ||
===== Implement Ability to Set GenerationCount ===== | |||
In {{Pathname|Background.swift}}, add a variable to track the current generation count (above {{SwiftIdentifier|init}}): | |||
<syntaxhighlight lang="swift" highlight=2> | |||
<syntaxhighlight lang="swift" highlight= | private var didRender = false | ||
private var generationCount = 1 | |||
</syntaxhighlight> | </syntaxhighlight> | ||
Next, add a function to increment the generation count: | |||
<syntaxhighlight lang="swift"> | <syntaxhighlight lang="swift"> | ||
func | public func incrementGenerationCount() { | ||
generationCount += 1 | |||
didRender = false | |||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Also, change the {{SwiftIdentifier|moveTurtleForKochCurve}} function to use the {{SwiftIdentifier|generationCount}} property. | |||
===== Create Button to Activate Functionality ===== | |||
In {{Pathname|InteractionLayer.swift}}, add the following function to provide access to our {{SwiftClass|Background}} object: | |||
<syntaxhighlight lang="swift"> | <syntaxhighlight lang="swift"> | ||
func background() -> Background { | |||
guard let mainScene = scene as? MainScene else { | |||
fatalError("mainScene of type MainScene is required") | |||
} | |||
let backgroundLayer = mainScene.backgroundLayer | |||
let background = backgroundLayer.background | |||
return background | |||
} | |||
</syntaxhighlight> | </syntaxhighlight> | ||
In the same file, add a '''handler''' which will be invoked when the user clicks the mouse on the button: | |||
<syntaxhighlight lang="swift"> | <syntaxhighlight lang="swift"> | ||
func onIncreaseGenerationButtonClickHandler(control: Control, localLocation: Point) { | |||
background().incrementGenerationCount() | |||
} | |||
</syntaxhighlight> | </syntaxhighlight> | ||
Finally, again in the same file, create a button and link it to our handler in {{SwiftIdentifier|init}}: | |||
<syntaxhighlight lang="swift" highlight=" | <syntaxhighlight lang="swift" highlight="4-6"> | ||
init() { | |||
super.init(name:"Interaction") | |||
let increaseGenerationButton = Button(name: "IncreaseGenCount", labelString: "Increase Generation", topLeft: Point(x: 50, y: 50)) | |||
increaseGenerationButton.clickHandler = onIncreaseGenerationButtonClickHandler | |||
insert(entity: increaseGenerationButton, at: .front) | |||
} | |||
</syntaxhighlight> | </syntaxhighlight> | ||
{{RunProgram|Run the program and refresh the browser page.}} | |||
Click on the button. What do you observe? Be sure that you thoroughly understand each of the above methods. | |||
{{SeeAlso| | |||
[[Category:Lindenmayer system||Recursion||Production rules]]| | |||
}} | |||
[[ | |||
== Exercises == | == Exercises == | ||
{{W2513-Exercises}} | |||
== Key Concepts == | == Key Concepts == |
Latest revision as of 23:00, 13 April 2021
Prerequisites[edit]
Experiment[edit]
Getting Started[edit]
Create a new Scenes shell project within your Experiences directory:
ty-cam@codermerlin:~$ cd ~/Experiences
ty-cam@codermerlin:~/Experiences$ git clone https://github.com/TheCoderMerlin/ScenesShellBasic LSystemScenes
Enter the Sources/ScenesShell directory of the new project:
ty-cam@codermerlin:~/Experiences$ cd LSystemScenes/Sources/ScenesShell/
Run the program.
ty-cam@codermerlin:~/Experiences/LSystemScenes/Sources/ScenesShell$ run |
Ensure that you are logged on to the wiki. Then, click on the Tools menu followed by right-clicking on IGIS and selecting the menu item Open in New Window or Open in New Tab.
You'll know you're successful if you see the title bar change to "Coder Merlin: IGIS". (The browser window will be blank because we haven't added any graphics yet.)
First Steps[edit]
Add your LSystem File[edit]
Add your LSystem file from your previous project to your current project.
Depending upon your directory structure, execute a command similar to:
john-williams@codermerlin:~/Experiences$ cp ~/Merlin/M2512-10\ \(01\)\ LSystems/C100\ LSystems\ \[Swift\]/main.swift ~/Experiences/LSystemScenes/Sources/ScenesShell/LSystem.swift
Remove LSystem Global Functions[edit]
Remove your global functions and variables from LSystem.swift, leaving only the classes (e.g. ProductionRule, ProductionRules, LSystem) which you've defined. Then, ensure that you're able to successfully compile.
john-williams@codermerlin:~/Experiences/LSystemScenes/Sources/ScenesShell$ build
Geometric Structures[edit]
Recall from your previous lab that Lindenmayer Systems are defined by G = (V, ω, P) along with a mechanism to translate the generated strings into geometric structures. This lab will focus on this mechanism.
Getting Ready to Use the Turtle[edit]
Edit the file Background.swift:
Before the init constructor, add the following:
private var didRender = false
This will enable us to keep track of whether or not we need to render.
In order to use the turtle, we need to ensure that we know the size of the canvas in our render method. Add the following text:
override func render(canvas:Canvas) {
if let canvasSize = canvas.canvasSize, !didRender {
didRender = true
}
}
The render method is an event handler which is invoked periodically. The if let
conditional provides us with syntactic sugar which assigns canvas.canvasSize to a new, local variable if (and only if) canvas.canvasSize is not nil and we haven't yet rendered. Note that canvas.canvasSize will be nil until the browser has calculated and reported the size of the canvas.
Creating the Turtle[edit]
Add a statement to create a new turtle. Remember that the turtle will be created in its home position, at the center of the screen, and facing north.
override func render(canvas:Canvas) {
if let canvasSize = canvas.canvasSize, !didRender {
let turtle = Turtle(canvasSize:canvasSize)
didRender = true
}
}
Rendering the Koch Curve[edit]
Let's add a function to render a Koch Curve. Place this function somewhere within the Background class.
func moveTurtleForKochCurve(turtle:Turtle, generationCount:Int, steps:Int) {
// Create the LSystem
let alphabet = Set<Character>(["F", "+", "-"])
let axiom = "F"
let productionRules = [ProductionRule(predecessor:"F", successor:"F+F-F-F+F")]
let lSystem = LSystem(alphabet:alphabet, axiom:axiom, productionRules:productionRules)
let production = lSystem.produce(generationCount:generationCount)
// Start in a good direction
turtle.right(degrees:90)
// Map the LSystem to turtle graphics
for letter in production {
switch (letter) {
case "F":
turtle.forward(steps:steps)
case "+":
turtle.left(degrees:90)
case "-":
turtle.right(degrees:90)
default:
fatalError("Unexepected letter '\(letter)' in production.")
}
}
}
We've defined the function but haven't invoked it from anywhere. Let's do that now from the render method. Modify the method so that it appears as:
override func render(canvas:Canvas) {
if let canvasSize = canvas.canvasSize, !didRender {
let turtle = Turtle(canvasSize:canvasSize)
moveTurtleForKochCurve(turtle:turtle, generationCount:3, steps:20)
canvas.render(turtle)
didRender = true
}
}
Run the program and refresh the browser page. |
Add Button Functionality[edit]
We'll be using the library ScenesControls in order to enable us to easily add buttons to our project. To use this library:
Add the Library[edit]
Find the current version of the library. You can find the libraries at /usr/local/lib/merlin. In this case:
ty-cam@codermerlin:~/Experiences/LSystemScenes/Sources/ScenesShell ls -ld /usr/local/lib/merlin/ScenesControls*
You'll see something similar to:
drwxr-xr-x 3 root root 4096 Mar 14 11:20 /usr/local/lib/merlin/ScenesControls-0.1.0
In the above case, the most recent version of ScenesControls is 0.1.0. Now, edit the file dylib.manifest in the root of your project, adding the required library:
Igis 1.3.7
Scenes 1.1.5
ScenesControls 0.1.0
Finally, import the required libraries at the top of your InteractionLayer.swift:
import Igis
import Scenes
import ScenesControls
Implement Ability to Set GenerationCount[edit]
In Background.swift, add a variable to track the current generation count (above init):
private var didRender = false
private var generationCount = 1
Next, add a function to increment the generation count:
public func incrementGenerationCount() {
generationCount += 1
didRender = false
}
Also, change the moveTurtleForKochCurve function to use the generationCount property.
Create Button to Activate Functionality[edit]
In InteractionLayer.swift, add the following function to provide access to our Background object:
func background() -> Background {
guard let mainScene = scene as? MainScene else {
fatalError("mainScene of type MainScene is required")
}
let backgroundLayer = mainScene.backgroundLayer
let background = backgroundLayer.background
return background
}
In the same file, add a handler which will be invoked when the user clicks the mouse on the button:
func onIncreaseGenerationButtonClickHandler(control: Control, localLocation: Point) {
background().incrementGenerationCount()
}
Finally, again in the same file, create a button and link it to our handler in init:
init() {
super.init(name:"Interaction")
let increaseGenerationButton = Button(name: "IncreaseGenCount", labelString: "Increase Generation", topLeft: Point(x: 50, y: 50))
increaseGenerationButton.clickHandler = onIncreaseGenerationButtonClickHandler
insert(entity: increaseGenerationButton, at: .front)
}
Run the program and refresh the browser page. |
Click on the button. What do you observe? Be sure that you thoroughly understand each of the above methods.
👀 See Also[edit]
📺 Videos[edit]
Lindenmayer Systems and The Nature of Code
Procedural Plant Generation with L-Systems
📖 Texts[edit]
W2511 Emergence & Lindenmayer Systems (Part 1)
W2512 Emergence & Lindenmayer Systems (Part 2)
W2513 Emergence & Lindenmayer Systems (Part 3)
W2514 Emergence & Lindenmayer Systems (Part 4)
📚 References[edit]
Exercises[edit]
- Add a button to decrement the generation count
- Clear the canvas before painting so that the previous painting is erased
- Add logic to limit the generation count to reasonable values
- Add at least two additional L-Systems (as described here and that do not require saving/restoring the Turtle's state) and a single button to cycle through the current system being drawn
- Add buttons to control the number of steps used by the turtle for the current system being drawn
- Add a single button to cycle through at least five of your favorite colors
Supplemental Exercises
- Reposition the initial turtle position to a logical location based on the L-System presented. (For example, if the system grows up and to the right, a reasonable starting position would be the bottom-left of the canvas.)