Forum Archive

For the fun or as sample of a Pixelisation Shader in a Scene View

from scene import *
import ui

# PIXELISATION GLSL shader program
ripple_shader1 = '''
precision highp float;
uniform vec2 u_sprite_size;  // size of the sprite (in points)
varying vec2 v_tex_coord;    // texture coordinate
uniform sampler2D u_texture; // input image
uniform float u_time;        // current timestamp of the scene animation loop

void main()
{
 float px = 20.;
 float dx = px*cos(u_time/4.)*(1./u_sprite_size.x);
 float dy = px*cos(u_time/4.)*(1./u_sprite_size.y);
 vec2 coord = vec2(dx*floor(v_tex_coord.x/dx),
                   dy*floor(v_tex_coord.y/dy));
 gl_FragColor = texture2D(u_texture,coord);
}
'''
class MyScene(Scene):
    def setup(self):
        self.sprite = SpriteNode('test:Lenna')
        self.sprite.shader = Shader(ripple_shader1)
        self.sprite.position = self.size / 2
        self.add_child(self.sprite)

# create ui.View as SceneView
def MySceneView():
    SceneView_str = '''[{
    "class" : "View", 
    "attributes" : {"custom_class" : "SceneView"},
    "frame" : "{{0, 0}, {240, 240}}"
    }]
  '''
    v = ui.load_view_str(SceneView_str)
    return v        

mv = ui.View()
mv.name = 'Pixelisation Shader in a Scene View'
mv.frame = (0,0,400,400)
mv.background_color = 'white'

sv = MySceneView()
sv.frame = (80,80,240,240)
sv.scene = MyScene()
mv.add_subview(sv)

mv.present('sheet') 

For the fun, try two other shaders

# ERASE ROW BY ROW GLSL shader program
ripple_shader2 = '''
precision highp float;
varying vec2 v_tex_coord;
// These uniforms are set automatically:
uniform vec2 u_sprite_size;  // size of the sprite (in points)
uniform sampler2D u_texture; // input image
uniform float u_time;        // current timestamp of the scene animation loop

void main(void) {
    vec4 color = texture2D(u_texture,v_tex_coord);
    if (v_tex_coord.y > cos(u_time/2.)) color.rgb = vec3(1.);
    gl_FragColor = vec4(color.rgb, 1);
}
'''
# ERASE BY CIRCLES GLSL shader program
ripple_shader3 = '''
precision highp float;
varying vec2 v_tex_coord;
// These uniforms are set automatically:
uniform vec2 u_sprite_size;  // size of the sprite (in points)
uniform sampler2D u_texture; // input image
uniform float u_time;        // current timestamp of the scene animation loop

void main(void) {
    vec4 color = texture2D(u_texture,v_tex_coord);
    // center of image is at v_tex_coord = 0.5,0.5
    float r = sqrt(pow(v_tex_coord.x-0.5,2.)+pow(v_tex_coord.y-0.5,2.));
    if (r > cos(u_time/2.)) color.rgb = vec3(1.);
    gl_FragColor = vec4(color.rgb, 1);
}
''' 

@cvp, respect! I have found coding ”in the string” with a ”too-C” language to be too much for my patience.

Which reference are you using for the shader language? I remember finding only ”almost, but not quite” references.

@mikael I started from the Pythonista doc about scene shader and then I used Google to find help about GLSL language and examples.

And my little GLSL program has only 4 lines, that's not too much 🤕