Skip to content

W
www
Commit 59aa9c7f by PLN (Algolia)
Options

feat: MVP Hydra live

parent 0935b28b
Showing with 27 additions and 38 deletions
next/components/hydra.js → next/components/hydra-view.js
import React, { useRef, useEffect } from "react";
class HydraSynth extends React.Component {
constructor(props) {
super(props);
this.width = props.width;
this.height = props.height;
this.source= props.source;
// FIXME: Webgl not supported if I use this??
// this.canvasRef = props.canvasRef;
}
componentDidMount() {
const Hydra = require('hydra-synth');
const hydra = new Hydra({
// canvas element to render to. If none is supplied, a canvas will be created and appended to the screen
// canvas: this.canvasRef,
import('hydra-synth').then((Hydra) => {
console.log(this.canvasRef);
const hydra = new Hydra.default({
// canvas element to render to. If none is supplied,
// a canvas will be created and appended to the screen
canvas: this.canvasRef,
autoLoop: true,
makeGlobal: true,
numSources: 4,
......@@ -20,29 +25,13 @@ class HydraSynth extends React.Component {
numOutputs: 4,
});
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)
hydra.eval(this.source);
});
}
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 @@
"classnames": "^2.3.1",
"date-fns": "^2.21.1",
"gray-matter": "^4.0.2",
"hydra-synth": "^1.3.8",
"hydra-synth": "^1.3.29",
"next": "^10.1.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
......
next/pages/hydra.js
......@@ -2,7 +2,7 @@ import Image from "next/image";
import Link from "next/link";
import Head from "next/head";
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 { getHydrasData } from "../lib/hydras";
......
next/pages/hydra/[id].js
import SyntaxHighlighter from "react-syntax-highlighter";
import Head from "next/head";
import Layout from "../../components/layout";
import HydraSynth from "../../components/hydra";
import HydraSynth from "../../components/hydra-view";
import Date from "../../components/date";
const https = require("https");
import { useRef } from "react";
import utilStyles from "../../styles/utils.module.css";
import { getAllHydraIds, getHydraData } from "../../lib/hydras";
......@@ -34,6 +35,7 @@ export async function getStaticPaths() {
}
export default function Hydra({ hydraData, sourceCode }) {
const canvasRef = useRef(null);
return (
<Layout>
<Head>
......@@ -41,22 +43,19 @@ export default function Hydra({ hydraData, sourceCode }) {
</Head>
<article>
<h1 className={utilStyles.headingXl}>{hydraData.title}</h1>
<h3>See it running at the bottom of this page, or</h3>
<h5>
<i>
<a href={hydraData.link}>See it live in your browser</a>
</i>
<i><a href={hydraData.link}>Run it fullscreen in your browser</a></i>
</h5>
{/* <canvas id={canvasRef}/> */}
<HydraSynth width={700} height={475}
canvasRef={canvasRef} source={hydraData.source} />
<SyntaxHighlighter
width="64em"
language="javascript"
wrapLongLines={true}
>
wrapLongLines={true}>
{hydraData.source}
</SyntaxHighlighter>
{/*<HydraSynth
width={700}
height={475}
source={hydraData.source}/>*/}
</article>
</Layout>
);
......
next/pages/starry-nights.js
......@@ -2,7 +2,8 @@ import Image from "next/image";
import Link from "next/link";
import Head from "next/head";
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";
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