Hello Hacktoberfest 2022 contributors,

tsParticles is welcoming again all the Hacktoberfest participants with many activities, from updating documentation and readme files to complex code tasks working on canvas and optimization of the existing codebase.

How can you help

First of all welcome to the Hacktoberfest 2022 and in the tsParticles repository. You can search for the Hacktoberfest tag in the project issues.

This is the url for lazy people: https://github.com/matteobruni/tsparticles/issues?q=is%3Aissue+is%3Aopen+label%3AHacktoberfest

This PR is another interesting one: https://github.com/matteobruni/tsparticles/pull/4360, it's about designing a new website, with a more modern look and improved UI/UX.

If you are not a coder, you can start from updating readme files, or update the documentation comments in the TypeScript files. You can open a PR without an issue, I will review them as soon as possible.

There are other projects related to tsParticles, like creating new templates using tsParticles.

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn dev

# build for production and launch server
$ yarn build
$ yarn start

# generate static project
$ yarn generate

# yarn
yarn install

# npm
npm install

# pnpm
pnpm install --shamefully-hoist

npm run dev

npm run build

npm run preview

Or a generic template collector where you can find other repositories containing tsParticles demos, some of them are still part of the tsParticles organization. I can make all of them valid for the Hacktoberfest 2022, if necessary

Main Repository

There are some cool things that can be created in the main repository that could be useful for the community (ordered by difficulty):

• Create a new preset (options template)
• Create a new shape
• Create a new plugin, updater, interaction or mover
• Create a new path plugin

Creating a new preset

Creating a preset is really simple, there are some of them already available here: https://github.com/matteobruni/tsparticles/tree/main/presets

One of the simplest is the links preset that can be found here: https://github.com/matteobruni/tsparticles/tree/main/presets/links

You can copy that folder, create a new one and replace carefully all the links or Links words with the name you are thinking about and replace the options in the src/options.ts file.

All the scripts are ready for building any preset, so you don't have to worry too much on how to build it. You can add the preset in the demo/vanilla project for testing them.

Creating a new shape

Creating a new shape is an easy task if you know how to draw in canvas. You have to draw only the shape, no need to worry about colors, opacity, rotation, or any other particle property. It's not shape responsibility to transform the particle.

All the shapes can be found here: https://github.com/matteobruni/tsparticles/tree/main/shapes

A simple one is the circle shape available here: https://github.com/matteobruni/tsparticles/tree/main/shapes/circle

Like in the preset project, first replace all circle and Circle references with the shape name you want to achieve then start working on the src/CircleDrawer.ts file (renaming it to something similar to your shape name. Returning more than 12 sides is not necessary, since it's already really close to a circle shape and requires more resources to calculate all those sides.

Creating a new plugin, updater, interaction or mover

Every project of these types can have different difficulties, let's start from explaining each of them:

• Plugin: a new feature that changes the normal behavior of the particles animation, like generating them starting from a canvas (canvas-mask plugin) or from an SVG path (polygon-mask plugin), or adding a new color manager (hsv-color plugin), or adding new features like emitters or absorbers.

• Updater: something that is responsible for adding features to every single particle, like updating the size, the opacity, the color, the rotation, and so on of each particle. It can be tricky since you have to handle correctly new options, or create new properties in the particle. It's not that hard, but it could require some knowledge.

• Interaction: something that is responsible for interactions between the mouse hover, mouse click or between some DOM objects, or between particles itself, like the famous repulse effect when the mouse is hovered over the canvas, or when you click and new particles are added, or the links between two particles. This project can be difficult because it could have some math to consider, like distance and velocity values.

• Mover: something that is giving to each particle a new movement effect. There are only two mover plugins at the moment, the one that is responsible for general movement and the one for the parallax effect. Creating one of these can be tricky since a lot of movement are already part of the generic one. Maybe it's not necessary to create one, but who knows.

Creating a new path plugin

This is the hardest project, in my opinion, because these projects are changing the standard particles movement only returning a velocity (you still can access the particle, so you can change other stuff as well). Path plugins were born for noise effect, but they expanded with the polygon path plugin, creating polygons while moving or the circles path that creates arcs while moving (that can be seen in the sea-anemone preset).

This requires for sure math, since moving a particle requires knowledge in the 2D geometry, and you should be aware of the time passed as well.

Happy hacking to anyone, and remember that a star 🌟 on GitHub is free and it helps the project to gain visibility.