PENUMBRA

      const float RAYMARCH_MIN_DIST = 0.3;
      const float RAYMARCH_MAX_DIST = 50.0;
      const float RAYMARCH_HIT_CUTOFF = 0.001;
      const int RAYMARCH_MAX_ITERS = 32;
      const float CAMERA_FOV = 0.3;
      const vec3 LIGHT_POS = vec3(-2.0, 2.0, -1.0);
      const float PI = 3.14159265358979323846;
      const float DEG2RAD = PI / 180.0;
      const float ANIM_SPEED = 1.0;
      float clamp01(float x) { return clamp(x, 0.0, 1.0); }
      vec3 clamp01(vec3 x) { return clamp(x, 0.0, 1.0); }
      vec3 rotateX(vec3 p, float a) {
        float c = cos(a), s = sin(a);    
        return vec3(p.x, c * p.y - s * p.z, s * p.y + c * p.z);    
      }
      vec3 rotateY(vec3 p, float a) {
        float c = cos(a), s = sin(a);    
        return vec3(c * p.x + s * p.z, p.y, -s * p.x + c * p.z);    
      }

getting started.

Penumbra is a Hack Club YSWS (You Ship, We Ship) program, where you ship art made with shaders, and we ship you posters of that art, free of charge! We're also giving away RTX and RX GPUs for the most dedicated.

Join the Slack and setup Hackatime

Create shaders with ShaderToy

Submit them and get posters

45 hrs of work = GPU!

We will use a local poster printing service in your country in order to ship your poster. In order to get a GPU, you'll need to spend at least 45 hours across multiple shaders. We'll let you know how close you are to that goal on Slack!

To get started, join our Slack and set up Hackatime! We use Slack as our primary communication platform. Hackatime is our custom WakaTime server to track your coding time. You can use it with the WakaTime for ShaderToy browser extension!

Join the Slack

Set-up WakaTime with Hackatime

Install the Chrome extension

Install the Firefox extension

Have fun on ShaderToy!

But first - let's explain what actually *is* a shader. For each pixel coordinate, a “fragment” shader will return its color!

This language is called GLSL - the OpenGL Shading Language. Try messing around with the sandbox above!

You're given UV coordinates: they range from 0.0 to 1.0. (0.0, 0.0) is the bottom-right corner, and (1.0, 1.0) is the top-left one. The center of the screen is at (0.5, 0.5).

There are multiple approaches to making art with shaders! Because what you're writing is just a function, try using random math formulas, and see what happens!

If you want to do 3D, you are probably searching for raymarching. You can learn more about it with the guides in the next section!

resources & guides.

If you ever are stuck, don't be afraid to ask in the #penumbra Slack channel. For inspiration, take a look at ShaderToy's Browse tab! It's full of fancy shaders, all with code!

If you're just starting out, or need a refresher, watch kishimisu's fantastic introduction to the world of making art with shaders!

If you're interested in 3D raymarching, these might come in handy:

submit.

Before you submit - make sure you:

joined our Slack
measured your coding time with Hackatime
have your shader published on ShaderToy AND a Git repository

You'll need to work at least 5 hours on your shader for it to qualify to get a free poster.

SUBMIT A SHADER

PENUMBRA

getting started.

resources & guides.

An introduction to Shader Art Coding

An introduction to Raymarching

submit.