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.