Improve presentation text

This commit is contained in:
Mattéo Delabre 2020-11-29 22:57:48 +01:00
parent bf2730f991
commit 1490ea6ad7
Signed by: matteo
GPG Key ID: AE3FBD02DC583ABB
3 changed files with 27 additions and 20 deletions

View File

@ -1,15 +1,15 @@
# YouTube Maze # YouTube Maze
Some YouTube creators have made video-gamebooks during which viewers can make choices that influence the course of the narration. Some YouTube creators have made video-gamebooks during which viewers are invited to make choices that influence the course of the narration.
This is generally implemented by breaking up the video into short interlinked segments. This is generally implemented by breaking up the video into short interlinked segments.
This tool automatically generates a visual representation of networks underlying such games by automatically exploring the video maze starting from a root video. This tool automatically generates visual representations of the networks underlying such games.
[See it live →](https://youtube-maze.delab.re) [See it live →](https://youtube-maze.delab.re)
## How Does it Work? ## How Does it Work?
The [algorithm](lib/explore.mjs) starts at the first video and explores the links recursively using a breadth-first search approach, keeping track of the links as it goes. The [exploration algorithm](lib/explore.mjs) automatically downloads metadata about each video from YouTube and then proceeds to a breadth-first search to generate a graph which is laid out using [Graphviz](http://www.graphviz.org).
The [Graphviz](http://www.graphviz.org/) library is used to automatically lay out the graph so that as few edges cross as possible. Only the links in the end screens and in the in-video cards are considered for the exploration.
## Running Locally ## Running Locally

View File

@ -9,29 +9,36 @@
<h1>YouTube Maze</h1> <h1>YouTube Maze</h1>
<p> <p>
Some YouTube creators have made video-gamebooks during which viewers can make choices that influence the course of the narration. Some YouTube creators have made video-gamebooks during which viewers are invited to make choices that influence the course of the narration.
This is generally implemented by breaking up the video into short interlinked segments. This is generally implemented by breaking up the video into short interlinked segments.
This tool automatically generates a visual representation of networks underlying such games by automatically exploring the video maze starting from a root video. This tool automatically generates visual representations of the networks underlying such games.
</p> </p>
<p>
<a href="https://forge.delab.re/matteo/youtube-maze">See the source code →</a>
</p>
<h2>Generate a graph</h2>
<form action="/mazes" method="POST">
<p>
<input type="text" name="url" placeholder="Enter the URL of a YouTube video to generate the graph…">
<input type="submit" value="Generate">
</p>
</form>
<h2>Some examples</h2> <h2>Some examples</h2>
<ul> <ul>
<li><a href="/mazes/EZGra6O8ClQ">e-penser — “1 avril 2017”</a></li> <li><a href="/mazes/EZGra6O8ClQ">e-penser — “1 avril 2017”</a></li>
<li><a href="/mazes/XM1ssJ8yxdg">Defakator — “Le YouTube Game”</a></li> <li><a href="/mazes/XM1ssJ8yxdg">Defakator — “Le YouTube Game”</a></li>
</ul> </ul>
<h2>Generate a graph</h2>
<form action="/mazes" method="POST">
<p>
<input type="text" name="url" placeholder="Enter the URL of any YouTube video to start from…">
<input type="submit" value="Generate">
</p>
</form>
<h2>More information</h2>
<p>
The exploration algorithm automatically downloads metadata about each video from YouTube and then proceeds to a breadth-first search to generate a graph which is laid out using <a href="http://www.graphviz.org">Graphviz</a>.
Only the links in the end screens and in the in-video cards are considered for the exploration.
</p>
<p>
<a href="https://forge.delab.re/matteo/youtube-maze">See the source code →</a>
</p>
</body> </body>
</html> </html>

View File

@ -62,7 +62,7 @@ body
line-height: var(--base-unit); line-height: var(--base-unit);
color: var(--text-color); color: var(--text-color);
width: 15cm; width: 16cm;
margin: calc(4 * var(--base-unit)) auto; margin: calc(4 * var(--base-unit)) auto;
background: var(--background-color); background: var(--background-color);