Skip to content

submission #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

submission #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3484479
everything
anvidalal Feb 8, 2017
4ce118f
Added link
anvidalal Mar 21, 2018
a2dc146
working link
anvidalal Mar 21, 2018
3246aaf
minor changes
anvidalal Mar 21, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 22 additions & 57 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,67 +1,32 @@
# [L System Tree](https://anvidalal.github.io/LSystems/)

The objective of this assignment is to create an L System parser and generate interesting looking plants. Start by forking and then cloning this repository: [https://github.com/CIS700-Procedural-Graphics/Project3-LSystems](https://github.com/CIS700-Procedural-Graphics/Project3-LSystems)
<img src="tree11.jpg" width="500">

# L-System Parser
## Objective

lsystem.js contains classes for L-system, Rule, and LinkedList. Here’s our suggested structure:
Learn L Systems by making trees.

**The Symbol Nodes/Linked List:**
## Process

Rather than representing our symbols as a string like in many L-system implementations, we prefer to use a linked list. This allows us to store additional information about each symbol at time of parsing (e.g. what iteration was this symbol added in?) Since we’re adding and replacing symbols at each iteration, we also save on the overhead of creating and destroying strings, since linked lists of course make it easy to add and remove nodes. You should write a Linked List class with Nodes that contain at least the following information:
I started off by writing a doubly linked list to represent my L-System. Once had that down, I introduced the variable of iteration to see what my tree would look like at different steps.<br />
<img src="tree1.jpg" width="500">

- The next node in the linked list
- The previous node in the linked list
- The grammar symbol at theis point in the overal string
Next, I added width to my tree, such that it was inversely proportional to the iteration.<br />
<img src="tree2.jpg" width="500">

We also recommend that you write the following functions to interact with your linked list:
I added texture to my branches to make it look more like a tree.<br />
<img src="tree3.jpg" width="500">

- A function to symmetrically link two nodes together (e.g. Node A’s next is Node B, and Node B’s prev is Node A)
- A function to expand one of the symbol nodes of the linked list by replacing it with several new nodes. This function should look at the list of rules associated with the symbol in the linked list’s grammar dictionary, then generate a uniform random number between 0 and 1 in order to determine which of the Rules should be used to expand the symbol node. You will refer to a Rule’s probability and compare it to your random number in order to determine which Rule should be chosen.
I then played altered how my width changes with each iteration.<br />
<img src="tree4.jpg" width="500">

**Rules:**
Finally I added leaves to every branch in my linked list that was at the last iteration.<br />
<img src="tree5.jpg" width="500">

These are containers for the preconditions, postconditions and probability of a single replacement operation. They should operate on a symbol node in your linked list.

**L-system:**

This is the parser, which will loop through your linked list of symbol nodes and apply rules at each iteration.

Implement the following functions in L-System so that you can apply grammar rules to your axiom given some number of iterations. More details and implementation suggestions about functions can be found in the TODO comments

- `stringToLinkedList(input_string)`
- `linkedListToString(linkedList)`
- `replaceNode(linkedList, node, replacementString)`
- `doIterations(num)`

## Turtle

`turtle.js` has a function called renderSymbol that takes in a single node of a linked list and performs an operation to change the turtle’s state based on the symbol contained in the node. Usually, the turtle’s change in state will result in some sort of rendering output, such as drawing a cylinder when the turtle moves forward. We have provided you with a few example functions to illustrate how to write your own functions to be called by renderSymbol; these functions are rotateTurtle, moveTurtle, moveForward, and makeCylinder. If you inspect the constructor of the Turtle class, you can see how to associate an operation with a grammar symbol.

- Modify turtle.js to support operations associated with the symbols `[` and `]`
- When you parse `[` you need to store the current turtle state somewhere
- When you parse `]` you need to set your turtle’s state to the most recently stored state. Think of this a pushing and popping turtle states on and off a stack. For example, given `F[+F][-F]`, the turtle should draw a Y shape. Note that your program must be capable of storing many turtle states at once in a stack.

- In addition to operations for `[` and `]`, you must invent operations for any three symbols of your choosing.


## Interactivity

Using dat.GUI and the examples provided in the reference code, make some aspect of your demo an interactive variable. For example, you could modify:

1. the axiom
2. Your input grammer rules and their probability
3. the angle of rotation of the turtle
4. the size or color or material of the cylinder the turtle draws, etc!

## L-System Plants

Design a grammar for a new procedural plant! As the preceding parts of this assignment are basic computer science tasks, this is where you should spend the bulk of your time on this assignment. Come up with new grammar rules and include screenshots of your plants in your README. For inspiration, take a look at Example 7: Fractal Plant in Wikipedia: https://en.wikipedia.org/wiki/L-system Your procedural plant must have the following features

1. Grow in 3D. Take advantage of three.js!
2. Have flowers or leaves that are added as a part of the grammar
3. Variation. Different instances of your plant should look distinctly different!
4. A twist. Broccoli trees are cool and all, but we hope to see sometime a little more surprising in your grammars

# Publishing Your code

Running `npm run deploy` will automatically build your project and push it to gh-pages where it will be visible at `username.github.io/repo-name`. NOTE: You MUST commit AND push all changes to your MASTER branch before doing this or you may lose your work. The `git` command must also be available in your terminal or command prompt. If you're using Windows, it's a good idea to use Git Bash.
After some tweaks in the grammar, I was able to achieve some really random looking trees.<br />
<img src="tree6.jpg" width="500">
<img src="tree7.jpg" width="500">
<img src="tree8.jpg" width="500">
<img src="tree9.jpg" width="500">
<img src="tree10.jpg" width="500">
<img src="tree11.jpg" width="500">
258 changes: 203 additions & 55 deletions src/lsystem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,76 +1,224 @@
// A class that represents a symbol replacement rule to
// be used when expanding an L-system grammar.
function Rule(prob, str) {
this.probability = prob; // The probability that this Rule will be used when replacing a character in the grammar string
this.successorString = str; // The string that will replace the char that maps to this Rule
this.probability = prob; // The probability that this Rule will be used when replacing a character in the grammar string
this.successorString = str; // The string that will replace the char that maps to this Rule
}

// TODO: Implement a linked list class and its requisite functions
// as described in the homework writeup
function Node(symbol, iter) {
this.next = null;
this.prev = null;
this.symbol = symbol;
this.iter = iter;
}

function LinkedList() {
this.head = null;
this.length = 0;
}

LinkedList.prototype.getTailNode = function() {
var currentNode = this.head;
while (currentNode.next != null) {
currentNode = currentNode.next;
}
return currentNode;
}

LinkedList.prototype.add = function(symbol, iter) {
var node = new Node(symbol, iter);
var currentNode = this.head;
if (currentNode == null) {
this.head = node;
this.length = 1;
return;
}
var tail = this.getTailNode();
this.link(tail, node);
this.length++;
}

LinkedList.prototype.link = function(first, second) {
if (first != null)
{
first.next = second;
if (second != null)
{
second.prev = first;
}
}
}

// TODO: Turn the string into linked list
export function stringToLinkedList(input_string) {
// ex. assuming input_string = "F+X"
// you should return a linked list where the head is
// at Node('F') and the tail is at Node('X')
var ll = new LinkedList();
return ll;
export function stringToLinkedList(input_string, iter) {
// ex. assuming input_string = "F+X"
// you should return a linked list where the head is
// at Node('F') and the tail is at Node('X')
var ll = new LinkedList();
for (var i = 0; i < input_string.length; i++) {
ll.add(input_string[i], iter);
}
return ll;
}

// TODO: Return a string form of the LinkedList
export function linkedListToString(linkedList) {
// ex. Node1("F")->Node2("X") should be "FX"
var result = "";
return result;
// ex. Node1("F")->Node2("X") should be "FX"
var result = "";
var currentNode = linkedList.head;
while (currentNode != null) {
result += currentNode.symbol;
currentNode = currentNode.next;
}
return result;
}

// TODO: Given the node to be replaced,
// insert a sub-linked-list that represents replacementString
function replaceNode(linkedList, node, replacementString) {
function replaceNode(linkedList, node, replacementString, iter) {

var nodeBefore = node.prev;
var nodeAfter = node.next;

var stringList = stringToLinkedList(replacementString, iter);
var tail = stringList.getTailNode();

if (nodeBefore == null && nodeAfter == null) {
linkedList.head = stringList.head;
}
else if (nodeBefore == null)
{
linkedList.head = stringList.head;
linkedList.link(tail, nodeAfter);
}
else if (nodeAfter == null) {
linkedList.link(nodeBefore, stringList.head);
}
else {
linkedList.link(nodeBefore, stringList.head);
linkedList.link(tail, nodeAfter);
}

linkedList.length+= replacementString.length - 1;
return linkedList;
}

function addLeaves(linkedList, iter)
{
for(var currentNode = linkedList.head; currentNode != null; currentNode = currentNode.next) {
if (currentNode.symbol == 'F' && currentNode.iter == iter)
{
var node = new Node('L', iter + 1);
var next = currentNode.next;
linkedList.link(currentNode, node);
if (next)
{
linkedList.link(node, next);
}
}
}
}

export default function Lsystem(axiom, grammar, iterations) {
// default LSystem
this.axiom = "FX";
this.grammar = {};
this.grammar['X'] = [
new Rule(1.0, '[-FX][+FX]')
];
this.iterations = 0;

// Set up the axiom string
if (typeof axiom !== "undefined") {
this.axiom = axiom;
}

// Set up the grammar as a dictionary that
// maps a single character (symbol) to a Rule.
if (typeof grammar !== "undefined") {
this.grammar = Object.assign({}, grammar);
}

// Set up iterations (the number of times you
// should expand the axiom in DoIterations)
if (typeof iterations !== "undefined") {
this.iterations = iterations;
}

// A function to alter the axiom string stored
// in the L-system
this.updateAxiom = function(axiom) {
// Setup axiom
if (typeof axiom !== "undefined") {
this.axiom = axiom;
}
}

// TODO
// This function returns a linked list that is the result
// of expanding the L-system's axiom n times.
// The implementation we have provided you just returns a linked
// list of the axiom.
this.doIterations = function(n) {
var lSystemLL = StringToLinkedList(this.axiom);
return lSystemLL;
}
// default LSystem
this.axiom = "FKKX";
this.grammar = {};
this.grammar['X'] = [
new Rule(0.2, '[-FX][+FX][<FX][>FX]'),
new Rule(0.1, '[-FXG][+FX][<FX]'),
new Rule(0.1, '[-FX][+FXG][>FX]'),
new Rule(0.1, '[-FX][<FX][>FX]'),
new Rule(0.1, '[+FX][<FX][>FXG]'),
new Rule(0.1, '[-FX]'),
new Rule(0.1, '[+FX]'),
new Rule(0.1, '[<FX]'),
new Rule(0.1, '[>FX]'),

];
this.grammar['G'] = [
new Rule(0.8, 'G'),
new Rule(0.2, 'L')
];
this.grammar['K'] = [
new Rule(0.5, 'K'),
new Rule(0.5, 'X')
];
this.iterations = 0;

// Set up the axiom string
if (typeof axiom !== "undefined") {
this.axiom = axiom;
}

// Set up the grammar as a dictionary that
// maps a single character (symbol) to a Rule.
if (typeof grammar !== "undefined") {
this.grammar = Object.assign({}, grammar);
}

// Set up iterations (the number of times you
// should expand the axiom in DoIterations)
if (typeof iterations !== "undefined") {
this.iterations = iterations;
//this.doIterations(iterations);
}

// A function to alter the axiom string stored
// in the L-system
this.updateAxiom = function(axiom) {
// Setup axiom
if (typeof axiom !== "undefined") {
this.axiom = axiom;
}
}

// A function to alter the axiom string stored
// in the L-system
this.updateGrammar = function(rule) {
// Setup axiom
if (typeof axiom !== "undefined") {
this.axiom = axiom;
}
}

// TODO
// This function returns a linked list that is the result
// of expanding the L-system's axiom n times.
// The implementation we have provided you just returns a linked
// list of the axiom.
this.doIterations = function(n) {
var lSystemLL = stringToLinkedList(this.axiom, 0);

for (var i = 0; i < n; i++) {
var currentNode = lSystemLL.head;

while (currentNode != null) {
var next = currentNode.next;
var symbol = currentNode.symbol;
var iter = currentNode.iter;

if (this.grammar[symbol])
{
var rand = Math.random();
var sum = 0.0;
var rules = this.grammar[symbol];
for (var j = 0; j < rules.length; j++)
{
sum += rules[j].probability;
if (rand <= sum)
{
replaceNode(lSystemLL, currentNode, rules[j].successorString, i + 1);
break;
}
}
}
currentNode = next;
}
}
addLeaves(lSystemLL, n);
//console.log(linkedListToString(lSystemLL));
return lSystemLL;
}
}
Loading