asorc
commented
1 month ago That's the main.html I am using to run Hydra inside a web page offline.
<!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="hydra-synth.js"></script>
<script src="lib-pattern.js"></script>
<!-- script src="hydra-torus-editor.js"></script-->
</head>
<body>
<textarea id="code" rows="2" cols="50" placeholder="Enter code"></textarea>
<button onclick="eval(document.getElementById('code').value);"> Run </button>
<button onclick="useCamera()"> camera </button>
<button onclick="feedback()"> feedback </button>
<canvas id="myCanvas" width="800" height="650px"></canvas>
<script>
// create a new hydra-synth instance
var hydra = new Hydra({
canvas: document.getElementById("myCanvas"),
detectAudio: false
})
//osc(10, 0.1, 0.8).rotate(0, 0.1).kaleid().color(-1, 1).out()
// create functions to use with buttons
function useCamera() {
s0.initCam()
src(s0).color(-1, Math.random()*2, 1).colorama().out()
}
function feedback() {
src(o1)
.layer(src(o0).mask(shape(4, 0.4, 0)))
.scrollX([0.005, -0.005])
.scrollY(0.005)
.out(o1)
render(o1)
}
</script>
</body>
</html>I am using a textarea and a button to run the Code. In this way the "await(loadscript..." does not work as It does It on the hydra web editor.
micuat
Hello,
I am trying to use the patterns extension libraries using Hydra inside a web site.
I tried first to copy the await... statement as in the online example, and It didn't work. Then I downloaded the files and added all.js and lib-pattern.js on an additional line, as the hydra synth is loaded. And It didn't work. Is there a way to make It work?
Thanks in advance. Cheers.