diff --git a/next/components/hydra.js b/next/components/hydra.js index 4dda940..a23e3e4 100644 --- a/next/components/hydra.js +++ b/next/components/hydra.js @@ -5,6 +5,7 @@ class HydraSynth extends React.Component { super(props); this.width = props.width; this.height = props.height; + this.source= props.source; } componentDidMount() { @@ -20,25 +21,24 @@ class HydraSynth extends React.Component { }); hydra.setResolution(this.width, this.height); - // This works! Now generate one for each :D - // TODO: One per page, with template and lib + //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) + 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() { diff --git a/next/components/layout.module.css b/next/components/layout.module.css index d2ea313..38a5946 100644 --- a/next/components/layout.module.css +++ b/next/components/layout.module.css @@ -1,5 +1,5 @@ .container { - max-width: 36rem; + max-width: 42rem; padding: 0 1rem; margin: 3rem auto 6rem; } diff --git a/next/content/hydras/dusty-halley.md b/next/content/hydras/dusty-halley.md new file mode 100644 index 0000000..57f15da --- /dev/null +++ b/next/content/hydras/dusty-halley.md @@ -0,0 +1,4 @@ +--- +title: Dusty Halley +source: https://git.plnech.fr/pln/Hydra/raw/master/StarryNights/DustyHalley.js +--- diff --git a/next/content/hydras/galactic.md b/next/content/hydras/galactic.md new file mode 100644 index 0000000..5432e29 --- /dev/null +++ b/next/content/hydras/galactic.md @@ -0,0 +1,4 @@ +--- +title: GaLactic +source: https://git.plnech.fr/pln/Hydra/raw/master/StarryNights/GaLactic.js +--- diff --git a/next/lib/hydras.js b/next/lib/hydras.js new file mode 100644 index 0000000..6d56e67 --- /dev/null +++ b/next/lib/hydras.js @@ -0,0 +1,13 @@ +import {getAllContentData, getAllContentIds, getContentData} from './utils' + +export function getHydrasData() { + return getAllContentData('hydras', true) +} + +export function getAllHydraIds() { + return getAllContentIds("hydras") +} + +export async function getHydraData(id) { + return getContentData("hydras", id) +} diff --git a/next/pages/hydra.js b/next/pages/hydra.js index f903a97..553f7b6 100644 --- a/next/pages/hydra.js +++ b/next/pages/hydra.js @@ -3,19 +3,25 @@ import Link from "next/link"; import Head from "next/head"; import Layout from "../components/layout"; import HydraSynth from "../components/hydra"; +import utilStyles from "../styles/utils.module.css"; +import { getHydrasData } from "../lib/hydras"; + +export async function getStaticProps() { + const hydras = getHydrasData(); -export async function getStaticProps(context) { return { - props: {}, + props: { + hydras, + }, }; } -export default function Hydra() { +export default function Hydra({hydras}) { return ( - + - - PLN's Hydra works + + PLN's Hydra works

I create visuals with patterns

@@ -26,11 +32,28 @@ export default function Hydra() { width={700} height={475} /> -

Intermediary steps of GaLactic

- +

+ + Intermediary steps of{" "} + GaLactic + +

+ +
+

Some works

+
    + {hydras.map( + ({ + id, + title, + }) => ( +
  • +

    {title}

    +
    • + ) + )} +
- + ); } diff --git a/next/pages/hydra/[id].js b/next/pages/hydra/[id].js new file mode 100644 index 0000000..4bc3a63 --- /dev/null +++ b/next/pages/hydra/[id].js @@ -0,0 +1,52 @@ +import Head from "next/head"; +import Layout from "../../components/layout"; +import HydraSynth from "../../components/hydra"; +import Date from "../../components/date"; +const https = require('https') + +import utilStyles from "../../styles/utils.module.css"; +import { getAllHydraIds, getHydraData } from "../../lib/hydras"; + +export async function getStaticProps({ params }) { + const hydraData = await getHydraData(params.id); + + const response = await fetch(hydraData.source); + const source = await response.text(); + const sourceCode = source.replace(/(?:\r\n|\r|\n)/g, '
'); + console.log(sourceCode); + + hydraData.source = source; + + return { + props: { + hydraData, + sourceCode + }, + }; +} + +export async function getStaticPaths() { + const paths = getAllHydraIds(); + return { + paths, + fallback: false, + }; +} + +export default function Hydra({ hydraData, sourceCode }) { + return ( + + + {hydraData.title} + +
+

{hydraData.title}

+

+

+ + + ); +} diff --git a/next/pages/parvagues.js b/next/pages/parvagues.js index b80200a..742c561 100644 --- a/next/pages/parvagues.js +++ b/next/pages/parvagues.js @@ -35,7 +35,15 @@ export default function ParVagues() { height={475} />*/} - +
+
+ +
); diff --git a/next/styles/main.css b/next/styles/main.css index 0cd6c45..9592934 100644 --- a/next/styles/main.css +++ b/next/styles/main.css @@ -46,6 +46,10 @@ ul.links { margin-bottom: 3em; } +p.code { + font-family: monospace; +} + small { font-size: 1rem; } @@ -55,3 +59,14 @@ footer { text-align: center; color: #228; } + +.player-wrapper { + position: relative; + padding-top: 56.25% /* Player ratio: 100 / (1280 / 720) */ +} + +.react-player { + position: absolute; + top: 0; + left: 0; +}