@absulit/points

v0.5.1

Published

a month ago

A Generative Art library made in WebGPU

Downloads

0High
0Medium
0Low

absulit

javascript webgpu creative-coding shaders generative-art genart wgsl

POINTS

POINTS is a library that uses WebGPU and allows you to create shaders without worrying too much about the setup.

Gallery

https://github.com/user-attachments/assets/e61d8af1-a549-40bc-a790-221a3f8a41c7

Examples

All examples are live here: https://absulit.github.io/points/examples/

Main Audience

The library is for Generative Art, so in general for Creative Coders, for Programmers/Software people who like the arts, and Artists who like to code.

People who just want to create nice live graphics and use mathematics to achieve this.

There's also a strong case for people who wants to create an application that harness the power of a Compute Shader. So a Software Engineer or Mathematician who has to make heavy calculations can do it with this library.

You can code freely without the use of any of the provided support modules (math, color, image, effects, noise, sdf, etc) or you can use them and have a little bit less of code in the shader. You can of course create your own modules and import them in the same way.

Quick Setup

<html>

<head>
    <title>POINTS Quick Setup</title>
</head>

<body>
    <canvas id="canvas" width="800" height="800">
        Oops ... your browser doesn't support the HTML5 canvas element
    </canvas>

    <script type="importmap">
        {
            "imports": {
                "points": "https://cdn.jsdelivr.net/npm/@absulit/points/build/points.min.js"
            }
        }
    </script>

    <script type="module">
        // import the `Points` class
        import Points, { RenderPass } from 'points';

        // reference the canvas in the constructor
        const points = new Points('canvas');

        // create your render pass with three shaders as follow
        const renderPass =
            new RenderPass(/*wgsl*/`
                @vertex
                fn main(
                    @location(0) position:vec4f,
                    @location(1) color:vec4f,
                    @location(2) uv:vec2f,
                    @builtin(vertex_index) vertexIndex:u32
                ) -> Fragment {

                    return defaultVertexBody(position, color, uv);
                }`,
                /*wgsl*/`
                @fragment
                fn main(
                    @location(0) color:vec4f,
                    @location(1) uv:vec2f,
                    @location(2) ratio:vec2f,  // relation between params.screen.x and params.screen.y
                    @location(3) uvr:vec2f,    // uv with aspect ratio corrected
                    @location(4) mouse:vec2f,
                    @builtin(position) position:vec4f
                ) -> @location(0) vec4f {

                    return vec4f(uvr, 0, 1);
                }
                `,
                /*wgsl*/`

                @compute @workgroup_size(8,8,1)
                fn main(
                    @builtin(global_invocation_id) GlobalId:vec3u,
                    @builtin(workgroup_id) WorkGroupID:vec3u,
                    @builtin(local_invocation_id) LocalInvocationID:vec3u
                ) {
                    let time = params.time;
                }
                `,
            )


        // call the POINTS init method and then the update method
        await points.init([renderPass]);
        update();

        // call `points.update()` methods to render a new frame
        function update() {
            points.update();
            requestAnimationFrame(update);
        }
    </script>

</body>

</html>

Documentation

Collaborators

@juulio

Documentation testing
Verifying installation is understandable

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme