Browse Source

Improve presentation text

master
Mattéo Delabre 3 months ago
parent
commit
1490ea6ad7
Signed by: matteo <spam@delab.re> GPG Key ID: AE3FBD02DC583ABB
3 changed files with 23 additions and 16 deletions
  1. +4
    -4
      README.md
  2. +18
    -11
      public/index.html
  3. +1
    -1
      public/style.css

+ 4
- 4
README.md View File

@@ -1,15 +1,15 @@
# 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 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)

## 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 [Graphviz](http://www.graphviz.org/) library is used to automatically lay out the graph so that as few edges cross as possible.
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).
Only the links in the end screens and in the in-video cards are considered for the exploration.

## Running Locally



+ 18
- 11
public/index.html View File

@@ -9,29 +9,36 @@
<h1>YouTube Maze</h1>

<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 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>
<a href="https://forge.delab.re/matteo/youtube-maze">See the source code →</a>
</p>
<h2>Some examples</h2>

<ul>
<li><a href="/mazes/EZGra6O8ClQ">e-penser — “1 avril 2017”</a></li>
<li><a href="/mazes/XM1ssJ8yxdg">Defakator — “Le YouTube Game”</a></li>
</ul>

<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="text" name="url" placeholder="Enter the URL of any YouTube video to start from…">
<input type="submit" value="Generate">
</p>
</form>

<h2>Some examples</h2>
<h2>More information</h2>

<ul>
<li><a href="/mazes/EZGra6O8ClQ">e-penser — “1 avril 2017”</a></li>
<li><a href="/mazes/XM1ssJ8yxdg">Defakator — “Le YouTube Game”</a></li>
</ul>
<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>
</html>

+ 1
- 1
public/style.css View File

@@ -62,7 +62,7 @@ body
line-height: var(--base-unit);
color: var(--text-color);

width: 15cm;
width: 16cm;
margin: calc(4 * var(--base-unit)) auto;
background: var(--background-color);



Loading…
Cancel
Save