Fractalicious 4D

{"name":"Fractalicious 4D","description":"Experience the mind-bending beauty of a 4D fractal tree projected into 3D space. Customize its parameters and explore the mesmerizing world of higher dimensions.","photo":null,"view_count":5,"fork_count":0,"expires_at":null,"created_at":"2024-03-18T17:58:14.113974Z","updated_at":"2024-03-18T17:58:14.113976Z","user_id":59,"status":"PUBLIC","parent_id":237,"id":861,"user":{"photo":null,"email":null,"recess_id":"0c343b5d-70ad-030a-89d2-b1f54b6318ff","created_at":"2024-02-23T23:46:05.409490Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"nebwinters2","id":59,"password_hash":null,"updated_at":"2024-02-23T23:46:05.409493Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let angle;\nlet len = 100;\nlet reduction = 0.67;\n// Define a leaf class\nclass Cloud {\n constructor() {\n this.position = createVector(random(-500, 500), random(-200, -100), random(-500, 500));\n this.speed = random(0.5, 1.5);\n }\n\n update() {\n this.position.x += this.speed;\n if (this.position.x > 500) {\n this.position.x = -500;\n }\n }\n\n display() {\n push();\n noStroke();\n fill(255, 255, 255, 100); // semi-transparent white\n translate(this.position.x, this.position.y, this.position.z);\n sphere(40);\n translate(60, 0, 0);\n sphere(50);\n translate(60, 0, 0);\n sphere(40);\n pop();\n }\n}\nlet clouds = [];\n\nclass Leaf {\n constructor() {\n this.position = createVector(random(-500, 500), random(-500, 500), random(-500, 500));\n this.velocity = createVector(0, random(0.1, 1), 0);\n }\n\n update() {\n this.position.add(this.velocity);\n if (this.position.y > 500) {\n this.position.y = -500;\n }\n }\n\n display() {\n push();\n translate(this.position.x, this.position.y, this.position.z);\n fill(34, 139, 34, 200); // semi-transparent green leaves\n noStroke();\n rotateX(frameCount * 0.01); // slow rotation\n rotateY(frameCount * 0.01); // slow rotation\n cylinder(1, 5); // cylinders to represent leaves\n pop();\n }\n}\n\n// Create an array of leaves\nlet leaves = [];\n\nfunction setup() {\n createCanvas(800, 800, WEBGL);\n angle = PI / 4;\n\n // Create an array of leaves\n for (let i = 0; i < 100; i++) {\n leaves.push(new Leaf());\n }\n sun = new Sun();\n for (let i = 0; i < 20; i++) {\n clouds.push(new Cloud());\n }\n}\nclass Sun {\n constructor() {\n this.position = createVector(0, -50, -800); // Initial position of the sun\n }\n\n update() {\n this.position.x = map(sin(frameCount * 0.01), -1, 1, -200, 200); // Makes the sun move horizontally\n }\n\n display() {\n push();\n fill(255, 204, 0); // color of the sun\n noStroke();\n translate(this.position.x, this.position.y, this.position.z);\n sphere(30); // Draw the sun as a sphere\n pop();\n }\n}\n\nfunction drawSky() {\n let skyColor = color(map(sin(frameCount * 0.01), -1, 1, 135, 25), map(sin(frameCount * 0.01), -1, 1, 206, 25), map(sin(frameCount * 0.01), -1, 1, 235, 112));\n background(skyColor);\n for (let cloud of clouds) {\n cloud.update();\n cloud.display();\n }\n}\nfunction draw() {\n drawSky();\n\n // Add ambient light\n ambientLight(200, 200, 200); // Make ambient light softer\n\n // Add directional light\n if (sun) {\n let lightDirection = p5.Vector.sub(createVector(0, 0, 0), sun.position);\n directionalLight(255, 255, 204, lightDirection); // Make directional light more yellow\n }\n\n sun.update(); // Update the sun's position\n sun.display(); // Display the sun\n\n orbitControl();\n\n push();\n fill(139, 69, 19); // brown ground\n noStroke();\n rotateX(PI / 2);\n translate(0, 0, -200); // move the ground closer to the tree\n plane(2000, 2000);\n pop();\n\n // Generate the tree\n push();\n translate(0, 190, 0); // Lowering the tree position\n generate(len, millis() / 1000); // pass time to generate\n pop();\n\n for (let leaf of leaves) {\n leaf.update();\n leaf.display();\n }\n}\nfunction generate(len, time) {\n let sw = map(len, 2, 100, 1, 10);\n strokeWeight(sw);\n line(0, 0, 0, 0, -len, 0);\n translate(0, -len);\n if (len > 25) {\n stroke(102, 51, 0); // brown for larger branches\n } else {\n stroke(34, 139, 34); // green for smaller branches (leaves)\n }\n if (len > 16) {\n let newAngle = angle + 0.2 * sin(time); // time-dependent angle\n push();\n rotateZ(newAngle);\n rotateX(newAngle);\n generate(len * reduction, time);\n pop();\n\n push();\n rotateZ(-newAngle);\n rotateX(newAngle);\n generate(len * reduction, time);\n pop();\n\n push();\n rotateZ(newAngle);\n rotateX(-newAngle);\n generate(len * reduction, time);\n pop();\n\n push();\n rotateZ(-newAngle);\n rotateX(-newAngle);\n generate(len * reduction, time);\n pop();\n }\n}","style.css":"","index.html":"\n\n\n\n \n \n Fractalicious 4D\n \n \n\n\n\n

\n \n\n\n"},"chat_history":[{"deleted":0,"code_id":53572,"input_tokens":null,"id":29698,"project_id":861,"sender":"human","message":"Let's get started!","created_at":"2024-03-18T17:58:21.455502Z","output_tokens":null},{"deleted":0,"code_id":53572,"input_tokens":null,"id":29699,"project_id":861,"sender":"ai","message":"Certainly! To implement a user interface that allows users to control parameters of the 4D fractal tree such as branch length, angle, and iterations, we'll need to add HTML elements for user input and modify the JavaScript code to use these inputs. I'll guide you through the process step by step.\n\nFirst, let's add the HTML elements for user input. We'll need input elements for the branch length, angle, and a slider for iterations (which we can associate with the reduction in branch length for simplicity). We'll add these elements to the `index.html` file within the `

` element.\n\n```html\n\n

\n Branch Length:\n
\n\n Branch Angle:\n
\n\n Iteration Reduction:\n \n

\n```\n\n- We've added three input elements: two `input` elements of type `number` for the branch length and angle, and one `input` of type `range` for the iteration reduction.\n- The `value` attribute of each input element is set to the initial values that were previously hardcoded in the JavaScript code.\n\nNext, we'll modify the JavaScript code to read these inputs and use their values to control the fractal tree generation.\n\n```javascript\nfunction setup() {\n createCanvas(800, 800, WEBGL);\n angle = radians(parseInt(document.getElementById('branchAngle').value)); // Convert degrees to radians\n len = parseInt(document.getElementById('branchLength').value);\n reduction = parseFloat(document.getElementById('iterationReduction').value);\n\n // Existing setup code...\n for (let i = 0; i < 100; i++) {\n leaves.push(new Leaf());\n }\n sun = new Sun();\n for (let i = 0; i < 20; i++) {\n clouds.push(new Cloud());\n }\n}\n```\n- We're reading the values from the input elements and assigning them to the variables `angle`, `len`, and `reduction` at the beginning of the `setup` function.\n- `parseInt` is used for `branchLength` and `branchAngle` to ensure they're treated as integers. `parseFloat` is used for `iterationReduction` to allow decimal values.\n- The angle input is converted from degrees to radians since the `rotate` functions in p5.js use radians.\n\nThis setup allows users to control the initial parameters of the fractal tree. However, to dynamically update these parameters as users change the inputs, event listeners need to be added to the input elements. This will be covered in the next step.","created_at":"2024-03-18T17:58:21.460890Z","output_tokens":null}],"assets":[],"messages_sent":1,"comments":[],"steps":[{"step_number":0,"complete":false,"updated_at":"2024-03-18T17:58:14.117810","id":4491,"title":"User Interface for Parameter Control","instruction":"Implement a user interface for users to control parameters of the 4D fractal tree, such as branch length, angle, and iterations.","created_at":"2024-01-02T00:03:34.489683","project_id":861},{"step_number":1,"complete":false,"updated_at":"2024-03-18T17:58:14.117896","id":4492,"title":"Advanced Projection Techniques","instruction":"Experiment with different projection techniques to visualize the 4D fractal tree in 3D space, capturing its intricate structure.","created_at":"2024-01-02T00:03:34.489741","project_id":861},{"step_number":2,"complete":false,"updated_at":"2024-03-18T17:58:14.117951","id":4493,"title":"Interactive Zooming and Rotating","instruction":"Add interactive features to allow users to zoom in, zoom out, and rotate the 4D fractal tree for a more immersive experience.","created_at":"2024-01-02T00:03:34.489784","project_id":861},{"step_number":3,"complete":false,"updated_at":"2024-03-18T17:58:14.117996","id":4494,"title":"Subset Selection of Fractal","instruction":"Allow users to choose a specific subset of the 4D fractal tree for focused visualization, as visualizing the entire structure may be complex.","created_at":"2024-01-02T00:03:34.489825","project_id":861},{"step_number":4,"complete":false,"updated_at":"2024-03-18T17:58:14.118042","id":4495,"title":"Real-time Parameter Feedback","instruction":"Provide real-time visual feedback to users as they adjust the parameters of the fractal tree, enhancing the interactive experience.","created_at":"2024-01-02T00:03:34.489864","project_id":861}]}