https://github.com/qc20/glsl-noisesoup

Noise Soup: An interactive WebGL experiment merging design and code. Create stunning visual effects responsive to user input. Ideal for designers and coders alike.
https://github.com/qc20/glsl-noisesoup

creative-coding digital-art generative-art glsl hci interaction-design interactive-art javascript real-time-graphic shaders threejs ux-design visualization web-animation web-design webgl

Last synced: 6 days ago
JSON representation

Noise Soup: An interactive WebGL experiment merging design and code. Create stunning visual effects responsive to user input. Ideal for designers and coders alike.

• Host: GitHub
• URL: https://github.com/qc20/glsl-noisesoup
• Owner: QC20
• License: mit
• Created: 2024-07-22T20:23:05.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-07-22T20:56:19.000Z (4 months ago)
• Last Synced: 2024-07-23T00:41:28.440Z (4 months ago)
• Topics: creative-coding, digital-art, generative-art, glsl, hci, interaction-design, interactive-art, javascript, real-time-graphic, shaders, threejs, ux-design, visualization, web-animation, web-design, webgl
• Language: HTML
• Homepage: https://qc20.github.io/GLSL-NoiseSoup/
• Size: 1.09 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Noise Soup

Noise Soup is an interactive web-based art project that explores the intersection of design, technology, and user interaction. Using WebGL shaders and Three.js, it creates a dynamic, visually striking experience that responds to user input.

## Features

- Real-time shader rendering

- Mouse interaction

- Responsive design

## Customization

Noise Soup is designed to be easily customizable, allowing designers and developers to experiment with various visual effects:

1. **Shader Modification**: The core of Noise Soup's visual output is controlled by the fragment shader in `index.html`. By modifying this shader, you can create entirely new visual effects. Experiment with color calculations, patterns, and mathematical functions to achieve unique results.

2. **Uniforms**: The `uniforms` object in `sketch.js` provides key inputs to the shader. You can add new uniforms to incorporate additional data into your visual design.

3. **Interaction**: Currently, Noise Soup responds to mouse movement. You could extend this to include other forms of interaction, such as touch events on mobile devices or keyboard input.

4. **Post-processing**: Consider adding post-processing effects using Three.js to further enhance the visual output.

## Getting Started

To run Noise Soup's locally:

1. Clone this repository

2. Open `index.html` in a modern web browser

No build process is required, making it easy to dive in and start experimenting!

## Design Implications

PinPortrait serves as a canvas for exploring several key areas in UX and interaction design:

- **Responsive Visuals**: The project demonstrates how visual elements can respond fluidly to user input, creating a sense of direct manipulation.

- **Performance and Perception**: By leveraging WebGL, Noise Soup achieves smooth animations even with complex visual effects, highlighting the importance of performance in UX design.

- **Accessibility Through Abstraction**: The abstract nature of the visuals opens up possibilities for creating inclusive experiences that don't rely solely on specific cultural or visual references.

We encourage designers and developers to use Noise Soup as a starting point for their own experiments in interactive visual design. Fork the project, modify the shaders, and share your creations!