xxxxxxxxxx146
let angle = 0; // This variable controls the angle of the brancheslet animLength = 5; // Length of the animationlet leaves = []; // Empty array to store leaf datalet ls = []; // Array to store random lengths for the treeslet currentScreen = "start"; // Variable to track which screen is displayed (start or trees)function setup() { createCanvas(640, 360, SVG); setupTrees(); // Call the function to initialize tree data}// Function to set up the tree growthfunction setupTrees() { for (let i = 0; i < 3; i++) { ls.push(random(20, 100)); // Generate random lengths for 3 trees }}function draw() { if (currentScreen === "start") { drawStartScreen(); // Display the start screen } else if (currentScreen === "trees") { drawTreeScreen(); // Display the tree interaction screen }}// Function to draw the start screenfunction drawStartScreen() { background(100, 150, 100); textAlign(CENTER, CENTER); // Center the text textSize(24); // Set text size fill(255); // Set text color to white textStyle(BOLD); // Bold text for the title text("Welcome to the Nature of Growing Trees", width / 2, height / 2 - 40); // Title textStyle(NORMAL); // Set text style back to normal textSize(16); // Set text size for instructions text("Click the Start button below to begin interacting with trees", width / 2, height / 2); // Create a button that changes color when hovered over if (mouseX > width / 2 - 50 && mouseX < width / 2 + 50 && mouseY > height / 2 + 40 && mouseY < height / 2 + 80) { fill(180); // Change button color on hover } else { fill(200); // Default button color } rect(width / 2 - 50, height / 2 + 40, 100, 40, 10); // Draw the start button fill(0); // Set text color for the button text text("Start", width / 2, height / 2 + 60); // Button label // Additional instructions below the button textSize(12); fill('#432B22'); text("You can save an SVG file of the current canvas based on your preference.", width / 2, height / 2 + 100); text("Press 's' to save!", width / 2, height / 2 + 115); fill('#432B22'); text("Interact with the trees by moving your mouse and clicking the screen.", width / 2, height / 2 + 130);}// Function to draw the tree interaction screenfunction drawTreeScreen() { background(157, 196, 175); // Loop to draw 3 trees for (let i = 0; i < 3; i++) { push(); // Save the current transformation stroke(255); strokeWeight(2); translate(width * (0.2 + i / 4), height); // Move to the position for each tree // Calculate tree length and angle based on mouse position and animation time let l = min(ls[i], map(millis() / 1000, 0, 5, 0, ls[i])); let r = map(l, 0, 100, 0, 20 * mouseY / width); angle = min(QUARTER_PI, map(millis() / 1000, 0, 5, 0, QUARTER_PI)); angle *= mouseX / width; branch(l, r); // Draw the tree branches pop(); // Restore the previous transformation } // Back button with hover effect if (mouseX > 20 && mouseX < 100 && mouseY > 20 && mouseY < 50) { fill(180); // Change button color on hover } else { fill(200); // Default button color } rect(20, 20, 80, 30, 10); fill(0); textSize(14); text("Back", 60, 40); }// Recursive function to draw branches for the treefunction branch(len, radius) { let n1 = noise(frameCount * 0.004); // Generate noise for randomizing the branch angle let n2 = noise(10000 + frameCount * 0.004); // Generate noise for the opposite branch stroke(168, 102, 50); // Set the stroke color for the branches (brown) line(0, 0, 0, -len); // Draw the main branch translate(0, -len); // Move to the end of the branch // Continue branching if the length is greater than 8 if (len > 8) { push(); // Save the current transformation rotate(angle * n1); // Rotate for the first branch branch(len * 0.67, radius); // Recursively draw a smaller branch pop(); // Restore the transformation push(); // Save again for the other branch rotate(-angle * n2); // Rotate for the opposite branch branch(len * 0.67, radius); // Recursively draw another smaller branch pop(); // Restore the transformation } else { // Draw leaves when the branches are small enough noStroke(); // Remove the outline for the leaves fill(2, 61, 0, 200); // Set fill color for the leaves (green) ellipse(0, 0, radius, radius); // Draw a leaf as an ellipse }}// Handle mouse clicks for interactionfunction mousePressed() { if (currentScreen === "start") { // Start button logic if (mouseX > width / 2 - 50 && mouseX < width / 2 + 50 && mouseY > height / 2 + 40 && mouseY < height / 2 + 80) { currentScreen = "trees"; // Switch to tree interaction screen } } else if (currentScreen === "trees") { // Back button logic if (mouseX > 20 && mouseX < 100 && mouseY > 20 && mouseY < 50) { currentScreen = "start"; // Switch back to start screen } // Reset tree growth on mouse press ls = []; // Clear the tree lengths for (let i = 0; i < 3; i++) { ls.push(random(20, 100)); // Generate new random lengths for the trees } }}// Handle key pressesfunction keyPressed() { if (key === "s") { save("mySVG.svg"); // Save the current canvas as an SVG file when "s" is pressed }}