Browse Source

Improve presentation text

master
Mattéo Delabre 1 year ago
parent
commit
1490ea6ad7
Signed by: matteo GPG Key ID: AE3FBD02DC583ABB
  1. 8
      README.md
  2. 29
      public/index.html
  3. 2
      public/style.css

8
README.md

@ -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

29
public/index.html

@ -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>

2
public/style.css

@ -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