Added save tree

Added option to save the canvas as a png file!

Author: Ayush Seth

.gitignore

@@ -0,0 +1 @@
+*.bat

Fraternal Tree.js

@@ -9,7 +9,7 @@ function setup() {
     var root = new Branch(createVector(width / 2, height), createVector(width / 2, height - 100));
     tree[0] = root;
     shake = createCheckbox("Shaking", false);
-    shake.position(100, 330);
+    shake.position(windowWidth-470, 1000);
 
     intensity = createSlider(0.1, 2, 0.5, 0);
     intensity.parent("shake");
@@ -20,28 +20,34 @@ function setup() {
     shrink = createSlider(0.30, 1, 0.75, 0);
     shrink.parent("shrink");
 
-    var sheds = createButton("SHED LEAVES");
-    sheds.position(100, 400);
+    var sheds = createButton("Shed Leaves");
+    sheds.position(320, 1000);
     sheds.mousePressed(shedFlowers);
 
-    var grows = createButton("GROW LEAVES")
-    grows.position(100, 370);
+    var grows = createButton("Grow leaves")
+    grows.position(320, 970);
     grows.mousePressed(growFlowers);
 
+    var save = createButton("Save Tree as png")
+    save.position(windowWidth-470, 1100);
+    save.mousePressed(saveTree);
+
     gravity = createVector(0, 0.3);
     grav = createCheckbox("Gravity ON/OFF", true);
-    grav.position(100, 430);
+    grav.position(windowWidth-470, 970);
 
     windcheck = createCheckbox("Wind ON/OFF", false);
-    windcheck.position(100, 460);   
+    windcheck.position(windowWidth-470, 1030);   
 
     wind_dir = createRadio();
-    wind_dir.position(250, 460);
+    wind_dir.position(windowWidth-470, 1060);
     wind_dir.option("Left");
     wind_dir.option("Right");
     wind_dir.value("Right");
 
-
+    document.getElementById('cpicker').style.position = "absolute";
+    document.getElementById('cpicker').style.left = "320px";
+    document.getElementById('cpicker').style.top = "920px";
 }
 var wind;
 
@@ -97,6 +103,10 @@ function growFlowers() {
     }
     shed = false;
 }
+function saveTree() {
+	saveCanvas("tree", "png");
+
+}
 
 
 function mousePressed() {

index.html

@@ -19,7 +19,8 @@
 <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
 <style>
 	h1,
-	h2 {
+	h2,
+	h3 {
 		font-family: 'Exo 2', sans-serif;
 	}
 
@@ -56,20 +57,29 @@ <h2>General Instructions</h2>
 		New branch size(Relative to parent branch)
 	</div>
 
-	<p>Select leaf color :
+	<p id="cpicker">Select leaf color :
 	<button id="colour" class="jscolor {valueElement:null,value:'00c42b'}" style="width:50px; height:20px;"></button>
 	</p>
-    
 
+    <h2>Update History :</h2>
+    <ul>
+		<li>Now you can save your creations as a png file</li>
+		<li>Added a colour picker for leaves</li>
+		<li>Added gravity and wind forces</li>
+	</ul>	
 
-	
 	<div id="shake">
 		Intensity of shaking
 	</div>
+
 	<div id="flsize">
 		Size of leaves
-	</div>
+	</div>	
+
 	<p>Currently working on bug : Creating new branches will make leaves disappear (They reappear if you grow them again)</p>
+
+	<h3>For smooth animations keep the branch number under 510</h3>
+	
 	<br><br>
 </body>
 <script>