diff --git a/README.md b/README.md index 5a33077..bcbc989 100644 --- a/README.md +++ b/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 diff --git a/public/index.html b/public/index.html index b8daf5c..74b09aa 100644 --- a/public/index.html +++ b/public/index.html @@ -9,29 +9,36 @@

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 the source code → -

- -

Generate a graph

- -
-

- - -

-
-

Some examples

+ +

Generate a graph

+ +
+

+ + +

+
+ +

More information

+ +

+ 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 Graphviz. + Only the links in the end screens and in the in-video cards are considered for the exploration. +

+ +

+ See the source code → +

diff --git a/public/style.css b/public/style.css index 6cfa2d5..577b0cd 100644 --- a/public/style.css +++ b/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);