DEV Community

Cover image for How to Create Artistic Codes with C++ and GLSL (Shaders)
Marcos Oliveira
Marcos Oliveira

Posted on

How to Create Artistic Codes with C++ and GLSL (Shaders)

#cpp #glsl #opengl #sfml

GLSL is a language for creating high-level shaders. It is based on C, so it has a very similar syntax.

GLSL is the main shading language for OpenGL, and is widely used by programmers and artists, i.e., code for creating art and vice versa.

▶️ Watch the Video

How to Create Artistic Codes with C++ and GLSL (Shaders)

👀 Codes created in the Video

main.cpp

#include <SFML/Graphics.hpp> #include <iostream>  int main(){ sf::RenderWindow window(sf::VideoMode(1280,720), "SFML GLSL Shaders"); sf::Shader shader; sf::Clock clock; sf::RectangleShape rect( sf::Vector2f( static_cast<float>(window.getSize().x), static_cast<float>(window.getSize().y) ) ); if(!shader.loadFromFile("shader.frag", sf::Shader::Fragment)){ std::cerr << "Failed to load file.\n"; return EXIT_FAILURE; } while( window.isOpen() ){ sf::Event event; while( window.pollEvent(event)){ if( event.type == sf::Event::Closed ){ window.close(); } } float time = clock.getElapsedTime().asSeconds(); shader.setUniform("iTime", time); shader.setUniform("iResolution", sf::Glsl::Vec3( window.getSize().x, window.getSize().y, 1.0 )); window.clear(); window.draw(rect, &shader); window.display(); } return EXIT_SUCCESS; } // g++ main.cpp -lsfml-graphics -lsfml-window -lsfml-system
Enter fullscreen mode Exit fullscreen mode

shader.frag

#version 150 core  uniform float iTime; uniform vec3 iResolution; out vec4 fragColor; vec3 rand_colors(float f){ vec3 a = vec3(0.5f, 0.5f, 0.5f); vec3 b = vec3(0.5f, 0.5f, 0.5f); vec3 c = vec3(1.0f, 1.0f, 1.0f); vec3 d = vec3(0.123f, 0.456f, 0.567f); return a + b * cos(6.5 * (c * f + d)); } void main(){ vec2 fragCoord = gl_FragCoord.xy; vec2 uv = (fragCoord * 2.0 - iResolution.xy) / iResolution.y; for(int i = 0; i < 4; ++i){ uv = fract(uv); uv -= 0.5; float d = length(uv); vec3 color = rand_colors(d + iTime); d = sin(d * 8.f + iTime * 3.f) / 6.f; d = abs(d); //d -= 0.5; d = 0.02f / d; color *= d; fragColor = vec4(color, 1.0); } }
Enter fullscreen mode Exit fullscreen mode

Código básico .frag para criar um projeto do zero:

#version 150 core  uniform float iTime; uniform vec3 iResolution; out vec4 fragColor; void main(){ vec2 fragCoord = gl_FragCoord.xy; }
Enter fullscreen mode Exit fullscreen mode

🔗 Links mentioned in the Video

Links to courses:

Additional links:

Top comments (1)

Collapse
 
v_systems profile image
V_Systems •

Apply your GLSL skills to the V Shader Hackathon, running until 22 May 2025!
Create unique Shader art to win up to $1000 :)

  • Create your original Shader
  • Upload the Javascript to the V Systems blockchain to turn it into an NFT
  • Be one of the 16 winners of prizes ranging $500-$1000

How to join: medium.com/vsystems/13-26-april-cr...

Any questions? Join our community!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.