GithubHelp home page GithubHelp logo

notduncansmith / flocking-birds-background Goto Github PK

View Code? Open in Web Editor NEW

This project forked from casulornstein/flocking-birds-background

0.0 1.0 0.0 66 KB

License: MIT License

JavaScript 1.51% TypeScript 98.49%

flocking-birds-background's Introduction

flocking-birds-background

An interactive and animated flocking birds background for React.

This background supports window resizing, horizontal and vertical scrolling, and defining custom obstacles through the use of CSS selectors. User interactivity is included with birds within a proximity being attracted to the mouse's position when the mouse is over the background

Example of the flocking-birds-background

Installation

The background is provided as a NPM package, so to install run npm install flocking-birds-background in the root of your React project.

Usage

To use, import the background component and place this within the main App div of your app:

import { FlockingBirdsBackground } from 'flocking-birds-background'

function App() {
  return (
    <div className="App">
      <FlockingBirdsBackground/>
    </div>
  );
}

An initial number of birds can be chosen by setting the initialBirdCount prop (this defaults to 150):

<FlockingBirdsBackground initialBirdCount={100}/>

Currently to mark elements as an obstacle which the birds will avoid, give the element a class name of avoider. (A future update will make the CSS selector configurable)

Credits

The behavioural model for the birds has been based off the work done in modelling the movement of starling flocks by Daniel J. G. Pearcea, Adam M. Millera, George Rowlandsa, and Matthew S. Turner at the University of Warwick.

See the following article for more details: https://warwick.ac.uk/newsandevents/pressreleases/the_mystery_behind

License

Distributed under the MIT License. See LICENSE for more information.

Contact

flocking-birds-background's People

Contributors

casulornstein avatar chrishyle avatar notduncansmith avatar

Watchers

 avatar

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.