Skip to content

W
www
Commit 7ebed87b by PLN (Algolia)
Options

wip: Hydras

parent d3358bc4
Showing with 150 additions and 31 deletions
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() {
......
next/components/layout.module.css
.container {
max-width: 36rem;
max-width: 42rem;
padding: 0 1rem;
margin: 3rem auto 6rem;
}
......
next/content/hydras/dusty-halley.md 0 → 100644
---
title: Dusty Halley
source: https://git.plnech.fr/pln/Hydra/raw/master/StarryNights/DustyHalley.js
---
next/content/hydras/galactic.md 0 → 100644
---
title: GaLactic
source: https://git.plnech.fr/pln/Hydra/raw/master/StarryNights/GaLactic.js
---
next/lib/hydras.js 0 → 100644
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)
}
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 (
<Layout>
<Layout className="hydra">
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>PLN's Hydra works</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>PLN's Hydra works</title>
</Head>
<div>
<h1>I create visuals with patterns</h1>
......@@ -26,11 +32,28 @@ export default function Hydra() {
width={700}
height={475}
/>
<p><i>Intermediary steps of <a href="https://nech.pl/nights-galactic">GaLactic</a></i></p>
<HydraSynth
width={700}
height={475} />
<p>
<i>
Intermediary steps of{" "}
<a href="https://nech.pl/nights-galactic">GaLactic</a>
</i>
</p>
<br />
<h2>Some works</h2>
<ul className={utilStyles.list}>
{hydras.map(
({
id,
title,
}) => (
<li className={utilStyles.listItem} key={id}>
<Link href={`/hydra/${id}`}><h4> {title}</h4></Link>
</li>
)
)}
</ul>
</div>
</Layout>
</Layout>
);
}
next/pages/hydra/[id].js 0 → 100644
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, '<br>');
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 (
<Layout>
<Head>
<title>{hydraData.title}</title>
</Head>
<article>
<h1 className={utilStyles.headingXl}>{hydraData.title}</h1>
<p className="code" dangerouslySetInnerHTML={{ __html: sourceCode }} />
</article>
<HydraSynth
width={700}
height={475}
source={hydraData.source}/>
</Layout>
);
}
next/pages/parvagues.js
......@@ -35,7 +35,15 @@ export default function ParVagues() {
height={475}
/>*/}
</section>
<ReactPlayer url="https://soundcloud.com/parvagues/" />
<br />
<div className='player-wrapper'>
<ReactPlayer
className='react-player'
url="https://soundcloud.com/parvagues/"
width='100%'
height='32em'
/>
</div>
</div>
</Layout>
);
......
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;
}
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