From ec8786ab9b5266814c3527cb44635d3db4fb4daf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Forment?= Date: Sun, 6 Jul 2025 13:11:19 +0200 Subject: [PATCH] switching --- .eslintignore | 4 + .eslintrc.json | 38 + .prettierrc | 8 + README.md | 1 + coolshaders.md | 1 + index.html | 1026 +----- package-lock.json | 4769 ++++++++++++++++++++++++- package.json | 20 +- public/sw.js | 208 +- src/FakeShader.ts | 1066 +++--- src/ShaderWorker.ts | 1487 ++++---- src/Storage.ts | 333 +- src/components/App.tsx | 87 + src/components/EditorPanel.tsx | 59 + src/components/HelpPopup.tsx | 296 ++ src/components/MobileMenu.tsx | 191 + src/components/PerformanceWarning.tsx | 14 + src/components/ShaderCanvas.tsx | 327 ++ src/components/ShaderLibrary.tsx | 246 ++ src/components/TopBar.tsx | 282 ++ src/components/WelcomePopup.tsx | 60 + src/hooks/useAudio.ts | 118 + src/hooks/useKeyboardShortcuts.ts | 77 + src/hooks/useLucideIcon.tsx | 59 + src/icons.ts | 72 +- src/main.ts | 1035 ------ src/main.tsx | 66 + src/stores/appSettings.ts | 39 + src/stores/input.ts | 135 + src/stores/library.ts | 59 + src/stores/shader.ts | 33 + src/stores/ui.ts | 64 + src/styles/main.css | 854 +++++ src/utils/LRUCache.ts | 72 + src/utils/colorModes.ts | 205 ++ src/utils/constants.ts | 52 + tsconfig.json | 9 +- vite.config.ts | 2 + 38 files changed, 9935 insertions(+), 3539 deletions(-) create mode 100644 .eslintignore create mode 100644 .eslintrc.json create mode 100644 .prettierrc create mode 100644 src/components/App.tsx create mode 100644 src/components/EditorPanel.tsx create mode 100644 src/components/HelpPopup.tsx create mode 100644 src/components/MobileMenu.tsx create mode 100644 src/components/PerformanceWarning.tsx create mode 100644 src/components/ShaderCanvas.tsx create mode 100644 src/components/ShaderLibrary.tsx create mode 100644 src/components/TopBar.tsx create mode 100644 src/components/WelcomePopup.tsx create mode 100644 src/hooks/useAudio.ts create mode 100644 src/hooks/useKeyboardShortcuts.ts create mode 100644 src/hooks/useLucideIcon.tsx delete mode 100644 src/main.ts create mode 100644 src/main.tsx create mode 100644 src/stores/appSettings.ts create mode 100644 src/stores/input.ts create mode 100644 src/stores/library.ts create mode 100644 src/stores/shader.ts create mode 100644 src/stores/ui.ts create mode 100644 src/styles/main.css create mode 100644 src/utils/LRUCache.ts create mode 100644 src/utils/colorModes.ts create mode 100644 src/utils/constants.ts 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! -
- - +