generative-flow-field

KO | EN

gitlite — search

#javascript #hacktoberfest #ai #llm #go #golang #linux #docker #macos #nodejs #java #cli #vue #pytorch

generative-flow-field

(★ 10)

A calm, performant, workerized WebGL2 flow-field background.

generative-flow-field 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Generative Flow Field Background

A lightweight, standalone JavaScript library for creating animated, generative flow field backgrounds using WebGL. It's designed to be easily integrated into any web project with no external dependencies.

This library provides a highly customizable particle system where thousands of lines trace a constantly evolving noise field, creating beautiful, organic patterns. It also features a smooth, built-in transition system to animate between different visual themes.

**[Live demo](https://therapywarsaw.com/)**

---

## Features

-   **High Performance**: Renders thousands of lines smoothly using WebGL 2.
-   **No Dependencies**: Written in plain JavaScript, requiring no external libraries.
-   **Highly Customizable**: A simple configuration object allows for deep control over the visual style and physics.
-   **Smooth Transitions**: Built-in `setConfig()` method for synchronous, cross-fade transitions between visual themes.
-   **MIT Licensed**: Free to use, modify, and distribute for personal and commercial projects.

---

![A Flow Field](https://raw.githubusercontent.com/23x2/generative-flow-field/main/img.png)

---

## Quick Start

Integrating the flow field into your project is straightforward.

**1. HTML Setup**

Add a `<canvas>` element to your HTML file. This is where the animation will be rendered.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <canvas id="flowfield-canvas"></canvas>

<h1>Hello, World!</h1>

**2. CSS Styling**

Make the canvas a fixed background element that covers the entire viewport.

```css
#flowfield-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1; /* Place it behind your other content */
}
```

**3. JavaScript Implementation**

Import the `FlowField` class and instantiate it with your canvas and a configuration object.

```javascript
// main.js
import { FlowField } from './FlowField.js';

// Get the canvas element
const canvas = document.getElementById('flowfield-canvas');

// Define a custom visual theme
const myTheme = {
    mainColor: [0.9, 0.2, 0.2], // Vibrant red
    angleScale: 1.9,
    noiseScale: 0.0008,
    timeSpeed: 0.010,
    minLineWidth: 2.1,
    maxLineWidth: 3.5,
};

// Create a new instance with your theme
const flowField = new FlowField(canvas, myTheme);

// Start the animation
flowField.start();

// To transition to a new theme later, just call setConfig():
// const anotherTheme = { mainColor: [0.2, 0.8, 0.3] };
// document.getElementById('my-button').onclick = () => {
//   flowField.setConfig(anotherTheme);
// };
```

-----

## Configuration API

You can customize the appearance and behavior of the flow field by passing a configuration object to the constructor. Any property you don't specify will use its default value.

### Core Simulation

### Flow Field Physics

### Visual Appearance

### Transitions & Technical

-----

## Methods API

-----

## License

This project is licensed under the **MIT License**. See the `LICENSE` file for details.

## Acknowledgement

This library was created by Mikołaj Czyż for a psychotherapy practice, [Therapy Warsaw](https://therapywarsaw.com/psychotherapists). I hope it might be a useful and quiet tool for other developers and designers.

generative-flow-field

generative-flow-field 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

generative-flow-field

generative-flow-field 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README