├── .gitignore ├── README.md ├── art ├── box_1.gif ├── box_2.gif ├── brightness_1.gif ├── circle_1.gif ├── circle_moon_1.gif ├── circle_pattern_1.gif ├── circle_pattern_2.gif ├── cnoise_1.gif ├── cnoise_2.gif ├── cube_3.gif ├── cube_4.gif ├── distortion_ball_1.gif ├── distortion_ball_2.gif ├── divide_colors_1.gif ├── dynamic_shape_1.gif ├── easing_1.gif ├── easing_2.gif ├── easing_3_rotation.gif ├── easing_chasing_1.gif ├── easing_multiple_balls_1.gif ├── easing_multiple_polygons_1.gif ├── easing_multiple_triangles_1.gif ├── function_fract_and_mod_1.gif ├── hexagon_1.gif ├── image_1.gif ├── light_stream_1.gif ├── light_stream_with_rotation_1.gif ├── metaball_1.gif ├── metaball_2.gif ├── metaball_mosaic_1.gif ├── metaball_oblique_line_1.gif ├── morphing_1.gif ├── mosaic_1.gif ├── mosaic_circle_1.gif ├── mosaic_circle_1_2.gif ├── mosaic_circle_2.gif ├── mosaic_circle_3.gif ├── mosaic_ring_1.gif ├── multiple_rotation_1.gif ├── noise_and_rotation_1.gif ├── oblique_line_1.gif ├── parallax_colorful_particle_1.gif ├── parallax_mosaic_circle_1.gif ├── parallax_particles_1.gif ├── parallax_rectangle_1.gif ├── particle_1.gif ├── pattern_and_rotattion_1.gif ├── pattern_and_rotattion_2.gif ├── pattern_grid_1.gif ├── pattern_invader_1.gif ├── pattern_lattice_1.gif ├── pattern_random_meter_1.gif ├── pattern_random_meter_2.gif ├── pattern_shine_1.gif ├── pattern_tile_1.gif ├── pattern_tile_2.gif ├── pattern_zigzag_1.gif ├── plural_ring_pattern_1.gif ├── plural_ring_pattern_2.gif ├── random_transformation_1.gif ├── ray_marching_1.gif ├── ray_marching_10.gif ├── ray_marching_11_ring.gif ├── ray_marching_2.gif ├── ray_marching_3.gif ├── ray_marching_4.gif ├── ray_marching_5.gif ├── ray_marching_6.gif ├── ray_marching_7.gif ├── ray_marching_8_rotate_box.gif ├── ray_marching_8_rotate_box_2.gif ├── ray_marching_8_rotate_box_3.gif ├── ray_marching_9_geometric_box.gif ├── ripple_2.gif ├── rotation_1.gif ├── scene_switch_1.gif ├── skew_1.gif ├── sphere_2.gif ├── spiral_1.gif ├── spiral_pattern_easing_1.gif ├── texture_mapping_1.gif ├── tile_random_1.gif ├── triangle_1.gif ├── triangle_2.gif ├── vertex_2.gif ├── vertex_3.gif ├── vertex_circle_1.gif ├── vertex_cube_1.gif ├── vertex_cube_2.gif ├── voronoi_1.gif └── word_io18_1.gif ├── box ├── box_1.frag └── box_2.frag ├── brightness └── brightness_1.frag ├── circle ├── circle_1.frag ├── circle_moon_1.frag ├── circle_pattern_1.frag └── circle_pattern_2.frag ├── color └── divide_colors_1.frag ├── distortion ├── distortion_ball_1.frag └── distortion_ball_2.frag ├── easing ├── easing_1.frag ├── easing_2.frag ├── easing_3_rotation.frag ├── easing_chasing_1.frag ├── easing_collection_1.frag ├── easing_multiple_balls_1.frag ├── easing_multiple_polygons_1.frag └── easing_multiple_triangles_1.frag ├── frame └── frame.frag ├── function └── function_fract_and_mod_1.frag ├── glslify ├── glslify-box.frag └── glslify-map.frag ├── grid └── grid_1.frag ├── hexagon └── hexagon_1.frag ├── image ├── image_1.frag └── thumb.jpg ├── light_stream ├── light_stream_1.frag └── light_stream_with_rotation_1.frag ├── metaball ├── metaball_1.frag ├── metaball_2.frag ├── metaball_mosaic_1.frag └── metaball_oblique_line_1.frag ├── morphing └── morphing_1.frag ├── mosaic ├── mosaic_1.frag ├── mosaic_circle_1.frag ├── mosaic_circle_1_2.frag ├── mosaic_circle_2 │ ├── mosaic_circle_2.frag │ └── mosaic_circle_2.klproj ├── mosaic_circle_3.frag └── mosaic_ring_1.frag ├── noise ├── cnoise_1.frag ├── cnoise_2.frag ├── noise_and_rotation_1.frag └── noise_orb_1.frag ├── parallax ├── parallax_colorful_particle_1.frag ├── parallax_mosaic_circle_1.frag ├── parallax_particles_1.frag └── parallax_rectangle_1.frag ├── particle └── particle_1.frag ├── pattern ├── oblique_line_1.frag ├── pattern_1.frag ├── pattern_2.frag ├── pattern_and_rotattion_1.frag ├── pattern_and_rotattion_2.frag ├── pattern_grid_1.frag ├── pattern_invader_1.frag ├── pattern_lattice_1.frag ├── pattern_random_meter_1.frag ├── pattern_random_meter_2.frag ├── pattern_shine_1.frag ├── pattern_tile_1.frag ├── pattern_tile_2.frag └── pattern_zigzag_1.frag ├── plural_ring ├── plural_ring_pattern_1.frag └── plural_ring_pattern_2.frag ├── random └── random_transformation_1.frag ├── ray_marching ├── ray_marching_1.frag ├── ray_marching_10.frag ├── ray_marching_11_ring.frag ├── ray_marching_2.frag ├── ray_marching_3.frag ├── ray_marching_4.frag ├── ray_marching_5.frag ├── ray_marching_6.frag ├── ray_marching_7.frag ├── ray_marching_8_rotate_box.frag ├── ray_marching_8_rotate_box_2.frag ├── ray_marching_8_rotate_box_3.frag └── ray_marching_9_geometric_box.frag ├── ripple ├── ripple_1.frag └── ripple_2.frag ├── rotation ├── multiple_rotation_1.frag └── rotation_1.frag ├── scene_switch └── scene_switch_1.frag ├── shape └── dynamic_shape_1.frag ├── skew └── skew_1.frag ├── spher ├── rotate_spher.frag ├── rotate_spher_2.frag ├── spher.frag └── sphere_2.frag ├── spiral ├── spiral_1.frag └── spiral_pattern_easing_1.frag ├── texture └── texture_mapping_1.frag ├── tile └── tile_random_1.frag ├── triangle ├── triangle_1.frag ├── triangle_2.frag └── triangle_3.frag ├── vertex ├── cube_1 │ └── cube_1.vert ├── cube_2 │ └── cube_2.vert ├── cube_3 │ └── cube_3.vert ├── cube_4 │ └── cube_4.vert ├── vertex_1 │ ├── vertex_1.frag │ ├── vertex_1.klproj │ └── vertex_1.vert ├── vertex_2 │ └── vertex_2.vert ├── vertex_3 │ ├── gradation.frag │ └── vertex_3.vert └── vertex_circle_1 │ └── vertex_circle_1.vert ├── voronoi └── voronoi_1.frag └── word └── word_io18_1.frag /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_store 2 | 3 | .idea -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ShaderArtworks 2 | Artworks with Shader. 3 | 4 | ## How I create artwork 5 | Use [GLSL Sandbox](http://glslsandbox.com/) to create artwork. 6 | After create artwork, save it as `.frag` file with [ShaderEditor](http://editor.thebookofshaders.com/). 7 | 8 | ## Generate GIF image 9 | I'm using [glsl2img](https://github.com/fand/glsl2img). 10 | ``` 11 | $ glsl2gif PATH_TO_SHADER_FILE -r 30 -l 3.0 -s 700x700 12 | ``` 13 | -------------------------------------------------------------------------------- /art/box_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/box_1.gif -------------------------------------------------------------------------------- /art/box_2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/box_2.gif -------------------------------------------------------------------------------- /art/brightness_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/brightness_1.gif -------------------------------------------------------------------------------- /art/circle_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/circle_1.gif -------------------------------------------------------------------------------- /art/circle_moon_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/circle_moon_1.gif -------------------------------------------------------------------------------- /art/circle_pattern_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/circle_pattern_1.gif -------------------------------------------------------------------------------- /art/circle_pattern_2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/circle_pattern_2.gif -------------------------------------------------------------------------------- /art/cnoise_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/cnoise_1.gif -------------------------------------------------------------------------------- /art/cnoise_2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/cnoise_2.gif -------------------------------------------------------------------------------- /art/cube_3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/cube_3.gif -------------------------------------------------------------------------------- /art/cube_4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/cube_4.gif -------------------------------------------------------------------------------- /art/distortion_ball_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/distortion_ball_1.gif -------------------------------------------------------------------------------- /art/distortion_ball_2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/distortion_ball_2.gif -------------------------------------------------------------------------------- /art/divide_colors_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/divide_colors_1.gif -------------------------------------------------------------------------------- /art/dynamic_shape_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/dynamic_shape_1.gif -------------------------------------------------------------------------------- /art/easing_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/easing_1.gif -------------------------------------------------------------------------------- /art/easing_2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/easing_2.gif -------------------------------------------------------------------------------- /art/easing_3_rotation.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/easing_3_rotation.gif -------------------------------------------------------------------------------- /art/easing_chasing_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/easing_chasing_1.gif -------------------------------------------------------------------------------- /art/easing_multiple_balls_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/easing_multiple_balls_1.gif -------------------------------------------------------------------------------- /art/easing_multiple_polygons_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/easing_multiple_polygons_1.gif -------------------------------------------------------------------------------- /art/easing_multiple_triangles_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/easing_multiple_triangles_1.gif -------------------------------------------------------------------------------- /art/function_fract_and_mod_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/function_fract_and_mod_1.gif -------------------------------------------------------------------------------- /art/hexagon_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/hexagon_1.gif -------------------------------------------------------------------------------- /art/image_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/image_1.gif -------------------------------------------------------------------------------- /art/light_stream_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/light_stream_1.gif -------------------------------------------------------------------------------- /art/light_stream_with_rotation_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/light_stream_with_rotation_1.gif -------------------------------------------------------------------------------- /art/metaball_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/metaball_1.gif -------------------------------------------------------------------------------- /art/metaball_2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/metaball_2.gif -------------------------------------------------------------------------------- /art/metaball_mosaic_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/metaball_mosaic_1.gif -------------------------------------------------------------------------------- /art/metaball_oblique_line_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/metaball_oblique_line_1.gif -------------------------------------------------------------------------------- /art/morphing_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/morphing_1.gif -------------------------------------------------------------------------------- /art/mosaic_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/mosaic_1.gif -------------------------------------------------------------------------------- /art/mosaic_circle_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/mosaic_circle_1.gif -------------------------------------------------------------------------------- /art/mosaic_circle_1_2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/mosaic_circle_1_2.gif -------------------------------------------------------------------------------- /art/mosaic_circle_2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/mosaic_circle_2.gif -------------------------------------------------------------------------------- /art/mosaic_circle_3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/mosaic_circle_3.gif -------------------------------------------------------------------------------- /art/mosaic_ring_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/mosaic_ring_1.gif -------------------------------------------------------------------------------- /art/multiple_rotation_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/multiple_rotation_1.gif -------------------------------------------------------------------------------- /art/noise_and_rotation_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/noise_and_rotation_1.gif -------------------------------------------------------------------------------- /art/oblique_line_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/oblique_line_1.gif -------------------------------------------------------------------------------- /art/parallax_colorful_particle_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/parallax_colorful_particle_1.gif -------------------------------------------------------------------------------- /art/parallax_mosaic_circle_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/parallax_mosaic_circle_1.gif -------------------------------------------------------------------------------- /art/parallax_particles_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/parallax_particles_1.gif -------------------------------------------------------------------------------- /art/parallax_rectangle_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/parallax_rectangle_1.gif -------------------------------------------------------------------------------- /art/particle_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/particle_1.gif -------------------------------------------------------------------------------- /art/pattern_and_rotattion_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/pattern_and_rotattion_1.gif -------------------------------------------------------------------------------- /art/pattern_and_rotattion_2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/pattern_and_rotattion_2.gif -------------------------------------------------------------------------------- /art/pattern_grid_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/pattern_grid_1.gif -------------------------------------------------------------------------------- /art/pattern_invader_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/pattern_invader_1.gif -------------------------------------------------------------------------------- /art/pattern_lattice_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/pattern_lattice_1.gif -------------------------------------------------------------------------------- /art/pattern_random_meter_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/pattern_random_meter_1.gif -------------------------------------------------------------------------------- /art/pattern_random_meter_2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/pattern_random_meter_2.gif -------------------------------------------------------------------------------- /art/pattern_shine_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/pattern_shine_1.gif -------------------------------------------------------------------------------- /art/pattern_tile_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/pattern_tile_1.gif -------------------------------------------------------------------------------- /art/pattern_tile_2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/pattern_tile_2.gif -------------------------------------------------------------------------------- /art/pattern_zigzag_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/pattern_zigzag_1.gif -------------------------------------------------------------------------------- /art/plural_ring_pattern_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/plural_ring_pattern_1.gif -------------------------------------------------------------------------------- /art/plural_ring_pattern_2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/plural_ring_pattern_2.gif -------------------------------------------------------------------------------- /art/random_transformation_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/random_transformation_1.gif -------------------------------------------------------------------------------- /art/ray_marching_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/ray_marching_1.gif -------------------------------------------------------------------------------- /art/ray_marching_10.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/ray_marching_10.gif -------------------------------------------------------------------------------- /art/ray_marching_11_ring.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/ray_marching_11_ring.gif -------------------------------------------------------------------------------- /art/ray_marching_2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/ray_marching_2.gif -------------------------------------------------------------------------------- /art/ray_marching_3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/ray_marching_3.gif -------------------------------------------------------------------------------- /art/ray_marching_4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/ray_marching_4.gif -------------------------------------------------------------------------------- /art/ray_marching_5.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/ray_marching_5.gif -------------------------------------------------------------------------------- /art/ray_marching_6.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/ray_marching_6.gif -------------------------------------------------------------------------------- /art/ray_marching_7.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/ray_marching_7.gif -------------------------------------------------------------------------------- /art/ray_marching_8_rotate_box.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/ray_marching_8_rotate_box.gif -------------------------------------------------------------------------------- /art/ray_marching_8_rotate_box_2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/ray_marching_8_rotate_box_2.gif -------------------------------------------------------------------------------- /art/ray_marching_8_rotate_box_3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/ray_marching_8_rotate_box_3.gif -------------------------------------------------------------------------------- /art/ray_marching_9_geometric_box.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/ray_marching_9_geometric_box.gif -------------------------------------------------------------------------------- /art/ripple_2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/ripple_2.gif -------------------------------------------------------------------------------- /art/rotation_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/rotation_1.gif -------------------------------------------------------------------------------- /art/scene_switch_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/scene_switch_1.gif -------------------------------------------------------------------------------- /art/skew_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/skew_1.gif -------------------------------------------------------------------------------- /art/sphere_2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/sphere_2.gif -------------------------------------------------------------------------------- /art/spiral_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/spiral_1.gif -------------------------------------------------------------------------------- /art/spiral_pattern_easing_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/spiral_pattern_easing_1.gif -------------------------------------------------------------------------------- /art/texture_mapping_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/texture_mapping_1.gif -------------------------------------------------------------------------------- /art/tile_random_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/tile_random_1.gif -------------------------------------------------------------------------------- /art/triangle_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/triangle_1.gif -------------------------------------------------------------------------------- /art/triangle_2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/triangle_2.gif -------------------------------------------------------------------------------- /art/vertex_2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/vertex_2.gif -------------------------------------------------------------------------------- /art/vertex_3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/vertex_3.gif -------------------------------------------------------------------------------- /art/vertex_circle_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/vertex_circle_1.gif -------------------------------------------------------------------------------- /art/vertex_cube_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/vertex_cube_1.gif -------------------------------------------------------------------------------- /art/vertex_cube_2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/vertex_cube_2.gif -------------------------------------------------------------------------------- /art/voronoi_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/voronoi_1.gif -------------------------------------------------------------------------------- /art/word_io18_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/art/word_io18_1.gif -------------------------------------------------------------------------------- /box/box_1.frag: -------------------------------------------------------------------------------- 1 | /*{ 2 | "glslify": true, 3 | "server": 3000 4 | }*/ 5 | 6 | precision mediump float; 7 | uniform vec2 resolution; 8 | uniform float time; 9 | 10 | #pragma glslify: box = require(../glslify/glslify-box.frag) 11 | #pragma glslify: map = require(../glslify/glslify-map.frag) 12 | 13 | void main( void ) { 14 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); 15 | 16 | vec3 color = vec3(0.0, 0.0, 1.0); 17 | 18 | for (float i = 0.2; i <= 1.0; i += 0.1) { 19 | float size = 1.0 - fract(time * (i * 2.0)); 20 | float angle = map(i, 0.2, 1.0, 0.0, 360.0); 21 | vec2 position = vec2(uv.x + cos(angle), uv.y + sin(angle)); 22 | float b = box(position, size * 0.8); 23 | 24 | if (mod(i * 10.0, 2.0) == 0.0) { 25 | color.r += b; 26 | } else { 27 | color.g += b; 28 | } 29 | } 30 | 31 | gl_FragColor = vec4(color, 1.0); 32 | } 33 | -------------------------------------------------------------------------------- /box/box_2.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#44540.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 14 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 15 | } 16 | 17 | float mappedSin(float t) { 18 | return map(sin(t), -1.0, 1.0, 0.7, 1.1); 19 | } 20 | 21 | float box(vec2 uv, float size) { 22 | vec2 rect = step(-size, uv) * (1.0 - step(size, uv)); 23 | return min(rect.x, rect.y); 24 | } 25 | 26 | void main( void ) { 27 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); 28 | 29 | float boxSize = 0.5; 30 | 31 | vec3 color = vec3(0.0); 32 | 33 | // Center box 34 | color += box(uv, boxSize * mappedSin(time * 2.8)); 35 | 36 | // Left top box 37 | color += vec3(0.2, 0.8, fract(time * 1.1)) * box(vec2(uv.x + 0.2, uv.y - 0.2), boxSize * mappedSin(time * 6.5)); 38 | color += vec3(0.9, fract(time * 0.8), 0.3) * box(vec2(uv.x + 0.4, uv.y - 0.4), boxSize * mappedSin(time * 4.0)); 39 | color += vec3(fract(time * 0.8), 0.2, 0.3) * box(vec2(uv.x + 0.6, uv.y - 0.6), boxSize * mappedSin(time * 2.4)); 40 | 41 | // RIght top box 42 | color += vec3(fract(time), 0.2, 0.1) * box(uv - 0.2, boxSize * mappedSin(time * 6.0)); 43 | color += vec3(0.7, 0.2, fract(time * 0.9)) * box(uv - 0.4, boxSize * mappedSin(time * 2.0)); 44 | color += vec3(0.1, fract(time * 0.3), 0.4) * box(uv - 0.6, boxSize * mappedSin(time * 7.5)); 45 | 46 | // Right bottom box 47 | color += vec3(0.7, fract(time * 0.7), 0.6) * box(vec2(uv.x - 0.2, uv.y + 0.2), boxSize * mappedSin(time * 7.0)); 48 | color += vec3(fract(time * 0.9), 0.6, 0.1) * box(vec2(uv.x - 0.4, uv.y + 0.4), boxSize * mappedSin(time * 4.5)); 49 | color += vec3(fract(time * 0.3), 0.2, 0.7) * box(vec2(uv.x - 0.6, uv.y + 0.6), boxSize * mappedSin(time * 3.2)); 50 | 51 | // Left bottom box 52 | color += vec3(0.2, 0.5, fract(time * 1.2)) * box(uv + 0.2, boxSize * mappedSin(time * 7.5)); 53 | color += vec3(0.1, fract(time * 0.7), 0.2) * box(uv + 0.4, boxSize * mappedSin(time * 2.5)); 54 | color += vec3(0.5, 0.7, fract(time * 0.3)) * box(uv + 0.6, boxSize * mappedSin(time * 8.5)); 55 | 56 | gl_FragColor = vec4(color, 1.0); 57 | } 58 | -------------------------------------------------------------------------------- /brightness/brightness_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#42182.3 2 | // Forked http://glslsandbox.com/e#42172.0 3 | 4 | #ifdef GL_ES 5 | precision mediump float; 6 | #endif 7 | 8 | uniform float time; 9 | uniform vec2 resolution; 10 | 11 | const float PI = 3.14159; 12 | const float N = 90.0; 13 | 14 | float random(float n) { 15 | return fract(abs(sin(n * 55.753) * 367.34)); 16 | } 17 | 18 | void main(){ 19 | vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 20 | 21 | st *= 8.0; 22 | 23 | float brightness = 0.0; 24 | vec3 baseColor = vec3(0.0, 0.1, 0.3); 25 | float speed = time * 1.0; 26 | 27 | for (float i = 0.0; i < N; i++) { 28 | brightness += 0.002 / abs(sin(PI * st.x) * sin(PI * st.y) * sin(PI * speed + random(floor(st.x )) + random(floor(st.y)))); 29 | } 30 | 31 | gl_FragColor = vec4(baseColor * brightness, 1.0); 32 | } -------------------------------------------------------------------------------- /circle/circle_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#39983.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | // Algorithm from processing. 14 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 15 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 16 | } 17 | 18 | vec3 circle(vec2 st, vec3 color, float radius) { 19 | float val = map(sin(time * 10.0), -1.0, 1.0, radius, radius + 0.1); 20 | float pict = smoothstep(val, val + 0.08, 1.0 - distance(st, vec2(0.5))); 21 | return vec3(pict, pict, pict) * color; 22 | } 23 | 24 | void main( void ) { 25 | vec2 st = gl_FragCoord.xy / resolution; 26 | float ratio = resolution.x / resolution.y; 27 | st.x *= ratio; // Make circle precise. 28 | 29 | vec3 color = circle(st, vec3(0.1, 0.9, 0.3), 0.5); // green 30 | color += circle(st - vec2(mouse), vec3(0.1, 0.2, 0.9), 0.6); // blue 31 | 32 | gl_FragColor = vec4(color, 1.0); 33 | } -------------------------------------------------------------------------------- /circle/circle_moon_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#42205.4 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | float random(float n) { 14 | return fract(abs(sin(n * 55.753) * 367.34)); 15 | } 16 | 17 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 18 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 19 | } 20 | 21 | mat2 rotate2d(float _angle){ 22 | return mat2(cos(_angle), -sin(_angle), sin(_angle), cos(_angle)); 23 | } 24 | 25 | void main( void ) { 26 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); 27 | float divide = 2.0; 28 | 29 | uv *= 8.0; 30 | float x = floor(max(abs(uv.x), abs(uv.y))) * 0.5 + 1.0; 31 | uv = mod(uv, divide); 32 | 33 | uv -= 0.5; 34 | uv *= rotate2d(time * x); 35 | uv += 0.5; 36 | 37 | float radius = map(sin(time * x), -1.0, 1.0, 0.4, 0.5); 38 | uv -= radius; 39 | float circle = smoothstep(radius - 0.1, radius, length(uv)); 40 | 41 | float radius2 = map(sin(time * x), -1.0, 1.0, 0.3, 0.6); 42 | uv += radius / 2.0 - radius2 / 2.0 + 0.08; 43 | float circle2 = smoothstep(1.0 - radius2 - 0.1, 1.0 - radius2, 1.0 - length(uv)); 44 | 45 | vec3 color = vec3(vec2(1.0 - max(circle, circle2)), 0.1); 46 | 47 | gl_FragColor = vec4(color, 1.0); 48 | } -------------------------------------------------------------------------------- /circle/circle_pattern_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#41770.2 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 14 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 15 | } 16 | 17 | void main( void ) { 18 | vec2 st = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); 19 | 20 | st *= 6.0; 21 | 22 | vec2 newSt = fract(st); 23 | newSt -= 0.5; 24 | 25 | float radius = map(cos(time * floor(st.x)) + sin(time * floor(st.y)), -1.0, 1.0, 0.2, 0.4); 26 | float bold = map(cos(time * 4.0), -1.0, 1.0, 0.02, 0.1); 27 | 28 | vec4 rect = vec4(0.1, 0.1, 0.9, 0.9); 29 | vec2 hv = step(rect.xy, newSt + 0.5) * step(newSt + 0.5, rect.zw); 30 | 31 | vec3 color = vec3(bold / abs(radius - length(newSt)), 0.0, 0.9); 32 | color.b *= cos(time * 10.0 * (fract(newSt.x - 0.5) + fract(newSt.y - 0.5))) * hv.x * hv.y; 33 | 34 | gl_FragColor = vec4(color, 1.0); 35 | } -------------------------------------------------------------------------------- /circle/circle_pattern_2.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#41823.2 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 14 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 15 | } 16 | 17 | void main( void ) { 18 | vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 19 | 20 | st += time * 0.3; 21 | st *= 8.0; 22 | 23 | vec2 newSt = fract(st); 24 | vec3 color = vec3(0.0); 25 | 26 | newSt -= 0.5; 27 | float vx = map(sin(time * 4.0), -1.0, 1.0, 0.1, 0.2); 28 | float vy = map(cos(time * 3.0), -1.0, 1.0, 0.3, 0.8); 29 | // Setting different value to vec2() make double circle. 30 | color.rb = step(abs(length(newSt)), vec2(vx, vy)); 31 | color.g = 0.0; 32 | newSt += 0.5; 33 | 34 | gl_FragColor = vec4(color, 1.0); 35 | } -------------------------------------------------------------------------------- /color/divide_colors_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#41342.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | #define PI 3.14159265359 10 | 11 | uniform float time; 12 | uniform vec2 mouse; 13 | uniform vec2 resolution; 14 | 15 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 16 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 17 | } 18 | 19 | vec2 patternize(vec2 st) { 20 | return fract(vec2(st)); 21 | } 22 | 23 | float box(vec2 _st, vec2 _size){ 24 | _size = vec2(0.5) - _size * 0.5; // Adjust size. 25 | vec2 uv = step(_size, _st); 26 | uv *= step(_size, vec2(1.0) - _st); 27 | return uv.x * uv.y; 28 | } 29 | 30 | mat2 rotate2d(float _angle){ 31 | return mat2(cos(_angle), -sin(_angle), sin(_angle), cos(_angle)); 32 | } 33 | 34 | // From Robert Penner's Easing Functions. 35 | // http://gizma.com/easing/ 36 | float easeOutQuad(float t) { 37 | return -t * (t - 2.0); 38 | } 39 | 40 | float exposeInOut(float t) { 41 | if (t == 0.0) { 42 | return 0.0; 43 | 44 | } else if (t == 1.0) { 45 | return 1.0; 46 | 47 | } else if ((t /= 0.5) < 1.0) { 48 | return 0.5 * pow(2.0, 10.0 * (t - 1.0)); 49 | 50 | } else { 51 | return 0.5 * (-pow(2.0, -10.0 * --t) + 2.0); 52 | } 53 | } 54 | 55 | void main( void ) { 56 | vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 57 | 58 | // Zoom in out. 59 | float count = map(sin(time * 1.0), -1.0, 1.0, 4.0, 100.0); 60 | 61 | // Divide by 2 since the origin of display is center(the range of y is -1.0 ~ 1.0) 62 | st *= float(count / 2.0); 63 | 64 | // Apply easing. 65 | float easing = exposeInOut(fract(time * 1.1)); 66 | float speed = time + easing; 67 | 68 | // Animate 69 | st.x += mod(st.y, 2.0) < 1.0 ? -speed : speed; 70 | 71 | // Patternize 72 | vec2 p = patternize(st); 73 | 74 | // Rotate 75 | p -= 0.5; // Move each items to center. 76 | p *= rotate2d(time); // Rotate. 77 | p += 0.5; // Set rotation axis to center. 78 | 79 | float minScale1 = 0.5; 80 | float minScale2 = 0.1; 81 | float maxScale = 1.0; 82 | 83 | // Scale with animation. 84 | float scale = easing < 0.5 ? map(easing, 0.0, 1.0, maxScale, minScale1) : map(easing, 0.0, 1.0, minScale1, maxScale); 85 | float scale2 = easing < 0.7 ? map(easing, 0.0, 1.0, maxScale, minScale2) : map(easing, 0.0, 1.0, minScale2, maxScale); 86 | 87 | // Box 88 | float b2 = box(p, vec2(0.6 * scale)); 89 | float b1 = box(p, vec2(0.4 * scale2)); 90 | 91 | float result = b1 + b2; 92 | float offset = 1.0 + sin(time * 5.0 + fract(st.x) * fract(st.y)) / 2.0; 93 | 94 | vec3 color = vec3(0.0); 95 | 96 | float val = mod(st.y, 3.0); 97 | 98 | // Divide colors to 3. 99 | if (val < 1.0) { 100 | color = vec3( 101 | result * offset * 0.1, 102 | result * offset * 0.3, 103 | result * 0.8 104 | ); 105 | } else if (val < 2.0) { 106 | color = vec3( 107 | result * offset * 0.5, 108 | result * offset * 0.0, 109 | result * 0.3 110 | ); 111 | } else { 112 | color = vec3( 113 | result * offset * 1.0, 114 | result * offset * 0.8, 115 | result * 1.0 116 | ); 117 | } 118 | 119 | gl_FragColor = vec4(color, 1.0); 120 | } -------------------------------------------------------------------------------- /distortion/distortion_ball_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#46379.2 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | float random(in vec2 uv){ 14 | return fract(sin(dot(uv, vec2(12.9898,78.233))) * 43758.5453); 15 | } 16 | 17 | float circle(vec2 uv, float radius) { 18 | return step(radius, length(uv)); 19 | } 20 | 21 | void main( void ) { 22 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); 23 | 24 | uv.x += time * 0.2; 25 | 26 | vec2 scaledUv = uv * 3.0; 27 | vec2 repeatedUv = fract(scaledUv); 28 | repeatedUv -= 0.5; 29 | 30 | float randomOffset = random(floor(scaledUv)) + 0.5; 31 | float distortion = (repeatedUv.x + sin(repeatedUv.y * 13.0 + (time * 12.0 * randomOffset))) * 0.04; 32 | 33 | repeatedUv.x += distortion; 34 | 35 | vec2 circleUv1 = repeatedUv - vec2(0.0, distortion); 36 | vec2 circleUv2 = repeatedUv + vec2(0.0, distortion); 37 | vec2 circleUv3 = repeatedUv + vec2(distortion, 0.0); 38 | 39 | vec3 color = vec3( 40 | circle(circleUv1, 0.44), 41 | 1.0 - circle(circleUv2, 0.28), 42 | circle(circleUv3, 0.39) 43 | ); 44 | 45 | gl_FragColor = vec4(color, 1.0); 46 | } -------------------------------------------------------------------------------- /distortion/distortion_ball_2.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#46631.2 2 | 3 | precision mediump float; 4 | uniform vec2 resolution; 5 | uniform float time; 6 | uniform sampler2D texture; 7 | 8 | float quadraticInOut(float t) { 9 | float p = 2.0 * t * t; 10 | return t < 0.5 ? p : -p + (4.0 * t) - 1.0; 11 | } 12 | 13 | float random(in vec2 uv){ 14 | return fract(sin(dot(uv, vec2(12.9898,78.233))) * 43758.5453); 15 | } 16 | 17 | float circle(vec2 uv, float radius) { 18 | return step(radius, length(uv)); 19 | } 20 | 21 | void main( void ) { 22 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); 23 | 24 | uv.x += time * 0.2; 25 | 26 | vec2 scaledUv = uv * 3.0; 27 | vec2 repeatedUv = fract(scaledUv); 28 | repeatedUv -= 0.5; 29 | 30 | uv.x += (floor(time) + quadraticInOut(fract(time))) * 0.2; 31 | float line = step(0.2, fract(uv * 15.0).x); 32 | 33 | float randomOffset = random(floor(scaledUv)) + 0.5; 34 | float offsetContur = randomOffset *sin (floor(time) + quadraticInOut(fract(time))); 35 | float distortion = (repeatedUv.x + sin(repeatedUv.y * offsetContur * 20.0 + (time * 15.0 * randomOffset))) * 0.03; 36 | 37 | repeatedUv.x += distortion; 38 | 39 | vec2 circleUv1 = repeatedUv - vec2(0.0, distortion); 40 | vec2 circleUv2 = repeatedUv + vec2(0.0, distortion * 2.0); 41 | vec2 circleUv3 = repeatedUv + vec2(distortion, 0.0); 42 | 43 | vec3 color = vec3( 44 | circle(circleUv1, 0.44), 45 | 1.0 - circle(circleUv2, 0.24), 46 | circle(circleUv3, 0.44 + offsetContur * 0.1) 47 | ); 48 | 49 | if (length(color) > 1.0) { 50 | color *= vec3( line); 51 | } 52 | 53 | gl_FragColor = vec4(color, 1.0); 54 | } 55 | -------------------------------------------------------------------------------- /easing/easing_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#40757.2 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 14 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 15 | } 16 | 17 | vec2 patternize(vec2 st) { 18 | return fract(st); 19 | } 20 | 21 | float box(vec2 _st, vec2 _size){ 22 | _size = vec2(0.5) - _size * 0.5; // Adjust size. 23 | vec2 uv = step(_size, _st); 24 | uv *= step(_size, vec2(1.0) - _st); 25 | return uv.x * uv.y; 26 | } 27 | 28 | // From Robert Penner's Easing Functions. 29 | // http://gizma.com/easing/ 30 | float easeOutQuad(float t) { 31 | return -t * (t - 2.0); 32 | } 33 | 34 | float exposeInOut(float t) { 35 | if (t == 0.0) { 36 | return 0.0; 37 | 38 | } else if (t == 1.0) { 39 | return 1.0; 40 | 41 | } else if ((t /= 0.5) < 1.0) { 42 | return 0.5 * pow(2.0, 10.0 * (t - 1.0)); 43 | 44 | } else { 45 | return 0.5 * (-pow(2.0, -10.0 * --t) + 2.0); 46 | } 47 | } 48 | 49 | void main( void ) { 50 | vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 51 | 52 | int count = 6; 53 | 54 | // Apply easing. 55 | float speed = time + exposeInOut(fract(time * 1.2)); 56 | 57 | // Divide by 2 since the origin of display is center(the range of y is -1.0 ~ 1.0) 58 | st *= float(count / 2); 59 | 60 | // Animate 61 | st.x += mod(st.y, 2.0) < 1.0 ? -speed : speed; 62 | 63 | vec3 color = vec3(0.0); 64 | color.r = 0.8; 65 | color.g = box(patternize(st), vec2(0.6)); 66 | color.b = box(patternize(st), vec2(0.9)); 67 | 68 | gl_FragColor = vec4(color, 1.0); 69 | } -------------------------------------------------------------------------------- /easing/easing_2.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#40771.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 14 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 15 | } 16 | 17 | vec2 patternize(vec2 st) { 18 | return fract(vec2(st)); 19 | } 20 | 21 | float box(vec2 _st, vec2 _size){ 22 | _size = vec2(0.5) - _size * 0.5; // Adjust size. 23 | vec2 uv = step(_size, _st); 24 | uv *= step(_size, vec2(1.0) - _st); 25 | return uv.x * uv.y; 26 | } 27 | 28 | // From Robert Penner's Easing Functions. 29 | // http://gizma.com/easing/ 30 | float easeOutQuad(float t) { 31 | return -t * (t - 2.0); 32 | } 33 | 34 | float exposeInOut(float t) { 35 | if (t == 0.0) { 36 | return 0.0; 37 | 38 | } else if (t == 1.0) { 39 | return 1.0; 40 | 41 | } else if ((t /= 0.5) < 1.0) { 42 | return 0.5 * pow(2.0, 10.0 * (t - 1.0)); 43 | 44 | } else { 45 | return 0.5 * (-pow(2.0, -10.0 * --t) + 2.0); 46 | } 47 | } 48 | 49 | void main( void ) { 50 | vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 51 | 52 | int count = 6; 53 | 54 | // Apply easing. 55 | float easing = exposeInOut(fract(time * 1.1)); 56 | float speed = time + easing; 57 | 58 | // Divide by 2 since the origin of display is center(the range of y is -1.0 ~ 1.0) 59 | st *= float(count / 2); 60 | 61 | // Animate 62 | st.x += mod(st.y, 2.0) < 1.0 ? -speed : speed; 63 | 64 | vec3 color = vec3(0.0); 65 | float minScale = 0.3; 66 | float maxScale = 1.0; 67 | 68 | // Scale with animation. 69 | float scale = easing < 0.6 ? map(easing, 0.0, 1.0, maxScale, minScale) : map(easing, 0.0, 1.0, minScale, maxScale); 70 | 71 | color.g = 0.8; 72 | color.r = box(patternize(st), vec2(0.6 * scale)); 73 | color.b = box(patternize(st), vec2(0.9 * scale)); 74 | 75 | gl_FragColor = vec4(color, 1.0); 76 | } -------------------------------------------------------------------------------- /easing/easing_3_rotation.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#40871.2 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | #define PI 3.14159265359 10 | 11 | uniform float time; 12 | uniform vec2 mouse; 13 | uniform vec2 resolution; 14 | 15 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 16 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 17 | } 18 | 19 | vec2 patternize(vec2 st) { 20 | return fract(vec2(st)); 21 | } 22 | 23 | float box(vec2 _st, vec2 _size){ 24 | _size = vec2(0.5) - _size * 0.5; // Adjust size. 25 | vec2 uv = step(_size, _st); 26 | uv *= step(_size, vec2(1.0) - _st); 27 | return uv.x * uv.y; 28 | } 29 | 30 | mat2 rotate2d(float _angle){ 31 | return mat2(cos(_angle), -sin(_angle), sin(_angle), cos(_angle)); 32 | } 33 | 34 | // From Robert Penner's Easing Functions. 35 | // http://gizma.com/easing/ 36 | float easeOutQuad(float t) { 37 | return -t * (t - 2.0); 38 | } 39 | 40 | float exposeInOut(float t) { 41 | if (t == 0.0) { 42 | return 0.0; 43 | 44 | } else if (t == 1.0) { 45 | return 1.0; 46 | 47 | } else if ((t /= 0.5) < 1.0) { 48 | return 0.5 * pow(2.0, 10.0 * (t - 1.0)); 49 | 50 | } else { 51 | return 0.5 * (-pow(2.0, -10.0 * --t) + 2.0); 52 | } 53 | } 54 | 55 | void main( void ) { 56 | vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 57 | 58 | int count = 6; 59 | 60 | // Divide by 2 since the origin of display is center(the range of y is -1.0 ~ 1.0) 61 | st *= float(count / 2); 62 | 63 | // Apply easing. 64 | float easing = exposeInOut(fract(time * 1.1)); 65 | float speed = time + easing; 66 | 67 | // Animate 68 | st.x += mod(st.y, 2.0) < 1.0 ? -speed : speed; 69 | 70 | // Patternize 71 | vec2 p = patternize(st); 72 | 73 | // Rotate 74 | p -= 0.5; // Move each items to center. 75 | p *= rotate2d(time); // Rotate. 76 | p += 0.5; // Set rotation axis to center. 77 | 78 | float minScale1 = 0.5; 79 | float minScale2 = 0.1; 80 | float maxScale = 1.0; 81 | 82 | // Scale with animation. 83 | float scale = easing < 0.5 ? map(easing, 0.0, 1.0, maxScale, minScale1) : map(easing, 0.0, 1.0, minScale1, maxScale); 84 | float scale2 = easing < 0.7 ? map(easing, 0.0, 1.0, maxScale, minScale2) : map(easing, 0.0, 1.0, minScale2, maxScale); 85 | 86 | // Box 87 | float b2 = box(p, vec2(0.6 * scale)); 88 | float b1 = box(p, vec2(0.4 * scale2)); 89 | 90 | float result = b1 + b2; 91 | float offset = 1.0 + sin(time * 5.0 + fract(st.x) * fract(st.y)) / 2.0; 92 | 93 | vec3 color = vec3( 94 | result * offset * sin(time * 10.0 * fract(p.x)), // This sin(time * fract(p.x)) make box noisy. 95 | result * offset * 0.2, 96 | result * offset * 0.9 97 | ); 98 | 99 | gl_FragColor = vec4(color, 1.0); 100 | } -------------------------------------------------------------------------------- /easing/easing_chasing_1.frag: -------------------------------------------------------------------------------- 1 | // Refer to https://thebookofshaders.com/edit.php?log=160909064829 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | uniform float time; 8 | uniform vec2 resolution; 9 | 10 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 11 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 12 | } 13 | 14 | float linearstep(float begin, float end, float t) { 15 | return clamp((t - begin) / (end - begin), 0.0, 1.0); 16 | } 17 | 18 | float random(in vec2 uv){ 19 | return fract(sin(dot(uv, vec2(12.9898,78.233))) * 43758.5453); 20 | } 21 | 22 | float easeInOutExpo(float t) { 23 | if (t == 0.0 || t == 1.0) { 24 | return t; 25 | } 26 | if ((t *= 2.0) < 1.0) { 27 | return 0.5 * pow(2.0, 10.0 * (t - 1.0)); 28 | } else { 29 | return 0.5 * (-pow(2.0, -10.0 * (t - 1.0)) + 2.0); 30 | } 31 | } 32 | 33 | float obliqueLine(vec2 uv){ 34 | return step(0.6, fract((uv.x + uv.y + time * 0.8) * 4.0)); 35 | } 36 | 37 | float ball(vec2 uv, float radius) { 38 | return length(uv) - radius; 39 | } 40 | 41 | float box(vec2 uv, float size) { 42 | vec2 rect = step(-size, uv) * (1.0 - step(size, uv)); 43 | return min(rect.x, rect.y); 44 | } 45 | 46 | float plotItem(vec2 uv, float radius) { 47 | float item = ball(uv, radius) * obliqueLine(uv * 4.0); 48 | return 1.0 - step(0.0, item); 49 | } 50 | 51 | float chaser(vec2 uv, float t) { 52 | float t0 = linearstep(0.0, 0.25, t); 53 | float x0 = easeInOutExpo(t0); 54 | float t1 = linearstep(0.5, 0.75, t); 55 | float x1 = easeInOutExpo(t1); 56 | 57 | float t2 = linearstep(0.25, 0.5, t); 58 | float y0 = easeInOutExpo(t2); 59 | float t3 = linearstep(0.75, 1.0, t); 60 | float y1 = easeInOutExpo(t3); 61 | 62 | return plotItem(uv - vec2(mix(0.3, 0.7, x0 - x1), mix(0.3, 0.7, y0 - y1)), 0.1); 63 | } 64 | 65 | float chasers(vec2 st, float t) { 66 | t = fract(t); 67 | float v = chaser(st, fract(t)); 68 | v = max(v, chaser(st, fract(t + 0.25))); 69 | v = max(v, chaser(st, fract(t + 0.5))); 70 | v = max(v, chaser(st, fract(t + 0.75))); 71 | return v; 72 | } 73 | 74 | void main( void ) { 75 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 76 | 77 | vec2 scaledUv = uv * 3.0; 78 | vec2 repeatedUv = fract(scaledUv); 79 | 80 | float offset = random(floor(scaledUv)); 81 | 82 | float size = map(easeInOutExpo(abs(sin(time * 2.5))), 0.0, 1.0, 0.15, 0.25); 83 | repeatedUv -= 0.5; 84 | float b = step(size, length(repeatedUv)); 85 | repeatedUv += 0.5; 86 | 87 | float t = fract(time * 0.45); 88 | float v = chasers(repeatedUv, t); 89 | 90 | vec3 ballColor = vec3(0.0, 0.0, 1.0); 91 | vec3 backgroundColor = vec3(0.9, 0.8, 0.8); 92 | 93 | vec3 rectColor = vec3(1.0, 0.0, 0.0) * b; 94 | vec3 color = mix(backgroundColor, ballColor, v); 95 | 96 | color -= rectColor; 97 | 98 | gl_FragColor = vec4(color, 1.0); 99 | } 100 | -------------------------------------------------------------------------------- /easing/easing_collection_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#44668.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | #define PI 3.141592653589793 14 | #define HALF_PI 1.5707963267948966 15 | 16 | float linear(float t) { 17 | return t; 18 | } 19 | 20 | float exponentialIn(float t) { 21 | return t == 0.0 ? t : pow(2.0, 10.0 * (t - 1.0)); 22 | } 23 | 24 | float exponentialOut(float t) { 25 | return t == 1.0 ? t : 1.0 - pow(2.0, -10.0 * t); 26 | } 27 | 28 | float exponentialInOut(float t) { 29 | return t == 0.0 || t == 1.0 30 | ? t 31 | : t < 0.5 32 | ? +0.5 * pow(2.0, (20.0 * t) - 10.0) 33 | : -0.5 * pow(2.0, 10.0 - (t * 20.0)) + 1.0; 34 | } 35 | 36 | float sineIn(float t) { 37 | return sin((t - 1.0) * HALF_PI) + 1.0; 38 | } 39 | 40 | float sineOut(float t) { 41 | return sin(t * HALF_PI); 42 | } 43 | 44 | float sineInOut(float t) { 45 | return -0.5 * (cos(PI * t) - 1.0); 46 | } 47 | 48 | float qinticIn(float t) { 49 | return pow(t, 5.0); 50 | } 51 | 52 | float qinticOut(float t) { 53 | return 1.0 - (pow(t - 1.0, 5.0)); 54 | } 55 | 56 | float qinticInOut(float t) { 57 | return t < 0.5 58 | ? +16.0 * pow(t, 5.0) 59 | : -0.5 * pow(2.0 * t - 2.0, 5.0) + 1.0; 60 | } 61 | 62 | float quarticIn(float t) { 63 | return pow(t, 4.0); 64 | } 65 | 66 | float quarticOut(float t) { 67 | return pow(t - 1.0, 3.0) * (1.0 - t) + 1.0; 68 | } 69 | 70 | float quarticInOut(float t) { 71 | return t < 0.5 72 | ? +8.0 * pow(t, 4.0) 73 | : -8.0 * pow(t - 1.0, 4.0) + 1.0; 74 | } 75 | 76 | float quadraticInOut(float t) { 77 | float p = 2.0 * t * t; 78 | return t < 0.5 ? p : -p + (4.0 * t) - 1.0; 79 | } 80 | 81 | float quadraticIn(float t) { 82 | return t * t; 83 | } 84 | 85 | float quadraticOut(float t) { 86 | return -t * (t - 2.0); 87 | } 88 | 89 | float cubicIn(float t) { 90 | return t * t * t; 91 | } 92 | 93 | float cubicOut(float t) { 94 | float f = t - 1.0; 95 | return f * f * f + 1.0; 96 | } 97 | 98 | float cubicInOut(float t) { 99 | return t < 0.5 100 | ? 4.0 * t * t * t 101 | : 0.5 * pow(2.0 * t - 2.0, 3.0) + 1.0; 102 | } 103 | 104 | float elasticIn(float t) { 105 | return sin(13.0 * t * HALF_PI) * pow(2.0, 10.0 * (t - 1.0)); 106 | } 107 | 108 | float elasticOut(float t) { 109 | return sin(-13.0 * (t + 1.0) * HALF_PI) * pow(2.0, -10.0 * t) + 1.0; 110 | } 111 | 112 | float elasticInOut(float t) { 113 | return t < 0.5 114 | ? 0.5 * sin(+13.0 * HALF_PI * 2.0 * t) * pow(2.0, 10.0 * (2.0 * t - 1.0)) 115 | : 0.5 * sin(-13.0 * HALF_PI * ((2.0 * t - 1.0) + 1.0)) * pow(2.0, -10.0 * (2.0 * t - 1.0)) + 1.0; 116 | } 117 | 118 | float circularIn(float t) { 119 | return 1.0 - sqrt(1.0 - t * t); 120 | } 121 | 122 | float circularOut(float t) { 123 | return sqrt((2.0 - t) * t); 124 | } 125 | 126 | float circularInOut(float t) { 127 | return t < 0.5 128 | ? 0.5 * (1.0 - sqrt(1.0 - 4.0 * t * t)) 129 | : 0.5 * (sqrt((3.0 - 2.0 * t) * (2.0 * t - 1.0)) + 1.0); 130 | } 131 | 132 | float bounceOut(float t) { 133 | const float a = 4.0 / 11.0; 134 | const float b = 8.0 / 11.0; 135 | const float c = 9.0 / 10.0; 136 | 137 | const float ca = 4356.0 / 361.0; 138 | const float cb = 35442.0 / 1805.0; 139 | const float cc = 16061.0 / 1805.0; 140 | 141 | float t2 = t * t; 142 | 143 | return t < a 144 | ? 7.5625 * t2 145 | : t < b 146 | ? 9.075 * t2 - 9.9 * t + 3.4 147 | : t < c 148 | ? ca * t2 - cb * t + cc 149 | : 10.8 * t * t - 20.52 * t + 10.72; 150 | } 151 | 152 | float bounceIn(float t) { 153 | return 1.0 - bounceOut(1.0 - t); 154 | } 155 | 156 | float bounceInOut(float t) { 157 | return t < 0.5 158 | ? 0.5 * (1.0 - bounceOut(1.0 - t * 2.0)) 159 | : 0.5 * bounceOut(t * 2.0 - 1.0) + 0.5; 160 | } 161 | 162 | float backIn(float t) { 163 | return pow(t, 3.0) - t * sin(t * PI); 164 | } 165 | 166 | float backOut(float t) { 167 | float f = 1.0 - t; 168 | return 1.0 - (pow(f, 3.0) - f * sin(f * PI)); 169 | } 170 | 171 | float backInOut(float t) { 172 | float f = t < 0.5 173 | ? 2.0 * t 174 | : 1.0 - (2.0 * t - 1.0); 175 | 176 | float g = pow(f, 3.0) - f * sin(f * PI); 177 | 178 | return t < 0.5 179 | ? 0.5 * g 180 | : 0.5 * (1.0 - g) + 0.5; 181 | } 182 | 183 | void main( void ) { 184 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); 185 | 186 | float t = fract(time * 0.5) * 2.0 - 1.0; 187 | float diameter = backInOut(abs(t)); 188 | float circle = step(diameter, length(uv)); 189 | 190 | vec3 color = vec3(circle); 191 | 192 | gl_FragColor = vec4(color, 1.0 ); 193 | } -------------------------------------------------------------------------------- /easing/easing_multiple_balls_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#44707.3 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | #define PI 3.141592653589793 14 | #define HALF_PI 1.5707963267948966 15 | 16 | float linear(float t) { 17 | return t; 18 | } 19 | 20 | float exponentialIn(float t) { 21 | return t == 0.0 ? t : pow(2.0, 10.0 * (t - 1.0)); 22 | } 23 | 24 | float exponentialOut(float t) { 25 | return t == 1.0 ? t : 1.0 - pow(2.0, -10.0 * t); 26 | } 27 | 28 | float exponentialInOut(float t) { 29 | return t == 0.0 || t == 1.0 30 | ? t 31 | : t < 0.5 32 | ? +0.5 * pow(2.0, (20.0 * t) - 10.0) 33 | : -0.5 * pow(2.0, 10.0 - (t * 20.0)) + 1.0; 34 | } 35 | 36 | float sineIn(float t) { 37 | return sin((t - 1.0) * HALF_PI) + 1.0; 38 | } 39 | 40 | float sineOut(float t) { 41 | return sin(t * HALF_PI); 42 | } 43 | 44 | float sineInOut(float t) { 45 | return -0.5 * (cos(PI * t) - 1.0); 46 | } 47 | 48 | float qinticIn(float t) { 49 | return pow(t, 5.0); 50 | } 51 | 52 | float qinticOut(float t) { 53 | return 1.0 - (pow(t - 1.0, 5.0)); 54 | } 55 | 56 | float qinticInOut(float t) { 57 | return t < 0.5 58 | ? +16.0 * pow(t, 5.0) 59 | : -0.5 * pow(2.0 * t - 2.0, 5.0) + 1.0; 60 | } 61 | 62 | float quarticIn(float t) { 63 | return pow(t, 4.0); 64 | } 65 | 66 | float quarticOut(float t) { 67 | return pow(t - 1.0, 3.0) * (1.0 - t) + 1.0; 68 | } 69 | 70 | float quarticInOut(float t) { 71 | return t < 0.5 72 | ? +8.0 * pow(t, 4.0) 73 | : -8.0 * pow(t - 1.0, 4.0) + 1.0; 74 | } 75 | 76 | float quadraticInOut(float t) { 77 | float p = 2.0 * t * t; 78 | return t < 0.5 ? p : -p + (4.0 * t) - 1.0; 79 | } 80 | 81 | float quadraticIn(float t) { 82 | return t * t; 83 | } 84 | 85 | float quadraticOut(float t) { 86 | return -t * (t - 2.0); 87 | } 88 | 89 | float cubicIn(float t) { 90 | return t * t * t; 91 | } 92 | 93 | float cubicOut(float t) { 94 | float f = t - 1.0; 95 | return f * f * f + 1.0; 96 | } 97 | 98 | float cubicInOut(float t) { 99 | return t < 0.5 100 | ? 4.0 * t * t * t 101 | : 0.5 * pow(2.0 * t - 2.0, 3.0) + 1.0; 102 | } 103 | 104 | float elasticIn(float t) { 105 | return sin(13.0 * t * HALF_PI) * pow(2.0, 10.0 * (t - 1.0)); 106 | } 107 | 108 | float elasticOut(float t) { 109 | return sin(-13.0 * (t + 1.0) * HALF_PI) * pow(2.0, -10.0 * t) + 1.0; 110 | } 111 | 112 | float elasticInOut(float t) { 113 | return t < 0.5 114 | ? 0.5 * sin(+13.0 * HALF_PI * 2.0 * t) * pow(2.0, 10.0 * (2.0 * t - 1.0)) 115 | : 0.5 * sin(-13.0 * HALF_PI * ((2.0 * t - 1.0) + 1.0)) * pow(2.0, -10.0 * (2.0 * t - 1.0)) + 1.0; 116 | } 117 | 118 | float circularIn(float t) { 119 | return 1.0 - sqrt(1.0 - t * t); 120 | } 121 | 122 | float circularOut(float t) { 123 | return sqrt((2.0 - t) * t); 124 | } 125 | 126 | float circularInOut(float t) { 127 | return t < 0.5 128 | ? 0.5 * (1.0 - sqrt(1.0 - 4.0 * t * t)) 129 | : 0.5 * (sqrt((3.0 - 2.0 * t) * (2.0 * t - 1.0)) + 1.0); 130 | } 131 | 132 | float bounceOut(float t) { 133 | const float a = 4.0 / 11.0; 134 | const float b = 8.0 / 11.0; 135 | const float c = 9.0 / 10.0; 136 | 137 | const float ca = 4356.0 / 361.0; 138 | const float cb = 35442.0 / 1805.0; 139 | const float cc = 16061.0 / 1805.0; 140 | 141 | float t2 = t * t; 142 | 143 | return t < a 144 | ? 7.5625 * t2 145 | : t < b 146 | ? 9.075 * t2 - 9.9 * t + 3.4 147 | : t < c 148 | ? ca * t2 - cb * t + cc 149 | : 10.8 * t * t - 20.52 * t + 10.72; 150 | } 151 | 152 | float bounceIn(float t) { 153 | return 1.0 - bounceOut(1.0 - t); 154 | } 155 | 156 | float bounceInOut(float t) { 157 | return t < 0.5 158 | ? 0.5 * (1.0 - bounceOut(1.0 - t * 2.0)) 159 | : 0.5 * bounceOut(t * 2.0 - 1.0) + 0.5; 160 | } 161 | 162 | float backIn(float t) { 163 | return pow(t, 3.0) - t * sin(t * PI); 164 | } 165 | 166 | float backOut(float t) { 167 | float f = 1.0 - t; 168 | return 1.0 - (pow(f, 3.0) - f * sin(f * PI)); 169 | } 170 | 171 | float backInOut(float t) { 172 | float f = t < 0.5 173 | ? 2.0 * t 174 | : 1.0 - (2.0 * t - 1.0); 175 | 176 | float g = pow(f, 3.0) - f * sin(f * PI); 177 | 178 | return t < 0.5 179 | ? 0.5 * g 180 | : 0.5 * (1.0 - g) + 0.5; 181 | } 182 | 183 | mat2 rotate2d(float _angle){ 184 | return mat2(cos(_angle), -sin(_angle), sin(_angle), cos(_angle)); 185 | } 186 | 187 | void main( void ) { 188 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); 189 | 190 | uv *= rotate2d(time * 0.2); 191 | 192 | vec2 scaledUv = uv * 12.0; 193 | vec2 repeatedUv = fract(scaledUv); 194 | repeatedUv -= 0.5; 195 | 196 | vec2 itemCenter = floor(scaledUv) + vec2(0.5, 0.5); 197 | float distanceFromCenter = distance(itemCenter, vec2(0.0)); 198 | 199 | float t = fract(time * 0.8 + distanceFromCenter) * 2.0 - 1.0; 200 | float diameter = backOut(abs(t)) * 0.3; 201 | float circle = step(diameter, length(repeatedUv)); 202 | 203 | vec3 color = vec3(circle); 204 | color.b += fract(distanceFromCenter); 205 | color.r += mod(itemCenter.x * itemCenter.y, distanceFromCenter); 206 | 207 | gl_FragColor = vec4(color, 1.0); 208 | } -------------------------------------------------------------------------------- /easing/easing_multiple_polygons_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#44715.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | #define PI 3.141592653589793 14 | 15 | float backOut(float t) { 16 | float f = 1.0 - t; 17 | return 1.0 - (pow(f, 3.0) - f * sin(f * PI)); 18 | } 19 | 20 | mat2 rotate2d(float _angle){ 21 | return mat2(cos(_angle), -sin(_angle), sin(_angle), cos(_angle)); 22 | } 23 | 24 | float polygon(vec2 p, int vertices, float size) { 25 | float a = atan(p.x, p.y) + 0.2; 26 | float b = 6.28319 / float(vertices); 27 | return cos(floor(0.5 + a / b) * b - a) * length(p) - size; 28 | } 29 | 30 | float smoothedge(float v) { 31 | return smoothstep(0.0, 1.0 / resolution.x, v); 32 | } 33 | 34 | void main( void ) { 35 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); 36 | 37 | uv *= rotate2d(time * 0.2); 38 | 39 | vec2 scaledUv = uv * 12.0; 40 | vec2 repeatedUv = fract(scaledUv); 41 | repeatedUv -= 0.5; 42 | 43 | vec2 itemCenter = floor(scaledUv) + vec2(0.5, 0.5); 44 | float distanceFromCenter = distance(itemCenter, vec2(0.0)); 45 | 46 | float t = fract(time * 0.2 + distanceFromCenter) * 2.0 - 1.0; 47 | float diameter = backOut(abs(t)) * 0.4; 48 | float circle = step(diameter, length(repeatedUv)); 49 | 50 | float p = polygon(repeatedUv, int(diameter * 12.0), diameter); 51 | vec3 color = vec3(smoothedge(p)); 52 | 53 | color.r += fract(distanceFromCenter); 54 | color.b += mod(itemCenter.x * itemCenter.y, distanceFromCenter); 55 | 56 | gl_FragColor = vec4(color, 1.0); 57 | } -------------------------------------------------------------------------------- /easing/easing_multiple_triangles_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#44708.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | #define PI 3.141592653589793 14 | #define HALF_PI 1.5707963267948966 15 | 16 | float backOut(float t) { 17 | float f = 1.0 - t; 18 | return 1.0 - (pow(f, 3.0) - f * sin(f * PI)); 19 | } 20 | 21 | mat2 rotate2d(float _angle){ 22 | return mat2(cos(_angle), -sin(_angle), sin(_angle), cos(_angle)); 23 | } 24 | 25 | float triangle (vec2 st, 26 | vec2 p0, vec2 p1, vec2 p2, 27 | float smoothness){ 28 | vec3 e0, e1, e2; 29 | 30 | e0.xy = normalize(p1 - p0).yx * vec2(+1.0, -1.0); 31 | e1.xy = normalize(p2 - p1).yx * vec2(+1.0, -1.0); 32 | e2.xy = normalize(p0 - p2).yx * vec2(+1.0, -1.0); 33 | 34 | e0.z = dot(e0.xy, p0) - smoothness; 35 | e1.z = dot(e1.xy, p1) - smoothness; 36 | e2.z = dot(e2.xy, p2) - smoothness; 37 | 38 | float a = max(0.0, dot(e0.xy, st) - e0.z); 39 | float b = max(0.0, dot(e1.xy, st) - e1.z); 40 | float c = max(0.0, dot(e2.xy, st) - e2.z); 41 | 42 | return smoothstep(smoothness * 2.0, 43 | 1e-7, 44 | length(vec3(a, b, c))); 45 | } 46 | 47 | float hexagon(vec2 p, float radius) { 48 | vec2 q = abs(p); 49 | return max(abs(q.y), q.x * 0.866025 + q.y * 0.5) - radius; 50 | } 51 | 52 | void main( void ) { 53 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); 54 | 55 | uv *= rotate2d(time * 0.2); 56 | 57 | vec2 scaledUv = uv * 12.0; 58 | vec2 repeatedUv = fract(scaledUv); 59 | repeatedUv -= 0.5; 60 | 61 | vec2 itemCenter = floor(scaledUv) + vec2(0.5, 0.5); 62 | float distanceFromCenter = distance(itemCenter, vec2(0.0)); 63 | 64 | float t = fract(time * 0.8 + distanceFromCenter) * 2.0 - 1.0; 65 | float diameter = backOut(abs(t)) * 0.3; 66 | float circle = step(diameter, length(repeatedUv)); 67 | 68 | float tr = triangle( 69 | repeatedUv, 70 | vec2(-0.5, -0.44) * diameter, 71 | vec2(0.5, -0.44) * diameter, 72 | vec2(0.0, 0.44) * diameter, 73 | 0.001 74 | ); 75 | vec3 color = vec3(tr); 76 | 77 | color.g += fract(distanceFromCenter); 78 | color.b += mod(itemCenter.x * itemCenter.y, distanceFromCenter); 79 | 80 | gl_FragColor = vec4(color, 1.0); 81 | } -------------------------------------------------------------------------------- /frame/frame.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#39582.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform vec2 resolution; 10 | 11 | void main( void ) { 12 | vec2 st = (gl_FragCoord.xy / resolution.xy); 13 | float pct = 0.0; 14 | 15 | pct = step(0.1, st.x); // left 16 | pct *= step(0.1, 1.0 - st.x); // right 17 | pct *= step(0.1, 1.0 - st.y); // top 18 | pct *= step(0.1, st.y); // bottom 19 | 20 | vec3 color = vec3(pct); 21 | gl_FragColor = vec4(color, 1.0); 22 | } -------------------------------------------------------------------------------- /function/function_fract_and_mod_1.frag: -------------------------------------------------------------------------------- 1 | // fract() vs mod() for repetition 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 14 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 15 | } 16 | 17 | void main( void ) { 18 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); 19 | 20 | float num = 10.0; 21 | vec3 color = vec3(0.0); 22 | 23 | if (uv.x < 0.0) { 24 | // fract() 25 | // Range of each item is 0.0 - 1.0 26 | 27 | vec2 uv_fract = uv; 28 | 29 | uv_fract.x -= time * 0.1; 30 | 31 | uv_fract *= num; 32 | uv_fract = fract(uv_fract); 33 | 34 | float centerOffset = 0.5; 35 | float radius = centerOffset * 0.8; 36 | uv_fract -= centerOffset; 37 | 38 | color.rb += smoothstep(radius - 0.1, radius, length(uv_fract)); 39 | color.g += step(-0.05, uv_fract.x) * step(uv_fract.x, 0.05); 40 | color.b += step(centerOffset, uv_fract.y); 41 | } else { 42 | // mod() 43 | // Range of each item is 0.0 - num 44 | 45 | vec2 uv_mod = uv; 46 | 47 | uv_mod.x += time * 0.1; 48 | 49 | uv_mod *= pow(num, 2.0); 50 | uv_mod = mod(uv_mod, num); 51 | 52 | float centerOffset = num / 2.0; 53 | float radius = centerOffset * 0.8; 54 | uv_mod -= centerOffset; 55 | 56 | color.rg += smoothstep(radius - num * 0.1, radius, length(uv_mod)); 57 | color.b += step(-0.05 * num, uv_mod.x) * step(uv_mod.x,0.05 * num); 58 | color.r += step(centerOffset, uv_mod.y); 59 | } 60 | 61 | // Center vertical line. 62 | color -= smoothstep(-0.1, -0.05, uv.x) * smoothstep(uv.x, uv.x + 0.05, 0.1); 63 | 64 | gl_FragColor = vec4(color, 1.0); 65 | } -------------------------------------------------------------------------------- /glslify/glslify-box.frag: -------------------------------------------------------------------------------- 1 | float box(vec2 uv, float size) { 2 | vec2 rect = step(-size, uv) * (1.0 - step(size, uv)); 3 | return min(rect.x, rect.y); 4 | } 5 | 6 | #pragma glslify: export(box) 7 | -------------------------------------------------------------------------------- /glslify/glslify-map.frag: -------------------------------------------------------------------------------- 1 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 2 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 3 | } 4 | 5 | #pragma glslify: export(map) 6 | -------------------------------------------------------------------------------- /grid/grid_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#39869.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform vec2 resolution; 10 | 11 | float get(vec2 st, float left, float bottom, float width, float height) { 12 | float l = step(left, st.x); 13 | float b = step(bottom, st.y); 14 | float r = step(1.0 - (left + width), 1.0 - st.x); 15 | float t = step(1.0 - (bottom + height), 1.0 - st.y); 16 | 17 | return l * b * r * t; 18 | } 19 | 20 | void main( void ) { 21 | vec2 st = (gl_FragCoord.xy / resolution.xy); 22 | vec3 color = vec3(0.0); 23 | float bg = 0.0; 24 | 25 | /* 26 | float p1 = get(st, 0.11, 0.0, 0.01, 1.0); 27 | color += vec3(p1, bg, bg); 28 | 29 | float p2 = get(st, 0.21, 0.0, 0.02, 1.0); 30 | color += vec3(p2, p2, bg); 31 | 32 | float p3 = get(st, 0.31, 0.0, 0.003, 1.0); 33 | color += vec3(p3, bg, bg); 34 | 35 | float p4 = get(st, 0.41, 0.0, 0.03, 1.0); 36 | color += vec3(p4 * 0.2, p4, bg); 37 | 38 | float p5 = get(st, 0.51, 0.0, 0.02, 1.0); 39 | color += vec3(p5, bg, bg); 40 | */ 41 | 42 | for (int i = 0; i < 60; i++) { 43 | float v = get(st, float(i) / 60.0, 0.0, 0.001, 1.0); 44 | color += vec3(v, v, 0.0); 45 | } 46 | 47 | for (int i = 0; i < 60; i++) { 48 | float v = get(st, 0.0, float(i) / 60.0, 1.0, 0.001); 49 | color += vec3(0.0, v, 0.0); 50 | } 51 | 52 | gl_FragColor = vec4(color, 1.0); 53 | } -------------------------------------------------------------------------------- /hexagon/hexagon_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#42992.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | float hex(vec2 p) { 14 | //p.x *= 0.57735 * 2.0; 15 | p.y += mod(floor(p.x), 2.0) * 0.5; 16 | p = abs((mod(p, 1.0) - 0.5)); 17 | return abs(max(p.x * 1.5 + p.y, p.y * 2.0) - 1.0); 18 | } 19 | 20 | 21 | void main( void ) { 22 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) - min(resolution.x, resolution.y); 23 | uv.x += time * 50.0; 24 | //uv *= 10.0; 25 | //vec2 newUv = fract(uv); 26 | vec2 newUv = uv; 27 | 28 | vec2 p = newUv / 50.0; 29 | float strokeWidth = 0.1; 30 | gl_FragColor = vec4(step(strokeWidth, hex(p))); 31 | } -------------------------------------------------------------------------------- /image/image_1.frag: -------------------------------------------------------------------------------- 1 | /*{ 2 | "glslify": true, 3 | "IMPORTED": { 4 | "img1": { 5 | "PATH": "thumb.jpg", 6 | }, 7 | }, 8 | "server": 3000, 9 | }*/ 10 | 11 | precision mediump float; 12 | uniform vec2 resolution; 13 | uniform float time; 14 | 15 | uniform sampler2D img1; 16 | uniform sampler2D backbuffer; 17 | 18 | #pragma glslify: box = require(../glslify/glslify-box.frag) 19 | #pragma glslify: map = require(../glslify/glslify-map.frag) 20 | 21 | float random(in vec2 uv){ 22 | return fract(sin(dot(uv, vec2(12.9898,78.233))) * 43758.5453); 23 | } 24 | 25 | float obliqueLine(vec2 uv){ 26 | return step(0.6, fract((uv.x + uv.y + time * 0.8) * 4.0)); 27 | } 28 | 29 | void main() { 30 | vec2 uv = gl_FragCoord.xy / min(resolution.x, resolution.y); 31 | 32 | uv.x += time * 0.08; 33 | 34 | vec2 scaledUv = uv * 5.0; 35 | vec2 repeatedUv = fract(scaledUv); 36 | 37 | vec4 img = (texture2D(img1, repeatedUv)); 38 | vec4 color = img; 39 | 40 | float b = box(uv, 0.8); 41 | float offset = map(sin(time), -1.0, 1.0, 0.2, 0.35); 42 | if ((color.r + color.g + color.b) / 3.0 < offset) { 43 | float randomOffset = random(floor(scaledUv)); 44 | float line = obliqueLine(uv * 12.0 + time * randomOffset * 0.3); 45 | color.b += line * randomOffset; 46 | color.r /= line; 47 | } 48 | 49 | gl_FragColor = color; 50 | } 51 | -------------------------------------------------------------------------------- /image/thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/image/thumb.jpg -------------------------------------------------------------------------------- /light_stream/light_stream_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#42690.4 2 | // Forked from http://glslsandbox.com/e#42597.0 3 | 4 | #ifdef GL_ES 5 | precision mediump float; 6 | #endif 7 | 8 | uniform float time; 9 | uniform vec2 mouse; 10 | uniform vec2 resolution; 11 | 12 | void main( void ) { 13 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / resolution.x; 14 | 15 | float direction = -1.0; 16 | float speed = time * direction * 0.1; 17 | 18 | float angle = atan(uv.y, uv.x) / (3.14159265359); 19 | float distanceFromCenter = length(uv); 20 | 21 | float color = 0.0; 22 | 23 | float scaledFloorAngle = floor(angle * 360.0); 24 | float randomAngle = fract(scaledFloorAngle * fract(scaledFloorAngle * 0.7235) * 45.0); 25 | float t = speed + randomAngle * 30.0; 26 | 27 | float lightsCountOffset = 0.1; 28 | float adist = randomAngle / distanceFromCenter * lightsCountOffset; 29 | float dist = t + adist; 30 | dist = abs(fract(dist) - 1.0); // repeat. 31 | 32 | float lightLength = 80.0; 33 | color += (1.0 / dist) * cos(sin(speed)) / lightLength; // cos(sin(speed)) make endless. 34 | 35 | gl_FragColor = vec4(color, color, color, 1.0); 36 | } -------------------------------------------------------------------------------- /light_stream/light_stream_with_rotation_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#42690.6 2 | // Forked from http://glslsandbox.com/e#42597.0 3 | 4 | #ifdef GL_ES 5 | precision mediump float; 6 | #endif 7 | 8 | uniform float time; 9 | uniform vec2 mouse; 10 | uniform vec2 resolution; 11 | 12 | #define PI 3.14159265359 13 | 14 | float random(float n) { 15 | return fract(abs(sin(n * 55.753) * 367.34)); 16 | } 17 | 18 | mat2 rotate2d(float angle){ 19 | return mat2(cos(angle), -sin(angle), sin(angle), cos(angle)); 20 | } 21 | 22 | void main( void ) { 23 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / resolution.x; 24 | 25 | uv *= rotate2d(time * 0.2); // Rotate screen. 26 | 27 | float direction = -1.0; 28 | float speed = time * direction * 0.1; 29 | float distanceFromCenter = length(uv); 30 | 31 | float meteorAngle = atan(uv.y, uv.x) * (180.0 / PI); // Angle for meteor. 32 | 33 | float flooredAngle = floor(meteorAngle); 34 | float randomAngle = pow(random(flooredAngle), 0.5); 35 | float t = speed + randomAngle; // Meteor flow randomly. 36 | 37 | float lightsCountOffset = 0.3; 38 | float adist = randomAngle / distanceFromCenter * lightsCountOffset; 39 | float dist = t + adist; 40 | float meteorDirection = (direction < 0.0) ? -1.0 : 0.0; 41 | dist = abs(fract(dist) + meteorDirection); // repeat. 42 | 43 | float lightLength = 100.0; 44 | float meteor = (1.0 / dist) * cos(sin(speed)) / lightLength; // cos(sin(speed)) make endless. 45 | meteor *= distanceFromCenter * 2.0; // Make darker with coming closer to center. 46 | 47 | vec3 color = vec3(0.0); 48 | color.gb += meteor; 49 | 50 | gl_FragColor = vec4(color, 1.0); 51 | } -------------------------------------------------------------------------------- /metaball/metaball_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#40543.0 2 | // See https://thebookofshaders.com/12/?lan=jp 3 | 4 | #ifdef GL_ES 5 | precision mediump float; 6 | #endif 7 | 8 | #define TWO_PI 6.283 9 | 10 | uniform vec2 resolution; 11 | uniform vec2 mouse; 12 | uniform float time; 13 | 14 | float speed = 2.0; 15 | 16 | vec2 random2(vec2 p) { 17 | return fract(sin(vec2(dot(p,vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)))) * 43758.5453); 18 | } 19 | 20 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 21 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 22 | } 23 | 24 | void main() { 25 | vec2 st = gl_FragCoord.xy / resolution.xy; 26 | st.x *= resolution.x / resolution.y; 27 | vec3 color = vec3(0.0); 28 | 29 | // Scale 30 | st *= 8.0; 31 | 32 | vec2 i_st = floor(st); 33 | vec2 f_st = fract(st); 34 | 35 | float m_dist = 1.0; 36 | 37 | for (int j = -1; j <= 1; j++) { 38 | for (int i = -1; i <= 1; i++) { 39 | // Neighbor place in the grid 40 | vec2 neighbor = vec2(float(i), float(j)); 41 | 42 | // Random position from current + neighbor place in the grid 43 | vec2 offset = random2(i_st + neighbor); 44 | 45 | // Animate the offset 46 | //offset = 0.5 + 0.5 * sin(time + TWO_PI * offset); 47 | offset = vec2( 48 | map(sin(time * speed + TWO_PI * offset).x, -1.0, 1.0, 0.0, 1.0), 49 | map(sin(time * speed + TWO_PI * offset).y, -1.0, 1.0, 0.0, 1.0) 50 | ); 51 | 52 | // Position of the cell 53 | vec2 pos = neighbor + offset - f_st; 54 | 55 | // Cell distance 56 | float dist = length(pos); 57 | 58 | // Metaball 59 | m_dist = min(m_dist, m_dist * dist); 60 | } 61 | } 62 | 63 | color.g += step(0.05, m_dist); 64 | 65 | gl_FragColor = vec4(color, 1.0); 66 | } -------------------------------------------------------------------------------- /metaball/metaball_2.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#41858.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | #define TWO_PI 6.283 10 | 11 | uniform vec2 resolution; 12 | uniform vec2 mouse; 13 | uniform float time; 14 | 15 | float speed = 2.0; 16 | 17 | vec2 random2(vec2 p) { 18 | return fract(sin(vec2(dot(p,vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)))) * 43758.5453); 19 | } 20 | 21 | mat2 rotate2d(float _angle){ 22 | return mat2(cos(_angle), -sin(_angle), sin(_angle), cos(_angle)); 23 | } 24 | 25 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 26 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 27 | } 28 | 29 | void main( void ) { 30 | vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 31 | 32 | st *= 10.0; 33 | 34 | st -= 0.5; 35 | st *= rotate2d(time * 0.2); 36 | st += 0.5; 37 | 38 | vec2 i_st = floor(st); 39 | vec2 f_st = fract(st); 40 | 41 | float m_dist = 1.0; 42 | 43 | for (int j = -1; j <= 1; j++) { 44 | for (int i = -1; i <= 1; i++) { 45 | // Neighbor place in the grid 46 | vec2 neighbor = vec2(float(i), float(j)); 47 | 48 | // Random position from current + neighbor place in the grid 49 | vec2 offset = random2(i_st + neighbor); 50 | 51 | // Animate the offset 52 | offset = vec2( 53 | map(sin(time * speed + TWO_PI * offset).x, -1.0, 1.0, 0.0, 1.0), 54 | map(sin(time * speed + TWO_PI * offset).y, -1.0, 1.0, 0.0, 1.0) 55 | ); 56 | 57 | // Position of the cell 58 | vec2 pos = neighbor + offset - f_st; 59 | 60 | // Cell distance 61 | float dist = length(pos); 62 | 63 | // Metaball 64 | m_dist = min(m_dist, m_dist * dist); 65 | } 66 | } 67 | 68 | vec3 color = vec3(0.0); 69 | 70 | color.rb += smoothstep(0.1, 0.01, m_dist); 71 | 72 | // Spotlight 73 | color *= (1.0 - length(st * 0.08 )); 74 | 75 | gl_FragColor = vec4(color, 1.0); 76 | } -------------------------------------------------------------------------------- /metaball/metaball_mosaic_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#46205.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | #define PI 3.141592653589793 10 | #define TWO_PI 6.283 11 | 12 | uniform vec2 resolution; 13 | uniform float time; 14 | 15 | float backOut(float t) { 16 | float f = 1.0 - t; 17 | return 1.0 - (pow(f, 3.0) - f * sin(f * PI)); 18 | } 19 | 20 | vec2 random(vec2 p) { 21 | return fract(sin(vec2(dot(p,vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)))) * 43758.5453); 22 | } 23 | 24 | mat2 rotate2d(float _angle){ 25 | return mat2(cos(_angle), -sin(_angle), sin(_angle), cos(_angle)); 26 | } 27 | 28 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 29 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 30 | } 31 | 32 | void main( void ) { 33 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 34 | 35 | uv *= 8.0; 36 | 37 | uv -= 0.5; 38 | uv *= rotate2d(time * 0.2); 39 | uv += 0.5; 40 | 41 | vec2 i_st = floor(uv); 42 | vec2 f_st = fract(uv); 43 | 44 | float m_dist = 1.0; 45 | 46 | float t = time * 1.5; 47 | float speed = (floor(t) + backOut(fract(t))); 48 | 49 | for (int j = -1; j <= 1; j++) { 50 | for (int i = -1; i <= 1; i++) { 51 | // Neighbor place in the grid 52 | vec2 neighbor = vec2(float(i), float(j)); 53 | 54 | // Random position from current + neighbor place in the grid 55 | vec2 offset = random(i_st + neighbor); 56 | 57 | // Animate the offset 58 | offset = vec2( 59 | map(sin(speed + TWO_PI * offset).x, -1.0, 1.0, 0.0, 1.0), 60 | map(sin(speed + TWO_PI * offset).y, -1.0, 1.0, 0.0, 1.0) 61 | ); 62 | 63 | // Position of the cell 64 | vec2 pos = neighbor + offset - f_st; 65 | 66 | // Cell distance 67 | float dist = length(pos); 68 | 69 | // Metaball 70 | m_dist = min(m_dist, m_dist * dist); 71 | float orb = 0.1 / length(vec2(0.0) - pos); 72 | } 73 | } 74 | 75 | float cell = 1.0 - step(0.1, m_dist); 76 | cell *= length(random(floor(uv * 8.0))); 77 | 78 | vec3 color = vec3(0.05); 79 | color.r += cell; 80 | 81 | gl_FragColor = vec4(color, 1.0); 82 | } -------------------------------------------------------------------------------- /metaball/metaball_oblique_line_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#46205.3 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | #define PI 3.141592653589793 10 | #define TWO_PI 6.283 11 | 12 | uniform vec2 resolution; 13 | uniform float time; 14 | 15 | float backOut(float t) { 16 | float f = 1.0 - t; 17 | return 1.0 - (pow(f, 3.0) - f * sin(f * PI)); 18 | } 19 | 20 | vec2 random(vec2 p) { 21 | return fract(sin(vec2(dot(p,vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)))) * 43758.5453); 22 | } 23 | 24 | mat2 rotate2d(float _angle){ 25 | return mat2(cos(_angle), -sin(_angle), sin(_angle), cos(_angle)); 26 | } 27 | 28 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 29 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 30 | } 31 | 32 | float obliqueLine(vec2 uv){ 33 | return step(0.6, fract((uv.x + uv.y + time * 0.8) * 4.0)); 34 | } 35 | 36 | void main( void ) { 37 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 38 | 39 | vec2 scaledUv = uv * 8.0; 40 | 41 | scaledUv -= 0.5; 42 | scaledUv *= rotate2d(time * 0.2); 43 | scaledUv += 0.5; 44 | 45 | vec2 i_st = floor(scaledUv); 46 | vec2 f_st = fract(scaledUv); 47 | 48 | float m_dist = 1.0; 49 | 50 | float t = time * 1.5; 51 | float speed = (floor(t) + backOut(fract(t))); 52 | 53 | for (int j = -1; j <= 1; j++) { 54 | for (int i = -1; i <= 1; i++) { 55 | // Neighbor place in the grid 56 | vec2 neighbor = vec2(float(i), float(j)); 57 | 58 | // Random position from current + neighbor place in the grid 59 | vec2 offset = random(i_st + neighbor); 60 | 61 | // Animate the offset 62 | offset = vec2( 63 | map(sin(speed + TWO_PI * offset).x, -1.0, 1.0, 0.0, 1.0), 64 | map(sin(speed + TWO_PI * offset).y, -1.0, 1.0, 0.0, 1.0) 65 | ); 66 | 67 | // Position of the cell 68 | vec2 pos = neighbor + offset - f_st; 69 | 70 | // Cell distance 71 | float dist = length(pos); 72 | 73 | // Metaball 74 | m_dist = min(m_dist, m_dist * dist); 75 | } 76 | } 77 | 78 | float cell = 1.0 - step(0.1, m_dist); 79 | 80 | vec3 color = vec3(0.05); 81 | color += cell; 82 | 83 | color.r *= obliqueLine(uv * 4.0); 84 | color.g *= obliqueLine(uv * 8.0); 85 | 86 | gl_FragColor = vec4(color, 1.0); 87 | } -------------------------------------------------------------------------------- /morphing/morphing_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#49090.4 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | float obliqueLine(vec2 uv){ 14 | return step(0.6, fract((uv.x + uv.y + time * 0.8) * 4.0)); 15 | } 16 | 17 | vec2 circle(vec2 uv, float radius) { 18 | return vec2(length(uv), radius); // .x = distance, .y = offset 19 | } 20 | 21 | vec2 square(vec2 uv, float size) { 22 | return vec2(abs(uv.x) + abs(uv.y), size); 23 | } 24 | 25 | void main(void) { 26 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); 27 | 28 | vec2 scaledUv = uv * 3.0; 29 | vec2 repeatedUv = fract(scaledUv); 30 | repeatedUv -= 0.5; 31 | 32 | float t = sin(time * 6.0 + length(floor(scaledUv))) * 0.5 + 0.5; // 0.0 ~ 1.0 33 | 34 | vec2 distanceAndOffset = mix(circle(repeatedUv, 0.45), square(repeatedUv, 0.4), exp(t * -6.0)) ; 35 | float changingOffset = step(distanceAndOffset.x, distanceAndOffset.y); 36 | vec3 backgroundColor = vec3(0.0, 1.0, 0.0); 37 | vec3 objectColor = vec3(0.9, 0.0, 1.0); 38 | vec3 color = mix(backgroundColor * obliqueLine(uv * 5.0), objectColor, changingOffset); 39 | 40 | vec2 distanceAndOffset2 = mix(circle(repeatedUv, 0.2), square(repeatedUv, 0.3), exp(t * -6.0)) ; 41 | float changingOffset2 = step(distanceAndOffset2.x, distanceAndOffset2.y); 42 | color *= mix(backgroundColor, vec3(0.9, 0.5, 0.9) * 0.05 / length(repeatedUv), changingOffset2); 43 | 44 | gl_FragColor = vec4(color, 1.0); 45 | } -------------------------------------------------------------------------------- /mosaic/mosaic_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#41907.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | uniform float time; 8 | uniform vec2 mouse; 9 | uniform vec2 resolution; 10 | 11 | float random(float n) { 12 | return fract(abs(sin(n * 55.753) * 367.34)); 13 | } 14 | 15 | void main(void){ 16 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 17 | 18 | float scale = 20.0; 19 | vec2 newUv = uv * scale; 20 | vec2 repeatedUv = floor(newUv + time); 21 | 22 | vec3 color = vec3(0.0); 23 | 24 | // Circle 25 | float t = fract(-time * 1.2); 26 | color.rg -= random(repeatedUv.x) * random(repeatedUv.y) * (step(0.7, 1.0 - length(uv * t)) * step(0.1, length(uv * t))); 27 | 28 | // Grid 29 | color.rb += random(repeatedUv.x * repeatedUv.y); 30 | 31 | gl_FragColor = vec4(color, 1.0); 32 | } -------------------------------------------------------------------------------- /mosaic/mosaic_circle_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#41972.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 resolution; 11 | 12 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 13 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 14 | } 15 | 16 | void main(void){ 17 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 18 | 19 | float scale = 30.0; 20 | vec2 repeatedUv = uv * scale; 21 | vec2 newUv = fract(repeatedUv); 22 | 23 | vec2 center = floor(repeatedUv) + vec2(0.5, 0.5); 24 | float dist = distance(center, vec2(0.0)); // Same as length(center) 25 | dist /= scale; 26 | 27 | vec3 color = vec3(0.0); 28 | float offset = map(sin(time * 2.0), -1.0, 1.0, 0.8, 0.9); 29 | 30 | if (dist < offset) { 31 | // Make circle with small circle. 32 | newUv -= 0.5; 33 | 34 | float radius = map(sin((uv.x + uv.y) + time * 8.0), -1.0, 1.0, 0.1, 0.4); 35 | float v = 1.0 - step(radius, length(newUv)); // Circle 36 | v *= time; 37 | color.rg += v; 38 | 39 | newUv += 0.5; 40 | } 41 | 42 | gl_FragColor = vec4(color, 1.0); 43 | } -------------------------------------------------------------------------------- /mosaic/mosaic_circle_1_2.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#41972.2 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 resolution; 11 | 12 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 13 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 14 | } 15 | 16 | mat2 rotate2d(float _angle){ 17 | return mat2(cos(_angle), -sin(_angle), sin(_angle), cos(_angle)); 18 | } 19 | 20 | void main(void){ 21 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 22 | 23 | uv *= rotate2d(time * 0.3); 24 | 25 | float scale = 10.0; 26 | vec2 repeatedUv = uv * scale; 27 | vec2 newUv = fract(repeatedUv); 28 | 29 | vec2 center = floor(repeatedUv) + vec2(0.5, 0.5); 30 | float dist = distance(center, vec2(0.0)); // Same as length(center) 31 | dist /= scale; 32 | 33 | vec3 color = vec3(0.0); 34 | float offset = map(sin(time * 3.0), -1.0, 1.0, 0.6, 0.9); 35 | 36 | if (dist < offset) { 37 | // Make circle with small circle. 38 | newUv -= 0.5; 39 | 40 | float radius = 0.4; 41 | float dist = length(uv); 42 | float deg = atan(uv.y, uv.x); 43 | newUv *= rotate2d(-deg); 44 | float circle = 1.0 - step(radius, length(vec2(newUv.x * (1.0 + (dist * 2.0)), newUv.y))); // Circle 45 | color.gb += circle; 46 | 47 | newUv += 0.5; 48 | } 49 | 50 | gl_FragColor = vec4(color, 1.0); 51 | } -------------------------------------------------------------------------------- /mosaic/mosaic_circle_2/mosaic_circle_2.frag: -------------------------------------------------------------------------------- 1 | #version 150 2 | 3 | uniform float time; 4 | uniform vec2 mouse; 5 | uniform vec2 resolution; 6 | uniform vec3 spectrum; 7 | uniform sampler2D texture0; 8 | uniform sampler2D texture1; 9 | uniform sampler2D texture2; 10 | uniform sampler2D texture3; 11 | uniform sampler2D prevFrame; 12 | 13 | in VertexData 14 | { 15 | vec4 v_position; 16 | vec3 v_normal; 17 | vec2 v_texcoord; 18 | } inData; 19 | 20 | out vec4 fragColor; 21 | 22 | #define PI 3.14159265359 23 | 24 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 25 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 26 | } 27 | 28 | mat2 rotate2d(float _angle){ 29 | return mat2(cos(_angle), -sin(_angle), sin(_angle), cos(_angle)); 30 | } 31 | 32 | void main(void){ 33 | vec2 uv = -1. + 2. * inData.v_texcoord; 34 | uv.x *= resolution.x / resolution.y; 35 | 36 | uv *= rotate2d(time * 0.1 * PI); 37 | 38 | float scale = 30.0; 39 | vec2 scaledUv = uv * scale; 40 | vec2 newUv = fract(scaledUv); 41 | 42 | vec2 center = floor(scaledUv) + vec2(0.5, 0.5); 43 | float dist = distance(center, vec2(0.0)); // Same as length(center) 44 | dist /= scale; 45 | 46 | vec3 color = vec3(step(spectrum.x * 200, length(uv)) * spectrum.x * 1000, 0.0, 1.0); 47 | //color.r *= step(spectrum.x * 200, fract(scaledUv.x)); 48 | float offset = 0.1 + spectrum.x * 200; 49 | 50 | if (dist < offset) { 51 | // Make circle with small circle. 52 | newUv -= 0.5; 53 | 54 | float radius = 0.1 + spectrum.x * 10 * abs(floor(scaledUv.x)); 55 | float v = 1.0 - step(radius, length(newUv)); // Circle 56 | v *= time; 57 | color.g += v * spectrum.x * 100; 58 | 59 | newUv += 0.5; 60 | } 61 | 62 | fragColor = vec4(color, 1.0); 63 | } 64 | -------------------------------------------------------------------------------- /mosaic/mosaic_circle_2/mosaic_circle_2.klproj: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/mosaic/mosaic_circle_2/mosaic_circle_2.klproj -------------------------------------------------------------------------------- /mosaic/mosaic_circle_3.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#42157.3 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 resolution; 11 | 12 | mat2 rotate2d(float _angle){ 13 | return mat2(cos(_angle), -sin(_angle), sin(_angle), cos(_angle)); 14 | } 15 | 16 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 17 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 18 | } 19 | 20 | void main(void){ 21 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 22 | 23 | uv *= rotate2d(time * 0.3); 24 | 25 | float scale = 30.0; 26 | vec2 scaledUv = uv * scale; 27 | vec2 newUv = mod(scaledUv, map((sin(time)), -1.0, 1.0, 1.0, 7.0)); 28 | 29 | vec2 center = floor(scaledUv) + vec2(0.5, 0.5); 30 | float dist = distance(center, vec2(0.0)); // Same as length(center) 31 | dist /= scale; 32 | 33 | vec3 color = vec3(0.0, 0.0, fract(newUv.y)); 34 | float offset = map((sin(time * 2.0)), -1.0, 1.0, 0.5, 1.0); 35 | 36 | scaledUv -= 1.0; 37 | newUv -= 1.0; 38 | 39 | if (dist < offset) { 40 | // Make circle with small circle. 41 | 42 | float radius = map(sin((floor(scaledUv.x + scaledUv.y + time * 10.0))), -1.0, 1.0, 0.2, 0.6); 43 | float v = 1.0 - step(radius, length(newUv)); // Circle 44 | color.r += v; 45 | } else { 46 | float radius = 0.4; 47 | float v = 1.0 - step(radius, length(newUv)); // Circle 48 | color += vec3(v); 49 | } 50 | 51 | scaledUv += 0.5; 52 | newUv + 0.5; 53 | 54 | gl_FragColor = vec4(color, 1.0); 55 | } -------------------------------------------------------------------------------- /mosaic/mosaic_ring_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#43760.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 14 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 15 | } 16 | 17 | float box(vec2 _st, vec2 _size){ 18 | _size = vec2(0.5) - _size * 0.5; // Adjust size. 19 | vec2 uv = step(_size, _st); 20 | uv *= step(_size, vec2(1.0) - _st); 21 | return uv.x * uv.y; 22 | } 23 | 24 | float exposeInOut(float t) { 25 | if (t == 0.0) { 26 | return 0.0; 27 | 28 | } else if (t == 1.0) { 29 | return 1.0; 30 | 31 | } else if ((t /= 0.5) < 1.0) { 32 | return 0.5 * pow(2.0, 10.0 * (t - 1.0)); 33 | 34 | } else { 35 | return 0.5 * (-pow(2.0, -10.0 * --t) + 2.0); 36 | } 37 | } 38 | 39 | float ease(float t) { 40 | return exposeInOut(t); 41 | } 42 | 43 | mat2 rotate2d(float _angle){ 44 | return mat2(cos(_angle), -sin(_angle), sin(_angle), cos(_angle)); 45 | } 46 | 47 | void main( void ) { 48 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); 49 | 50 | uv *= rotate2d(time * 0.2); 51 | 52 | vec2 scaledUv = uv * 10.0; 53 | vec2 repeatedUv = fract(scaledUv); 54 | 55 | float len = length(uv); 56 | float s = sin((time + len) * 10.0); 57 | float r = 0.4 * s; 58 | 59 | float b = box(repeatedUv, vec2(r)); 60 | vec3 color = vec3(b ,0.0, 0.1); 61 | 62 | if (b >= 1.0) { 63 | float t = map(sin(floor(time * 5.0) + ease(fract(time * 5.0))), -1.0, 1.0, 0.3, 1.0); 64 | color = vec3(0.5, t * 0.5, t); 65 | } 66 | gl_FragColor = vec4(color, 1.0); 67 | } -------------------------------------------------------------------------------- /noise/cnoise_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#44284.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | mat2 rotate2d(float _angle){ 14 | return mat2(cos(_angle), -sin(_angle), sin(_angle), cos(_angle)); 15 | } 16 | 17 | float fade(float x) { 18 | return x * x * x * (x * (x * 6.0 - 15.0) + 10.0); 19 | } 20 | 21 | float phash(float p) { 22 | p = fract(7.8233139 * p); 23 | p = ((2384.2345 * p - 1324.3438) * p + 3884.2243) * p - 4921.2354; 24 | return fract(p) * 2.0 - 1.0; 25 | } 26 | 27 | float cnoise(float p) { 28 | float ip = floor(p); 29 | float fp = fract(p); 30 | float d0 = phash(ip) * fp; 31 | float d1 = phash(ip + 1.0) * (fp - 1.0); 32 | return mix(d0, d1, fade(fp)); 33 | } 34 | 35 | void main( void ) { 36 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); 37 | 38 | // Backgroud. 39 | float noise = cnoise(uv.x * time); 40 | vec3 color = vec3(0.5, 0.1, 0.9) * noise; 41 | 42 | // Rotate. 43 | uv *= rotate2d(time); 44 | 45 | // Main object. 46 | for (float i = 0.0; i < 10.0; i += 2.0) { 47 | float circle = smoothstep(0.1, 0.9, 1.0 - length(uv + cnoise(i + time))); 48 | color.r += circle; 49 | gl_FragColor = vec4(color, 1.0); 50 | } 51 | } -------------------------------------------------------------------------------- /noise/cnoise_2.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#44436.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | mat2 rotate2d(float _angle){ 14 | return mat2(cos(_angle), -sin(_angle), sin(_angle), cos(_angle)); 15 | } 16 | 17 | float fade(float x) { 18 | return x * x * x * (x * (x * 6.0 - 15.0) + 10.0); 19 | } 20 | 21 | float phash(float p) { 22 | p = fract(7.8233139 * p); 23 | p = ((2384.2345 * p - 1324.3438) * p + 3884.2243) * p - 4921.2354; 24 | return fract(p) * 2.0 - 1.0; 25 | } 26 | 27 | float cnoise(float p) { 28 | float ip = floor(p); 29 | float fp = fract(p); 30 | float d0 = phash(ip) * fp; 31 | float d1 = phash(ip + 1.0) * (fp - 1.0); 32 | return mix(d0, d1, fade(fp)); 33 | } 34 | 35 | void main( void ) { 36 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); 37 | 38 | // Backgroud. 39 | vec3 color = vec3(0.5, 0.1, 0.9); 40 | 41 | vec2 scaledUv = uv * 6.0; 42 | vec2 repeatedUv = fract(scaledUv); 43 | repeatedUv -= 0.5; 44 | 45 | // Rotate. 46 | repeatedUv *= rotate2d(time); 47 | 48 | // Main object. 49 | for (float i = 0.0; i < 1.0; i += 0.5) { 50 | float circle = smoothstep(0.6, 0.8, 1.0 - length(repeatedUv + cnoise(i * floor(scaledUv.x) + time))); 51 | color += circle; 52 | gl_FragColor = vec4(color, 1.0); 53 | } 54 | } -------------------------------------------------------------------------------- /noise/noise_and_rotation_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#40602.0 2 | // forked from http://glslsandbox.com/e#40600.0 3 | 4 | #ifdef GL_ES 5 | precision highp float; 6 | #endif 7 | 8 | uniform float time; 9 | uniform vec2 mouse; 10 | uniform vec2 resolution; 11 | 12 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 13 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 14 | } 15 | 16 | mat2 rotate2d(float angle){ 17 | return mat2(cos(angle), -sin(angle), sin(angle), cos(angle)); 18 | } 19 | 20 | float random (in vec2 st) { 21 | return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123); 22 | } 23 | 24 | float fbm(vec2 p) { 25 | float v = 0.0; 26 | v += random(p * 1.0) * 0.5; 27 | v += random(p * 2.0) *0.25; 28 | v += random(p * 4.0) * 0.125; 29 | return v * 1.0; 30 | } 31 | 32 | void main( void ) { 33 | vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 34 | 35 | float timeVal = 0.0; 36 | vec3 color = vec3(0.0); 37 | 38 | st *= rotate2d(time * 1.0); 39 | 40 | for(int i = 1; i < 5; i++) { 41 | float t = abs(1.0 / ((st.x * fbm(st * + time * float(i))) * 50.0)); 42 | float v = map(sin(time * 2.0), -1.0, 1.0, 0.5, 1.0); 43 | color += t * vec3(1.0, v, 2.0); 44 | } 45 | 46 | gl_FragColor = vec4(color, 1.0); 47 | } -------------------------------------------------------------------------------- /noise/noise_orb_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#46172.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform vec2 resolution; 10 | uniform vec2 mouse; 11 | uniform float time; 12 | 13 | float random (in vec2 st) { 14 | return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123); 15 | } 16 | 17 | float noise(vec2 st) { 18 | vec2 i = floor(st); 19 | vec2 f = fract(st); 20 | vec2 u = f * f * (3.0 - 2.0 * f); 21 | return mix(mix(random(i + vec2(0.0,0.0)), random( i + vec2(1.0,0.0) ), u.x), mix(random(i + vec2(0.0,1.0)), random(i + vec2(1.0,1.0)), u.x), u.y); 22 | } 23 | 24 | float rect(vec2 p, float size) { 25 | vec2 d = abs(p) - vec2(size); 26 | return min(max(d.x, d.y), 0.0) + length(max(d,0.0)); 27 | } 28 | 29 | void main() { 30 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); 31 | 32 | vec3 color = vec3(0.0); 33 | 34 | vec2 scaledUv = uv * 20.0; 35 | vec2 repeatedUv = fract(scaledUv); 36 | repeatedUv -= 0.5; 37 | 38 | float n = noise(uv * 10.0 + time); 39 | 40 | float t = 0.1 / length(vec2(0.0) - repeatedUv * n); 41 | float shape = step(0.0, t * n); 42 | 43 | color += vec3(shape, t, t); 44 | 45 | gl_FragColor = vec4(color, 1.0); 46 | } -------------------------------------------------------------------------------- /parallax/parallax_colorful_particle_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#42567.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | 14 | float random(float n) { 15 | return fract(abs(sin(n * 55.753) * 367.34)); 16 | } 17 | 18 | float random(vec2 uv) { 19 | return fract(sin(dot(uv, vec2(12.9898, 78.233))) * 43758.5453); 20 | } 21 | 22 | float circle(vec2 uv, float size, float s) { 23 | return 1.0 - step(size, length(uv) * s); 24 | } 25 | 26 | // Referenced from https://github.com/keijiro/ShaderSketches/blob/master/Fragment/Discs4.glsl 27 | vec3 palette(float z) { 28 | float g = 0.6 + 0.4 * sin(z * 8.0 + time * 2.0); 29 | float b = 0.5 + 0.4 * sin(z * 5.0 + time * 3.0); 30 | return vec3(1.0, g, b); 31 | } 32 | 33 | void main( void ) { 34 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); 35 | 36 | float speed = time * 0.3; 37 | float scale = 4.0; 38 | float offset = 1.0; 39 | vec3 color = vec3(0.0); 40 | 41 | for (int i = 0; i < 3; i++) { 42 | if (i == 0) { 43 | uv.x += speed; 44 | } else { 45 | uv.x -= speed; 46 | } 47 | 48 | uv *= scale; 49 | float z1 = random(0.2 * floor(uv)); 50 | float s1 = 1.3 + sin(time * (0.6 + z1)) * 0.6; 51 | uv = fract(uv); 52 | uv -= 0.5; 53 | 54 | float r = random(offset); 55 | vec3 box = vec3(0.2 + r, 0.6 * r, mod(8.0 * r, 1.0)) * circle(uv, 0.3, s1); 56 | color += box / palette(s1); 57 | scale /= 1.0; 58 | offset /= 2.0; 59 | } 60 | 61 | gl_FragColor = vec4(color, 1.0); 62 | } -------------------------------------------------------------------------------- /parallax/parallax_mosaic_circle_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#42297.2 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 resolution; 11 | 12 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 13 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 14 | } 15 | 16 | void main( void ) { 17 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); 18 | 19 | float num = 2.0; 20 | uv *= pow(num, 2.0); 21 | uv = mod(uv, num); 22 | 23 | vec3 color = vec3(0.0); 24 | float depth = 1.0; 25 | 26 | uv -= num / 2.0; 27 | for (int i = 0; i < 4; i++) { 28 | uv.x -= depth * time * 0.01; 29 | vec2 newUv = uv * 30.0; 30 | newUv = fract(newUv); 31 | newUv -= 0.5; 32 | float circle = 1.0 - step(0.2 * depth, length(newUv)); 33 | color += circle * vec3(mod(uv, map(sin(time * 3.0), -1.0, 1.0, 1.0, 5.0)),1.0); 34 | depth /= 1.3; 35 | } 36 | 37 | gl_FragColor = vec4(color, 1.0); 38 | } -------------------------------------------------------------------------------- /parallax/parallax_particles_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#42226.3 2 | // Forked http://glslsandbox.com/e#42199.5 3 | 4 | #ifdef GL_ES 5 | precision mediump float; 6 | #endif 7 | 8 | #extension GL_OES_standard_derivatives : enable 9 | 10 | uniform float time; 11 | uniform vec2 mouse; 12 | uniform vec2 resolution; 13 | 14 | vec2 rand2(vec2 p) { 15 | p = vec2(dot(p, vec2(102.9898,78.233)), dot(p, vec2(26.65125, 83.054543))); 16 | return fract(sin(p) * 43758.5453); 17 | } 18 | 19 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 20 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 21 | } 22 | 23 | // Create particles by check the neighbors. 24 | // https://thebookofshaders.com/12/ 25 | float createParticles(in vec2 position, float particleCount, float size) { 26 | vec2 scaledPos = position * particleCount; 27 | vec2 iPos = floor(scaledPos); 28 | vec2 fPos = fract(scaledPos); 29 | float minDist = 1.0; 30 | 31 | for (float i = -1.0; i <= 1.0; ++i) { 32 | for (float j = -1.0; j <= 1.0; ++j) { 33 | vec2 neighbor = vec2(i, j); 34 | vec2 newPos = iPos + neighbor; 35 | vec2 randomPos = rand2(mod(newPos, particleCount)); 36 | vec2 diff = neighbor + randomPos - fPos; 37 | diff *= 1.0 / (particleCount * size); // Apply settings the size 38 | minDist = min(minDist, dot(diff, diff)); 39 | } 40 | } 41 | 42 | return smoothstep(0.9, 1.0, (1.0 - sqrt(minDist))); 43 | } 44 | 45 | 46 | void main() { 47 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); 48 | 49 | vec3 color = vec3(0.0); 50 | 51 | float particleSize = 1.5; 52 | float particleCount = 4.0; 53 | const int depth = 6; 54 | 55 | // Make parallax 56 | for (int i = 0; i < depth; i++) { 57 | // Particle position 58 | vec2 position = vec2( 59 | uv.x + 1.0 * 0.2 * particleSize, 60 | uv.y - time * 0.1 * particleSize 61 | ); 62 | 63 | color += createParticles(position, particleCount, particleSize / 4.0) * vec3(0.0, particleSize + abs(sin(time)) * particleSize, 1.0); 64 | 65 | particleSize /= 1.5; // Make　particle smaller 66 | particleCount *= 1.5; // Increase particle count 67 | } 68 | 69 | gl_FragColor = vec4(color, 1.0); 70 | } -------------------------------------------------------------------------------- /parallax/parallax_rectangle_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#42552.3 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | 14 | float random(float n) { 15 | return fract(abs(sin(n * 55.753) * 367.34)); 16 | } 17 | 18 | float box(vec2 uv, float size) { 19 | vec2 rect = step(-size, uv) * (1.0 - step(size, uv)); 20 | return min(rect.x, rect.y); 21 | } 22 | 23 | void main( void ) { 24 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); 25 | 26 | float speed = time * 0.3; 27 | float scale = 4.0; 28 | float offset = 1.0; 29 | vec3 color = vec3(0.0); 30 | 31 | for (int i = 0; i < 3; i++) { 32 | if (i == 0) { 33 | uv.x += speed; 34 | } else { 35 | uv.x -= speed; 36 | } 37 | 38 | uv *= scale; 39 | uv = fract(uv); 40 | uv -= 0.5; 41 | 42 | float r = random(offset); 43 | vec3 box = vec3(0.2 + r, 0.6 * r, mod(8.0 * r, 1.0)) * box(uv, 0.3); 44 | color += box; 45 | scale /= 1.0; 46 | offset /= 2.0; 47 | } 48 | 49 | gl_FragColor = vec4(color, 1.0); 50 | } -------------------------------------------------------------------------------- /particle/particle_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#39972.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | void main( void ) { 14 | vec2 st = gl_FragCoord.xy / resolution.xy; 15 | vec3 color = vec3(0.0); 16 | float ratio = resolution.x / resolution.y; 17 | 18 | st.x *= ratio; 19 | 20 | color += distance(vec2(cos(st.x * time * 100.0)), vec2(0.5)); 21 | color += distance(vec2(sin(st.y * time * 100.0)), vec2(0.5)); 22 | 23 | gl_FragColor = vec4(color.x * 0.2, color.y * 0.2, color.z, 1.0); 24 | 25 | } -------------------------------------------------------------------------------- /pattern/oblique_line_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#41532.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | float box(vec2 _st, vec2 _size){ 14 | _size = vec2(0.5) - _size * 0.5; // Adjust size. 15 | vec2 uv = step(_size, _st); 16 | float speed = time * 5.0; 17 | float bold = 0.2; 18 | uv.y *= step(fract(_st.y * 5.5 + speed + _st.x * 5.5), bold); 19 | return uv.x * uv.y; 20 | } 21 | 22 | vec2 patternize(vec2 st) { 23 | return fract(st); 24 | } 25 | 26 | void main( void ) { 27 | vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 28 | 29 | float count = 8.0; 30 | st *= count / 2.0; 31 | 32 | st.x += time; 33 | 34 | vec2 p = patternize(st); 35 | 36 | float b = box(p, vec2(0.5)); 37 | 38 | vec3 color = vec3(0.9, b, 0.5); 39 | 40 | gl_FragColor = vec4(color, 1.0); 41 | } -------------------------------------------------------------------------------- /pattern/pattern_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#39624.0 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform vec2 resolution; 10 | uniform float time; 11 | 12 | /** 13 | * 0.0 : Circle 14 | * 1.0 : Background 15 | */ 16 | bool isCircle(vec2 pos, vec2 center, float radius) { 17 | float d = distance(pos, center); 18 | return step(radius, d) == 0.0; 19 | } 20 | 21 | void main( void ) { 22 | vec3 circleColor = vec3(0.3, 0.2, 0.8); 23 | vec3 backgroundColor = vec3(0.1, 0.9, 0.5); 24 | 25 | vec2 fStep = vec2(50.0, 50.0); // distance between circles 26 | vec2 fPos = mod(gl_FragCoord.xy + vec2(time) * 0.2, fStep); 27 | 28 | vec3 color = isCircle(fPos, fStep / 2.0, 20.0) ? circleColor : backgroundColor; 29 | 30 | gl_FragColor = vec4(color, 1.0); 31 | } -------------------------------------------------------------------------------- /pattern/pattern_2.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#39640.3 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform vec2 resolution; 10 | uniform float time; 11 | 12 | /** 13 | * 0.0 : Circle 14 | * 1.0 : Background 15 | */ 16 | bool isCircle(vec2 pos, vec2 center, float radius) { 17 | float d = distance(pos, center); 18 | return step(radius, d) == 0.0; 19 | } 20 | 21 | bool isRect(vec2 pos, vec2 center, float radius) { 22 | return pos.x > center.x - radius && pos.x < center.x + radius && pos.y > center.y - radius && pos.y < center.y + radius; 23 | } 24 | 25 | void main( void ) { 26 | vec3 circleColor = vec3(0.3, 0.2, 0.8); 27 | vec3 backgroundColor = vec3(0.7, 0.1, 0.2); 28 | 29 | vec2 fStep = vec2(50.0, 50.0); // distance between circles 30 | vec2 fPos = mod(gl_FragCoord.xy + vec2(time * 100.0), fStep); 31 | 32 | vec3 color = isCircle(fPos, fStep / 2.0, 20.0) ? circleColor : backgroundColor; 33 | 34 | vec2 fStep2 = vec2(30.0, 30.0); 35 | vec2 fPos2 = mod(gl_FragCoord.xy + vec2(time * 20.0), fStep2); 36 | color /= isRect(fPos2, fStep2, 15.0) ? vec3(0.2, 0.9, 0.1) : vec3(1.0); 37 | 38 | gl_FragColor = vec4(color, 1.0); 39 | } -------------------------------------------------------------------------------- /pattern/pattern_and_rotattion_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#40319.0 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | #define PI 3.14159265359 10 | 11 | uniform float time; 12 | uniform vec2 mouse; 13 | uniform vec2 resolution; 14 | 15 | mat2 rotate2d(float _angle){ 16 | return mat2(cos(_angle), -sin(_angle), sin(_angle), cos(_angle)); 17 | } 18 | 19 | vec2 patternize(vec2 st, int count) { 20 | vec2 pattern = st * float(count); 21 | return fract(pattern); 22 | } 23 | 24 | float box(vec2 _st, vec2 _size){ 25 | _size = vec2(0.5) - _size * 0.5; // Adjust size. 26 | vec2 uv = step(_size, _st); 27 | uv *= step(_size, vec2(1.0) - _st); 28 | return uv.x * uv.y; 29 | } 30 | 31 | void main( void ) { 32 | vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 33 | 34 | vec3 color = vec3(0.0); 35 | 36 | st = patternize(st, 6 / 2); 37 | st -= 0.5; 38 | st *= rotate2d(sin(time) * PI); 39 | st += 0.5; 40 | 41 | color = vec3(box(st, vec2(0.5))); 42 | 43 | gl_FragColor = vec4(color, 1.0); 44 | } -------------------------------------------------------------------------------- /pattern/pattern_and_rotattion_2.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#40380.0 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | #define PI 3.14159265359 10 | 11 | uniform float time; 12 | uniform vec2 mouse; 13 | uniform vec2 resolution; 14 | 15 | mat2 rotate2d(float _angle){ 16 | return mat2(cos(_angle), -sin(_angle), sin(_angle), cos(_angle)); 17 | } 18 | 19 | vec2 patternize(vec2 st, int count) { 20 | vec2 pattern = st * float(count); 21 | return fract(pattern); 22 | } 23 | 24 | float box(vec2 _st, vec2 _size){ 25 | _size = vec2(0.5) - _size * 0.5; // Adjust size. 26 | vec2 uv = step(_size, _st); 27 | uv *= step(_size, vec2(1.0) - _st); 28 | return uv.x * uv.y; 29 | } 30 | 31 | void main( void ) { 32 | vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 33 | vec2 st1 = st; 34 | vec2 st2 = st; 35 | vec2 st3 = st; 36 | 37 | vec3 color = vec3(0.0); 38 | 39 | st1 = patternize(vec2(st.x, st.y - time * 0.7), 6 / 2); 40 | st2 = patternize(vec2(st.x, st.y + time), 4 / 2); 41 | st3 = patternize(vec2(st.x + time * 0.3, st.y), 10 / 2); 42 | 43 | st1 -= 0.5; 44 | st1 = st1 * rotate2d(- time * 0.3 * PI); 45 | st1 += 0.5; 46 | 47 | st2 -= 0.5; 48 | st2 = st2 * rotate2d(time * PI); 49 | st2 += 0.5; 50 | 51 | st3 -= 0.5; 52 | st3 = st3 * rotate2d(time * 3.0 * PI); 53 | st3 += 0.5; 54 | 55 | float size1 = abs(sin(time)) * 0.5 + 0.2; 56 | float size2 = abs(cos(time)) * 0.2 + 0.2; 57 | float size3 = 0.3; 58 | color = vec3(box(st1, vec2(size1)), box(st2, vec2(size2)), box(st3, vec2(size3))); 59 | 60 | gl_FragColor = vec4(color, 1.0); 61 | } -------------------------------------------------------------------------------- /pattern/pattern_grid_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#41744.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 14 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 15 | } 16 | 17 | void main( void ) { 18 | vec2 st = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); 19 | 20 | st *= 10.0; 21 | st += time; 22 | 23 | vec2 newSt = fract(st); 24 | 25 | float borderX = step(newSt.x, map(sin(time * 5.0), -1.0, 1.0, 0.2, 0.5)); 26 | float borderY = step(newSt.y, map(sin(time * 5.0), -1.0, 1.0, 0.2, 0.5)); 27 | 28 | vec3 color = vec3(0.2, borderX, borderY); 29 | 30 | gl_FragColor = vec4(color, 1.0); 31 | } -------------------------------------------------------------------------------- /pattern/pattern_invader_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#39897.8 2 | // Forked http://glslsandbox.com/e#39877.0 3 | 4 | #ifdef GL_ES 5 | precision mediump float; 6 | #endif 7 | 8 | #extension GL_OES_standard_derivatives : enable 9 | 10 | uniform float time; 11 | uniform vec2 mouse; 12 | uniform vec2 resolution; 13 | 14 | float random(in vec2 st){ 15 | return fract(sin(dot(st, vec2(12.9898,78.233))) * 43758.5453); 16 | } 17 | 18 | float randomChar(vec2 outer, vec2 inner){ 19 | float grid = 7.0; 20 | vec2 margin = vec2(0.15, 0.15); 21 | vec2 borders = step(margin, inner) * step(margin, 1.0 - inner); 22 | vec2 ipos = floor(inner * grid); 23 | ipos = abs(ipos - vec2(3.0, 0.0)); 24 | 25 | return step(0.5, random(outer * 64.0 + ipos)) * borders.x * borders.y; 26 | } 27 | 28 | void main(){ 29 | vec2 st = gl_FragCoord.st / resolution.xy; 30 | float ratio = resolution.x / resolution.y; 31 | 32 | st.x *= ratio; // Make each shape square. 33 | 34 | float rows = 10.0; // Number of shape. 35 | vec2 fpos = fract(st * rows); // Get decimal number. 36 | 37 | vec3 pct = vec3(1.0); 38 | vec2 chr = vec2(sin(floor(time) * 0.1)); // This effect to the shape. 39 | 40 | pct *= vec3( 41 | randomChar(chr + fract(mouse.x), fpos), 42 | randomChar(chr * 1.0, fpos), 43 | randomChar(chr * 10.0, fpos) 44 | ); 45 | pct *= randomChar(chr + 33.0, fpos); 46 | 47 | gl_FragColor = vec4(vec3(pct), 1.0); 48 | } -------------------------------------------------------------------------------- /pattern/pattern_lattice_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#43448.6 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | const float NUM = 8.0; 13 | 14 | float makeLattice(in vec2 uv, float count) { 15 | float c1 = 0.1; 16 | float cb = -1.0; 17 | float c3 = 0.4; 18 | 19 | uv = fract(uv * count); 20 | uv *= NUM; 21 | 22 | int bx = int(uv.x); 23 | int by = int(uv.y); 24 | 25 | float g = 0.0; 26 | if (by == 0) { 27 | g = (bx == 3 || bx == 5) ? c1 : cb; 28 | } else if (by == 1) { 29 | g = bx == 0 ? cb : bx == 5 ? c1 : c3; 30 | } else if (by==2 || by==6) { 31 | g = (bx == 0 || bx == 2 || bx == 4 || bx == 6) ? cb : (bx == 1 || bx == 7) ? c3 : c1; 32 | } else if (by == 3) { 33 | g = bx==4 ? cb : bx==7 ? c3 : c1; 34 | } else if (by == 4) { 35 | g = (bx==1||bx==7) ? c3 : cb; 36 | } else if (by == 5) { 37 | g = bx==4 ? cb : bx==1 ? c3 : c1; 38 | } else if (by == 7) { 39 | g = bx == 0 ? cb : bx == 3 ? c1 : c3; 40 | } 41 | return g; 42 | } 43 | 44 | vec3 hue(float hue){ 45 | vec3 rgb = fract(hue + vec3(0.0, 0.2, 0.6)); 46 | rgb = abs(rgb * 2.0 - 1.0); // fade 47 | return clamp(rgb, 0.0, 1.0); 48 | } 49 | 50 | mat2 rotate2d(float angle){ 51 | return mat2(cos(angle), -sin(angle), sin(angle), cos(angle)); 52 | } 53 | 54 | void main( void ) { 55 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); 56 | 57 | uv *= rotate2d(time * 0.5); 58 | 59 | float count = 4.0; 60 | float lattices = makeLattice(uv, count); 61 | 62 | vec3 color = vec3(hue(lattices + sin(time * 0.5))); 63 | gl_FragColor = vec4(color, 1.0); 64 | } -------------------------------------------------------------------------------- /pattern/pattern_random_meter_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#40386.0 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | float random (in float x) { 14 | return fract(sin(x) * 1e4); 15 | } 16 | 17 | vec2 patternize(vec2 st, int count) { 18 | vec2 pattern = st * float(count); 19 | return fract(vec2(pattern.x , pattern.y)) +fract(time * random(st.x)); 20 | } 21 | 22 | float box(vec2 _st, vec2 _size){ 23 | _size = vec2(0.5) - _size * 0.5; 24 | vec2 uv = step(_size, _st); 25 | uv *= step(_size, vec2(1.0) - _st); 26 | return uv.x * uv.y; 27 | } 28 | 29 | void main( void ) { 30 | vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 31 | vec3 color; 32 | 33 | st /= vec2(0.3, 1.0); 34 | st = patternize(st, 6 / 2); 35 | 36 | color = vec3(box(st, vec2(0.6)), 0, fract(time)); 37 | 38 | gl_FragColor = vec4(color, 1.0); 39 | } -------------------------------------------------------------------------------- /pattern/pattern_random_meter_2.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#40390.0 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | float random (in float x) { 14 | return fract(sin(x) * 1e4); 15 | } 16 | 17 | float random (in vec2 st) { 18 | return fract(sin(dot(st.xy, vec2(12.9898,78.233)))* 43758.5453123); 19 | } 20 | 21 | float patternize(vec2 st, vec2 v, float t) { 22 | vec2 p = floor(st+v); 23 | return step(t, random(100.+p*.000001)+random(p.x)*0.5); 24 | } 25 | 26 | void main( void ) { 27 | vec2 st = gl_FragCoord.xy / resolution.xy; 28 | st.x *= resolution.x / resolution.y; 29 | vec3 color; 30 | 31 | vec2 ipos = floor(st); 32 | vec2 fpos = fract(st); 33 | 34 | vec2 grid = vec2(100.0, 20.0); 35 | st *= grid; 36 | st /= vec2(1.0, 0.01); 37 | 38 | vec2 vel = vec2(time * max(grid.x, grid.y)); 39 | vel *= vec2(-1.0, 0.0) * random(1.0+ipos.y); 40 | 41 | color = vec3(patternize(st, vel, 0.5), 1.0, 1.0); 42 | 43 | gl_FragColor = vec4(color, 1.0); 44 | } -------------------------------------------------------------------------------- /pattern/pattern_shine_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#40121.0 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | void main( void ) { 14 | vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 15 | vec3 color; 16 | 17 | vec2 newSt = vec2(mod(st, 0.2)) - 0.1; 18 | float f = 1.0 / abs(newSt.x) * abs(newSt.y); 19 | color = vec3(0.0, f * sin(time + st.x * st.y), f); 20 | 21 | gl_FragColor = vec4(color, 1.0); 22 | } -------------------------------------------------------------------------------- /pattern/pattern_tile_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#40648.4 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | vec2 patternize(vec2 st) { 14 | return fract(st); 15 | } 16 | 17 | float box(vec2 _st, vec2 _size){ 18 | _size = vec2(0.5) - _size * 0.5; // Adjust size. 19 | vec2 uv = step(_size, _st); 20 | uv *= step(_size, vec2(1.0) - _st); 21 | return uv.x * uv.y; 22 | } 23 | 24 | void main( void ) { 25 | vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 26 | 27 | int count = 8; 28 | float speed = time * 0.5; 29 | 30 | // Divide by 2 since the origin of display is center(the range of y is -1.0 ~ 1.0) 31 | st *= float(count / 2); 32 | 33 | // Animate 34 | st.x += mod(st.y, 2.0) < 1.0 ? -speed : speed; 35 | 36 | vec3 color = vec3(0.0); 37 | color.r = box(patternize(st), vec2(0.6)); 38 | color.g = box(patternize(st), vec2(0.9)); 39 | color.b = 0.8; 40 | 41 | gl_FragColor = vec4(color, 1.0); 42 | } 43 | -------------------------------------------------------------------------------- /pattern/pattern_tile_2.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#40729.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 14 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 15 | } 16 | 17 | vec2 patternize(vec2 st) { 18 | return fract(st); 19 | } 20 | 21 | float box(vec2 _st, vec2 _size){ 22 | _size = vec2(0.5) - _size * 0.5; // Adjust size. 23 | vec2 uv = step(_size, _st); 24 | uv *= step(_size, vec2(1.0) - _st); 25 | return uv.x * uv.y; 26 | } 27 | 28 | void main( void ) { 29 | vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 30 | 31 | int count = 8; 32 | float speed = time * 0.5; 33 | 34 | // Divide by 2 since the origin of display is center(the range of y is -1.0 ~ 1.0) 35 | st *= float(count / 2); 36 | 37 | // Animate 38 | st.x += mod(st.y, 2.0) < 1.0 ? -speed : speed; 39 | 40 | vec3 color = vec3(0.0); 41 | color.r = box(patternize(st), vec2(map(sin(time * 3.0), -1.0, 1.0, 0.6, 0.9))); 42 | color.g = box(patternize(st), vec2(map(sin(time * 8.0), -1.0, 1.0, 0.9, 1.0))); 43 | color.b = map(sin(time * 8.0), -1.0, 1.0, 0.5, 0.7); 44 | 45 | gl_FragColor = vec4(color, 1.0); 46 | } -------------------------------------------------------------------------------- /pattern/pattern_zigzag_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#44793.1 2 | // https://thebookofshaders.com/edit.php#09/zigzag.frag 3 | 4 | #ifdef GL_ES 5 | precision mediump float; 6 | #endif 7 | 8 | #extension GL_OES_standard_derivatives : enable 9 | 10 | uniform float time; 11 | uniform vec2 mouse; 12 | uniform vec2 resolution; 13 | 14 | #define PI 3.14159265359 15 | #define HALF_PI 1.5707963267948966 16 | 17 | vec2 mirrorTile(vec2 _st, float _zoom) { 18 | _st *= _zoom; 19 | 20 | if (fract(_st.y * 0.5) > 0.5){ 21 | _st.x = _st.x + 0.5; 22 | _st.y = 1.0 - _st.y; 23 | } 24 | 25 | return fract(_st); 26 | } 27 | 28 | float fillY(vec2 _st, float _pct, float _antia) { 29 | return smoothstep(_pct - _antia, _pct, _st.y); 30 | } 31 | 32 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 33 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 34 | } 35 | 36 | float elasticOut(float t) { 37 | return sin(-13.0 * (t + 1.0) * HALF_PI) * pow(2.0, -10.0 * t) + 1.0; 38 | } 39 | 40 | void main( void ) { 41 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) /min(resolution.x, resolution.y); 42 | 43 | uv.y += time * 0.2; 44 | 45 | float vv = elasticOut(map(abs(sin(time * 0.5)), 0.0, 1.0, 0.0, 1.0)); 46 | vec2 s = vec2(vv, 1.0); 47 | float zoom = 5.0; 48 | vec2 tile = mirrorTile(uv * s, zoom); 49 | 50 | float x = tile.x * 2.0; 51 | float a = floor(1.0 + sin(x * PI)); 52 | float b = floor(1.0 + sin((x + 1.0) * PI)); 53 | float f = fract(x); 54 | 55 | float v = fillY(tile, mix(a, b, f), 0.01); 56 | vec3 color = vec3(v, v * 0.5, v); 57 | 58 | gl_FragColor = vec4(color, 1.0); 59 | } -------------------------------------------------------------------------------- /plural_ring/plural_ring_pattern_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#42489.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 resolution; 11 | 12 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 13 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 14 | } 15 | 16 | float random(vec2 uv) { 17 | return fract(sin(dot(uv, vec2(12.9898, 78.233))) * 43758.5453); 18 | } 19 | 20 | float pluralRing(vec2 uv, float interval) { 21 | return sin(length(uv) * interval); 22 | } 23 | 24 | void main( void ) { 25 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); 26 | 27 | vec2 scaledUv = uv * 4.0; 28 | vec2 repeatedUv = fract(scaledUv); 29 | repeatedUv -= 0.5; 30 | 31 | float r = random(floor(scaledUv)); 32 | vec3 color = vec3(0.8 * r, 0.5 * r, 0.8); 33 | 34 | float interval = map(sin(time * r * 6.0), -1.0, 1.0, 10.0, 26.0); 35 | color *= pluralRing(repeatedUv, interval); 36 | 37 | gl_FragColor = vec4(color, 1.0); 38 | } -------------------------------------------------------------------------------- /plural_ring/plural_ring_pattern_2.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#44223.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 14 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 15 | } 16 | 17 | float pluralRing(vec2 uv, float interval) { 18 | return sin(length(uv) * interval); 19 | } 20 | 21 | void main( void ) { 22 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); 23 | vec2 scaledUv = uv * 9.0; 24 | vec2 repeatedUv = fract(scaledUv); 25 | repeatedUv -= 0.5; 26 | 27 | vec2 number = floor(scaledUv); 28 | float interval = map(sin(time * (number.x + number.y + 0.5)), -1.0, 1.0, 10.0, 40.0); 29 | float ring = pluralRing(repeatedUv, interval); 30 | 31 | vec3 color = vec3(ring * 0.4, ring * 0.8, 0.2); 32 | 33 | gl_FragColor = vec4(color, 1.0); 34 | } -------------------------------------------------------------------------------- /random/random_transformation_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#44880.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform vec2 resolution; 10 | uniform float time; 11 | 12 | float random(in vec2 uv){ 13 | return fract(sin(dot(uv, vec2(12.9898,78.233))) * 43758.5453); 14 | } 15 | 16 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 17 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 18 | } 19 | 20 | float particle(vec2 uv, float size) { 21 | return step(size, length(uv)); 22 | } 23 | 24 | float obliqueLline(vec2 uv){ 25 | return step(0.6, fract((uv.x + uv.y + time * 0.8) * 4.0)); 26 | } 27 | 28 | void main( void ) { 29 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); 30 | 31 | vec2 scaledUv = uv * 6.0; 32 | vec2 repeatedUv = fract(scaledUv); 33 | repeatedUv -= 0.5; 34 | 35 | float offset1 = random(floor(scaledUv)) * random(floor(scaledUv)); 36 | float p = particle(repeatedUv, map(cos(time * 3.0 + offset1 * 10.0), -1.0, 1.0, 0.2, 0.6)); 37 | 38 | float offset2 = random(floor(scaledUv)); 39 | vec3 color = vec3(p); 40 | color.r += obliqueLline(repeatedUv); 41 | color.g += particle(repeatedUv, map(sin(time * 6.0 + offset2 * 20.0), -1.0, 1.0, 0.1, 0.8)); 42 | color.rb += max(offset1, offset2); 43 | 44 | gl_FragColor = vec4(color, 1.0); 45 | } 46 | -------------------------------------------------------------------------------- /ray_marching/ray_marching_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#40905.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 14 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 15 | } 16 | 17 | // Easing Function 18 | float exposeInOut(float t) { 19 | if (t == 0.0) { 20 | return 0.0; 21 | 22 | } else if (t == 1.0) { 23 | return 1.0; 24 | 25 | } else if ((t /= 0.5) < 1.0) { 26 | return 0.5 * pow(2.0, 10.0 * (t - 1.0)); 27 | 28 | } else { 29 | return 0.5 * (-pow(2.0, -10.0 * --t) + 2.0); 30 | } 31 | } 32 | 33 | // Fuction to repeat 34 | vec2 repetition(vec2 st) { 35 | return fract(vec2(st)); 36 | } 37 | 38 | // Return distance between the front edge of the ray and sphere 39 | float distanceFunction(vec3 rayPosition, vec3 targetPosition, float size) { 40 | return distance(rayPosition, targetPosition) - size; 41 | } 42 | 43 | // Drop shadow to the sphere 44 | vec3 getNormal(vec3 p, vec3 targetPosition, float size){ 45 | float d = 0.0001; 46 | return normalize(vec3( 47 | distanceFunction(p + vec3( d, 0.0, 0.0), targetPosition, size) - distanceFunction(p + vec3( -d, 0.0, 0.0), targetPosition, size), 48 | distanceFunction(p + vec3(0.0, d, 0.0), targetPosition, size) - distanceFunction(p + vec3(0.0, -d, 0.0), targetPosition, size), 49 | distanceFunction(p + vec3(0.0, 0.0, d), targetPosition, size) - distanceFunction(p + vec3(0.0, 0.0, -d), targetPosition, size) 50 | )); 51 | } 52 | 53 | void main(void){ 54 | vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 55 | 56 | // Repetition 57 | int count = 6; 58 | st *= float(count / 2); 59 | st = repetition(st); 60 | st -= 0.5; 61 | 62 | // camera 63 | vec3 cameraPos = vec3(0.0, 0.0, 3.0); // camera top 64 | vec3 cameraDir = vec3(0.0, 0.0, -1.0); // camera direction 65 | vec3 cameraUp = vec3(0.0, 1.0, 0.0); // up direction for camera 66 | vec3 cameraSide = cross(cameraDir, cameraUp); // calcurate side direction by 外積 67 | float targetDepth = 1.0; // depth for forcus 68 | 69 | // ray 70 | vec3 ray = normalize(cameraSide * st.x + cameraUp * st.y + cameraDir * targetDepth); 71 | float rayLength = 0.0; 72 | vec3 rayPos = cameraPos; 73 | 74 | // sphere 75 | float sphereSize = 1.0; 76 | vec3 spherePos = vec3(0.0, 0.0, 0.0); 77 | 78 | float distance = 0.0; 79 | 80 | vec2 easing = vec2( 81 | map(exposeInOut(cos(time * 1.5)), 0.0, 1.0, -1.0, 1.0), 82 | map(exposeInOut(sin(time * 1.5)), 0.0, 1.0, -1.0, 1.0) 83 | ); 84 | 85 | vec3 lightDir = vec3( 86 | easing.x, 87 | easing.y, 88 | 1.0 89 | ); 90 | 91 | // calcurate distance 92 | for (int i = 0; i < 16; i++) { 93 | distance = distanceFunction(rayPos, spherePos, sphereSize); 94 | rayLength += distance; 95 | rayPos = cameraPos + ray * rayLength; 96 | } 97 | 98 | if (abs(distance) < 0.001) { 99 | vec3 normal = getNormal(rayPos, spherePos, sphereSize); 100 | float diff = clamp(dot(lightDir, normal), 0.1, 1.0); 101 | gl_FragColor = vec4(vec3(diff), 1.0); 102 | 103 | }else{ 104 | gl_FragColor = vec4(vec3(0.0), 1.0); 105 | } 106 | } -------------------------------------------------------------------------------- /ray_marching/ray_marching_10.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | #extension GL_OES_standard_derivatives : enable 6 | 7 | const float EPS = 0.001; 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | struct Camera { 14 | vec3 position; 15 | vec3 direction; 16 | vec3 side; 17 | vec3 top; 18 | float depth; 19 | }; 20 | 21 | struct Ray { 22 | vec3 origin; 23 | vec3 direction; 24 | }; 25 | 26 | Camera createCamera(vec3 position, vec3 direction, float depth) { 27 | Camera cam; 28 | cam.position = position; 29 | cam.direction = direction; 30 | cam.top = vec3(0.0, 1.0, 0.0); 31 | cam.side = cross(cam.direction, cam.top); 32 | cam.depth = depth; 33 | 34 | return cam; 35 | } 36 | 37 | Ray createRay(vec2 position, Camera camera) { 38 | vec3 direction = normalize( 39 | position.x * camera.side 40 | + position.y * camera.top 41 | + camera.direction * camera.depth 42 | ); 43 | 44 | Ray ray; 45 | ray.origin = camera.position; 46 | ray.direction = direction; 47 | 48 | return ray; 49 | } 50 | 51 | mat2 rotate2D(float angle) { 52 | return mat2(cos(angle), sin(angle), -sin(angle), cos(angle)); 53 | } 54 | 55 | float distBox(vec3 p, vec3 width) { 56 | vec3 d = abs(p) - width; 57 | return length(max(d, 0.0)) + min(max(d.x,max(d.y, d.z)), 0.0); 58 | } 59 | 60 | float exposeInOut(float t) { 61 | if (t == 0.0) { 62 | return 0.0; 63 | 64 | } else if (t == 1.0) { 65 | return 1.0; 66 | 67 | } else if ((t /= 0.5) < 1.0) { 68 | return 0.5 * pow(2.0, 10.0 * (t - 1.0)); 69 | 70 | } else { 71 | return 0.5 * (-pow(2.0, -10.0 * --t) + 2.0); 72 | } 73 | } 74 | 75 | float distFunc(vec3 p) { 76 | vec3 _p = p; 77 | _p = mod(p, 2.0) - 1.0; 78 | _p.xz *= rotate2D(floor(time) + exposeInOut(fract(time))); 79 | 80 | vec3 _p2 = p; 81 | _p2.x = 0.5 - 0.4 * sin(time + p.x / 0.8); 82 | _p2.y = 0.8 + 0.4 * cos(time + p.y / 0.8); 83 | _p2.z = 0.4 - 0.8 * sin(time + p.z / 0.8); 84 | 85 | float box1 = distBox(_p, vec3(0.3)); 86 | float box2 = distBox(_p2, vec3(0.8)); 87 | 88 | float dist = max(box1, box2); 89 | 90 | return dist; 91 | } 92 | 93 | 94 | vec3 getNormal(vec3 p){ 95 | return normalize(vec3( 96 | distFunc(p + vec3(EPS, 0.0, 0.0)) - distFunc(p + vec3(-EPS, 0.0, 0.0)), 97 | distFunc(p + vec3(0.0, EPS, 0.0)) - distFunc(p + vec3(0.0, -EPS, 0.0)), 98 | distFunc(p + vec3(0.0, 0.0, EPS)) - distFunc(p + vec3(0.0, 0.0, -EPS)) 99 | )); 100 | } 101 | 102 | vec3 getRayPosition(Ray ray, float rayLen) { 103 | return ray.origin + ray.direction * rayLen; 104 | } 105 | 106 | void main(void) { 107 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 108 | 109 | Camera cam = createCamera( 110 | vec3(0.0, 0.0, -time), 111 | vec3(0.0, 0.0, -1.0), 112 | 1.0 113 | ); 114 | 115 | Ray ray = createRay(uv, cam); 116 | 117 | float rayLen = 0.001; 118 | vec3 rayPosition = getRayPosition(ray, rayLen); 119 | float dist; 120 | bool hit = false; 121 | 122 | for (int i = 0; i < 100; i++) { 123 | dist = distFunc(rayPosition); 124 | rayLen += dist; 125 | rayPosition = getRayPosition(ray, rayLen); 126 | 127 | if (abs(dist) < EPS) { 128 | hit = true; 129 | break; 130 | } 131 | } 132 | 133 | vec3 color = vec3(0.0); 134 | vec3 lightDirection = normalize(vec3(0.5, 0.5, 1.0)); 135 | 136 | if (hit) { 137 | vec3 normal = getNormal(rayPosition); 138 | float diff = clamp(dot(lightDirection, normal), 0.1, 1.0); 139 | color = vec3(0.0, 0.4, 0.8) * diff; 140 | } else { 141 | color = vec3(0.0, 0.0, 0.0); 142 | } 143 | 144 | vec3 backgroudColor = vec3(0.8, 0.1, 0.8); 145 | color = mix(backgroudColor, color, exp(-0.1 * rayLen)); 146 | 147 | gl_FragColor = vec4(color, 1.0); 148 | } -------------------------------------------------------------------------------- /ray_marching/ray_marching_11_ring.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | #extension GL_OES_standard_derivatives : enable 6 | 7 | #define EPS 0.0001 8 | 9 | uniform float time; 10 | uniform vec2 resolution; 11 | 12 | float radiusOffset = 1.8; 13 | 14 | struct Camera { 15 | vec3 position; 16 | vec3 direction; 17 | vec3 top; 18 | vec3 side; 19 | float depth; 20 | }; 21 | 22 | struct Ray { 23 | vec3 origin; 24 | vec3 direction; 25 | }; 26 | 27 | Camera createCamera(vec3 position, vec3 direction, float depth) { 28 | Camera cam; 29 | cam.position = position; 30 | cam.direction = direction; 31 | cam.top = vec3(0.0, 1.0, 0.0); 32 | cam.side = normalize(cross(cam.direction, cam.top)); 33 | cam.depth = depth; 34 | return cam; 35 | } 36 | 37 | Ray createRay(vec2 uv, Camera cam) { 38 | vec3 dir = normalize( 39 | uv.x * cam.side 40 | + uv.y * cam.top 41 | + cam.direction * cam.depth 42 | ); 43 | Ray ray; 44 | ray.direction = dir; 45 | ray.origin = cam.position; 46 | return ray; 47 | } 48 | 49 | mat2 rotate2D(float angle) { 50 | return mat2(cos(angle), sin(angle), -sin(angle), cos(angle)); 51 | } 52 | 53 | float distBox(vec3 p, vec3 width) { 54 | vec3 d = abs(p) - width; 55 | return length(max(d, 0.0)) + min(max(d.x,max(d.y, d.z)), 0.0); 56 | } 57 | 58 | float sdCappedCylinder( vec3 p, vec2 h ) { 59 | vec2 d = abs(vec2(length(p.xz),p.y)) - h; 60 | return min(max(d.x,d.y),0.0) + length(max(d,0.0)); 61 | } 62 | 63 | float distFunc(vec3 p) { 64 | vec3 v = mod(p, radiusOffset) - radiusOffset / 2.0; 65 | v.yz *= rotate2D(radians(90.0)); 66 | 67 | float vvv = floor(v.y) * 2.0 - 1.0; 68 | 69 | float s = (sin(time) + 1.0) / 2.0 * 0.2 * vvv; 70 | float c1 = sdCappedCylinder(v, vec2(0.8 + s, 0.05)); 71 | float c2 = sdCappedCylinder(v, vec2(0.7 + s, 0.055)); 72 | 73 | float dist = max(c1, -c2); 74 | 75 | return dist; 76 | } 77 | 78 | vec3 getRayPosition(Ray ray, float rayLen) { 79 | return ray.origin + ray.direction * rayLen; 80 | } 81 | 82 | vec3 getNormal(vec3 p) { 83 | return normalize(vec3( 84 | distFunc(p + vec3(EPS, 0.0, 0.0)) - distFunc(p + vec3(-EPS, 0.0, 0.0)), 85 | distFunc(p + vec3(0.0, EPS, 0.0)) - distFunc(p + vec3(0.0, -EPS, 0.0)), 86 | distFunc(p + vec3(0.0, 0.0, EPS)) - distFunc(p + vec3(0.0, 0.0, -EPS)) 87 | )); 88 | } 89 | 90 | void main( void ) { 91 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); 92 | 93 | uv *= rotate2D(time * 0.2); 94 | 95 | Camera cam = createCamera( 96 | vec3(radiusOffset / 2.0, radiusOffset / 2.0, -time * 1.0), 97 | vec3(0.0, 0.0, -1.0), 98 | 1.0 99 | ); 100 | 101 | Ray ray = createRay(uv, cam); 102 | 103 | float rayLen = 0.01; 104 | float dist; 105 | vec3 rayPosition = getRayPosition(ray, rayLen); 106 | bool hit = false; 107 | 108 | for (int i = 0; i < 64; i++) { 109 | dist = distFunc(rayPosition); 110 | rayLen += dist; 111 | rayPosition = getRayPosition(ray, rayLen); 112 | 113 | if (abs(dist) < EPS) { 114 | hit = true; 115 | break; 116 | } 117 | } 118 | 119 | vec3 color = vec3(rayPosition); 120 | vec3 lightDir = normalize(vec3(0.8, 0.8, 1.0)); 121 | 122 | if (hit) { 123 | vec3 normal = getNormal(rayPosition); 124 | float diff = clamp(dot(lightDir, normal), 0.1, 1.0); 125 | color = vec3(0.0, 0.0, 0.9) * diff; 126 | } else { 127 | color = vec3(0.8, 0.8, 0.9); 128 | } 129 | 130 | vec3 backgroundColor = vec3(0.1); 131 | color = mix(backgroundColor, color, exp(-0.1 * rayLen)); 132 | 133 | gl_FragColor = vec4(color, 1.0); 134 | } -------------------------------------------------------------------------------- /ray_marching/ray_marching_2.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#40988.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | float random(in vec2 st){ 14 | return fract(sin(dot(st, vec2(12.9898,78.233))) * 43758.5453); 15 | } 16 | 17 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 18 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 19 | } 20 | 21 | // Easing Function 22 | float exposeInOut(float t) { 23 | if (t == 0.0) { 24 | return 0.0; 25 | 26 | } else if (t == 1.0) { 27 | return 1.0; 28 | 29 | } else if ((t /= 0.5) < 1.0) { 30 | return 0.5 * pow(2.0, 10.0 * (t - 1.0)); 31 | 32 | } else { 33 | return 0.5 * (-pow(2.0, -10.0 * --t) + 2.0); 34 | } 35 | } 36 | 37 | // Fuction to repeat 38 | vec3 repetition(vec3 p) { 39 | return mod(p, 5.0) - 2.5; 40 | } 41 | 42 | // Return distance between the front edge of the ray and sphere 43 | float distanceFunction(vec3 rayPosition, vec3 targetPosition, float size) { 44 | return distance(repetition(rayPosition), targetPosition) - size; 45 | } 46 | 47 | // Drop shadow to the sphere 48 | vec3 getNormal(vec3 p, vec3 targetPosition, float size){ 49 | float d = 0.0001; 50 | return normalize(vec3( 51 | distanceFunction(p + vec3( d, 0.0, 0.0), targetPosition, size) - distanceFunction(p + vec3( -d, 0.0, 0.0), targetPosition, size), 52 | distanceFunction(p + vec3(0.0, d, 0.0), targetPosition, size) - distanceFunction(p + vec3(0.0, -d, 0.0), targetPosition, size), 53 | distanceFunction(p + vec3(0.0, 0.0, d), targetPosition, size) - distanceFunction(p + vec3(0.0, 0.0, -d), targetPosition, size) 54 | )); 55 | } 56 | 57 | void main(void){ 58 | vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 59 | 60 | // camera 61 | vec3 cameraPos = vec3(time, 0.0, time); // camera top 62 | vec3 cameraDir = vec3(0.0, 0.0, -1.0); // camera direction 63 | vec3 cameraUp = vec3(0.0, 1.0, 0.0); // up direction for camera 64 | vec3 cameraSide = cross(cameraDir, cameraUp); // calcurate side direction by 外積 65 | float targetDepth = 1.0; // depth for forcus 66 | 67 | // ray 68 | vec3 ray = normalize(cameraSide * st.x + cameraUp * st.y + cameraDir * targetDepth); 69 | float rayLength = 0.0; 70 | vec3 rayPos = cameraPos; 71 | 72 | // sphere 73 | float sphereSize = 1.0; 74 | vec3 spherePos = vec3(0.0, 0.0, 0.0); 75 | 76 | float distance = 0.0; 77 | 78 | vec2 easing = vec2( 79 | map(exposeInOut(cos(time * 1.5)), 0.0, 1.0, -1.0, 1.0), 80 | map(exposeInOut(sin(time * 1.5)), 0.0, 1.0, -1.0, 1.0) 81 | ); 82 | 83 | vec3 lightDir = vec3( 84 | easing.x, 85 | easing.y, 86 | 1.0 87 | ); 88 | 89 | // calcurate distance 90 | for (int i = 0; i < 96; i++) { 91 | distance = distanceFunction(rayPos, spherePos, sphereSize); 92 | rayLength += distance; 93 | rayPos = cameraPos + ray * rayLength; 94 | } 95 | 96 | if (abs(distance) < 0.001) { 97 | vec3 normal = getNormal(rayPos, spherePos, sphereSize) + sin(time * 10.0 * fract(st.x + st.y)); 98 | float diff = clamp(dot(lightDir , normal), 0.1, 1.0); 99 | vec3 color = vec3( 100 | normal.x, 101 | diff, 102 | diff 103 | ); 104 | gl_FragColor = vec4(color, 1.0); 105 | 106 | }else{ 107 | gl_FragColor = vec4(vec3(0.1), 1.0); 108 | } 109 | } -------------------------------------------------------------------------------- /ray_marching/ray_marching_3.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#41002.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | const float EPS = 0.0001; 10 | 11 | uniform float time; 12 | uniform vec2 mouse; 13 | uniform vec2 resolution; 14 | 15 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 16 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 17 | } 18 | 19 | vec3 repetition(vec3 ray, float offset) { 20 | return mod(ray, offset) - offset / 2.0; 21 | } 22 | 23 | vec2 repetition(vec2 st) { 24 | return fract(vec2(st)); 25 | } 26 | 27 | float sphereDist(vec3 ray, vec3 target, float size) { 28 | return length(target - ray) - size; 29 | } 30 | 31 | float boxDist(vec3 ray, vec3 size, float round) { 32 | return length(max(abs(ray) - size, 0.0)) - round; 33 | } 34 | 35 | //Draw box and sphere 36 | float sceneDist(vec3 ray) { 37 | vec3 repeatedRay = repetition(ray, 6.0); 38 | float boxDist = boxDist(repeatedRay, vec3(map(sin(time * 5.0), -1.0, 1.0, 0.3, 0.2), map(sin(time * 5.0), -1.0, 1.0, 0.6, 0.9), 0.1), 0.1); 39 | float sphereDist = sphereDist(repeatedRay, vec3(0.0), 0.6); 40 | 41 | return min( 42 | boxDist, 43 | sphereDist 44 | ); 45 | } 46 | 47 | vec3 getNormal(vec3 p){ 48 | return normalize(vec3( 49 | sceneDist(p + vec3(EPS, 0.0, 0.0)) - sceneDist(p + vec3(-EPS, 0.0, 0.0)), 50 | sceneDist(p + vec3(0.0, EPS, 0.0)) - sceneDist(p + vec3(0.0, -EPS, 0.0)), 51 | sceneDist(p + vec3(0.0, 0.0, EPS)) - sceneDist(p + vec3(0.0, 0.0, -EPS)) 52 | )); 53 | } 54 | 55 | void main( void ) { 56 | vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 57 | 58 | vec3 cameraPosition = vec3(0.0, mouse.y * 2.0 - 1.0, -time * 3.0); 59 | vec3 cameraDirection = vec3(0.0, 0.0, -1.0); 60 | vec3 cameraUp = vec3(0.0, 1.0, 0.0); 61 | vec3 cameraSide = cross(cameraDirection, cameraUp); 62 | float targetDepth = 1.0; 63 | 64 | vec3 ray = normalize(cameraSide * st.x + cameraUp * st.y + cameraDirection * targetDepth); 65 | 66 | vec3 rayPosition = cameraPosition; 67 | float distance = 0.0; 68 | float currentRayLength = 0.0; 69 | bool hit = false; 70 | 71 | vec3 lightDirection = vec3(cameraPosition.xy, 0.7); 72 | 73 | for (int i = 0; i < 16; i++) { 74 | distance = sceneDist(rayPosition); 75 | currentRayLength += distance; 76 | rayPosition = cameraPosition + ray * currentRayLength; 77 | 78 | if (abs(distance) < EPS) { 79 | hit = true; 80 | break; 81 | } 82 | } 83 | 84 | if (hit) { 85 | vec3 normal = getNormal(rayPosition); 86 | float diff = clamp(dot(lightDirection, normal), 0.1, 1.0); 87 | gl_FragColor = vec4(vec3(diff, sin(time) + 1.0 / 2.0, 0.0), 1.0); 88 | 89 | } else { 90 | gl_FragColor = vec4(vec3(0.12), 1.0); 91 | } 92 | } -------------------------------------------------------------------------------- /ray_marching/ray_marching_4.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#41022.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | const float EPS = 0.0001; 10 | 11 | uniform float time; 12 | uniform vec2 mouse; 13 | uniform vec2 resolution; 14 | 15 | float exposeInOut(float t) { 16 | if (t == 0.0) { 17 | return 0.0; 18 | 19 | } else if (t == 1.0) { 20 | return 1.0; 21 | 22 | } else if ((t /= 0.5) < 1.0) { 23 | return 0.5 * pow(2.0, 10.0 * (t - 1.0)); 24 | 25 | } else { 26 | return 0.5 * (-pow(2.0, -10.0 * --t) + 2.0); 27 | } 28 | } 29 | 30 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 31 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 32 | } 33 | 34 | vec3 repetition(vec3 ray, float offset) { 35 | vec3 repeatedRay = mod(ray, offset) - offset / 2.0; 36 | return vec3(repeatedRay.x, ray.y, repeatedRay.z); 37 | } 38 | 39 | vec2 repetition(vec2 st) { 40 | return fract(vec2(st)); 41 | } 42 | 43 | float sphereDist(vec3 ray, vec3 target, float size) { 44 | return length(target - ray) - size; 45 | } 46 | 47 | float boxDist(vec3 ray, vec3 size, float round) { 48 | return length(max(abs(ray) - size, 0.0)) - round; 49 | } 50 | 51 | //Draw box and sphere 52 | float sceneDist(vec3 ray) { 53 | vec3 repeatedRay = repetition(ray, 4.0); 54 | float boxDistance = boxDist(repeatedRay, vec3(0.5, 0.9, 0.0), 0.1); 55 | 56 | // left hole 57 | float sphereDistance = sphereDist(repeatedRay, vec3(-0.2,0.6, 0.0), 0.15); 58 | float sphereDistance2 = sphereDist(repeatedRay, vec3(-0.2,0.0, 0.0), 0.15); 59 | float sphereDistance3 = sphereDist(repeatedRay, vec3(-0.2,-0.6, 0.0), 0.15); 60 | // right hole 61 | float sphereDistance4 = sphereDist(repeatedRay, vec3(0.2,0.6, 0.0), 0.15); 62 | float sphereDistance5 = sphereDist(repeatedRay, vec3(0.2,0.0, 0.0), 0.15); 63 | float sphereDistance6 = sphereDist(repeatedRay, vec3(0.2,-0.6, 0.0), 0.15); 64 | 65 | float result = max(boxDistance, -sphereDistance); 66 | result = max(result,- sphereDistance2); 67 | result = max(result,- sphereDistance3); 68 | result = max(result,- sphereDistance4); 69 | result = max(result,- sphereDistance5); 70 | result = max(result,- sphereDistance6); 71 | 72 | return result; 73 | } 74 | 75 | vec3 getNormal(vec3 p){ 76 | return normalize(vec3( 77 | sceneDist(p + vec3(EPS, 0.0, 0.0)) - sceneDist(p + vec3(-EPS, 0.0, 0.0)), 78 | sceneDist(p + vec3(0.0, EPS, 0.0)) - sceneDist(p + vec3(0.0, -EPS, 0.0)), 79 | sceneDist(p + vec3(0.0, 0.0, EPS)) - sceneDist(p + vec3(0.0, 0.0, -EPS)) 80 | )); 81 | } 82 | 83 | void main( void ) { 84 | vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 85 | 86 | float t = time * 1.5; 87 | float step = 2.0; 88 | float easing = exposeInOut(fract(t)); 89 | float speed = (floor(t) + easing) * step; 90 | 91 | vec3 cameraPosition = vec3(speed, mouse.y * 2.0 - 1.0, 0.0); 92 | vec3 cameraDirection = vec3(0.0, 0.0, -1.0); 93 | vec3 cameraUp = vec3(0.0, 1.0, 0.0); 94 | vec3 cameraSide = cross(cameraDirection, cameraUp); 95 | float targetDepth = 1.0; 96 | 97 | vec3 ray = normalize(cameraSide * st.x + cameraUp * st.y + cameraDirection * targetDepth); 98 | 99 | vec3 rayPosition = cameraPosition; 100 | float distance = 0.0; 101 | float currentRayLength = 0.0; 102 | bool hit = false; 103 | 104 | vec3 lightDirection = vec3(cameraPosition.xy, 0.7); 105 | 106 | for (int i = 0; i < 26; i++) { 107 | distance = sceneDist(rayPosition); 108 | currentRayLength += distance; 109 | rayPosition = cameraPosition + ray * currentRayLength; 110 | 111 | if (abs(distance) < EPS) { 112 | hit = true; 113 | break; 114 | } 115 | } 116 | 117 | if (hit) { 118 | vec3 normal = getNormal(rayPosition); 119 | float diff = clamp(dot(lightDirection, normal), 0.1, 1.0); 120 | gl_FragColor = vec4(vec3(0.8, 0.7, 0.0), 1.0); 121 | 122 | } else { 123 | gl_FragColor = vec4(vec3(0.12), 1.0); 124 | } 125 | } -------------------------------------------------------------------------------- /ray_marching/ray_marching_5.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#41099.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | const float EPS = 0.0001; 10 | 11 | uniform float time; 12 | uniform vec2 mouse; 13 | uniform vec2 resolution; 14 | 15 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 16 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 17 | } 18 | 19 | vec3 repetition(vec3 ray, float offset) { 20 | vec3 repeatedRay = mod(ray, offset) - offset / 2.0; 21 | return vec3(repeatedRay.x, repeatedRay.y, repeatedRay.z); 22 | } 23 | 24 | float barDist(vec2 st, float width) { 25 | return length(max(abs(st) - width, 0.0)); 26 | } 27 | 28 | float sceneDist(vec3 ray) { 29 | vec3 repeatedRay = repetition(ray, 1.0); 30 | 31 | float barDistance = barDist(repeatedRay.yz, 0.1); 32 | float barDistance2 = barDist(repeatedRay.xz, 0.1); 33 | 34 | float result = min(barDistance, barDistance2); 35 | 36 | return result; 37 | } 38 | 39 | vec3 getNormal(vec3 p){ 40 | return normalize(vec3( 41 | sceneDist(p + vec3(EPS, 0.0, 0.0)) - sceneDist(p + vec3(-EPS, 0.0, 0.0)), 42 | sceneDist(p + vec3(0.0, EPS, 0.0)) - sceneDist(p + vec3(0.0, -EPS, 0.0)), 43 | sceneDist(p + vec3(0.0, 0.0, EPS)) - sceneDist(p + vec3(0.0, 0.0, -EPS)) 44 | )); 45 | } 46 | 47 | void main( void ) { 48 | vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 49 | 50 | vec3 cameraPosition = vec3(0.0, mouse.y - 0.5, -time); 51 | vec3 cameraDirection = vec3(0.0, 0.0, -4.0); 52 | vec3 cameraUp = vec3(0.0, 1.0, 0.0); 53 | vec3 cameraSide = cross(cameraDirection, cameraUp); 54 | float targetDepth = 1.0; 55 | 56 | vec3 ray = normalize(cameraSide * st.x + cameraUp * st.y + cameraDirection * targetDepth); 57 | 58 | vec3 rayPosition = cameraPosition; 59 | float distance = 0.0; 60 | float currentRayLength = 0.0; 61 | bool hit = false; 62 | 63 | vec3 lightDirection = normalize(vec3(1.0, 1.0, -2.0)); 64 | 65 | for (int i = 0; i < 164; i++) { 66 | distance = sceneDist(rayPosition); 67 | currentRayLength += distance; 68 | rayPosition = cameraPosition + ray * currentRayLength; 69 | 70 | if (abs(distance) < EPS) { 71 | hit = true; 72 | break; 73 | } 74 | } 75 | 76 | vec3 color; 77 | 78 | if (hit) { 79 | vec3 normal = getNormal(rayPosition); 80 | float diff = clamp(dot(lightDirection, normal), 0.1, 1.0); 81 | color = vec3(0.0, 1.0, map(sin(time), -1.0, 1.0, 0.4, 1.0)) * diff; 82 | 83 | } else { 84 | color = vec3(0.12); 85 | } 86 | 87 | gl_FragColor = vec4(color + 0.05 * currentRayLength, 1.0); 88 | } -------------------------------------------------------------------------------- /ray_marching/ray_marching_6.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#41123.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | const float EPS = 0.0001; 10 | 11 | uniform float time; 12 | uniform vec2 mouse; 13 | uniform vec2 resolution; 14 | 15 | float exposeInOut(float t) { 16 | if (t == 0.0) { 17 | return 0.0; 18 | 19 | } else if (t == 1.0) { 20 | return 1.0; 21 | 22 | } else if ((t /= 0.5) < 1.0) { 23 | return 0.5 * pow(2.0, 10.0 * (t - 1.0)); 24 | 25 | } else { 26 | return 0.5 * (-pow(2.0, -10.0 * --t) + 2.0); 27 | } 28 | } 29 | 30 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 31 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 32 | } 33 | 34 | vec3 repetition(vec3 ray, float offset) { 35 | vec3 repeatedRay = mod(ray, offset) - offset / 2.0; 36 | return vec3(repeatedRay.x, repeatedRay.y, repeatedRay.z); 37 | } 38 | 39 | float barDist(vec2 st, float width) { 40 | return length(max(abs(st) - width, 0.0)); 41 | } 42 | 43 | float sceneDist(vec3 ray) { 44 | vec3 repeatedRay1 = repetition(ray, 1.0); 45 | vec3 repeatedRay2 = repetition(ray, 1.0); 46 | 47 | float barDistance = barDist(repeatedRay1.yz, 0.1); 48 | float barDistance2 = barDist(repeatedRay2.xz, 0.1); 49 | 50 | float result = min(barDistance, barDistance2); 51 | 52 | return result; 53 | } 54 | 55 | vec3 getNormal(vec3 p){ 56 | return normalize(vec3( 57 | sceneDist(p + vec3(EPS, 0.0, 0.0)) - sceneDist(p + vec3(-EPS, 0.0, 0.0)), 58 | sceneDist(p + vec3(0.0, EPS, 0.0)) - sceneDist(p + vec3(0.0, -EPS, 0.0)), 59 | sceneDist(p + vec3(0.0, 0.0, EPS)) - sceneDist(p + vec3(0.0, 0.0, -EPS)) 60 | )); 61 | } 62 | 63 | void main( void ) { 64 | vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 65 | 66 | float t = time * 0.5; 67 | float step = 1.0; 68 | float easing = exposeInOut(fract(t)); 69 | float speed = (floor(t) + easing) * step; 70 | 71 | vec3 cameraPosition = vec3(speed, 0.0, -time); 72 | vec3 cameraDirection = vec3(0.0, 0.0, -1.0); 73 | vec3 cameraUp = vec3(0.0, 1.0, 0.0); 74 | vec3 cameraSide = cross(cameraDirection, cameraUp); 75 | float targetDepth = 1.0; 76 | 77 | vec3 ray = normalize(cameraSide * st.x + cameraUp * st.y + cameraDirection * targetDepth); 78 | 79 | vec3 rayPosition = cameraPosition; 80 | float distance = 0.0; 81 | float currentRayLength = 0.0; 82 | bool hit = false; 83 | 84 | vec3 lightDirection = normalize(vec3(1.0, 1.0, -2.0)); 85 | 86 | for (int i = 0; i < 164; i++) { 87 | distance = sceneDist(rayPosition); 88 | currentRayLength += distance; 89 | rayPosition = cameraPosition + ray * currentRayLength; 90 | 91 | if (abs(distance) < EPS) { 92 | hit = true; 93 | break; 94 | } 95 | } 96 | 97 | vec3 color; 98 | 99 | if (hit) { 100 | vec3 normal = getNormal(rayPosition); 101 | float diff = clamp(dot(lightDirection, normal), 0.1, 1.0); 102 | color = vec3(0, 1.0, map(sin(time), -1.0, 1.0, 1.0, 8.0)) * diff ; 103 | 104 | } else { 105 | color = vec3(0.12); 106 | } 107 | 108 | gl_FragColor = vec4(color + 0.05 * currentRayLength, 1.0); 109 | } -------------------------------------------------------------------------------- /ray_marching/ray_marching_7.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#41640.2 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | const float EPS = 0.0001; 10 | 11 | uniform float time; 12 | uniform vec2 mouse; 13 | uniform vec2 resolution; 14 | 15 | float exposeInOut(float t) { 16 | if (t == 0.0) { 17 | return 0.0; 18 | 19 | } else if (t == 1.0) { 20 | return 1.0; 21 | 22 | } else if ((t /= 0.5) < 1.0) { 23 | return 0.5 * pow(2.0, 10.0 * (t - 1.0)); 24 | 25 | } else { 26 | return 0.5 * (-pow(2.0, -10.0 * --t) + 2.0); 27 | } 28 | } 29 | 30 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 31 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 32 | } 33 | 34 | mat2 rotate2d(float _angle){ 35 | return mat2(cos(_angle), -sin(_angle), sin(_angle), cos(_angle)); 36 | } 37 | 38 | vec3 repetition(vec3 ray, float offset) { 39 | vec3 repeatedRay = mod(ray, offset) - offset / 2.0; 40 | return vec3(repeatedRay.x, repeatedRay.y, ray.z); 41 | } 42 | 43 | float barDist(vec2 st, float width) { 44 | return length(max(abs(st) - width, 0.0)); 45 | } 46 | 47 | float sceneDist(vec3 ray) { 48 | vec3 repeatedRay1 = repetition(ray, 0.8); 49 | vec3 repeatedRay2 = repetition(ray, 0.8); 50 | 51 | float t = time * 1.0; 52 | float step = 1.0; 53 | float easing = exposeInOut(fract(t)); 54 | float speed = (floor(t) + easing) * step; 55 | 56 | // Rotate each item. 57 | repeatedRay1 = vec3(repeatedRay1.xy * rotate2d(speed), repeatedRay1.z); 58 | repeatedRay2 = vec3(repeatedRay2.xy * rotate2d(speed), repeatedRay2.z); 59 | 60 | float barDistance1 = barDist(repeatedRay1.xz , 0.15); 61 | float barDistance2 = barDist(repeatedRay2.yz, 0.15); 62 | 63 | // Make multiple pole. 64 | float result = max(barDistance1, barDistance2); 65 | 66 | return result; 67 | } 68 | 69 | vec3 getNormal(vec3 p){ 70 | return normalize(vec3( 71 | sceneDist(p + vec3(EPS, 0.0, 0.0)) - sceneDist(p + vec3(-EPS, 0.0, 0.0)), 72 | sceneDist(p + vec3(0.0, EPS, 0.0)) - sceneDist(p + vec3(0.0, -EPS, 0.0)), 73 | sceneDist(p + vec3(0.0, 0.0, EPS)) - sceneDist(p + vec3(0.0, 0.0, -EPS)) 74 | )); 75 | } 76 | 77 | void main( void ) { 78 | vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 79 | 80 | st *= rotate2d(time * 0.1); 81 | 82 | vec3 cameraPosition = vec3(0.0, 0.0, 1.0); 83 | vec3 cameraDirection = vec3(0.0, 0.0, -1.0); 84 | vec3 cameraUp = vec3(0.0, 1.0, 0.0); 85 | vec3 cameraSide = cross(cameraDirection, cameraUp); 86 | float targetDepth = 0.3; 87 | 88 | vec3 ray = normalize(cameraSide * st.x + cameraUp * st.y + cameraDirection * targetDepth); 89 | 90 | vec3 rayPosition = cameraPosition; 91 | float distance = 0.0; 92 | float currentRayLength = 0.0; 93 | bool hit = false; 94 | 95 | vec3 lightDirection = normalize(vec3(0.5, 0.5, 1.0)); 96 | 97 | for (int i = 0; i < 100; i++) { 98 | distance = sceneDist(rayPosition); 99 | currentRayLength += distance; 100 | rayPosition = cameraPosition + ray * currentRayLength; 101 | 102 | if (abs(distance) < EPS) { 103 | hit = true; 104 | break; 105 | } 106 | } 107 | 108 | vec3 color = vec3(0.0); 109 | 110 | if (hit) { 111 | vec3 normal = getNormal(rayPosition); 112 | float diff = clamp(dot(lightDirection, normal), 0.1, 1.0); 113 | color = vec3(1.0, 0.0, 0.4) * diff ; 114 | 115 | } else { 116 | color = vec3(1.0); 117 | } 118 | 119 | gl_FragColor = vec4(color + 0.05 * currentRayLength, 1.0); 120 | } -------------------------------------------------------------------------------- /ray_marching/ray_marching_8_rotate_box.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#42386.3 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | const float EPS = 0.0001; 14 | const float PI = 3.14159265358979323844; 15 | 16 | float box(vec3 p) { 17 | return length(max(abs(p) - vec3(1.0), 0.0)); 18 | } 19 | 20 | float sceneDist(vec3 ray) { 21 | return box(ray); 22 | } 23 | 24 | vec3 getNormal(vec3 p){ 25 | return normalize(vec3( 26 | sceneDist(p + vec3(EPS, 0.0, 0.0)) - sceneDist(p + vec3(-EPS, 0.0, 0.0)), 27 | sceneDist(p + vec3(0.0, EPS, 0.0)) - sceneDist(p + vec3(0.0, -EPS, 0.0)), 28 | sceneDist(p + vec3(0.0, 0.0, EPS)) - sceneDist(p + vec3(0.0, 0.0, -EPS)) 29 | )); 30 | } 31 | 32 | // Referred from http://glslsandbox.com/e#42286.0 33 | mat3 camera(vec3 cameraPosition, vec3 la) { 34 | vec3 roll = vec3(0, 1, 0); 35 | vec3 f = normalize(la - cameraPosition); 36 | vec3 r = normalize(cross(roll, f)); 37 | vec3 u = normalize(cross(f, r)); 38 | 39 | return mat3(r, u, f); 40 | } 41 | 42 | void main( void ) { 43 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy ) / min(resolution.x, resolution.y); 44 | 45 | // Repetition. 46 | uv *= 3.0; 47 | uv = fract(uv); 48 | uv -= 0.5; // Move box axis to center. 49 | 50 | float speed = time * 0.35; 51 | float angle = speed * 2.0 * PI; 52 | float scale = 8.0; 53 | vec3 cameraPosition = scale * vec3(cos(angle), 0.5, -sin(angle)); 54 | vec3 ray = camera(cameraPosition, vec3(0.0, 0.0, 0.0)) * normalize(vec3(uv, 2.0)); // Rotate box. 55 | 56 | uv += 0.5; 57 | 58 | vec3 rayPosition = cameraPosition; 59 | float distance = 0.0; 60 | float currentRayLength = 0.0; 61 | bool hit = false; 62 | 63 | for (int i = 0; i < 100; i++) { 64 | distance = sceneDist(rayPosition); 65 | currentRayLength += distance; 66 | rayPosition = cameraPosition + ray * currentRayLength; 67 | 68 | if (abs(distance) < EPS) { 69 | hit = true; 70 | break; 71 | } 72 | } 73 | 74 | vec3 color = vec3(0.0); 75 | vec3 lightDirection = normalize(vec3(1.0, 1.0, -2.0)); 76 | 77 | if (hit) { 78 | vec3 normal = getNormal(rayPosition); 79 | float diff = clamp(dot(lightDirection, normal), 0.2, 1.0); 80 | color = vec3(1.0, 0.0, 1.0) * diff ; 81 | 82 | } else { 83 | color = vec3(0.1); 84 | } 85 | 86 | gl_FragColor = vec4(color, 1.0); 87 | } -------------------------------------------------------------------------------- /ray_marching/ray_marching_8_rotate_box_2.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#42388.2 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | const float EPS = 0.0001; 14 | const float PI = 3.14159265358979323844; 15 | 16 | float exposeInOut(float t) { 17 | if (t == 0.0) { 18 | return 0.0; 19 | 20 | } else if (t == 1.0) { 21 | return 1.0; 22 | 23 | } else if ((t /= 0.5) < 1.0) { 24 | return 0.5 * pow(2.0, 10.0 * (t - 1.0)); 25 | 26 | } else { 27 | return 0.5 * (-pow(2.0, -10.0 * --t) + 2.0); 28 | } 29 | } 30 | 31 | float box(vec3 p) { 32 | return length(max(abs(p) - vec3(1.0), 0.0)); 33 | } 34 | 35 | float sceneDist(vec3 ray) { 36 | return box(ray); 37 | } 38 | 39 | vec3 getNormal(vec3 p){ 40 | return normalize(vec3( 41 | sceneDist(p + vec3(EPS, 0.0, 0.0)) - sceneDist(p + vec3(-EPS, 0.0, 0.0)), 42 | sceneDist(p + vec3(0.0, EPS, 0.0)) - sceneDist(p + vec3(0.0, -EPS, 0.0)), 43 | sceneDist(p + vec3(0.0, 0.0, EPS)) - sceneDist(p + vec3(0.0, 0.0, -EPS)) 44 | )); 45 | } 46 | 47 | // Referred from http://glslsandbox.com/e#42286.0 48 | mat3 camera(vec3 cameraPosition, vec3 la) { 49 | vec3 roll = vec3(0, 1, 0); 50 | vec3 f = normalize(la - cameraPosition); 51 | vec3 r = normalize(cross(roll, f)); 52 | vec3 u = normalize(cross(f, r)); 53 | 54 | return mat3(r, u, f); 55 | } 56 | 57 | void main( void ) { 58 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy ) / min(resolution.x, resolution.y); 59 | 60 | float count = 3.0; 61 | // Repetition. 62 | vec2 scaleUv = uv * count; 63 | uv = fract(scaleUv); 64 | uv -= 0.5; // Move box axis to center. 65 | 66 | float easing = exposeInOut(fract(time + (floor(scaleUv.y) + count) / count)); 67 | float speed = easing; 68 | 69 | float angle = speed * 2.0 * PI; 70 | float scale = 8.0; 71 | vec3 cameraPosition = scale * vec3(cos(angle), 0.5, -sin(angle)); 72 | vec3 ray = camera(cameraPosition, vec3(0.0, 0.0, 0.0)) * normalize(vec3(uv, 2.0)); // Rotate box. 73 | 74 | uv += 0.5; 75 | 76 | vec3 rayPosition = cameraPosition; 77 | float distance = 0.0; 78 | float currentRayLength = 0.0; 79 | bool hit = false; 80 | 81 | for (int i = 0; i < 100; i++) { 82 | distance = sceneDist(rayPosition); 83 | currentRayLength += distance; 84 | rayPosition = cameraPosition + ray * currentRayLength; 85 | 86 | if (abs(distance) < EPS) { 87 | hit = true; 88 | break; 89 | } 90 | } 91 | 92 | vec3 color = vec3(0.0); 93 | vec3 lightDirection = normalize(vec3(1.0, 1.0, -2.0)); 94 | 95 | if (hit) { 96 | vec3 normal = getNormal(rayPosition); 97 | float diff = clamp(dot(lightDirection, normal), 0.2, 1.0); 98 | color = vec3(1.0, 0.0, sin(uv.x)) * diff ; 99 | 100 | } else { 101 | color = vec3(0.5, 0.6, smoothstep(0.1, 0.5, length(uv - 0.5))); 102 | } 103 | 104 | gl_FragColor = vec4(color, 1.0); 105 | } -------------------------------------------------------------------------------- /ray_marching/ray_marching_8_rotate_box_3.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#42436.2 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | const float EPS = 0.0001; 14 | const float PI = 3.14159265358979323844; 15 | 16 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 17 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 18 | } 19 | 20 | float exposeInOut(float t) { 21 | if (t == 0.0) { 22 | return 0.0; 23 | 24 | } else if (t == 1.0) { 25 | return 1.0; 26 | 27 | } else if ((t /= 0.5) < 1.0) { 28 | return 0.5 * pow(2.0, 10.0 * (t - 1.0)); 29 | 30 | } else { 31 | return 0.5 * (-pow(2.0, -10.0 * --t) + 2.0); 32 | } 33 | } 34 | 35 | float box(vec3 p) { 36 | return length(max(abs(p) - vec3(1.0), 0.0)); 37 | } 38 | 39 | float sceneDist(vec3 ray) { 40 | return box(ray); 41 | } 42 | 43 | vec3 getNormal(vec3 p){ 44 | return normalize(vec3( 45 | sceneDist(p + vec3(EPS, 0.0, 0.0)) - sceneDist(p + vec3(-EPS, 0.0, 0.0)), 46 | sceneDist(p + vec3(0.0, EPS, 0.0)) - sceneDist(p + vec3(0.0, -EPS, 0.0)), 47 | sceneDist(p + vec3(0.0, 0.0, EPS)) - sceneDist(p + vec3(0.0, 0.0, -EPS)) 48 | )); 49 | } 50 | 51 | // Referred from http://glslsandbox.com/e#42286.0 52 | mat3 camera(vec3 cameraPosition, vec3 la) { 53 | vec3 roll = vec3(0, 1, 0); 54 | vec3 f = normalize(la - cameraPosition); 55 | vec3 r = normalize(cross(roll, f)); 56 | vec3 u = normalize(cross(f, r)); 57 | 58 | return mat3(r, u, f); 59 | } 60 | 61 | float obliqueLline(vec2 uv){ 62 | return step(0.94, fract((uv.x + uv.y + time * 0.1) * 8.0)); 63 | } 64 | 65 | void main( void ) { 66 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy ) / min(resolution.x, resolution.y); 67 | 68 | uv.x -= time * 0.2; 69 | 70 | float count = 3.0; 71 | 72 | // Repetition. 73 | vec2 scaleUv = uv * count; 74 | uv = fract(scaleUv); 75 | uv -= 0.5; // Move box axis to center. 76 | 77 | float easing = exposeInOut(fract(time + (floor((min(scaleUv.x, scaleUv.y))) + count) / count)); 78 | float speed = easing; 79 | 80 | float angle = speed * 2.0 * PI; 81 | float scale = 8.0; 82 | vec3 cameraPosition = scale * vec3(cos(angle), 0.5, -sin(angle)); 83 | vec3 ray = camera(cameraPosition, vec3(0.0, 0.0, 0.0)) * normalize(vec3(uv, 2.0)); // Rotate box. 84 | 85 | uv += 0.5; 86 | 87 | vec3 rayPosition = cameraPosition; 88 | float distance = 0.0; 89 | float currentRayLength = 0.0; 90 | bool hit = false; 91 | 92 | for (int i = 0; i < 100; i++) { 93 | distance = sceneDist(rayPosition); 94 | currentRayLength += distance; 95 | rayPosition = cameraPosition + ray * currentRayLength; 96 | 97 | if (abs(distance) < EPS) { 98 | hit = true; 99 | break; 100 | } 101 | } 102 | 103 | vec3 color = vec3(0.0); 104 | vec3 lightDirection = normalize(vec3(1.0, 1.0, -2.0)); 105 | 106 | if (hit) { 107 | vec3 normal = getNormal(rayPosition); 108 | normal = fract(normal) * time; 109 | float diff = clamp(dot(lightDirection, normal), 0.2, 1.0); 110 | color = vec3(0.3, 0.8, 1.0) * diff + obliqueLline(uv); 111 | 112 | } else { 113 | color = vec3(0.5, smoothstep(0.1, map(sin(time * 4.0), -1.0, 1.0, 0.4, 0.5), length(uv - 0.5)), 1.0); 114 | } 115 | 116 | gl_FragColor = vec4(color, 1.0); 117 | } -------------------------------------------------------------------------------- /ray_marching/ray_marching_9_geometric_box.frag: -------------------------------------------------------------------------------- 1 | /** 2 | * Referenced FMS_Cat's work. 3 | */ 4 | 5 | #ifdef GL_ES 6 | precision highp float; 7 | #endif 8 | 9 | #define PI 3.14159265 10 | #define MARCH_ITER 100 11 | #define MARCH_MUL 0.8 12 | #define MARCH_EPSILON 0.01 13 | 14 | uniform float time; 15 | uniform vec2 mouse; 16 | uniform vec2 resolution; 17 | 18 | mat2 rotate2D(float t) { 19 | return mat2(cos(t), sin(t), -sin(t), cos(t)); 20 | } 21 | 22 | float smin(float a, float b, float k) { 23 | float res = exp(-k * a) + exp(-k * b); 24 | return -log(res) / k; 25 | } 26 | 27 | struct Camera { 28 | vec3 pos; 29 | vec3 dir; 30 | vec3 side; 31 | vec3 top; 32 | float depth; 33 | }; 34 | 35 | struct Ray { 36 | vec3 dir; 37 | vec3 ori; 38 | }; 39 | 40 | Camera camInit(in vec3 position, in vec3 target, in float rotation, in float depth) { 41 | Camera cam; 42 | cam.pos = position; 43 | cam.dir = normalize(target - position); 44 | cam.side = normalize(cross(cam.dir, vec3(0.0, 1.0, 0.0))); 45 | cam.top = normalize(cross(cam.side, cam.dir)); 46 | 47 | cam.side = cos(rotation) * cam.side + sin(rotation) * cam.top; 48 | cam.top = normalize(cross(cam.side, cam.dir)); 49 | 50 | cam.depth = depth; 51 | 52 | return cam; 53 | } 54 | 55 | Ray rayInit(in vec3 ori, in vec3 dir) { 56 | Ray ray; 57 | ray.dir = dir; 58 | ray.ori = ori; 59 | return ray; 60 | } 61 | 62 | Ray rayFromCam(in vec2 pos, in Camera cam) { 63 | vec3 dir = normalize( 64 | pos.x * cam.side 65 | + pos.y * cam.top 66 | + cam.dir * cam.depth 67 | ); 68 | return rayInit(cam.pos, dir); 69 | } 70 | 71 | float distBox(vec3 p, vec3 width) { 72 | vec3 d = abs(p) - width; 73 | return min(max(d.x, max(d.y, d.z)), 0.0) + length(max(d, 0.0)); 74 | } 75 | 76 | vec3 typeIfs(vec3 p, vec3 rot, vec3 shift) { 77 | vec3 pos = p; 78 | 79 | for (int i = 0; i < 5; i++) { 80 | float intensity = pow(2.0, -float(i)); 81 | pos = abs(pos) - shift * intensity; 82 | 83 | shift.yz = rotate2D(rot.x) * shift.yz; 84 | shift.zx = rotate2D(rot.y) * shift.zx; 85 | shift.xy = rotate2D(rot.z) * shift.xy; 86 | 87 | if (pos.x < pos.y) { 88 | pos.xy = pos.yx; 89 | } 90 | if (pos.x < pos.z) { 91 | pos.xz = pos.zx; 92 | } 93 | if (pos.y < pos.z) { 94 | pos.yz = pos.zy; 95 | } 96 | } 97 | 98 | return pos; 99 | } 100 | 101 | float distFunc(vec3 _p) { 102 | 103 | vec3 p = _p; 104 | /** Fractal 105 | p.z = (mod(p.z - 5.0 * time, 2.0) - 2.5); 106 | p.y = mod(p.y, 4.0) - 2.0; 107 | p.xyz = p.xzy; 108 | */ 109 | 110 | p.x = mod(p.x, 4.0); 111 | p.y = mod(p.y, 4.0); 112 | p.z = mod(p.z - time, 4.0); 113 | 114 | float f = 0.0 + 0.4 * _p.z; 115 | float ff = 1.2 + 0.4 * _p.z; 116 | 117 | vec3 p2 = typeIfs( 118 | p, 119 | vec3(0.01, 0.02, 0.03), 120 | vec3( 121 | 0.5 + 0.4 * sin(f + time), 122 | 0.6 + 0.1 * sin(f + time / 0.7), 123 | 0.7 * 0.2 * sin(f + time / 0.8) 124 | ) 125 | ); 126 | float dist = distBox(p2, vec3(0.2)); 127 | 128 | p2 = typeIfs( 129 | p, 130 | vec3(0.04, 0.05, 0.06), 131 | vec3( 132 | 3.1 + 0.4 * sin(ff + time), 133 | 2.1 + 0.1 * sin(ff + time / 0.7) , 134 | 2.7 * 0.2 * sin(ff + time / 0.8) 135 | ) 136 | ); 137 | dist = min(dist, distBox(p2, vec3(0.2))); 138 | 139 | /** Triangle pole 140 | _p.zx = rotate2D(time) * _p.zx; 141 | dist = min(dist, distBox(_p, vec3(-0.1 * (_p.y - 2.0), 1E9, -0.1 * (_p.y - 2.0)))); 142 | */ 143 | 144 | return dist; 145 | } 146 | 147 | /** 148 | * p: レイとオブジェクトの交点 149 | * 150 | * return: 法線（勾配） 151 | */ 152 | vec3 getNormal(vec3 p, float d) { 153 | return normalize(vec3( 154 | distFunc(p + vec3(d, 0.0, 0.0)) - distFunc(p + vec3(-d, 0.0, 0.0)), 155 | distFunc(p + vec3(0.0, d, 0.0)) - distFunc(p + vec3(0.0, -d, 0.0)), 156 | distFunc(p + vec3(0.0, 0.0, d)) - distFunc(p + vec3(0.0, 0.0, -d)) 157 | )); 158 | } 159 | 160 | bool isHit(float dist) { 161 | return dist < MARCH_EPSILON; 162 | } 163 | 164 | vec3 getRayPosition(Ray ray, float rayLen) { 165 | return ray.ori + ray.dir * rayLen; 166 | } 167 | 168 | void main( void ) { 169 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 170 | 171 | //uv *= rotate2D(sin(time) * 0.1); 172 | 173 | vec3 camPos = vec3(0.5 * cos(time), 0.5 * sin(time / 0.9), 5.0); 174 | vec3 camTarget = vec3(0.0); 175 | float rotation = time * 0.4; 176 | float depth = 1.0; 177 | 178 | Camera cam = camInit( 179 | camPos, 180 | camTarget, 181 | rotation, 182 | depth 183 | ); 184 | 185 | Ray ray = rayFromCam(uv, cam); 186 | 187 | float rayLen = 0.001; 188 | vec3 rayPos = getRayPosition(ray, rayLen); 189 | float dist; 190 | for (int i = 0; i < MARCH_ITER; i++) { 191 | dist = distFunc(rayPos); 192 | rayLen += MARCH_MUL * dist; 193 | rayPos = getRayPosition(ray, rayLen); 194 | } 195 | 196 | vec3 col = vec3(0.0); 197 | if (isHit(dist)) { 198 | vec3 normal = getNormal(rayPos, 1E-4); 199 | float edge = smoothstep(0.1, 0.4, length(normal - getNormal(rayPos, 2E-2))); 200 | 201 | // Blightness of surface? 202 | vec3 ligPos = vec3(3.0, 4.0, 5.0); 203 | vec3 ligDir = normalize(cam.pos - ligPos); 204 | col += vec3(0.4, 0.5, 0.6) * (0.5 + 0.5 * dot(normal, ligDir)); 205 | 206 | col += vec3(0.0, 0.4, 0.9) * edge; 207 | } 208 | 209 | col -= 0.4 * length(uv); 210 | col = vec3( 211 | smoothstep(0.0, 1.0, col.x), 212 | col.y, 213 | col.z 214 | ); 215 | vec3 backgroudCol = vec3(1.0, 0.1, 0.8); 216 | col = mix(backgroudCol, col, exp(-0.1 * rayLen)); 217 | 218 | gl_FragColor = vec4(col, 1.0); 219 | } -------------------------------------------------------------------------------- /ripple/ripple_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#39736.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | uniform float time; 8 | uniform vec2 mouse; 9 | uniform vec2 resolution; 10 | 11 | void main( void ) { 12 | 13 | vec2 st = gl_FragCoord.xy / resolution; 14 | vec3 p3 = vec3(st.x - 0.5, st.y - 0.5, sin(time)); 15 | float color = 0.0; 16 | 17 | for(int i = 0; i < 4; i++){ 18 | color = cos(float(i) * color * 10. + length(p3)); 19 | } 20 | 21 | gl_FragColor = vec4(vec3(color, color * sin(time), color * time * 0.1), 1.0); 22 | } -------------------------------------------------------------------------------- /ripple/ripple_2.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#40624.3 2 | 3 | #ifdef GL_ES 4 | precision highp float; 5 | #endif 6 | 7 | uniform float time; 8 | uniform vec2 resolution; 9 | uniform sampler2D tex; 10 | 11 | void main(void) { 12 | vec2 cPos = -1.0 + 2.0 * gl_FragCoord.xy / resolution.xy; 13 | float ratio = resolution.x / resolution.y; 14 | cPos.x *= ratio; 15 | 16 | float cLength = length(cPos); 17 | 18 | float speed = 10.0; 19 | vec2 uv = gl_FragCoord.xy / resolution.xy + (cPos / cLength) * cos(cLength * 40.0 - time * speed) * 0.3; 20 | 21 | //gl_FragColor = vec4(vec3(1.0 - distance(vec2(0.5), uv),0.0, 0.0), 1.0); 22 | gl_FragColor = vec4(vec3(uv.x, 0.0, 0.0), 1.0); 23 | } -------------------------------------------------------------------------------- /rotation/multiple_rotation_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#40215.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | #define PI 3.14159265359 10 | 11 | uniform float time; 12 | uniform vec2 mouse; 13 | uniform vec2 resolution; 14 | 15 | mat2 rotate2d(float _angle){ 16 | return mat2(cos(_angle), -sin(_angle), sin(_angle), cos(_angle)); 17 | } 18 | 19 | float box(vec2 st, vec2 size) { 20 | vec2 newSize = vec2(0.5) - size * 0.5; 21 | vec2 uv = step(newSize, st); 22 | uv *= step(newSize, vec2(1.0) - st); 23 | return uv.x * uv.y; 24 | } 25 | 26 | float cross(vec2 st, float size) { 27 | return box(st, vec2(size, size / 4.0)) + box(st, vec2(size / 4.0, size)); 28 | } 29 | 30 | void main( void ) { 31 | vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 32 | 33 | float interval = 0.22; 34 | float size = 0.2; 35 | vec2 newSt = mod(st, interval); 36 | 37 | newSt -= vec2(interval / 2.0); // Move each items to center. 38 | newSt *= rotate2d(sin(time) * PI); // Rotate. 39 | newSt += vec2(0.5); // Set rotation axis to center. 40 | 41 | vec3 color = vec3(cross(newSt, size)); 42 | 43 | gl_FragColor = vec4(color, 1.0); 44 | } -------------------------------------------------------------------------------- /rotation/rotation_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#40196.5 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | #define PI 3.14159265359 10 | 11 | uniform float time; 12 | uniform vec2 mouse; 13 | uniform vec2 resolution; 14 | 15 | mat2 rotate2d(float _angle){ 16 | return mat2(cos(_angle), -sin(_angle), sin(_angle), cos(_angle)); 17 | } 18 | 19 | float box(vec2 st, vec2 size) { 20 | vec2 newSize = vec2(0.5) - size * 0.5; 21 | vec2 uv = step(newSize, st); 22 | uv *= step(newSize, vec2(1.0) - st); 23 | return uv.x * uv.y; 24 | } 25 | 26 | float cross(vec2 st, float size) { 27 | return box(st, vec2(size, size / 4.0)) + box(st, vec2(size / 4.0, size)); 28 | } 29 | 30 | void main( void ) { 31 | vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 32 | 33 | st *= rotate2d(sin(time) * PI); 34 | st += vec2(0.5); 35 | 36 | vec3 color = vec3(cross(st, 2.0)); 37 | 38 | gl_FragColor = vec4(color, 1.0); 39 | } -------------------------------------------------------------------------------- /scene_switch/scene_switch_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#42836.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 resolution; 11 | 12 | float dia(vec2 uv) { 13 | float a = atan(uv.y, uv.x); 14 | float s = floor((abs(uv.x) + abs(uv.y)) * 50.0); 15 | s *= sin(s * 24.0); 16 | float s2 = fract(sin(s)); 17 | 18 | float c = step(0.9, tan(a + s + s2 * time) * 0.5 + 0.5); 19 | 20 | c *= s2 * 0.7 + 0.5; 21 | return c; 22 | } 23 | 24 | float pluralRing(vec2 uv, float interval) { 25 | return sin(length(uv) * interval); 26 | } 27 | 28 | float rotationSpiral(vec2 uv, float count, float speed, float num) { 29 | return step(0.0, sin(atan(uv.y, uv.x) * count + speed)) * sin(floor(length(uv * num))); 30 | } 31 | 32 | void main(void) { 33 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); 34 | 35 | float scaledTime = mod(time * 1.0, 3.0); 36 | float type = floor(scaledTime); 37 | float newTime = 1.0 - fract(scaledTime); 38 | 39 | vec3 color = vec3(0.0); 40 | 41 | if (type == 1.0) { 42 | color.r += pluralRing(uv * 4.0, newTime * 25.0); 43 | 44 | } else if (type == 2.0) { 45 | color.g += dia(uv * newTime); 46 | 47 | } else { 48 | color.b += rotationSpiral(uv, 20.0, newTime * 10.0, newTime * 100.0); 49 | } 50 | 51 | gl_FragColor = vec4(color, 1.0); 52 | } -------------------------------------------------------------------------------- /shape/dynamic_shape_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#46092.3 2 | // 3 | // Referred to https://thebookofshaders.com/edit.php?log=160414040957 4 | 5 | #ifdef GL_ES 6 | precision mediump float; 7 | #endif 8 | 9 | #extension GL_OES_standard_derivatives : enable 10 | 11 | uniform vec2 resolution; 12 | uniform vec2 mouse; 13 | uniform float time; 14 | 15 | float random(in vec2 uv){ 16 | return fract(sin(dot(uv, vec2(12.9898,78.233))) * 43758.5453); 17 | } 18 | 19 | float smoothedge(float v) { 20 | return smoothstep(0.0, 1.0 / resolution.x, v); 21 | } 22 | 23 | float circle(vec2 p, float radius) { 24 | return length(p) - radius; 25 | } 26 | 27 | float rect(vec2 p, vec2 size) { 28 | vec2 d = abs(p) - size; 29 | return min(max(d.x, d.y), 0.0) + length(max(d,0.0)); 30 | } 31 | 32 | float hexagon(vec2 p, float radius) { 33 | vec2 q = abs(p); 34 | return max(abs(q.y), q.x * 0.866025 + q.y * 0.5) - radius; 35 | } 36 | 37 | float triangle(vec2 p, float size) { 38 | vec2 q = abs(p); 39 | return max(q.x * 0.866025 + p.y * 0.5, -p.y * 0.5) - size * 0.5; 40 | } 41 | 42 | float polygon(vec2 p, int vertices, float size) { 43 | float a = atan(p.x, p.y) + 0.2; 44 | float b = 6.28319 / float(vertices); 45 | return cos(floor(0.5 + a / b) * b - a) * length(p) - size; 46 | } 47 | 48 | float getShape(vec2 st, int i) { 49 | if (i == 0) { 50 | return circle(st, 0.4); 51 | } else if (i == 1) { 52 | return rect(st, vec2(0.4, 0.32)); 53 | } else if (i == 2) { 54 | return triangle(st, 0.4); 55 | } else if (i == 3) { 56 | return polygon(st, 5, 0.4); 57 | } else { 58 | return hexagon(st, 0.5); 59 | } 60 | } 61 | 62 | 63 | void main() { 64 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); 65 | 66 | vec2 scaledUv = uv * 2.0; 67 | vec2 repeatedUv = fract(scaledUv); 68 | repeatedUv -= 0.5; 69 | 70 | float speed = 4.0 + floor(scaledUv.y); 71 | float shapeKindNum = 5.0; 72 | 73 | float t0 = mod(time * speed, shapeKindNum); 74 | float t1 = mod(time * speed + 1.0, shapeKindNum); 75 | 76 | int i0 = int(t0); 77 | int i1 = int(t1); 78 | 79 | float f = fract(t0); 80 | 81 | float beforeShape = getShape(repeatedUv, i0); 82 | float afterShape = getShape(repeatedUv, i1); 83 | 84 | float shape = smoothedge(mix(beforeShape, afterShape, f)); 85 | vec3 color = vec3(shape, 0.0, random(floor(scaledUv) * floor(time * 10.0))); 86 | 87 | gl_FragColor = vec4(color, 1.0); 88 | } -------------------------------------------------------------------------------- /skew/skew_1.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | #extension GL_OES_standard_derivatives : enable 6 | 7 | uniform float time; 8 | uniform vec2 resolution; 9 | 10 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 11 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 12 | } 13 | 14 | float pluralRing(vec2 uv, float interval) { 15 | return sin(length(uv) * interval); 16 | } 17 | 18 | float ball(vec2 uv, float radius) { 19 | return step(radius, length(uv) - radius); 20 | } 21 | 22 | void main( void ) { 23 | vec2 uv = ( gl_FragCoord.xy / resolution.xy ) - vec2(0.5, 0.0); 24 | vec2 uv2 = uv; 25 | 26 | uv /= -(uv.y) + 0.8; 27 | uv.x -= time * 0.05; 28 | uv.y += time * 0.3; 29 | 30 | uv *= 10.0; 31 | vec2 horizon = uv.xy * vec2(0.5, 0.5); 32 | 33 | horizon = fract(horizon); 34 | horizon -= 0.5; 35 | float size = 0.2; 36 | float circle = ball(horizon, size); 37 | 38 | float interval = map(sin(time * 6.0), -1.0, 1.0, 10.0, 26.0); 39 | interval = mod(time * 2.0, 5.0) * 10.0 + 15.0; 40 | float p = pluralRing(horizon, interval); 41 | 42 | vec2 horizon2 = horizon + vec2( 43 | map(cos(time), -1.0, 1.0, -0.1, 0.1), 44 | map(sin(time), -1.0, 1.0, 0.05, 0.1) 45 | ); 46 | float circle2 = min(circle, ball(horizon2, size * 0.95)); 47 | 48 | float dot = dot(vec2(0.0, 1.0), uv2) * 1.6; 49 | 50 | vec3 color = vec3(1.0 - circle); 51 | color.r *= p; 52 | color.rb += circle2; 53 | color += dot; 54 | 55 | gl_FragColor = vec4(color, 1.0 ); 56 | 57 | } -------------------------------------------------------------------------------- /spher/rotate_spher.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#40087.0 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | void main( void ) { 14 | vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 15 | // How to move spher is here (https://goo.gl/MolkFJ). 16 | st.x += cos(time); 17 | st.y += sin(time); 18 | // See this page (https://goo.gl/KJ9ScK) about the formula below. 19 | float f = abs(sin(time)) * 0.1 / length(st); 20 | gl_FragColor = vec4(vec3(f), 1.0); 21 | } -------------------------------------------------------------------------------- /spher/rotate_spher_2.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#40118.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | #define PI 3.14159265359 10 | 11 | uniform float time; 12 | uniform vec2 mouse; 13 | uniform vec2 resolution; 14 | 15 | float toRadian(float degree) { 16 | return degree * PI / 180.0; 17 | } 18 | 19 | void main( void ) { 20 | vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 21 | vec3 color; 22 | 23 | for (int i = 0; i < 10; i++) { 24 | float degree = (float(i) + 1.0) * (360.0 / 10.0); 25 | float r = toRadian(degree); 26 | st.x += cos(time + r) * 0.3; 27 | st.y += sin(time + r) * 0.3; 28 | float f = 0.01 / abs(length(st) - 0.7); 29 | 30 | color += vec3(f); 31 | } 32 | 33 | gl_FragColor = vec4(color, 1.0); 34 | } -------------------------------------------------------------------------------- /spher/spher.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#40086.0 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | void main( void ) { 14 | vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 15 | // See this page (https://goo.gl/KJ9ScK) about the formula below. 16 | float f = 0.1 / length(st); 17 | gl_FragColor = vec4(vec3(f), 1.0); 18 | } -------------------------------------------------------------------------------- /spher/sphere_2.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#42318.1 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 14 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 15 | } 16 | 17 | float sphere(float t, float k) { 18 | float d = 1.0 + t * t - t * t * k * k; 19 | if (d <= 0.0) { 20 | return -1.0; 21 | } 22 | float x = (k - sqrt(d)) / (1.0 + t * t * t); 23 | return asin(x * t); 24 | } 25 | 26 | void main( void ) { 27 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); 28 | 29 | float num = 2.0; 30 | uv *= pow(num,2.0); 31 | uv = mod(uv, num); 32 | 33 | uv -= num / 2.0; 34 | float startX = fract(uv.x); 35 | 36 | vec3 color = vec3(0.0); 37 | 38 | color.r = sphere(1.0 - length(uv),2.0) * map(sin(time * 10.0 * startX), -1.0, 1.0, 0.3, 1.0); 39 | 40 | gl_FragColor = vec4(color, 1.0); 41 | } -------------------------------------------------------------------------------- /spiral/spiral_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#41854.3 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | const float PI = 3.141592; 10 | 11 | uniform float time; 12 | uniform vec2 mouse; 13 | uniform vec2 resolution; 14 | 15 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 16 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 17 | } 18 | 19 | float spiral() { 20 | return map(sin(time * 1.0), -1.0,1.0, -40.0, 40.0); 21 | } 22 | 23 | void main( void ) { 24 | vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 25 | 26 | float v = 1.0 - length(st * sin(time * 3.0)); 27 | 28 | float angle = atan(st.y, st.x); 29 | float stepCount = 10.0; 30 | 31 | vec3 color = vec3(sin(angle * stepCount + length(st) * spiral() + time)); 32 | color.rg *= v * 3.0; 33 | 34 | gl_FragColor = vec4(color, 1.0 ); 35 | } -------------------------------------------------------------------------------- /spiral/spiral_pattern_easing_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#42514.2 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | #define PI 3.14159265359 14 | 15 | float random(vec2 uv) { 16 | return fract(sin(dot(uv, vec2(12.9898, 78.233))) * 43758.5453); 17 | } 18 | 19 | float backOut(float elapsedTimeRate) { 20 | float amount = 1.7; 21 | return --elapsedTimeRate * elapsedTimeRate * ((amount + 1.0) * elapsedTimeRate + amount) + 1.0; 22 | } 23 | 24 | float rotationSpiral(vec2 uv, float count, float speed) { 25 | float rotationEasing = (floor(time) + backOut(fract(time))) * PI * 2.0; 26 | return step(0.0, sin(atan(uv.y, uv.x) * count + rotationEasing * speed)); 27 | } 28 | 29 | void main( void ) { 30 | vec2 uv = ( gl_FragCoord.xy * 2.0 - resolution.xy ) / min(resolution.x, resolution.y); 31 | 32 | vec2 scaledUv = uv * 5.0; 33 | vec2 repeatedUv = fract(scaledUv); 34 | repeatedUv -= 0.5; 35 | 36 | float randomVal = random(floor(scaledUv)); 37 | 38 | float minCount = 3.0; 39 | float count = floor(9.0 * randomVal) + minCount; 40 | float spiral = rotationSpiral(repeatedUv, count, 3.0); 41 | float windmill = smoothstep(0.3, 0.4, spiral + length(repeatedUv)); 42 | 43 | vec3 color = vec3(windmill, windmill + randomVal, 1.0); 44 | 45 | gl_FragColor = vec4(color, 1.0 ); 46 | } -------------------------------------------------------------------------------- /texture/texture_mapping_1.frag: -------------------------------------------------------------------------------- 1 | /** 2 | * Referenced https://www.shadertoy.com/view/MsVfDz 3 | * http://nanka.hateblo.jp/entry/2018/12/13/080322 4 | * 5 | */ 6 | 7 | #ifdef GL_ES 8 | precision mediump float; 9 | #endif 10 | 11 | #extension GL_OES_standard_derivatives : enable 12 | 13 | uniform float time; 14 | uniform vec2 resolution; 15 | 16 | mat2 rotate2D(float a) { 17 | return mat2(cos(a), sin(a), -sin(a), cos(a)); 18 | } 19 | 20 | mat3 createCamera(vec3 origin, vec3 target, float cr) { 21 | vec3 cw = normalize(target - origin); 22 | vec3 cp = vec3(sin(cr), cos(cr), 0.0); 23 | vec3 cu = normalize(cross(cw, cp)); 24 | vec3 cv = normalize(cross(cu, cw)); 25 | 26 | return mat3(cu, cv, cw); 27 | } 28 | 29 | float sdRect(vec2 p, vec2 b) { 30 | vec2 d = abs(p) - b; 31 | return min(max(d.x, d.y), 0.0) + length(max(d, 0.0)); 32 | } 33 | 34 | float sphere(vec3 p, float s) { 35 | return length(p) - s; 36 | } 37 | 38 | float map(vec3 p) { 39 | float s = sphere(p - vec3(0.0), 1.0); 40 | return s; 41 | } 42 | 43 | /** 44 | * Make pattern as texture. 45 | */ 46 | vec3 texture(vec2 p) { 47 | vec2 q = (fract(p / 10.0) - 0.5) * 10.0; 48 | float d = 9999.0; 49 | for (int i = 0; i < 4; ++i) { 50 | q = abs(q) - 0.5; 51 | q *= rotate2D(0.8); 52 | q = abs(q) - 0.5; 53 | float k = sdRect(q, vec2(1.0, 0.5 + q.x)); 54 | d = min(d, k); 55 | } 56 | float f = 1.0 / (1.0 + abs(d)); 57 | return vec3(pow(f, 16.0) + step(0.935, f)); 58 | } 59 | 60 | void main( void ) { 61 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); 62 | 63 | float t = time * 0.5; 64 | vec3 origin = vec3(cos(t), sin(t), 1.0); 65 | vec3 target = vec3(0.0, 0.0, 0.0); 66 | mat3 cam = createCamera(origin, target, 1.0); 67 | vec3 ray = cam * normalize(vec3(uv, 0.8)); 68 | 69 | float rayLen = 0.01; 70 | vec3 rayPosition = origin + ray * rayLen; 71 | bool hit = false; 72 | 73 | for (int i = 0; i < 64; i++) { 74 | float dist = map(rayPosition); 75 | rayLen += dist; 76 | rayPosition = origin + ray * rayLen; 77 | 78 | if (abs(dist) < 0.001) { 79 | hit = true; 80 | break; 81 | } 82 | } 83 | 84 | vec3 color = vec3(rayPosition); 85 | 86 | if (hit) { 87 | vec3 normal = normalize(rayPosition) * 26.0 + 5.0 * sin(time * 0.5); 88 | vec3 globe = texture(normal.zy) + texture(normal.xz) + texture(normal.xy); 89 | color = mix(vec3(0.0, 0.1, 0.9), vec3(0.9, 0.4, 0.7), globe); 90 | } else { 91 | // Outline color 92 | color = vec3(0.0); 93 | } 94 | 95 | vec3 backgroundColor = vec3(0.9, 0.0, 0.2); 96 | // Draw background and outline 97 | color = mix(backgroundColor, color, exp(-0.0001 * rayLen)); 98 | 99 | gl_FragColor = vec4(color, 1.0); 100 | } -------------------------------------------------------------------------------- /tile/tile_random_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#42331.2 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 mouse; 11 | uniform vec2 resolution; 12 | 13 | float random(in vec2 uv){ 14 | return fract(sin(dot(uv, vec2(12.9898,78.233))) * 43758.5453); 15 | } 16 | 17 | float randomTile(in vec2 uv) { 18 | return random(floor(uv)); 19 | } 20 | 21 | void main( void ) { 22 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); 23 | 24 | uv *= 8.0; 25 | vec2 newUv = fract(uv); 26 | 27 | vec3 color = vec3(0.0); 28 | color.r += random(floor(uv)); 29 | color.gb += sin(randomTile(uv) * time * 5.0); 30 | 31 | gl_FragColor = vec4(color, 1.0); 32 | } -------------------------------------------------------------------------------- /triangle/triangle_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#41495.1 2 | // Referenced from https://www.shadertoy.com/view/Mtj3Rh 3 | 4 | #ifdef GL_ES 5 | precision mediump float; 6 | #endif 7 | 8 | #extension GL_OES_standard_derivatives : enable 9 | 10 | #define PI 3.14159265359 11 | 12 | uniform float time; 13 | uniform vec2 mouse; 14 | uniform vec2 resolution; 15 | 16 | float random(float n) { 17 | return fract(abs(sin(n * 55.753) * 367.34)); 18 | } 19 | 20 | float random(vec2 n) { 21 | return random(dot(n, vec2(2.46, -1.21))); 22 | } 23 | 24 | float patternize(float n) { 25 | // Fade by cos() 26 | return cos(fract(n) * 2.0 * PI); 27 | } 28 | 29 | vec2 shear(vec2 st, float radian) { 30 | return (st + vec2(st.y, 0.0) * cos(radian)) + vec2(floor(4.0 * (st.x - st.y * cos(radian))), 0.0); 31 | } 32 | 33 | void main( void ) { 34 | vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 35 | 36 | float radian = radians(60.0); 37 | float scale = 2.0; 38 | 39 | st *= scale; 40 | 41 | vec2 newSt = shear(st, radian); 42 | 43 | float n = patternize(random(floor(newSt * 4.0)) + random(floor(newSt * 2.0)) + random(floor(newSt)) + time * 0.1); 44 | 45 | vec3 color = vec3(n * 0.5, n * 1.5, 0.8); 46 | 47 | gl_FragColor = vec4(color, 1.0); 48 | } 49 | -------------------------------------------------------------------------------- /triangle/triangle_2.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#41514.5 2 | // Forked from http://glslsandbox.com/e#41469.1 3 | 4 | #ifdef GL_ES 5 | precision mediump float; 6 | #endif 7 | 8 | #extension GL_OES_standard_derivatives : enable 9 | 10 | uniform float time; 11 | uniform vec2 mouse; 12 | uniform vec2 resolution; 13 | 14 | float random(vec2 st) { 15 | return fract(sin(dot(st, vec2(12.9898, 78.233))) * 43758.5453); 16 | } 17 | 18 | vec2 st2Triangle(vec2 st) { 19 | float sx = st.x - st.y / 2.0; // skewed x 20 | float sxf = fract(sx); 21 | float offs = step(fract(1.0 - st.y), sxf); 22 | return vec2(floor(sx) * 2.0 + offs, st.y); 23 | } 24 | 25 | float triangle(vec2 st) { 26 | float sp = random(floor(st2Triangle(st))); 27 | return max(0.0, sin(sp * time)); 28 | } 29 | 30 | void main() { 31 | vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 32 | 33 | st *= 10.0; // Make pattern. 34 | st.y -= time * 2.0; // Move 35 | 36 | float triangles = triangle(st); // Make triangles. 37 | 38 | vec3 color = vec3(0.5, triangles, 0.9); 39 | 40 | gl_FragColor = vec4(color, 1.0); 41 | } 42 | -------------------------------------------------------------------------------- /triangle/triangle_3.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#41514.6 2 | // Forked from http://glslsandbox.com/e#41469.1 3 | 4 | #ifdef GL_ES 5 | precision mediump float; 6 | #endif 7 | 8 | #extension GL_OES_standard_derivatives : enable 9 | 10 | uniform float time; 11 | uniform vec2 mouse; 12 | uniform vec2 resolution; 13 | 14 | float random(vec2 st) { 15 | return fract(sin(dot(st, vec2(12.9898, 78.233))) * 43758.5453); 16 | } 17 | 18 | vec2 st2Triangle(vec2 st) { 19 | float sx1 = st.x - st.y / 2.0; // skewed x 20 | float sx2 = st.x + st.y / 2.0; // skewed x 21 | return vec2(sx1, sx2 + floor(st.y)); // vec2(sx1, sx2) will be rhombus. 22 | } 23 | 24 | float triangle(vec2 st) { 25 | float sp = random(floor(st2Triangle(st))); 26 | return max(0.0, sin(sp * time)); 27 | } 28 | 29 | void main() { 30 | vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 31 | 32 | st *= 10.0; // Make pattern. 33 | st.y -= time * 2.0; // Move 34 | 35 | float triangles = triangle(st); // Make triangles. 36 | 37 | vec3 color = vec3(0.5, triangles, 0.9); 38 | 39 | gl_FragColor = vec4(color, 1.0); 40 | } 41 | -------------------------------------------------------------------------------- /vertex/cube_1/cube_1.vert: -------------------------------------------------------------------------------- 1 | /*{ 2 | "pixelRatio": 1, 3 | "vertexCount": 18000, 4 | "vertexMode": "TRIANGLES", 5 | "server": 3000, 6 | }*/ 7 | precision mediump float; 8 | attribute float vertexId; 9 | uniform float vertexCount; 10 | uniform float time; 11 | uniform vec2 resolution; 12 | uniform vec2 mouse; 13 | varying vec4 v_color; 14 | varying vec2 v_uv; 15 | 16 | float VERTEX_COUNT_FOR_CUBE = 36.0; 17 | float VERTEX_COUNT_FOR_SURFACE = 6.0; 18 | float SURFACE_COUNT_FOR_CUBE = 6.0; 19 | 20 | float CUBE_SIZE = 0.03; 21 | 22 | mat3 rotateX(float rad) { 23 | float c = cos(rad); 24 | float s = sin(rad); 25 | return mat3( 26 | 1.0, 0.0, 0.0, 27 | 0.0, c, s, 28 | 0.0, -s, c 29 | ); 30 | } 31 | 32 | mat3 rotateY(float rad) { 33 | float c = cos(rad); 34 | float s = sin(rad); 35 | return mat3( 36 | c, 0.0, -s, 37 | 0.0, 1.0, 0.0, 38 | s, 0.0, c 39 | ); 40 | } 41 | 42 | float rotr3(float x, float n) { 43 | return floor(x / pow(2.0, n)) + mod(x * pow(2.0, 3.0 - n), 8.0); 44 | } 45 | 46 | float mod2(float x) { 47 | return mod(floor(x), 2.0); 48 | } 49 | 50 | vec3 cube(float x) { 51 | return vec3(mod2(x), mod2(x / 2.0), mod2(x / 4.0)); 52 | } 53 | 54 | void main() { 55 | float aspectRatio = resolution.y / resolution.x; 56 | float cubeIdx = floor(vertexId / VERTEX_COUNT_FOR_CUBE); 57 | float faceIdx = mod(floor(vertexId / VERTEX_COUNT_FOR_SURFACE), SURFACE_COUNT_FOR_CUBE); 58 | float faceDiv3 = floor(faceIdx / 3.0); 59 | float faceMod3 = mod(faceIdx, 3.0); 60 | float quadIdx = mod(vertexId, VERTEX_COUNT_FOR_SURFACE); 61 | float baseIdx = faceIdx * SURFACE_COUNT_FOR_CUBE; 62 | float vertIdx = abs(faceDiv3 == 0.0 ? quadIdx - 2.0 : 3.0 - quadIdx); 63 | vec3 pos = cube(rotr3(vertIdx + faceDiv3 * 4.0, faceMod3)); 64 | pos -= 0.5; // Fix center for cube. 65 | pos *= CUBE_SIZE; 66 | 67 | // Rotate first not to make rotation for whole boxes. 68 | mat3 rotX = rotateX(time); 69 | mat3 rotY = rotateY(time); 70 | pos *= rotX * rotY; 71 | 72 | // Layout 73 | float gridX = (mod(cubeIdx, 20.0) - 10.0) / 10.0; 74 | float gridY = floor(cubeIdx / 20.0 - 10.0) / 10.0; 75 | pos.x += gridX; 76 | pos.y += gridY; 77 | pos.x *= aspectRatio; 78 | gl_Position = vec4(pos, 1.0); 79 | 80 | float colIdx = faceIdx + 1.0; 81 | v_color = vec4(mod2(colIdx), mod2(colIdx / 2.0), mod2(colIdx / 4.0), 1.0); 82 | } 83 | -------------------------------------------------------------------------------- /vertex/cube_2/cube_2.vert: -------------------------------------------------------------------------------- 1 | /*{ 2 | "pixelRatio": 1, 3 | "vertexCount": 3000, 4 | "vertexMode": "TRIANGLES", 5 | "server": 3000, 6 | }*/ 7 | precision mediump float; 8 | attribute float vertexId; 9 | uniform float vertexCount; 10 | uniform float time; 11 | uniform vec2 resolution; 12 | uniform vec2 mouse; 13 | varying vec4 v_color; 14 | varying vec2 v_uv; 15 | 16 | float VERTEX_COUNT_FOR_CUBE = 36.0; 17 | float VERTEX_COUNT_FOR_SURFACE = 6.0; 18 | float SURFACE_COUNT_FOR_CUBE = 6.0; 19 | 20 | float CUBE_SIZE = 0.08; 21 | 22 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 23 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 24 | } 25 | 26 | mat3 rotateX(float rad) { 27 | float c = cos(rad); 28 | float s = sin(rad); 29 | return mat3( 30 | 1.0, 0.0, 0.0, 31 | 0.0, c, s, 32 | 0.0, -s, c 33 | ); 34 | } 35 | 36 | mat3 rotateY(float rad) { 37 | float c = cos(rad); 38 | float s = sin(rad); 39 | return mat3( 40 | c, 0.0, -s, 41 | 0.0, 1.0, 0.0, 42 | s, 0.0, c 43 | ); 44 | } 45 | 46 | float rotr3(float x, float n) { 47 | return floor(x / pow(2.0, n)) + mod(x * pow(2.0, 3.0 - n), 8.0); 48 | } 49 | 50 | float mod2(float x) { 51 | return mod(floor(x), 2.0); 52 | } 53 | 54 | vec3 cube(float x) { 55 | return vec3(mod2(x), mod2(x / 2.0), mod2(x / 4.0)); 56 | } 57 | 58 | void main() { 59 | float aspectRatio = resolution.y / resolution.x; 60 | float cubeIdx = floor(vertexId / VERTEX_COUNT_FOR_CUBE); 61 | float faceIdx = mod(floor(vertexId / VERTEX_COUNT_FOR_SURFACE), SURFACE_COUNT_FOR_CUBE); 62 | float faceDiv3 = floor(faceIdx / 3.0); 63 | float faceMod3 = mod(faceIdx, 3.0); 64 | float quadIdx = mod(vertexId, VERTEX_COUNT_FOR_SURFACE); 65 | float baseIdx = faceIdx * SURFACE_COUNT_FOR_CUBE; 66 | float vertIdx = abs(faceDiv3 == 0.0 ? quadIdx - 2.0 : 3.0 - quadIdx); 67 | vec3 pos = cube(rotr3(vertIdx + faceDiv3 * 4.0, faceMod3)); 68 | pos -= 0.5; // Fix center for cube. 69 | pos *= CUBE_SIZE * map(sin(time * 10.0), -1.0, 1.0, 0.5, 1.0); 70 | 71 | // Rotate first not to make rotation for whole boxes. 72 | mat3 rotX = rotateX(time); 73 | mat3 rotY = rotateY(time); 74 | pos *= rotX * rotY; 75 | 76 | // Layout 77 | float radius = 0.7; 78 | float offset = 0.0; 79 | float gridX = cos(mod(cubeIdx, offset) * 10.0 + time) * radius; 80 | float gridY = sin(mod(cubeIdx, offset) * 10.0 + time * 0.5) * radius; 81 | pos.x += gridX; 82 | pos.y += gridY; 83 | pos.x *= aspectRatio; 84 | gl_Position = vec4(pos, 1.0); 85 | 86 | float colIdx = faceIdx + 1.0; 87 | v_color = vec4(mod2(colIdx / 1.0), mod2(colIdx / 4.0), mod2(colIdx / 2.0), 1.0); 88 | } 89 | -------------------------------------------------------------------------------- /vertex/cube_3/cube_3.vert: -------------------------------------------------------------------------------- 1 | // https://www.vertexshaderart.com/art/QgXakG4wfDMZ4Au6n/revision/y8NWriBsxmG8Kis8M 2 | 3 | float VERTEX_COUNT_FOR_SURFACE = 6.0; 4 | float SURFACE_COUNT_FOR_CUBE = 6.0; 5 | float VERTEX_COUNT_FOR_CUBE = VERTEX_COUNT_FOR_SURFACE * SURFACE_COUNT_FOR_CUBE; // 36 6 | 7 | float CUBE_SIZE = 0.08; 8 | 9 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 10 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 11 | } 12 | 13 | mat3 rotateX(float rad) { 14 | float c = cos(rad); 15 | float s = sin(rad); 16 | return mat3( 17 | 1.0, 0.0, 0.0, 18 | 0.0, c, s, 19 | 0.0, -s, c 20 | ); 21 | } 22 | 23 | mat3 rotateY(float rad) { 24 | float c = cos(rad); 25 | float s = sin(rad); 26 | return mat3( 27 | c, 0.0, -s, 28 | 0.0, 1.0, 0.0, 29 | s, 0.0, c 30 | ); 31 | } 32 | 33 | float rotr3(float x, float n) { 34 | return floor(x / pow(2.0, n)) + mod(x * pow(2.0, 3.0 - n), 8.0); 35 | } 36 | 37 | float mod2(float x) { 38 | return mod(floor(x), 2.0); 39 | } 40 | 41 | vec3 cube(float x) { 42 | return vec3(mod2(x), mod2(x / 2.0), mod2(x / 4.0)); 43 | } 44 | 45 | void main() { 46 | float aspectRatio = resolution.y / resolution.x; 47 | float cubeIdx = floor(vertexId / VERTEX_COUNT_FOR_CUBE); 48 | float faceIdx = mod(floor(vertexId / VERTEX_COUNT_FOR_SURFACE), SURFACE_COUNT_FOR_CUBE); 49 | float faceDiv3 = floor(faceIdx / 3.0); 50 | float faceMod3 = mod(faceIdx, 3.0); 51 | float quadIdx = mod(vertexId, VERTEX_COUNT_FOR_SURFACE); 52 | float baseIdx = faceIdx * SURFACE_COUNT_FOR_CUBE; 53 | float vertIdx = abs(faceDiv3 == 0.0 ? quadIdx - 2.0 : 3.0 - quadIdx); 54 | vec3 cubePosition = cube(rotr3(vertIdx + faceDiv3 * 4.0, faceMod3)); 55 | 56 | cubePosition -= 0.5; // Fix center for cube. 57 | cubePosition *= CUBE_SIZE * map(sin(time * 10.0 * fract(cubeIdx * 0.9)), -1.0, 1.0, 0.5, 1.0); 58 | 59 | // Rotate first not to make rotation for whole boxes. 60 | mat3 rotX = rotateX(time); 61 | mat3 rotY = rotateY(time); 62 | cubePosition *= rotX * rotY; 63 | 64 | // Layout 65 | float cubeCount = 10.0; 66 | float gridX = (fract(cubeIdx / cubeCount) - 0.5) * 1.5; 67 | float gridY = floor(cubeIdx / cubeCount) * 0.1 - 1.0; 68 | 69 | cubePosition.x += gridX; 70 | cubePosition.y += gridY; 71 | gl_Position = vec4(cubePosition, 1.0); 72 | 73 | vec3 color = vec3(faceIdx / SURFACE_COUNT_FOR_CUBE); 74 | color.b += fract(cubeIdx / 6.0); 75 | v_color = vec4(color, 1.0); 76 | } -------------------------------------------------------------------------------- /vertex/cube_4/cube_4.vert: -------------------------------------------------------------------------------- 1 | // https://www.vertexshaderart.com/art/QgXakG4wfDMZ4Au6n 2 | 3 | float CUBE_SIZE = 0.08; 4 | 5 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 6 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 7 | } 8 | 9 | float hash(float p) { 10 | vec2 p2 = fract(vec2(p * 5.3983, p * 5.4427)); 11 | p2 += dot(p2.yx, p2.xy + vec2(21.5351, 14.3137)); 12 | return fract(p2.x * p2.y * 95.4337); 13 | } 14 | 15 | vec3 saturate(vec3 x) { 16 | return clamp(x, 0.0, 1.0); 17 | } 18 | 19 | vec3 hue2rgb(float h) { 20 | h = fract(h) * 6.0 - 2.0; 21 | return saturate(vec3(abs(h - 1.0) - 1.0, 2.0 - abs(h), 2.0 - abs(h - 2.0))); 22 | } 23 | 24 | mat3 rotateX(float rad) { 25 | float c = cos(rad); 26 | float s = sin(rad); 27 | return mat3( 28 | 1.0, 0.0, 0.0, 29 | 0.0, c, s, 30 | 0.0, -s, c 31 | ); 32 | } 33 | 34 | mat3 rotateY(float rad) { 35 | float c = cos(rad); 36 | float s = sin(rad); 37 | return mat3( 38 | c, 0.0, -s, 39 | 0.0, 1.0, 0.0, 40 | s, 0.0, c 41 | ); 42 | } 43 | 44 | float rotr3(float x, float n) { 45 | return floor(x / pow(2.0, n)) + mod(x * pow(2.0, 3.0 - n), 8.0); 46 | } 47 | 48 | float mod2(float x) { 49 | return mod(floor(x), 2.0); 50 | } 51 | 52 | float VERTEX_COUNT_FOR_SURFACE = 6.0; 53 | float SURFACE_COUNT_FOR_CUBE = 6.0; 54 | float VERTEX_COUNT_FOR_CUBE = VERTEX_COUNT_FOR_SURFACE * SURFACE_COUNT_FOR_CUBE; 55 | 56 | vec3 cube(in float id) { 57 | float faceId = mod(floor(id / VERTEX_COUNT_FOR_SURFACE), SURFACE_COUNT_FOR_CUBE); 58 | float faceDiv3 = floor(faceId / 3.0); 59 | float faceMod3 = mod(faceId, 3.0); 60 | float quadId = mod(id, VERTEX_COUNT_FOR_SURFACE); 61 | float baseId = faceId * SURFACE_COUNT_FOR_CUBE; 62 | float newVertId = abs(faceDiv3 == 0.0 ? quadId - 2.0 : 3.0 - quadId); 63 | 64 | float x = rotr3(newVertId + faceDiv3 * 4.0, faceMod3); 65 | 66 | return vec3(mod2(x), mod2(x / 2.0), mod2(x / 4.0)); 67 | } 68 | 69 | void main() { 70 | vec3 cubePosition = cube(vertexId); 71 | float cubeId = floor(vertexId / VERTEX_COUNT_FOR_CUBE); 72 | float faceId = mod(floor(vertexId / VERTEX_COUNT_FOR_SURFACE), SURFACE_COUNT_FOR_CUBE); 73 | 74 | float scaleOffset = mod(cubeId, 5.0); 75 | float snd = texture2D(sound, vec2(mix(0.1, 0.5, hash(scaleOffset)), hash(scaleOffset) / 5.)).x; 76 | float scaleBySound = 0.2 * mix(0.0, 4.0, pow(snd, 5.0)); 77 | 78 | cubePosition -= 0.5; // Fix center for cube. 79 | cubePosition *= scaleBySound * map(sin(time * 10.0 * fract(cubeId * 0.9)), -1.0, 1.0, 0.5, 1.0); 80 | 81 | cubePosition.x += sin(cubeId) * 0.5; 82 | cubePosition.z += cos(cubeId) * 0.5; 83 | 84 | // Rotate first not to make rotation for whole boxes. 85 | mat3 rotX = rotateX(time); 86 | mat3 rotY = rotateY(time); 87 | cubePosition *= rotX * rotY; 88 | 89 | // Layout 90 | float cubeCount = 20.0; 91 | float gridX = (fract(cubeId / cubeCount) - 0.5) * 1.5; 92 | float gridY = floor(cubeId / cubeCount) * 0.1 - 1.0; 93 | 94 | cubePosition.x += gridX; 95 | cubePosition.y += gridY; 96 | gl_Position = vec4(cubePosition, 1.0); 97 | 98 | vec3 color = vec3(faceId / SURFACE_COUNT_FOR_CUBE); 99 | color += fract(cubeId / 6.0); 100 | 101 | float pump = step(0.3, snd); 102 | color *= hue2rgb(cubeId * 0.5) * pump; 103 | v_color = vec4(color, 1.0); 104 | } -------------------------------------------------------------------------------- /vertex/vertex_1/vertex_1.frag: -------------------------------------------------------------------------------- 1 | #version 150 2 | 3 | uniform float time; 4 | uniform vec2 mouse; 5 | uniform vec2 resolution; 6 | uniform vec3 spectrum; 7 | uniform sampler2D texture0; 8 | uniform sampler2D texture1; 9 | uniform sampler2D texture2; 10 | uniform sampler2D texture3; 11 | uniform sampler2D prevFrame; 12 | 13 | in VertexData 14 | { 15 | vec4 v_position; 16 | vec3 v_normal; 17 | vec2 v_texcoord; 18 | } inData; 19 | 20 | out vec4 fragColor; 21 | 22 | void main(void){ 23 | vec2 uv = -1. + 2. * inData.v_texcoord; 24 | uv.x *= resolution.x / resolution.y; 25 | 26 | vec3 color = vec3((uv.x * cos(time)) + (uv.y * sin(time))); 27 | //color = vec3(1.0); 28 | 29 | fragColor = vec4(color, 1.0); 30 | } 31 | -------------------------------------------------------------------------------- /vertex/vertex_1/vertex_1.klproj: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/r21nomi/ShaderArtworks/ec8bd4c29c8d2d73310cbeccbe84c1308f1b7279/vertex/vertex_1/vertex_1.klproj -------------------------------------------------------------------------------- /vertex/vertex_1/vertex_1.vert: -------------------------------------------------------------------------------- 1 | #version 150 2 | 3 | uniform float time; 4 | uniform vec2 mouse; 5 | uniform vec2 resolution; 6 | uniform vec3 spectrum; 7 | 8 | uniform mat4 mvp; 9 | uniform mat4 minv; 10 | 11 | in vec4 a_position; 12 | in vec3 a_normal; 13 | in vec2 a_texcoord; 14 | 15 | out VertexData 16 | { 17 | vec4 v_position; 18 | vec3 v_normal; 19 | vec2 v_texcoord; 20 | } outData; 21 | 22 | #define PI 3.14159265359 23 | 24 | void main(void) 25 | { 26 | 27 | // Basic matrix. 28 | // This is an alternative matrix of mvp. 29 | mat4 m = mat4( 30 | 1, 0, 0, 0, 31 | 0, 1, 0, 0, 32 | 0, 0, 1, 0, 33 | 0, 0, 0, 1 34 | ); 35 | 36 | // Translation matrix. 37 | mat4 tm = mat4( 38 | 1, 0, 0, 0, 39 | 0, 1, 0, 0, 40 | 0, 0, 1, 0, 41 | 0, 0, 0, 1 42 | ); 43 | 44 | // Scaling matrix. 45 | mat4 sm = mat4( 46 | 0.5, 0, 0, 0, 47 | 0, 0.5, 0, 0, 48 | 0, 0, 0.5, 0, 49 | 0, 0, 0, 1 50 | ); 51 | 52 | // Rotation matrix. 53 | float angle = 90 * PI / 180 + time; 54 | mat4 rm_x = mat4( 55 | 1, 0, 0, 0, 56 | 0, cos(angle), -sin(angle), 0, 57 | 0, sin(angle), cos(angle), 0, 58 | 0, 0, 0, 1 59 | ); 60 | 61 | mat4 rm_y = mat4( 62 | cos(angle), 0, sin(angle), 0, 63 | 0, 1, 0, 0, 64 | -sin(angle), 0, cos(angle), 0, 65 | 0, 0, 0, 1 66 | ); 67 | 68 | mat4 rm_z = mat4( 69 | cos(angle), -sin(angle), 0, 0, 70 | sin(angle), cos(angle), 0, 0, 71 | 0, 0, 1, 0, 72 | 0, 0, 0, 1 73 | ); 74 | 75 | float vertexCount = 100.0; 76 | float down = floor(sqrt(vertexCount)); 77 | float across = floor(vertexCount / down); 78 | 79 | //float x = mod(); 80 | 81 | // Some drivers don't like position being written here 82 | // with the tessellation stages enabled also. 83 | // Comment next line when Tess.Eval shader is enabled. 84 | gl_Position = m * vec4(a_position.x, a_position.y, 0.0, 1.0) * sm * rm_z * tm; 85 | 86 | outData.v_position = a_position; 87 | outData.v_normal = a_normal; 88 | outData.v_texcoord = a_texcoord; 89 | } 90 | -------------------------------------------------------------------------------- /vertex/vertex_2/vertex_2.vert: -------------------------------------------------------------------------------- 1 | /*{ 2 | "pixelRatio": 1, 3 | "vertexCount": 3000, 4 | "vertexMode": "POINTS", 5 | //"server": 3000, 6 | }*/ 7 | precision mediump float; 8 | attribute float vertexId; 9 | uniform float vertexCount; 10 | uniform float time; 11 | uniform vec2 resolution; 12 | uniform vec2 mouse; 13 | varying vec4 v_color; 14 | 15 | void main() { 16 | float across = 30.0; 17 | float x = mod(vertexId, across); 18 | float y = floor(vertexId / across); 19 | vec2 uv = vec2(x / (across - 1.0), y / (across - 1.0)) * 2.0 - 1.0; 20 | 21 | float offsetX = sin(time + y * 0.2) * 0.2; 22 | float offsetY = sin(time + x * 0.3) * 0.1; 23 | uv.x += offsetX; 24 | uv.y += offsetY; 25 | 26 | gl_Position = vec4(uv, 0, 1); 27 | 28 | float sizeOffset = sin(time + x + y) * 5.0; 29 | gl_PointSize = 10.0 + sizeOffset; 30 | 31 | vec3 color = vec3(abs(uv.x), abs(uv.y), 1.0); 32 | v_color = vec4(color, 1); 33 | } 34 | -------------------------------------------------------------------------------- /vertex/vertex_3/gradation.frag: -------------------------------------------------------------------------------- 1 | /*{ 2 | "pixelRatio": 1, 3 | "vertexCount": 3000, 4 | "vertexMode": "POINTS", 5 | "PASSES": [{ 6 | "vs": "./vertex_3.vert", 7 | }], 8 | "server": 3000, 9 | }*/ 10 | precision mediump float; 11 | uniform float time; 12 | uniform vec2 mouse; 13 | uniform vec2 resolution; 14 | varying vec4 v_color; 15 | varying vec2 v_uv; 16 | 17 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 18 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 19 | } 20 | 21 | // Convert the v_uv range (-1.0 ~ 1.0) to vu range. 22 | // The position for right edge on display is over 1.0 23 | vec2 getAsUvRange() { 24 | vec2 minUv = (0.0 - resolution.xy) / min(resolution.x, resolution.y); 25 | vec2 maxUv = resolution.xy / min(resolution.x, resolution.y); 26 | 27 | return vec2( 28 | map(v_uv.x, -1.0, 1.0, minUv.x, maxUv.x), 29 | map(v_uv.y, -1.0, 1.0, minUv.y, maxUv.y) 30 | ); 31 | } 32 | 33 | void main( void ) { 34 | // If resolution.x > resolution.y 35 | // the range for y is -1.0 ~ 1.0, range for x is (-1.0 ~ 1.0) * resolution.x / resolution.y 36 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); 37 | 38 | vec2 new_v_uv = getAsUvRange(); 39 | 40 | // Repetition. 41 | // ex. 42 | // v_uv: 0.1 0.1 0.1 43 | // uv : 0.11 0.12 0.13 44 | vec2 repeatedUv = (uv - new_v_uv) * 1.0; 45 | 46 | vec3 color = vec3(smoothstep(0.0, 0.02, distance(vec2(0.0), repeatedUv))); 47 | 48 | gl_FragColor = vec4(color, 1.0) * v_color; 49 | } 50 | -------------------------------------------------------------------------------- /vertex/vertex_3/vertex_3.vert: -------------------------------------------------------------------------------- 1 | /*{ 2 | "pixelRatio": 1, 3 | "vertexCount": 3000, 4 | "vertexMode": "POINTS", 5 | "server": 3000, 6 | }*/ 7 | precision mediump float; 8 | attribute float vertexId; 9 | uniform float vertexCount; 10 | uniform float time; 11 | uniform vec2 resolution; 12 | uniform vec2 mouse; 13 | varying vec4 v_color; 14 | varying vec2 v_uv; 15 | 16 | void main() { 17 | float across = 30.0; 18 | float x = mod(vertexId, across); 19 | float y = floor(vertexId / across); 20 | // XY both range is -1.0 ~ 1.0 21 | vec2 uv = (vec2(x / (across - 1.0), y / (across - 1.0)) * 2.0 - 1.0); 22 | 23 | float offsetX = sin(time + y * 0.2) * 0.2; 24 | float offsetY = sin(time + x * 0.3) * 0.1; 25 | uv.x += offsetX; 26 | uv.y += offsetY; 27 | 28 | // Pass to fragment shader. 29 | v_uv = uv; 30 | 31 | gl_Position = vec4(uv, 0, 1); 32 | 33 | float sizeOffset = sin(time + x + y) * 50.0; 34 | gl_PointSize = 20.0; 35 | 36 | vec3 color = vec3(sizeOffset, 0.0, 1.0); 37 | v_color = vec4(color, 1); 38 | } 39 | -------------------------------------------------------------------------------- /vertex/vertex_circle_1/vertex_circle_1.vert: -------------------------------------------------------------------------------- 1 | // https://www.vertexshaderart.com/art/jtFAXNm8ngq4kTFhA 2 | 3 | #define NUM_SEGMENTS 128.0 4 | #define NUM_POINTS (NUM_SEGMENTS * 2.0) 5 | #define PI radians(180.0) 6 | 7 | vec3 saturate(vec3 x) { 8 | return clamp(x, 0.0, 1.0); 9 | } 10 | 11 | vec3 hue2rgb(float h) { 12 | h = fract(h) * 6.0 - 2.0; 13 | return saturate(vec3(abs(h - 1.0) - 1.0, 2.0 - abs(h), 2.0 - abs(h - 2.0))); 14 | } 15 | 16 | vec2 getCirclePoint(float id, float numCircles, float radiusOffset) { 17 | float ux = floor(id / 6.0) + mod(id, 2.0); 18 | float uy = mod(floor(id / 2.0) + floor(id / 3.0), 2.0); 19 | 20 | float angle = ux / numCircles * PI * 2.0; 21 | float c = cos(angle); 22 | float s = sin(angle); 23 | 24 | float radius = uy + radiusOffset; 25 | 26 | float x = c * radius; 27 | float y = s * radius; 28 | 29 | return vec2(x, y); 30 | } 31 | 32 | void main() { 33 | // Point num for simple circle with line. 34 | float pointNumOfCircle = 20.0; 35 | 36 | // Point num consist of circle. 37 | float totalPointNumPerCircle = pointNumOfCircle * 6.0; 38 | 39 | float circleId = floor(vertexId / totalPointNumPerCircle); 40 | float numCircles = floor(vertexCount / totalPointNumPerCircle); 41 | 42 | float down = floor(sqrt(numCircles)); 43 | float across = floor(numCircles / down); 44 | 45 | float x = mod(circleId, across); 46 | float y = floor(circleId / across); 47 | 48 | float u = x / (across - 1.0); 49 | float v = y / (across - 1.0); 50 | 51 | float ux = u * 2.0 - 1.0; 52 | float vy = v * 2.0 - 1.0; 53 | 54 | float radiusOffset = abs(sin(time * 3.0 + circleId)); 55 | vec2 circleXY= getCirclePoint(vertexId, pointNumOfCircle, radiusOffset); 56 | 57 | float su = abs(u - 0.5) * 1.0; 58 | float sv = abs(v - 0.5) * 1.0; 59 | float au = abs(atan(su, sv)) / PI; 60 | float av = length(vec2(su, sv)); 61 | float snd = texture2D(sound, vec2(au * 0.05, av * 0.05)).a; 62 | 63 | float scale = snd * 2.5; 64 | vec2 xy = circleXY * 0.1 + vec2(ux, vy) * scale; 65 | vec3 pos = vec3(xy * 0.5, 0.0); 66 | 67 | gl_Position = vec4(pos, 1.0); 68 | float pump = step(0.5, snd); 69 | vec3 hue = hue2rgb(snd); 70 | vec3 color = vec3(pump, pump, 0.5) * hue; 71 | 72 | v_color = vec4(color, 1.0); 73 | } 74 | -------------------------------------------------------------------------------- /voronoi/voronoi_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#40431.2 2 | // See https://thebookofshaders.com/12/?lan=jp 3 | 4 | #ifdef GL_ES 5 | precision mediump float; 6 | #endif 7 | 8 | #extension GL_OES_standard_derivatives : enable 9 | 10 | uniform float time; 11 | uniform vec2 mouse; 12 | uniform vec2 resolution; 13 | 14 | vec2 random2(vec2 p) { 15 | return fract(sin(vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)))) * 43758.5453); 16 | } 17 | 18 | void main( void ) { 19 | vec2 st = (gl_FragCoord.xy / resolution.xy ); 20 | st.x *= resolution.x / resolution.y; 21 | 22 | vec3 color = vec3(0.0); 23 | float m_dist = 1.0; 24 | vec2 m_point; 25 | 26 | st *= 3.0; 27 | 28 | vec2 i_st = floor(st); 29 | vec2 f_st = fract(st); 30 | 31 | // check contiguous tiles (9 tiles) 32 | for (int x = -1; x <= 1; x++) { 33 | for (int y = -1; y <= 1; y++) { 34 | vec2 neighbor = vec2(float(x), float(y)); 35 | 36 | vec2 point = random2(i_st + neighbor); 37 | // animate 38 | point = 0.5 + 0.5 * sin(time * 2.0 * point); 39 | 40 | vec2 diff = neighbor + point - f_st; 41 | float dist = length(diff); 42 | 43 | // distance field 44 | // m_dist = min(m_dist, dist); 45 | 46 | // voronoi 47 | if (dist < m_dist) { 48 | m_dist = dist; 49 | m_point = point; 50 | } 51 | } 52 | } 53 | 54 | // voronoi 55 | //color += m_dist; 56 | color.rg += m_point.x; 57 | 58 | // cell 59 | color.r += 1.0 - step(0.02, m_dist); 60 | 61 | // grid 62 | //color += vec3(step(0.99, f_st.x) + step(0.99, f_st.y)); 63 | 64 | gl_FragColor = vec4(color, 1.0); 65 | } -------------------------------------------------------------------------------- /word/word_io18_1.frag: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#46945.6 2 | 3 | #ifdef GL_ES 4 | precision mediump float; 5 | #endif 6 | 7 | #extension GL_OES_standard_derivatives : enable 8 | 9 | uniform float time; 10 | uniform vec2 resolution; 11 | 12 | float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) { 13 | return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); 14 | } 15 | 16 | float random(in vec2 uv){ 17 | return fract(sin(dot(uv, vec2(12.9898,78.233))) * 43758.5453); 18 | } 19 | 20 | mat2 rotate2d(float angle){ 21 | return mat2(cos(angle), -sin(angle), sin(angle), cos(angle)); 22 | } 23 | 24 | float circle(vec2 uv, float size) { 25 | return step(size, length(uv)); 26 | } 27 | 28 | float rect(vec2 uv, float width, float height) { 29 | vec2 rect = vec2(step(-width, uv.x), step(-height, uv.y)) * vec2((1.0 - step(width, uv.x)), 1.0 - step(height, uv.y)); 30 | return min(rect.x, rect.y); 31 | } 32 | 33 | float obliqueLine(vec2 uv){ 34 | return step(0.6, fract((uv.x + uv.y + time * 0.8) * 4.0)); 35 | } 36 | 37 | float pluralRing(vec2 uv, float interval) { 38 | return sin(length(uv) * interval); 39 | } 40 | 41 | void main( void ) { 42 | vec2 uv = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); 43 | 44 | float num = 30.0; 45 | vec2 scaledUv = uv *num; 46 | vec2 repeatedUv = fract(scaledUv); 47 | repeatedUv -= 0.5; 48 | 49 | float randomOffset = abs(sin(time * 5.0 * random(floor(scaledUv)))); 50 | float ballRadius = 0.4 * randomOffset; 51 | 52 | float point = circle(repeatedUv, ballRadius); 53 | vec2 circleCenterInUv = (floor(scaledUv) + 0.5) / num; // normalized uv. 54 | 55 | vec3 color = vec3(1.0); 56 | float offsetX = 0.7; 57 | 58 | // Word "I" 59 | float word_I = rect(vec2(circleCenterInUv.x + 0.4 + offsetX, circleCenterInUv.y), 0.1, 0.5); 60 | if (word_I > 0.0) { 61 | color.r -= rect(vec2(uv.x + 0.4 + offsetX, uv.y), 0.08, 0.48); 62 | color.gb -= obliqueLine(uv * 2.0) * 0.8; 63 | color.rg -= (1.0 - point); 64 | } 65 | 66 | // Word "/" 67 | /* 68 | float word_slash = rect(vec2(circleCenterInUv.x + 0.4 + offsetX, circleCenterInUv.y) * rotate2d(-1.2), 0.6, 0.07); 69 | if (word_slash > 0.0) { 70 | color.rg -= (1.0 - point); 71 | } 72 | */ 73 | 74 | // Word "O" 75 | float word_O = 1.0 - circle(vec2(circleCenterInUv.x - 0.33 + offsetX, circleCenterInUv.y), 0.5); 76 | if (word_O > 0.0) { 77 | float innerCircle1 = 1.0 - circle(vec2(uv.x - 0.33 + offsetX, uv.y), map(cos(time * 8.0), -1.0, 1.0, 0.2, 0.3)); 78 | color.b -= innerCircle1 * 0.5; 79 | float innerCircle2 = 1.0 - circle(vec2(uv.x - 0.33 + offsetX, uv.y), map(sin(time * 8.0), -1.0, 1.0, 0.4, 0.45)); 80 | color.g -= innerCircle2; 81 | color.b -= obliqueLine(uv * 3.0) * 0.8; 82 | color.rg *= point; 83 | } 84 | 85 | // Word "1" 86 | float word_1 = rect(vec2(circleCenterInUv.x - 1.1 + offsetX, circleCenterInUv.y), 0.1, 0.5); 87 | if (word_1 > 0.0) { 88 | color.rb -= rect(vec2(uv.x -1.1 + offsetX, uv.y), 0.08, map(sin(time * 5.0), -1.0, 1.0, 0.42, 0.48)); 89 | color.g -= (1.0 - point); 90 | } 91 | 92 | // Word "8" 93 | float word_8_top = 1.0 - circle(vec2(circleCenterInUv.x - 1.6 + offsetX, circleCenterInUv.y - 0.25), 0.3); 94 | if (word_8_top > 0.0) { 95 | float innerCircle = 1.0 - circle(vec2(uv.x - 1.6 + offsetX, uv.y - 0.25), 0.15); 96 | color.g -= innerCircle * 0.8; 97 | color.rb -= obliqueLine(uv * 6.0 * rotate2d(-1.2)) * 0.6; 98 | color.rg *= point; 99 | } 100 | float word_8_under = 1.0 - circle(vec2(circleCenterInUv.x - 1.6 + offsetX, circleCenterInUv.y + 0.25), 0.3); 101 | if (word_8_under > 0.0) { 102 | vec2 v = vec2(uv.x - 1.6 + offsetX, uv.y + 0.25); 103 | float innerCircle = 1.0 - circle(v, 0.24); 104 | color.r -= step(0.5, pluralRing(v * 8.0, abs(cos(time * 3.0)))); 105 | color.gb -= innerCircle * 0.8; 106 | color.rg *= point; 107 | } 108 | 109 | gl_FragColor = vec4(color, 1.0); 110 | } --------------------------------------------------------------------------------