https://github.com/jgphilpott/particleweb

A simple and beautiful particle web generator.
https://github.com/jgphilpott/particleweb

generator javascript particle-web

Last synced: about 1 month ago
JSON representation

A simple and beautiful particle web generator.

• Host: GitHub
• URL: https://github.com/jgphilpott/particleweb
• Owner: jgphilpott
• License: mit
• Created: 2020-02-11T20:42:13.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2021-05-23T23:01:21.000Z (over 3 years ago)
• Last Synced: 2024-11-21T10:20:29.226Z (3 months ago)
• Topics: generator, javascript, particle-web
• Language: JavaScript
• Homepage: https://codepen.io/jacquelinclem/pen/udnwI
• Size: 21.5 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  



# Intro

This particle web generator is a refactored version of [Jacquelin Clément](https://github.com/jacquelinclem)'s particle web on [CodePen](https://codepen.io/jacquelinclem/pen/udnwI).

# Usage

To get started download the [particleWeb.js](https://raw.githubusercontent.com/jgphilpott/particleWeb/master/particleWeb.js) file in this repository and add a script tag to your HTML:

```

```

Next, be sure to add a canvas element to your HTML like this:

```

```

The size and location of the canvas is up to you but you probably want a full screen canvas so I recommend the following styling:

```

#canvas {

  display: block;

  margin: auto;

  width: 100%;

  height: 100%;

}

```

Finally, summon the particle web with the following function call:

```

summonParticleWeb()

```

If everything worked you should see 42 black particles bouncing around your HTML page.

# Features

## Count

You can optionally specify the number of particles, like so:

```

summonParticleWeb(count=number)

```

## Colors

You can also specify the colors you want in an array, like so:

```

summonParticleWeb(count=number, colors=["red", "blue", "yellow"])

```

You can use HEX and RGBA codes as well as common color names.

## Canvas

If you want you can also use a different ID for the canvas, like so:

```

summonParticleWeb(count=number, colors=["red", "blue", "yellow"], canvas="wallpaper")

```