vizplex

KO | EN

gitlite — search

#javascript #react #llm #rust #deep-learning #docker #macos #java #windows #awesome #kubernetes #pytorch #openai #open-source

(★ 11)

Pretty Javascript GLSL noise visualizer library :rainbow: :star2::sparkles:

vizplex 최신버젼 다운로드

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

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# vizplex

GLSL noise visualizer library.

Fullscreen (yes! fullscreen!) demonstrations [here](https://scottyfillups.github.io/vizplex)

![](https://scottyfillups.github.io/vizplex/screenshots/noise1.gif)![](https://scottyfillups.github.io/vizplex/screenshots/noise2.gif)![](https://scottyfillups.github.io/vizplex/screenshots/noise3.gif)
<br />
![](https://scottyfillups.github.io/vizplex/screenshots/noise4.gif)![](https://scottyfillups.github.io/vizplex/screenshots/noise5.gif)![](https://scottyfillups.github.io/vizplex/screenshots/noise6.gif)

### Installation

The package is on NPM:

`$ npm install --save vizplex`

Alternatively, you can download the file from the [GitHub repo](https://github.com/ScottyFillups/vizplex") and embed everything in `<script>` tags:
```html
<script src="./vizplex.min.js"></script>
```

### Usage
```js
var vizplex = require('vizplex')
var canvas = document.createElement('canvas')
var eqs = ['n(x/32,y/32,t)', 'r', 'r', '1']

canvas.height = 512
canvas.width = 512
document.body.appendChild(canvas)

vizplex(canvas, eqs)
```

All the examples are in the `docs/examples` folder in the [GitHub repo](https://github.com/ScottyFillups/vizplex).

### Documentation

##### vizplex(canvas, fns, options)
* **canvas**: The `canvas` node or DOM selector string
* **fns**: An array for the respective functions for RGBA. More detailed explanation below
* **options**:
  * timeFactor: Numeric value that multiplies the time variable. Used to controlling speed
  * ccapConfig: The config object used to instantiate [CCapture](https://github.com/spite/ccapture.js/). Used for recording the contents of the canvas. **Webms do NOT support transparency**, this means your `alpha` function must be `1`

### RGBA functions

Every RGBA function should have a range of `[0, 1]` (values outside the range will be treated as being on the boundary). Below are a few functions and values you can use in your RGBA function:
* abs(): Absolute value
* sin(): Sine trig. function
* cos(): Cosine trig. function
* n(): Simplex3 noise function (takes three arguments)
* t: The current time, in seconds, multipled by the time factor
* x: The X coordinate of the pixel being rendered
* y: The Y coordinate of the pixel being rendered

In general, you can use any built-in GLSL function.

You can also re-use the values of previous RGBA functions, as `r`, `g`, `b`, and `a`. For example, suppose you want:
```js
var rgbaFuncts = [
  'n(x/32,y/32,t)',
  'n(x/32,y/32,t)',
  'n(x/32,y/32,t)',
  '1'
]
```

This means the GPU needs to compute `n(x/32,y/32,t)` three times, and since `n` is a mathematical function, you'll get the same output for each one. Instead, you can do this:
```js
var rgbaFunctions = [
  'n(x/32,y/32,t)',
  'r',
  'r',
  '1'
]
```

Keep in mind order matters. `r` is defined before `b`, and `b` is defined before `g`, etc. This means that the following code **won't work**:
```js
var rgbaFunctions = [
  'b', // Error: This uses the 'b' variable before it's assigned.
  'n(x/32,y/32,t)',
  'b',
  '1'
]
```

### How it works

The RGBA function strings are parsed and mapped to proper GLSL syntax. For example, `sin(x/32, y/32)` would be mapped to `sin(gl_FragCoord.x/32, gl_FragCoord.y/32)`. The RGBA functions then replace placeholders in a GLSL fragment template, the GLSL gets loaded, then graphics are drawn on the canvas. I'm pretty nooby at regexs, so please don't flame me if you think my source is garbo. Criticism is welcome though.

### Acknowledgements

I would like to thank the all contributors of [stackgl](http://stack.gl/), which made my life a lot easier.

vizplex

vizplex 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

vizplex

vizplex 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README