diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..5fa03cd --- /dev/null +++ b/.eslintignore @@ -0,0 +1,4 @@ +node_modules +dist +*.js +public \ No newline at end of file diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..845a86f --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,38 @@ +{ + "env": { + "browser": true, + "es2020": true + }, + "extends": [ + "eslint:recommended", + "plugin:@typescript-eslint/recommended", + "plugin:react/recommended", + "plugin:react-hooks/recommended", + "prettier" + ], + "parser": "@typescript-eslint/parser", + "parserOptions": { + "ecmaFeatures": { + "jsx": true + }, + "ecmaVersion": "latest", + "sourceType": "module", + "project": "./tsconfig.json" + }, + "plugins": [ + "react", + "@typescript-eslint" + ], + "rules": { + "react/react-in-jsx-scope": "off", + "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }], + "@typescript-eslint/no-explicit-any": "warn", + "prefer-const": "error", + "no-var": "error" + }, + "settings": { + "react": { + "version": "detect" + } + } +} \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..46f2372 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,8 @@ +{ + "semi": true, + "trailingComma": "es5", + "singleQuote": true, + "printWidth": 80, + "tabWidth": 2, + "useTabs": false +} \ No newline at end of file diff --git a/README.md b/README.md index 412c062..eb73065 100644 --- a/README.md +++ b/README.md @@ -25,6 +25,7 @@ npm run dev - **H** - Toggle minimal UI mode - **F11** - Fullscreen - **R** - Random shader +- **M** - Cycle value modes - **S** - Share URL ### Shader Variables diff --git a/coolshaders.md b/coolshaders.md index 2ef4cfe..326dfad 100644 --- a/coolshaders.md +++ b/coolshaders.md @@ -4,3 +4,4 @@ x**10*y^200*t+20 x**10*y^200*t+20 x ^ Math.sin(y ^ x) * Math.sin(t) * Math.PI * 200 x ^ Math.sin(y ^ x) * Math.sin(t) * Math.PI ** 4 | x % 40 +(x | y + 20 + y*8 * bassLevel * t * audioLevel) + ([x>y, x - + - - - - -
-
Bitfielder
-
-
- - - - - - - - - - - - -
-
- - - - -
-
-
- -
-
-

Settings

-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
-
-
- - - - - -
-
-
- -
- - -
- -
-
-
-

Shader Library

-
- - -
-
- -
-
-
- -
-
- -
- -

Bitfielder Help

- -
-
-

Keyboard Shortcuts

-

Ctrl+Enter - Execute shader code

-

F11 - Toggle fullscreen

-

H - Hide/show UI

-

R - Generate random shader

-

S - Share current shader (copy URL)

-

? - Show this help

-
- -
-

Variables

-

x, y - Pixel coordinates

-

t - Time (enables animation)

-

i - Pixel index

-

mouseX, mouseY - Mouse position (0.0 to 1.0)

-

mousePressed - Mouse button down (true/false)

-

mouseVX, mouseVY - Mouse velocity

-

mouseClickTime - Time since last click (ms)

-
- -
-

Touch & Gestures

-

touchCount - Number of active touches

-

touch0X, touch0Y - Primary touch position

-

touch1X, touch1Y - Secondary touch position

-

pinchScale - Pinch zoom scale factor

-

pinchRotation - Pinch rotation angle

-
- -
-

Device Motion

-

accelX, accelY, accelZ - Accelerometer data

-

gyroX, gyroY, gyroZ - Gyroscope rotation rates

-
- -
-

Audio Reactive

-

audioLevel - Overall audio volume (0.0-1.0)

-

bassLevel - Low frequencies (0.0-1.0)

-

midLevel - Mid frequencies (0.0-1.0)

-

trebleLevel - High frequencies (0.0-1.0)

-

Click "Enable Audio" to activate microphone

-
- -
-

Operators

-

^ & | - XOR, AND, OR

-

<< >> - Bit shift left/right

-

+ - * / % - Math operations

-

== != < > - Comparisons (return 0/1)

-

? : - Ternary operator (condition ? true : false)

-

~ ** - Bitwise NOT, exponentiation

-
+
-
-

Math Functions

-

sin, cos, tan - Trigonometric functions

-

abs, sqrt, pow - Absolute, square root, power

-

floor, ceil, round - Rounding functions

-

min, max - Minimum and maximum

-

random - Random number 0-1

-

log, exp - Natural logarithm, exponential

-

PI, E - Math constants

-

Use without Math. prefix: sin(x) not Math.sin(x)

-
- -
-

Value Modes

-

Integer (0-255): Traditional mode for large values

-

Float (0.0-1.0): Bitfield shader mode, inverts and clamps values

-

Polar (angle-based): Spiral patterns combining angle and radius

-

Distance (radial): Concentric wave rings with variable frequency

-

Wave (ripple): Multi-source interference with amplitude falloff

-

Each mode transforms your expression differently!

-
- -
-

Advanced Features

-

Array indexing: [1,2,4,8][floor(t%4)]

-

Complex expressions: x>y ? sin(x) : cos(y)

-

Nested functions: pow(sin(x), abs(y-x))

-

Logical operators: x&&y, x||y

-

No character or length limits - use any JavaScript!

-
- -
-

Shader Library

-

Hover over the right edge of the screen to access the shader library

-

Save shaders with custom names and search through them

-

Use edit to rename, del to delete

-
- -
-

Render Modes

-

Classic - Original colorful mode

-

Grayscale - Black and white

-

Red/Green/Blue - Single color channels

-

HSV - Hue-based coloring

-

Rainbow - Spectrum coloring

-
- -
-

Export

-

Export PNG - Save current frame as image

-
-
- -
-

About

-

Bitfielder - Interactive bitfield shader editor

-

Created by BuboBubo (Raphaël Forment)

-

Website: raphaelforment.fr

-

Source: git.raphaelforment.fr

-

License: AGPL 3.0

-
-
- -
- Performance warning: Shader taking too long to render! -
- - +