Giter Site home page Giter Site logo

zulqarnain-cc34 / skyswarm Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 5 KB

๐Ÿฆœ A flocking simulation using a Perlin flow field with p5.js. Interact with agents on the canvas and adjust simulation parameters to experiment with flocking behavior. ๐Ÿ”๐Ÿ’ป Let's make some birds fly together!

JavaScript 92.00% HTML 8.00%
flocking-simulation javascript p5js perlinnoise

skyswarm's Introduction

๐Ÿฆ Flocking Simulation with Perlin Flow Field

This is an implementation of a flocking simulation with a Perlin flow field in JavaScript, based on Daniel Shiffman's Coding Train tutorial series.

The simulation uses a combination of steering behaviors and Perlin noise to simulate flocking behavior, such as alignment, cohesion, and separation, among the agents.

๐Ÿš€ How to Run the Simulation

To run the simulation, you need to create a libraries folder in the project directory and place the p5.js libraries inside it. Then, add the following paths to your HTML file:

<script language="javascript" type="text/javascript" src="./libraries/p5.js"></script>
<script language="javascript" src="./libraries/p5.dom.js"></script>
<script language="javascript" src="./libraries/p5.sound.js"></script>

To run the simulation, simply open the index.html file in a web browser or visit the live demo here.

๐Ÿ’ก How to Use the Simulation

Upon running the simulation, agents will appear on the canvas, moving in random directions. The user can interact with the simulation by changing the flow field, which will affect the movement of the agents.

The user can also adjust various parameters of the simulation, such as the number of agents, the size of the agents, and the strength of the flow field.

๐Ÿ› ๏ธ Technologies Used

The simulation was implemented using the following technologies:

  • HTML
  • CSS
  • JavaScript
  • p5.js library for creating and animating graphics in a web browser.

๐Ÿ™ Acknowledgments

This simulation was developed with the help of Daniel Shiffman's Coding Train tutorial series on flocking behavior and Perlin noise. Special thanks to him for his valuable resources and expertise.

๐Ÿ”ฎ Future Development

In the future, we plan to add more features to the simulation, such as obstacle avoidance, dynamic flow fields, and multiple agent types. We also plan to optimize the performance of the simulation for larger agent populations.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.