Skip to content

W
www
Commit 59aa9c7f by PLN (Algolia)
Options

feat: MVP Hydra live

parent 0935b28b
Showing with 33 additions and 44 deletions
next/components/hydra.js → next/components/hydra-view.js
import React, { useRef, useEffect } from "react"; import React, { useRef, useEffect } from "react";
class HydraSynth extends React.Component { class HydraSynth extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.width = props.width; this.width = props.width;
this.height = props.height; this.height = props.height;
this.source= props.source; this.source= props.source;
// FIXME: Webgl not supported if I use this??
// this.canvasRef = props.canvasRef;
} }
componentDidMount() { componentDidMount() {
const Hydra = require('hydra-synth'); import('hydra-synth').then((Hydra) => {
const hydra = new Hydra({ console.log(this.canvasRef);
// canvas element to render to. If none is supplied, a canvas will be created and appended to the screen const hydra = new Hydra.default({
// canvas: this.canvasRef, // canvas element to render to. If none is supplied,
autoLoop: true, // a canvas will be created and appended to the screen
makeGlobal: true, canvas: this.canvasRef,
numSources: 4, autoLoop: true,
detectAudio: false, makeGlobal: true,
numOutputs: 4, numSources: 4,
detectAudio: false,
numOutputs: 4,
});
hydra.setResolution(this.width, this.height);
hydra.eval(this.source);
}); });
hydra.setResolution(this.width, this.height);
//TODO: Use source
// FIXME: Canvas position
s0.initImage("https://git.plnech.fr/pln/Hydra/raw/master/StarryNights/img/halley.png");
src(s0).out(o0)
src(o0)
.modulate(src(o0),() => Math.sin(time/100) / 10)
.out(o1)
src(o1)
.modulateScale(osc(1,0.4),0.05)
.blend(noise(100,0.92).colorama(),0.07)
.out(o2)
src(o2)
.blend(src(o2).thresh(), () => 0.5 + 0.125 * Math.sin(time / 100 % 180))
.scrollX(-0.05)
// .scrollY(-0.1)
.scale(1.08)
.out(o3)
render(o3)
} }
render() { render() {
return <canvas ref="{this.canvasRef}" width={this.width} height={this.height} />; return <div>
{/* <canvas ref="{this.canvasRef}" width={this.width} height={this.height} /> */}
</div>;
} }
} }
......
next/package-lock.json 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
next/package.json
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
"classnames": "^2.3.1", "classnames": "^2.3.1",
"date-fns": "^2.21.1", "date-fns": "^2.21.1",
"gray-matter": "^4.0.2", "gray-matter": "^4.0.2",
"hydra-synth": "^1.3.8", "hydra-synth": "^1.3.29",
"next": "^10.1.3", "next": "^10.1.3",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
......
next/pages/hydra.js
...@@ -2,7 +2,7 @@ import Image from "next/image"; ...@@ -2,7 +2,7 @@ import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import Head from "next/head"; import Head from "next/head";
import Layout from "../components/layout"; import Layout from "../components/layout";
import HydraSynth from "../components/hydra"; import HydraSynth from "../components/hydra-view.js";
import utilStyles from "../styles/utils.module.css"; import utilStyles from "../styles/utils.module.css";
import { getHydrasData } from "../lib/hydras"; import { getHydrasData } from "../lib/hydras";
......
next/pages/hydra/[id].js
import SyntaxHighlighter from "react-syntax-highlighter"; import SyntaxHighlighter from "react-syntax-highlighter";
import Head from "next/head"; import Head from "next/head";
import Layout from "../../components/layout"; import Layout from "../../components/layout";
import HydraSynth from "../../components/hydra"; import HydraSynth from "../../components/hydra-view";
import Date from "../../components/date"; import Date from "../../components/date";
const https = require("https"); const https = require("https");
import { useRef } from "react";
import utilStyles from "../../styles/utils.module.css"; import utilStyles from "../../styles/utils.module.css";
import { getAllHydraIds, getHydraData } from "../../lib/hydras"; import { getAllHydraIds, getHydraData } from "../../lib/hydras";
...@@ -34,6 +35,7 @@ export async function getStaticPaths() { ...@@ -34,6 +35,7 @@ export async function getStaticPaths() {
} }
export default function Hydra({ hydraData, sourceCode }) { export default function Hydra({ hydraData, sourceCode }) {
const canvasRef = useRef(null);
return ( return (
<Layout> <Layout>
<Head> <Head>
...@@ -41,22 +43,19 @@ export default function Hydra({ hydraData, sourceCode }) { ...@@ -41,22 +43,19 @@ export default function Hydra({ hydraData, sourceCode }) {
</Head> </Head>
<article> <article>
<h1 className={utilStyles.headingXl}>{hydraData.title}</h1> <h1 className={utilStyles.headingXl}>{hydraData.title}</h1>
<h3>See it running at the bottom of this page, or</h3>
<h5> <h5>
<i> <i><a href={hydraData.link}>Run it fullscreen in your browser</a></i>
<a href={hydraData.link}>See it live in your browser</a>
</i>
</h5> </h5>
{/* <canvas id={canvasRef}/> */}
<HydraSynth width={700} height={475}
canvasRef={canvasRef} source={hydraData.source} />
<SyntaxHighlighter <SyntaxHighlighter
width="64em" width="64em"
language="javascript" language="javascript"
wrapLongLines={true} wrapLongLines={true}>
>
{hydraData.source} {hydraData.source}
</SyntaxHighlighter> </SyntaxHighlighter>
{/*<HydraSynth
width={700}
height={475}
source={hydraData.source}/>*/}
</article> </article>
</Layout> </Layout>
); );
......
next/pages/starry-nights.js
...@@ -2,7 +2,8 @@ import Image from "next/image"; ...@@ -2,7 +2,8 @@ import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import Head from "next/head"; import Head from "next/head";
import Layout from "../components/layout"; import Layout from "../components/layout";
import HydraSynth from "../components/hydra"; import HydraSynth from "../components/hydra-view";
import HydraSynth from "../components/hydra-view";
import utilStyles from "../styles/utils.module.css"; import utilStyles from "../styles/utils.module.css";
export default function NuitsEtoilees() { export default function NuitsEtoilees() {
......
next/yarn.lock
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment