Dynamic canvas to pass into hydra-synth

Question

Dynamic canvas to pass into hydra-synth

witfyl-ravped opened this issue a year ago · comments

Hey there. I want to make a simple HTML viewer page but am having trouble getting the canvas to dynamically resize to the width/height of the browser.

I ran into the issue of low image quality when using CSS to dynamically size the canvas. In React it's easy enough to use {window.innerHeight} etc. so I figured I would embed a JS script to listen and edit the canvas tag (see full code below).

However I encounter the following error whenever I use JS to either create or modify the canvas tag:

hydra-synth:3103 Uncaught TypeError: Cannot read properties of null (reading 'clear') at HydraRenderer._initRegl (hydra-synth:3103:15) at new HydraRenderer (hydra-synth:2934:10) at index.html:41:19

I checked the lines given in the error but I can't figure out why they get thrown when the canvas element is modified by JS.

I'd appreciate any thoughts on this issue, full code modified from Hydra inside a webpage below. Thanks!

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>hydra inside a webpage</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css" />
    
    <!-- import the latest version of hydra synth-->
    <script src="https://unpkg.com/hydra-synth"></script>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>

    <script>
      function createResizableCanvas() {
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');

        // Function to set canvas size
        function setCanvasSize() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }

        // Initialize canvas size
        setCanvasSize();

        // Handle window resize events
        window.addEventListener('resize', function () {
            setCanvasSize();
        });

    }

    createResizableCanvas();
      
      var hydra = new Hydra({
        canvas: document.getElementById("myCanvas"),
        detectAudio: false
      })
    
      src(o0)
      .scale(1.01)
      .blend(osc(10, .1, ({time})=>Math.sin(time*10)+2)
        .mult(shape(4, .7, 1e-6)
            .modulateKaleid(osc(()=>Math.sin(time*.5)+.1)).rotate(1,80)
            .modulateScrollX(osc(()=>Math.sin(time*.4)),.01)
            .rotate(.01,3.1)
            .scale(()=>Math.sin(time*.52)*.5)
            //.color(1.12,-1.04,-1.31)
            .brightness(.3)
            .modulateScale(noise(.1))), .02)
      .modulate(o0,.01)
      .out(o0)

    speed=.05
    </script>
    <style>
      body {
        background-color: black;
        margin: 0; /* Remove default margin */
        overflow: hidden; /* Prevent scrollbars */
      }
      </style>
  </body>
</html>

witfyl-ravped · Answer 1 · Tue Sep 26 2023 05:43:36 GMT+0800 (China Standard Time)

Update: Got the results I was looking for by passing in custom width and height and having hydra-synth.js create my canvas for me like so:

      var hydra = new Hydra({
        width: 1280,
        height: 1280,
        detectAudio: false
      })