Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jfitzsimmons/2d-animation-gallery
The animations are coded with Pixi.js and utilizes WebGL.
https://github.com/jfitzsimmons/2d-animation-gallery
2d-graphics animation creative-coding generative-art pixijs sass typescript webgl
Last synced: about 2 months ago
JSON representation
The animations are coded with Pixi.js and utilizes WebGL.
- Host: GitHub
- URL: https://github.com/jfitzsimmons/2d-animation-gallery
- Owner: jfitzsimmons
- Created: 2022-09-10T16:32:51.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-03-15T11:33:02.000Z (almost 2 years ago)
- Last Synced: 2024-10-15T06:46:00.637Z (3 months ago)
- Topics: 2d-graphics, animation, creative-coding, generative-art, pixijs, sass, typescript, webgl
- Language: TypeScript
- Homepage: https://jfitzsimmons.github.io/2d-animation-gallery/
- Size: 4.26 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 2D Generative Animation Gallery
Animations coded with Pixi.js, utilizes WebGL and styled with Sass.
[](https://jfitzsimmons.github.io/2d-animation-gallery/ 'generative 2d animation gallery')
> **What goes into a piece of generative art?**
> Often, generative art draws inspiration from modern art, especially pop art that makes heavy use of orderly geometric patterns.
>
> - Randomness is crucial for creating generative art. The art should be different each time you run the generation script.
> - Algorithms — As generative artists, we use code basics like loops, control flow and specialized functions.
> - Geometry — Most generative art incorporates shapes, and the math from high school geometry class can aid in some really cool effects.
[An introduction to Generative Art: what it is, and how you make it](https://www.freecodecamp.org/news/an-introduction-to-generative-art-what-it-is-and-how-you-make-it-b0b363b50a70/)
## Installation
### Prerequisites
npm (or yarn): [npm](https://www.npmjs.com/)
git: [git](https://git-scm.com/)
### Steps
Navigate to your chosen directory and clone the gallery.
```bash
git clone https://github.com/jfitzsimmons/2d-animation-gallery.git
```
(webpack & gh-pages)
```
npm install
```
```bash
npm run build
npm run dev
```
## Deploy
### Prerequisites
You'll need a Github account: [create account](https://github.com/join)
Update homepage in package.json to your own
```
"homepage": "https://yourhandle.github.io/2d-animation-gallery/",
```
```bash
npm run deploy
```
## Built With
- [Pixi.js](https://pixijs.com/) - Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.
- [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) - WebGL (Web Graphics Library) is a JavaScript API for rendering high-performance interactive 3D and 2D graphics within any compatible web browser.
- [Sass](https://sass-lang.com/) - Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.