Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rezaali/Fragment
Live Code Graphics via GLSL Fragment Shaders
https://github.com/rezaali/Fragment
Last synced: about 2 months ago
JSON representation
Live Code Graphics via GLSL Fragment Shaders
- Host: GitHub
- URL: https://github.com/rezaali/Fragment
- Owner: rezaali
- License: mit
- Archived: true
- Created: 2017-10-01T21:59:32.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-11-05T21:54:52.000Z (almost 5 years ago)
- Last Synced: 2024-05-07T04:32:42.825Z (5 months ago)
- Language: GLSL
- Homepage: http://www.syedrezaali.com/store/fragment-osx-app
- Size: 14.9 MB
- Stars: 167
- Watchers: 9
- Forks: 10
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Fragment
--
### About:
Fragment is an open source design tool that utilizes GLSL and live coding to allow anyone to create spectacular imagery with math(s)!
Similar to shadertoy.com, glslsandbox.com, and glslb.in. Fragment is a constrained design tool for content creation within the boundaries of two triangles. If none of that made any sense, please visit [www.shadertoy.com](http://www.shadertoy.com)
Unlike shadertoy, Fragment is a native macOS app, that allows you to edit your GLSL code with which ever text editor you prefer. Fragment allows you to render out high resolution prints, and png sequences (with transparency if you want it)! Also, you can VJ with Fragment by sending it OSC :)
Fragment allows you to create playable real-time visual instruments. It does this by creating UI elements (sliders, buttons, etc) from comments in your glsl code, i.e. uniform float foobar; //slider:0.0,1.0,0.5.
More info here: [www.syedrezaali.com/store/fragment-osx-app](http://www.syedrezaali.com/store/fragment-osx-app).
### Examples:
Check out some things made with Fragment: [https://github.com/rezaali/FragmentSketches](https://github.com/rezaali/FragmentSketches)
### Build Fragment:
#### 1. Clone Cinder
```
git clone --recursive https://github.com/cinder/Cinder.git Cinder
```
#### 2. Clone Fragment:
```
cd Cinder/samples
mkdir _reza
cd _reza
git clone [email protected]:rezaali/Fragment.git
```
#### 3. Clone Dependencies
```
cd ../../blocks/
git clone [email protected]:rezaali/Cinder-SaveLoadCamera.git SaveLoadCamera
git clone [email protected]:rezaali/Cinder-EasyCamera.git EasyCamera
git clone [email protected]:rezaali/Cinder-MovieSaver.git MovieSaver
git clone [email protected]:rezaali/Cinder-SequenceSaver.git SequenceSaver
git clone [email protected]:rezaali/Cinder-LiveCode.git LiveCode
git clone [email protected]:rezaali/Cinder-ImageSaver.git ImageSaver
git clone [email protected]:rezaali/Cinder-GlslParams.git GlslParams
git clone [email protected]:rezaali/Cinder-UI.git UI
git clone [email protected]:rezaali/Cinder-Tiler.git Tiler
git clone [email protected]:rezaali/Cinder-AppUI.git AppUI
git clone [email protected]:rezaali/Cinder-AppPaths.git AppPaths
git clone [email protected]:rezaali/Watchdog.git Watchdog
```
#### 4. Build Cinder
```
cd ../../proj/xcode/ && ./fullbuild.sh
```
#### 5. Open Fragment Xcode project
```
cd ../samples/_reza/Fragment/xcode
open Fragment.xcodeproj/
```
#### 6. Run
In Xcode, go to the Product Menu and then Run or press Apple + R
### Using Fragment:
1. Arrange Windows (Apple + w)
2. Set your code editor (Click SET EDITOR button) & navigate to your favorite text editor app
3. Open the editor (Click OPEN EDITOR button or Apple + Shift + E). This will open the folder containing the code you should edit (shader.frag)
4. Edit the code and save, Fragment will recompile the shaders and show you hottness.
5. Save your live code session by clicking SAVE AS.
6. Load a live code session by clicking LOAD.
7. Try rendering a high res print (EXPORTER > SAVE IMAGE AS)
8. Try rendering a movie (EXPORTER > RENDER): Select MOVIE Option, unselect PNG and click RENDER
9. Change the total number of frames for your movie (this effects the iAnimationTime, which goes from 0 -> 1). The number dialer for this is next to EXPORTER > PNG.
10. Try rendering a sequence of pngs (EXPORTER > RENDER) Select PNG Option, unselect MOVIE and click RENDER.
### Improving Fragment:
1. Make this readme better and submit a pull request!
2. Point out things I'm doing wrong or could be better.
3. Submit an example.
4. Refactor something to make it easier to understand.
5. Share Fragment with your friends.