Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/qc20/soup
This project is an exploration of procedural textures, interactive animations, and the mesmerizing world of GLSL shaders. Dive in and see what you can create!
https://github.com/qc20/soup
color-shader creative-coding css html interaction javascript noise perlin-noise stats
Last synced: 6 days ago
JSON representation
This project is an exploration of procedural textures, interactive animations, and the mesmerizing world of GLSL shaders. Dive in and see what you can create!
- Host: GitHub
- URL: https://github.com/qc20/soup
- Owner: QC20
- Created: 2024-07-07T20:09:47.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-07-09T21:33:43.000Z (4 months ago)
- Last Synced: 2024-07-10T01:52:28.461Z (4 months ago)
- Topics: color-shader, creative-coding, css, html, interaction, javascript, noise, perlin-noise, stats
- Language: HTML
- Homepage: https://qc20.github.io/Soup/
- Size: 11.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎨 Soup: A WebGL Shader
Welcome to the **WebGL Shader Playground**! This project is an exploration of procedural textures, interactive animations, and the mesmerizing world of GLSL shaders. Dive in and see what you can create!
## 🌟 Features
- **Interactive Canvas**: Experience real-time rendering with WebGL.
- **Dynamic Shaders**: Leverage the power of GLSL to create stunning visual effects.
- **Perlin Noise**: Generate smooth, flowing textures using Perlin noise.
- **Responsive Design**: The canvas resizes dynamically to fit any screen.
## 🛠️ Setup
Getting started is easy! Follow these steps to set up the project locally.
### Prerequisites
- A modern web browser (Chrome, Firefox, Safari, etc.)
- A code editor (VSCode, Sublime Text, Atom, etc.)
### Installation
1. **Clone the repository**:
```bash
git clone https://github.com/yourusername/webgl-shader-playground.git
```
2. **Navigate to the project directory**:
```bash
cd webgl-shader-playground
```
3. **Open the project in your code editor**.
4. **Start a local server**:
- If you have Python installed, you can use:
```bash
# For Python 3.x
python -m http.server
# For Python 2.x
python -m SimpleHTTPServer
```
- Alternatively, you can use any other local server tool you prefer.
5. **Open your browser and navigate to**:
```
http://localhost:8000
```
## 🚀 Usage
- **Edit Shaders**: Modify the `vert-shader` and `frag-shader` scripts directly in the HTML file to see changes in real-time.
- **Experiment**: Play around with different shader effects and see how they transform the visual output.
## 🎨 Customization
- **Styles**: Customize the look and feel by editing `styles.css`.
- **JavaScript**: Add more interactive elements by extending the logic in `sketch.js`.
## 📸 Screenshots
## 🤝 Contributing
Contributions are welcome! Feel free to submit a pull request or open an issue.
## 📄 License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
## 📧 Contact
For any inquiries or feedback, you can reach me at [[email protected]](mailto:[email protected]).
---
Happy coding! 🎉