DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for tsParticles - Guide for Hacktoberfest 2022 participants
Matteo Bruni for tsParticles

Posted on

tsParticles - Guide for Hacktoberfest 2022 participants

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.

GitHub logo matteobruni / tsparticles

tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.

banner

tsParticles - TypeScript Particles

A lightweight TypeScript library for creating particles. Dependency free (*), browser ready and compatible with React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components

GitHub Sponsors jsDelivr hits (npm) Cdnjs npm npm lerna CodeFactor Codacy Badge Rate this package Gitpod Ready-to-Code Run on Repl.it

Discord Slack Telegram Reddit

tsParticles Product Hunt Buy Me A Coffee


Table of Contents

โš ๏ธโš ๏ธ _This readme refers to v2 version, read here for v1 documentation* โš ๏ธโš ๏ธ


Do you want to use it on your website?

Documentation and Development references here ๐Ÿ“–

This library isโ€ฆ

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.

GitHub logo tsparticles / 404-templates

tsParticles Auth Template for Websites

tsParticles 404 Templates

tsParticles used in various 404 Pages for Websites

404 Masked Page Preview

masked 404

See working preview here

404 Simple Page Preview

simple 404

See working preview here

404 Space Page Preview

space 404

See working preview here

What is tsParticles

tsParticles is a lightweight library for easily creating particles animations in your websites or web applications.

The tsParticles library is ready to be used in standard JavaScript, React, Vue.js, Angular, Svelte, jQuery, Preact, Inferno.

Want to see more particles demos? Checkout this collection

Want to see more templates or want to share yours? Checkout this README




GitHub logo tsparticles / storybook

tsParticles Storybook

Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can't go back!

If youโ€ฆ

GitHub logo tsparticles / nuxt2-particles-demo

Nuxt.js Particles Demo

nuxt2-particles-demo

Build Setup

# 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
Enter fullscreen mode Exit fullscreen mode

For detailed explanation on how things work, check out the documentation.

Special Directories

You can create the following extra directories, some of which have special behaviors. Only pages is required; you can delete them if you don't want to use their functionality.

assets

The assets directory contains your uncompiled assets such as Stylus or Sass files, images, or fonts.

More information about the usage of this directory in the documentation.

components

The components directory contains your Vue.js components. Components make up the different parts of your page and can be reused and imported into your pages, layouts and even other components.

More information about the usage of this directoryโ€ฆ

Nuxt 3 Minimal Starter

Look at the nuxt 3 documentation to learn more.

Setup

Make sure to install the dependencies:

# yarn
yarn install

# npm
npm install

# pnpm
pnpm install --shamefully-hoist
Enter fullscreen mode Exit fullscreen mode

Development Server

Start the development server on http://localhost:3000

npm run dev
Enter fullscreen mode Exit fullscreen mode

Production

Build the application for production:

npm run build
Enter fullscreen mode Exit fullscreen mode

Locally preview production build:

npm run preview
Enter fullscreen mode Exit fullscreen mode

Checkout the deployment documentation for more information.




GitHub logo tsparticles / gatsby-landing-page-starter

tsParticles Simple Landing Page Starter for Gatsby Websites

Gatsby

tsParticles Gatsby Landing Page Starter

Kick off your project with this landing page boilerplate. This starter ships with the main Gatsby configuration files, and React tsParticles with a simple configuration, you might need to get up and running blazing fast with the blazing fast app generator for React.

Landing Page Preview

login

You can see a working preview here

๐Ÿš€ Quick start

  1. Create a Gatsby site.

    Use the Gatsby CLI to create a new site, specifying the blog starter.

    # create a new Gatsby site using the particles landing page starter
    gatsby new my-particles-starter https://github.com/tsparticles/gatsby-landing-page-starter
    Enter fullscreen mode Exit fullscreen mode
  2. Start developing.

    Navigate into your new siteโ€™s directory and start it up.

    cd my-particles-starter/
    gatsby develop
    Enter fullscreen mode Exit fullscreen mode
  3. Open the source code and start editing!

    Your site is now running at http://localhost:8000!

    Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more aboutโ€ฆ

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

GitHub logo tsparticles / templates

tsParticles website templates collection

banner

Awesome

tsParticles Websites and Templates Collection

tsParticles is a lightweight JavaScript/TypeScript library for creating easily particles animations in your websites.

The library has also official components for the most used JavaScript frameworks that you can see below.

If you have created a website with tsParticles and you want to share your template feel free to add a pull request to add it below.

Vanilla JavaScript / Plain HTML (tsparticles)

React JS (react-tsparticles)

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.

Top comments (0)

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

โญ๏ธ๐ŸŽ€ JavaScript Visualized: Promises & Async/Await

async await