Lissajous curve shader. Affine transformation. 3D cubic generative art.'s game

Click here for free DL of the app version that can save data.

No:3421

3398

←

Prev Next

→

Lissajous curve shader. Affine transformation. 3D ..ALL
Developer User3655｜Date and time 23/6/25 2:17:51
Build time 34.566 sec｜Game capacity 4.631KB｜

Script

以下が、リサージュ曲線シェーダー、アフィン変換、3Dキューブ型ジェネラティブアートの実装例です。スマホで遊べるように、タッチ操作に対応しています。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

<html>
  <head>
    <style>
      canvas {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

const vsSource = `
        attribute vec4 position;
        void main() {
          gl_Position = position;
        }
      `;
      const fsSource = `
        precision mediump float;

uniform float time;
        uniform vec2 resolution;

void main() {
          vec2 uv = gl_FragCoord.xy / resolution.xy;
          float x = sin(uv.y * 10.0 + time);
          float y = sin(uv.x * 10.0 + time * 1.5);
          float r = 0.5 + 0.5 * sin(time * 0.5);
          vec3 color = vec3(r * x, r * y, 0.5);
          gl_FragColor = vec4(color, 1.0);
        }
      `;

const program = createProgram(gl, vsSource, fsSource);
      const positionAttributeLocation = gl.getAttribLocation(program, 'position');
      const positionBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
      setRectangle(gl, -1, -1, 2, 2);

gl.enableVertexAttribArray(positionAttributeLocation);
      gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

const timer = createTimer();
      const uniforms = {
        time: { value: 0 },
        resolution: { value: [canvas.width, canvas.height] },
      };

function animate() {
        uniforms.time.value = timer.getElapsedTime();
        setSize(canvas);
        render();
        requestAnimationFrame(animate);
      }

function render() {
        gl.useProgram(program);
        setUniforms(gl, program, uniforms);
        gl.drawArrays(gl.TRIANGLES, 0, 6);
      }

function createProgram(gl, vs, fs) {
        const program = gl.createProgram();
        const vertexShader = createShader(gl, gl.VERTEX_SHADER, vs);
        const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fs);
        gl.attachShader(program, vertexShader);
        gl.attachShader(program, fragmentShader);
        gl.linkProgram(program);
        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
          throw new Error(gl.getProgramInfoLog(program));
        }
        return program;
      }

function createShader(gl, type, source) {
        const shader = gl.createShader(type);
        gl.shaderSource(shader, source);
        gl.compileShader(shader);
        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
          throw new Error(gl.getShaderInfoLog(shader));
        }
        return shader;
      }

function setRectangle(gl, x, y, width, height) {
        const positions = [
          x + width, y,
          x, y,
          x, y + height,
          x, y + height,
          x + width, y + height,
          x + width, y,
        ];
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
      }

function setSize(canvas) {
        canvas.width = canvas.clientWidth;
        canvas.height = canvas.clientHeight;
      }

animate();

</script>
  </body>
</html>