Boid Example

{"name":"Custom DoodleNet","description":"Use your custom doodlenet model in this template!","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/f3qxuyyj1lhif6oxotc2","view_count":2,"fork_count":0,"expires_at":null,"created_at":"2025-03-21T04:02:59.765003Z","updated_at":"2025-03-21T04:02:59.765006Z","user_id":2,"status":"PRIVATE","parent_id":6402,"id":6446,"user":{"username":"gamerc0der","id":2,"password_hash":null,"updated_at":"2023-12-11T22:13:50.357943Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":null,"recess_id":"a75a82d5-5ae6-41b7-d20f-788415be036d","created_at":"2023-12-11T22:13:50.357940Z","reset_token":null,"stripe_customer_id":null,"seats":null},"code":{"script.js":"let flock;\nlet toggleButton;\nlet use3D = false; // Global flag: false = flat view, true = 3D view\n\nfunction setup() {\n // Always use WEBGL for 3D/2D flexibility.\n createCanvas(640, 360, WEBGL);\n createP(\"Drag the mouse to add new boids. In 3D mode, use mouse drag to control camera.\");\n\n // Create a toggle button for switching 3D mode.\n toggleButton = createButton(\"Toggle 3D Mode: OFF\");\n toggleButton.mousePressed(toggle3DMode);\n\n flock = new Flock();\n\n // Create an initial set of boids at random z positions.\n for (let i = 0; i < 100; i++) {\n let b = new Boid(0, 0, random(-50, 50)); // positions relative to center (0,0)\n flock.addBoid(b);\n }\n\n // Use HSB color mode with alpha\n colorMode(HSB, 360, 100, 100, 100);\n noStroke();\n}\n\nfunction draw() {\n // Use a dark background\n background(0, 0, 15);\n\n // In 3D mode, enable full camera control.\n if (use3D) {\n // Set up lighting for 3D effect.\n ambientLight(30);\n directionalLight(250, 250, 250, -0.5, 0.5, -1);\n // Call orbitControl for interactive camera control.\n orbitControl();\n // Optional: slight overall rotation (can be commented out if you prefer full manual control).\n // rotateY(frameCount * 0.002);\n }\n else {\n // In flat mode, reset transformations so that you can use the canvas coordinates.\n resetMatrix();\n translate(-width / 2, -height / 2);\n }\n\n // Run the flock simulation.\n flock.run();\n}\n\n// Toggle between 2D/3D modes.\nfunction toggle3DMode() {\n use3D = !use3D;\n if (use3D) {\n toggleButton.html(\"Toggle 3D Mode: ON\");\n } else {\n toggleButton.html(\"Toggle 3D Mode: OFF\");\n }\n}\n\n// In both modes, mouse drag adds a new boid.\nfunction mouseDragged() {\n let x, y;\n if (use3D) {\n // Adjust for WEBGL canvas center.\n x = mouseX - width / 2;\n y = mouseY - height / 2;\n } else {\n x = mouseX;\n y = mouseY;\n }\n flock.addBoid(new Boid(x, y, random(-50, 50)));\n}\n\n\n// Flock class to manage boids.\nclass Flock {\n constructor() {\n this.boids = [];\n }\n \n run() {\n for (let boid of this.boids) {\n boid.run(this.boids);\n }\n }\n \n addBoid(b) {\n this.boids.push(b);\n }\n}\n\n\n// Boid class represents an individual agent in the simulation.\nclass Boid {\n constructor(x, y, z) {\n // In WEBGL, our coordinate (0,0) is at canvas center.\n this.position = createVector(x, y, z);\n // Random initial velocity (with a z-component).\n this.velocity = createVector(random(-1, 1), random(-1, 1), random(-0.5, 0.5));\n this.velocity.setMag(random(1, 2));\n this.acceleration = createVector(0, 0, 0);\n this.size = 6;\n \n // Limits for movement.\n this.maxSpeed = 3;\n this.maxForce = 0.05;\n \n // Unique hue for the boid.\n this.hue = random(0, 360);\n }\n \n run(boids) {\n this.flock(boids); // Apply flocking forces.\n this.update(); // Update velocity and position.\n this.borders(); // Check and wrap around boundaries.\n this.render(); // Draw the boid.\n }\n \n applyForce(force) {\n this.acceleration.add(force);\n }\n \n // Combine separation, alignment, and cohesion forces.\n flock(boids) {\n let separation = this.separate(boids);\n let alignment = this.align(boids);\n let cohesion = this.cohesion(boids);\n \n // Weight the forces.\n separation.mult(1.8);\n alignment.mult(1.2);\n cohesion.mult(1.0);\n \n this.applyForce(separation);\n this.applyForce(alignment);\n this.applyForce(cohesion);\n }\n \n update() {\n this.velocity.add(this.acceleration);\n this.velocity.limit(this.maxSpeed);\n this.position.add(this.velocity);\n this.acceleration.mult(0); // Reset acceleration.\n }\n \n // Steering toward a target.\n seek(target) {\n let desired = p5.Vector.sub(target, this.position);\n desired.normalize();\n desired.mult(this.maxSpeed);\n let steer = p5.Vector.sub(desired, this.velocity);\n steer.limit(this.maxForce);\n return steer;\n }\n \n // Render the boid with an enhanced 3D model.\n render() {\n push();\n translate(this.position.x, this.position.y, this.position.z);\n \n // Rotate to match the velocity direction.\n if (use3D) {\n // Calculate the angle for the 2D projection.\n let heading2D = atan2(this.velocity.y, this.velocity.x);\n rotateZ(heading2D);\n \n // Tilt model depending on the z component.\n let tilt = asin(this.velocity.z / this.velocity.mag());\n rotateY(tilt);\n \n // Build a detailed model:\n // 1. Body: a tapered cone (tip points forward)\n ambientMaterial(this.hue, 80, 100);\n rotateX(PI/2);\n cone(this.size * 1.2, this.size * 8);\n \n // 2. Wings: add two custom wings to the sides.\n push();\n // Left wing.\n fill(this.hue, 80, 100, 70);\n translate(-this.size * 1.5, 0, 0);\n rotateZ(radians(30));\n beginShape();\n vertex(0, 0, 0);\n vertex(-this.size * 3, -this.size, 0);\n vertex(-this.size * 3, this.size, 0);\n endShape(CLOSE);\n pop();\n \n push();\n // Right wing.\n fill(this.hue, 80, 100, 70);\n translate(this.size * 1.5, 0, 0);\n rotateZ(radians(-30));\n beginShape();\n vertex(0, 0, 0);\n vertex(this.size * 3, -this.size, 0);\n vertex(this.size * 3, this.size, 0);\n endShape(CLOSE);\n pop();\n } else {\n // In 2D mode, draw layered triangles for a glowing effect.\n let theta = this.velocity.heading() + radians(90);\n rotate(theta);\n for (let i = 3; i > 0; i--) {\n fill(this.hue, 80, 100, 50 / i);\n beginShape();\n vertex(0, -this.size * i);\n vertex(-this.size * i * 0.6, this.size * i);\n vertex(this.size * i * 0.6, this.size * i);\n endShape(CLOSE);\n }\n }\n pop();\n }\n \n // Wrap-around behavior for simulation boundaries.\n borders() {\n // In WEBGL, the origin is the canvas center.\n let hw = width / 2;\n let hh = height / 2;\n if (this.position.x < -hw - this.size) this.position.x = hw + this.size;\n if (this.position.x > hw + this.size) this.position.x = -hw - this.size;\n \n if (this.position.y < -hh - this.size) this.position.y = hh + this.size;\n if (this.position.y > hh + this.size) this.position.y = -hh - this.size;\n \n // Extend the depth boundaries for a larger 3D field.\n let depth = 150;\n if (this.position.z < -depth) this.position.z = depth;\n if (this.position.z > depth) this.position.z = -depth;\n }\n \n // Separation: steer away from nearby boids.\n separate(boids) {\n let desiredSeparation = 25;\n let steer = createVector(0, 0, 0);\n let count = 0;\n for (let other of boids) {\n let d = dist(\n this.position.x, this.position.y, this.position.z,\n other.position.x, other.position.y, other.position.z\n );\n if (d > 0 && d < desiredSeparation) {\n let diff = p5.Vector.sub(this.position, other.position);\n diff.normalize();\n diff.div(d);\n steer.add(diff);\n count++;\n }\n }\n if (count > 0) steer.div(count);\n if (steer.mag() > 0) {\n steer.normalize();\n steer.mult(this.maxSpeed);\n steer.sub(this.velocity);\n steer.limit(this.maxForce);\n }\n return steer;\n }\n \n // Alignment: steer toward the average velocity of nearby boids.\n align(boids) {\n let neighborDist = 50;\n let sum = createVector(0, 0, 0);\n let count = 0;\n for (let other of boids) {\n let d = dist(\n this.position.x, this.position.y, this.position.z,\n other.position.x, other.position.y, other.position.z\n );\n if (d > 0 && d < neighborDist) {\n sum.add(other.velocity);\n count++;\n }\n }\n if (count > 0) {\n sum.div(count);\n sum.normalize();\n sum.mult(this.maxSpeed);\n let steer = p5.Vector.sub(sum, this.velocity);\n steer.limit(this.maxForce);\n return steer;\n }\n return createVector(0, 0, 0);\n }\n \n // Cohesion: steer toward the average position of nearby boids.\n cohesion(boids) {\n let neighborDist = 50;\n let sum = createVector(0, 0, 0);\n let count = 0;\n for (let other of boids) {\n let d = dist(\n this.position.x, this.position.y, this.position.z,\n other.position.x, other.position.y, other.position.z\n );\n if (d > 0 && d < neighborDist) {\n sum.add(other.position);\n count++;\n }\n }\n if (count > 0) {\n sum.div(count);\n return this.seek(sum);\n }\n return createVector(0, 0, 0);\n }\n}\n","style.css":"/* style.css */\nbody {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100vh;\n margin: 0;\n background-color: #e0f7fa;\n}\n\nh1 {\n margin-bottom: 20px;\n color: #00796b;\n font-size: 2.5rem;\n}\n\ncanvas {\n border: 2px solid #004d40;\n border-radius: 8px;\n margin-top: 10px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}\n\n#chat {\n display: flex;\n flex-direction: row;\n margin-bottom: 20px;\n}\n\n#userPrompt {\n padding: 10px;\n margin-right: 10px;\n border: 1px solid #b2dfdb;\n border-radius: 4px;\n box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\nbutton {\n padding: 10px;\n background-color: #00796b;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\nbutton {\n background-color: #004d40;\n}\n\n#responses {\n font-size: 24px;\n color: #004d40;\n}","index.html":"\n\n\n\n \n \n \n Boid Example\n \n \n \n\n\n\n\n \n\n\n"},"chat_history":[],"assets":[{"name":"cover2","cloudinary_id":"ifin1udq5mas1kudta6t","deleted":false,"project_id":6446,"created_at":"2025-03-21T04:02:59.839898Z","resource_type":"image","id":62260},{"name":"cover1","cloudinary_id":"l1fsfikp1xguevbr9utk","deleted":false,"project_id":6446,"created_at":"2025-03-21T04:02:59.811081Z","resource_type":"image","id":62259},{"name":"cover3","cloudinary_id":"f3qxuyyj1lhif6oxotc2","deleted":false,"project_id":6446,"created_at":"2025-03-21T04:02:59.809225Z","resource_type":"image","id":62258}],"messages_sent":11,"comments":[],"steps":[]}