docs: Add examples

2025-01-11 19:48:54 +01:00 · 2018-02-01 04:34:38 +09:00 · 2018-02-01 04:34:38 +09:00 · 484d9797a3
commit 484d9797a3
parent 6abaf41440
12 changed files with 549 additions and 45 deletions
--- a/_docs/gen.go
+++ b/_docs/gen.go
@ -136,17 +136,25 @@ func safeHTML(text string) template.HTML {
 }

 type example struct {
-	Name        string
-	ThumbWidth  int
-	ThumbHeight int
+	Name         string
+	ThumbWidth   int
+	ThumbHeight  int
+	ScreenWidth  int
+	ScreenHeight int
 }

 func (e *example) Width() int {
-	return e.ThumbWidth * 2
+	if e.ScreenWidth == 0 {
+		return e.ThumbWidth * 2
+	}
+	return e.ScreenWidth
 }

 func (e *example) Height() int {
-	return e.ThumbHeight * 2
+	if e.ScreenHeight == 0 {
+		return e.ThumbHeight * 2
+	}
+	return e.ScreenHeight
 }

 func (e *example) Source() string {
@ -177,34 +185,37 @@ func versions() string {
 }

 var (
+	gamesExamples = []example{
+		{Name: "2048", ThumbWidth: 210, ThumbHeight: 300},
+		{Name: "blocks", ThumbWidth: 256, ThumbHeight: 240},
+	}
 	graphicsExamples = []example{
-		{"alphablending", 320, 240},
-		{"font", 320, 240},
-		{"highdpi", 320, 240},
-		{"hsv", 320, 240},
-		{"hue", 320, 240},
-		{"infinitescroll", 320, 240},
-		{"life", 320, 240},
-		{"masking", 320, 240},
-		{"mosaic", 320, 240},
-		{"noise", 320, 240},
-		{"paint", 320, 240},
-		{"perspective", 320, 240},
-		{"rotate", 320, 240},
-		{"sprites", 320, 240},
+		{Name: "alphablending", ThumbWidth: 320, ThumbHeight: 240},
+		{Name: "flood", ThumbWidth: 320, ThumbHeight: 240},
+		{Name: "font", ThumbWidth: 320, ThumbHeight: 240},
+		{Name: "highdpi", ThumbWidth: 320, ThumbHeight: 240},
+		{Name: "hsv", ThumbWidth: 320, ThumbHeight: 240},
+		{Name: "hue", ThumbWidth: 320, ThumbHeight: 240},
+		{Name: "infinitescroll", ThumbWidth: 320, ThumbHeight: 240},
+		{Name: "life", ThumbWidth: 320, ThumbHeight: 240},
+		{Name: "mandelbrot", ThumbWidth: 320, ThumbHeight: 320, ScreenWidth: 640, ScreenHeight: 640},
+		{Name: "masking", ThumbWidth: 320, ThumbHeight: 240},
+		{Name: "mosaic", ThumbWidth: 320, ThumbHeight: 240},
+		{Name: "noise", ThumbWidth: 320, ThumbHeight: 240},
+		{Name: "paint", ThumbWidth: 320, ThumbHeight: 240},
+		{Name: "perspective", ThumbWidth: 320, ThumbHeight: 240},
+		{Name: "rotate", ThumbWidth: 320, ThumbHeight: 240},
+		{Name: "sprites", ThumbWidth: 320, ThumbHeight: 240},
 	}
 	inputExamples = []example{
-		{"gamepad", 320, 240},
-		{"keyboard", 320, 240},
-		{"typewriter", 320, 240},
+		{Name: "gamepad", ThumbWidth: 320, ThumbHeight: 240},
+		{Name: "keyboard", ThumbWidth: 320, ThumbHeight: 240},
+		{Name: "typewriter", ThumbWidth: 320, ThumbHeight: 240},
 	}
 	audioExamples = []example{
-		{"audio", 320, 240},
-		{"piano", 320, 240},
-	}
-	gameExamples = []example{
-		{"2048", 210, 300},
-		{"blocks", 256, 240},
+		{Name: "audio", ThumbWidth: 320, ThumbHeight: 240},
+		{Name: "piano", ThumbWidth: 320, ThumbHeight: 240},
+		{Name: "sinewave", ThumbWidth: 320, ThumbHeight: 240},
 	}
 )

@ -268,7 +279,7 @@ func outputMain() error {
 		"GraphicsExamples": graphicsExamples,
 		"InputExamples":    inputExamples,
 		"AudioExamples":    audioExamples,
-		"GameExamples":     gameExamples,
+		"GamesExamples":    gamesExamples,
 	}
 	return t.Funcs(funcs).Execute(f, data)
 }
@ -371,7 +382,7 @@ func main() {
 	examples = append(examples, graphicsExamples...)
 	examples = append(examples, inputExamples...)
 	examples = append(examples, audioExamples...)
-	examples = append(examples, gameExamples...)
+	examples = append(examples, gamesExamples...)
 	for _, e := range examples {
 		if err := outputExampleContent(&e); err != nil {
 			log.Fatal(err)
--- a/_docs/index.tmpl.html
+++ b/_docs/index.tmpl.html
@ -60,6 +60,14 @@
  </dl>

  <h2 id="examples">Examples</h2>
+  <h3>Games</h3>
+  <div class="row">
+  {{range .GamesExamples -}}
+    <div class="col-3">
+      <a href="examples/{{.Name}}.html"><img src="images/examples/{{.Name}}.png" width="{{.ThumbWidth}}" height="{{.ThumbHeight}}" alt="Ebiten example: {{.Name}}" class="img-thumbnail"></a>
+    </div>
+  {{- end}}
+  </div>
  <h3>Graphics</h3>
  <div class="row">
  {{range .GraphicsExamples -}}
@ -84,14 +92,6 @@
    </div>
  {{- end}}
  </div>
-  <h3>Game</h3>
-  <div class="row">
-  {{range .GameExamples -}}
-    <div class="col-3">
-      <a href="examples/{{.Name}}.html"><img src="images/examples/{{.Name}}.png" width="{{.ThumbWidth}}" height="{{.ThumbHeight}}" alt="Ebiten example: {{.Name}}" class="img-thumbnail"></a>
-    </div>
-  {{- end}}
-  </div>

  <p><a href="https://blog.golang.org/go-programming-language-turns-two">The Gopher photographs by Chris Nokleberg</a> are licensed under <a href="https://creativecommons.org/licenses/by/3.0/">the Creative Commons 3.0 Attributions License</a>.</p>

--- a/docs/examples/flood.content.html
+++ b/docs/examples/flood.content.html
@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<script>
+'use strict';
+window.addEventListener('load', function() {
+    function isProduction() {
+        var l = window.top.location;
+        if (l.hash === '#_production') {
+            return true;
+        }
+        if (l.hostname === 'localhost' || l.hostname === '127.0.0.1') {
+            return false;
+        }
+        return true;
+    }
+
+    var s = document.createElement('script');
+    var src = 'flood.js';
+    if (isProduction()) {
+        src = 'https://hajimehoshi.github.io/ebiten.pagestorage/latest/' + src;
+    }
+    s.src = src;
+    s.onload = function() {
+        var notice = document.getElementById('notice');
+        notice.parentNode.removeChild(notice);
+    };
+    document.body.appendChild(s);
+});
+</script>
+<title>(Example)</title>
+<p id="notice" style="color: white;">Now Loading...</p>
--- a/docs/examples/flood.html
+++ b/docs/examples/flood.html
@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta property="og:image" itemprop="image primaryImageOfPage" content="https://hajimehoshi.github.io/ebiten/images/examples/flood.png">
+<meta name="description" content="Ebiten example - flood">
+<link rel="shortcut icon" href="../favicon.png" type="image/png" >
+<link rel="icon" href="../favicon.png" type="image/png" >
+<title>Ebiten example - flood</title>
+
+<link rel="stylesheet" href="../stylesheets/bootstrap.min.css">
+<link rel="stylesheet" href="../stylesheets/highlight-github.css">
+<link rel="stylesheet" href="../stylesheets/ebiten.css">
+<script src="../scripts/googleanalytics.js"></script>
+
+<nav class="navbar"><div class="container">
+  <nav class="d-flex flex-row" style="width: 100%;">
+    <div class="nav mr-auto"><a class="navbar-brand" href="../"><img src="../images/logo_white.svg" alt="EBITEN"></a></div>
+    <ul class="nav">
+      <li class="nav-item"><a class="nav-link" href="https://github.com/hajimehoshi/ebiten">GitHub</a></li>
+      <li class="nav-item"><a class="nav-link" href="https://godoc.org/github.com/hajimehoshi/ebiten">GoDoc</a></li>
+      <li class="nav-item"><a class="nav-link" href="https://github.com/hajimehoshi/ebiten/wiki">Wiki</a>
+      <li class="nav-item"><a class="nav-link" href="https://ebiten-playground.github.io/">Playground</a>
+    </ul>
+  </nav>
+</div></nav>
+
+<main><div class="container">
+
+  <h2>Ebiten example - flood</h2>
+  <iframe src="flood.content.html" width="640" height="480"></iframe>
+  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example
+
+package main
+
+import (
+        &#34;image/color&#34;
+        _ &#34;image/png&#34;
+        &#34;log&#34;
+
+        &#34;github.com/hajimehoshi/ebiten&#34;
+        &#34;github.com/hajimehoshi/ebiten/ebitenutil&#34;
+)
+
+const (
+        screenWidth  = 320
+        screenHeight = 240
+)
+
+var (
+        ebitenImage *ebiten.Image
+        colors      = []color.RGBA{
+                {0xff, 0xff, 0xff, 0xff},
+                {0xff, 0xff, 0x0, 0xff},
+                {0xff, 0x0, 0xff, 0xff},
+                {0xff, 0x0, 0x0, 0xff},
+                {0x0, 0xff, 0xff, 0xff},
+                {0x0, 0xff, 0x0, 0xff},
+                {0x0, 0x0, 0xff, 0xff},
+                {0x0, 0x0, 0x0, 0xff},
+        }
+)
+
+func update(screen *ebiten.Image) error {
+        if ebiten.IsRunningSlowly() {
+                return nil
+        }
+
+        const (
+                ox = 10
+                oy = 10
+                dx = 60
+                dy = 50
+        )
+        screen.Fill(color.NRGBA{0x00, 0x40, 0x80, 0xff})
+
+        op := &amp;ebiten.DrawImageOptions{}
+        op.GeoM.Translate(ox, oy)
+        screen.DrawImage(ebitenImage, op)
+
+        // Fill with solid colors
+        for i, c := range colors {
+                op := &amp;ebiten.DrawImageOptions{}
+                x := i % 4
+                y := i/4 &#43; 1
+                op.GeoM.Translate(ox&#43;float64(dx*x), oy&#43;float64(dy*y))
+
+                // Reset RGB (not Alpha) 0 forcibly
+                op.ColorM.Scale(0, 0, 0, 1)
+
+                // Set color
+                r := float64(c.R) / 0xff
+                g := float64(c.G) / 0xff
+                b := float64(c.B) / 0xff
+                op.ColorM.Translate(r, g, b, 0)
+                screen.DrawImage(ebitenImage, op)
+        }
+        return nil
+}
+
+func main() {
+        var err error
+        ebitenImage, _, err = ebitenutil.NewImageFromFile(&#34;_resources/images/ebiten.png&#34;, ebiten.FilterNearest)
+        if err != nil {
+                log.Fatal(err)
+        }
+        if err := ebiten.Run(update, screenWidth, screenHeight, 2, &#34;Flood fill with solid colors (Ebiten Demo)&#34;); err != nil {
+                log.Fatal(err)
+        }
+}
+</code></pre></div>
+
+</div></main>
+
+<footer><div class="container">
+  <p>© 2013 Hajime Hoshi</p>
+  <p>Code is licensed under <a href="https://github.com/hajimehoshi/ebiten/blob/master/LICENSE">the Apache License 2.0</a>.</p>
+  <p>The content of this page is licensed under <a href="https://creativecommons.org/licenses/by/4.0/">the Creative Commons Attribution 4.0 License</a>.</p>
+</div></footer>
+
+<script src="../scripts/highlight.pack.js"></script>
+<script>hljs.initHighlightingOnLoad();</script>
--- a/docs/examples/mandelbrot.content.html
+++ b/docs/examples/mandelbrot.content.html
@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<script>
+'use strict';
+window.addEventListener('load', function() {
+    function isProduction() {
+        var l = window.top.location;
+        if (l.hash === '#_production') {
+            return true;
+        }
+        if (l.hostname === 'localhost' || l.hostname === '127.0.0.1') {
+            return false;
+        }
+        return true;
+    }
+
+    var s = document.createElement('script');
+    var src = 'mandelbrot.js';
+    if (isProduction()) {
+        src = 'https://hajimehoshi.github.io/ebiten.pagestorage/latest/' + src;
+    }
+    s.src = src;
+    s.onload = function() {
+        var notice = document.getElementById('notice');
+        notice.parentNode.removeChild(notice);
+    };
+    document.body.appendChild(s);
+});
+</script>
+<title>(Example)</title>
+<p id="notice" style="color: white;">Now Loading...</p>
--- a/docs/examples/mandelbrot.html
+++ b/docs/examples/mandelbrot.html
@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta property="og:image" itemprop="image primaryImageOfPage" content="https://hajimehoshi.github.io/ebiten/images/examples/mandelbrot.png">
+<meta name="description" content="Ebiten example - mandelbrot">
+<link rel="shortcut icon" href="../favicon.png" type="image/png" >
+<link rel="icon" href="../favicon.png" type="image/png" >
+<title>Ebiten example - mandelbrot</title>
+
+<link rel="stylesheet" href="../stylesheets/bootstrap.min.css">
+<link rel="stylesheet" href="../stylesheets/highlight-github.css">
+<link rel="stylesheet" href="../stylesheets/ebiten.css">
+<script src="../scripts/googleanalytics.js"></script>
+
+<nav class="navbar"><div class="container">
+  <nav class="d-flex flex-row" style="width: 100%;">
+    <div class="nav mr-auto"><a class="navbar-brand" href="../"><img src="../images/logo_white.svg" alt="EBITEN"></a></div>
+    <ul class="nav">
+      <li class="nav-item"><a class="nav-link" href="https://github.com/hajimehoshi/ebiten">GitHub</a></li>
+      <li class="nav-item"><a class="nav-link" href="https://godoc.org/github.com/hajimehoshi/ebiten">GoDoc</a></li>
+      <li class="nav-item"><a class="nav-link" href="https://github.com/hajimehoshi/ebiten/wiki">Wiki</a>
+      <li class="nav-item"><a class="nav-link" href="https://ebiten-playground.github.io/">Playground</a>
+    </ul>
+  </nav>
+</div></nav>
+
+<main><div class="container">
+
+  <h2>Ebiten example - mandelbrot</h2>
+  <iframe src="mandelbrot.content.html" width="640" height="640"></iframe>
+  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example
+
+package main
+
+import (
+        &#34;log&#34;
+        &#34;math&#34;
+
+        &#34;github.com/hajimehoshi/ebiten&#34;
+)
+
+const (
+        screenWidth  = 640
+        screenHeight = 640
+        maxIt        = 128
+)
+
+var (
+        offscreen    *ebiten.Image
+        offscreenPix []byte
+        palette      [maxIt]byte
+)
+
+func init() {
+        offscreen, _ = ebiten.NewImage(screenWidth, screenHeight, ebiten.FilterNearest)
+        offscreenPix = make([]byte, screenWidth*screenHeight*4)
+        for i := range palette {
+                palette[i] = byte(math.Sqrt(float64(i)/float64(len(palette))) * 0x80)
+        }
+}
+
+func color(it int) (r, g, b byte) {
+        if it == maxIt {
+                return 0xff, 0xff, 0xff
+        }
+        c := palette[it]
+        return c, c, c
+}
+
+func updateOffscreen(centerX, centerY, size float64) {
+        for j := 0; j &lt; screenHeight; j&#43;&#43; {
+                for i := 0; i &lt; screenHeight; i&#43;&#43; {
+                        x := float64(i)*size/screenWidth - size/2 &#43; centerX
+                        y := (screenHeight-float64(j))*size/screenHeight - size/2 &#43; centerY
+                        c := complex(x, y)
+                        z := complex(0, 0)
+                        it := 0
+                        for ; it &lt; maxIt; it&#43;&#43; {
+                                z = z*z &#43; c
+                                if real(z)*real(z)&#43;imag(z)*imag(z) &gt; 4 {
+                                        break
+                                }
+                        }
+                        r, g, b := color(it)
+                        p := 4 * (i &#43; j*screenWidth)
+                        offscreenPix[p] = r
+                        offscreenPix[p&#43;1] = g
+                        offscreenPix[p&#43;2] = b
+                        offscreenPix[p&#43;3] = 0xff
+                }
+        }
+        offscreen.ReplacePixels(offscreenPix)
+}
+
+func init() {
+        // Now it is not feasible to call updateOffscreen every frame due to performance.
+        updateOffscreen(-0.75, 0.25, 2)
+}
+
+func update(screen *ebiten.Image) error {
+        if ebiten.IsRunningSlowly() {
+                return nil
+        }
+
+        screen.DrawImage(offscreen, nil)
+        return nil
+}
+
+func main() {
+        if err := ebiten.Run(update, screenWidth, screenHeight, 1, &#34;Mandelbrot (Ebiten Demo)&#34;); err != nil {
+                log.Fatal(err)
+        }
+}
+</code></pre></div>
+
+</div></main>
+
+<footer><div class="container">
+  <p>© 2013 Hajime Hoshi</p>
+  <p>Code is licensed under <a href="https://github.com/hajimehoshi/ebiten/blob/master/LICENSE">the Apache License 2.0</a>.</p>
+  <p>The content of this page is licensed under <a href="https://creativecommons.org/licenses/by/4.0/">the Creative Commons Attribution 4.0 License</a>.</p>
+</div></footer>
+
+<script src="../scripts/highlight.pack.js"></script>
+<script>hljs.initHighlightingOnLoad();</script>
--- a/docs/examples/sinewave.content.html
+++ b/docs/examples/sinewave.content.html
@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<script>
+'use strict';
+window.addEventListener('load', function() {
+    function isProduction() {
+        var l = window.top.location;
+        if (l.hash === '#_production') {
+            return true;
+        }
+        if (l.hostname === 'localhost' || l.hostname === '127.0.0.1') {
+            return false;
+        }
+        return true;
+    }
+
+    var s = document.createElement('script');
+    var src = 'sinewave.js';
+    if (isProduction()) {
+        src = 'https://hajimehoshi.github.io/ebiten.pagestorage/latest/' + src;
+    }
+    s.src = src;
+    s.onload = function() {
+        var notice = document.getElementById('notice');
+        notice.parentNode.removeChild(notice);
+    };
+    document.body.appendChild(s);
+});
+</script>
+<title>(Example)</title>
+<p id="notice" style="color: white;">Now Loading...</p>
--- a/docs/examples/sinewave.html
+++ b/docs/examples/sinewave.html
@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta property="og:image" itemprop="image primaryImageOfPage" content="https://hajimehoshi.github.io/ebiten/images/examples/sinewave.png">
+<meta name="description" content="Ebiten example - sinewave">
+<link rel="shortcut icon" href="../favicon.png" type="image/png" >
+<link rel="icon" href="../favicon.png" type="image/png" >
+<title>Ebiten example - sinewave</title>
+
+<link rel="stylesheet" href="../stylesheets/bootstrap.min.css">
+<link rel="stylesheet" href="../stylesheets/highlight-github.css">
+<link rel="stylesheet" href="../stylesheets/ebiten.css">
+<script src="../scripts/googleanalytics.js"></script>
+
+<nav class="navbar"><div class="container">
+  <nav class="d-flex flex-row" style="width: 100%;">
+    <div class="nav mr-auto"><a class="navbar-brand" href="../"><img src="../images/logo_white.svg" alt="EBITEN"></a></div>
+    <ul class="nav">
+      <li class="nav-item"><a class="nav-link" href="https://github.com/hajimehoshi/ebiten">GitHub</a></li>
+      <li class="nav-item"><a class="nav-link" href="https://godoc.org/github.com/hajimehoshi/ebiten">GoDoc</a></li>
+      <li class="nav-item"><a class="nav-link" href="https://github.com/hajimehoshi/ebiten/wiki">Wiki</a>
+      <li class="nav-item"><a class="nav-link" href="https://ebiten-playground.github.io/">Playground</a>
+    </ul>
+  </nav>
+</div></nav>
+
+<main><div class="container">
+
+  <h2>Ebiten example - sinewave</h2>
+  <iframe src="sinewave.content.html" width="640" height="480"></iframe>
+  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example
+
+package main
+
+import (
+        &#34;errors&#34;
+        &#34;fmt&#34;
+        &#34;io&#34;
+        &#34;log&#34;
+        &#34;math&#34;
+
+        &#34;github.com/hajimehoshi/ebiten&#34;
+        &#34;github.com/hajimehoshi/ebiten/audio&#34;
+        &#34;github.com/hajimehoshi/ebiten/ebitenutil&#34;
+)
+
+const (
+        screenWidth  = 320
+        screenHeight = 240
+        sampleRate   = 44100
+        frequency    = 440
+)
+
+var audioContext *audio.Context
+
+func init() {
+        var err error
+        audioContext, err = audio.NewContext(sampleRate)
+        if err != nil {
+                log.Fatal(err)
+        }
+}
+
+// stream is an infinite stream of 440 Hz sine wave.
+type stream struct {
+        position int64
+}
+
+// Read is io.Reader&#39;s Read.
+//
+// Read fills the data with sine wave samples.
+func (s *stream) Read(data []byte) (int, error) {
+        if len(data)%4 != 0 {
+                return 0, errors.New(&#34;len(data) % 4 must be 0&#34;)
+        }
+        const length = sampleRate / frequency // TODO: This should be integer?
+        p := s.position / 4
+        for i := 0; i &lt; len(data)/4; i&#43;&#43; {
+                const max = (1&lt;&lt;15 - 1) / 2
+                b := int16(math.Sin(2*math.Pi*float64(p)/length) * max)
+                data[4*i] = byte(b)
+                data[4*i&#43;1] = byte(b &gt;&gt; 8)
+                data[4*i&#43;2] = byte(b)
+                data[4*i&#43;3] = byte(b &gt;&gt; 8)
+                p&#43;&#43;
+        }
+        s.position &#43;= int64(len(data))
+        s.position %= length * 4
+        return len(data), nil
+}
+
+// Seek is io.Seeker&#39;s Seek.
+//
+// whence must be io.SeekStart or io.SeekCurrent.
+func (s *stream) Seek(offset int64, whence int) (int64, error) {
+        const length = sampleRate / frequency
+        switch whence {
+        case io.SeekStart:
+                s.position = offset
+        case io.SeekCurrent:
+                s.position &#43;= offset
+        default:
+                return 0, errors.New(&#34;whence must be io.SeekStart or io.SeekCurrent&#34;)
+        }
+        s.position %= length * 4
+        return s.position, nil
+}
+
+// Close is io.Closer&#39;s Close.
+func (s *stream) Close() error {
+        return nil
+}
+
+var player *audio.Player
+
+func update(screen *ebiten.Image) error {
+        if player == nil {
+                // Pass the (infinite) stream to audio.NewPlayer.
+                // After calling Play, the stream never ends as long as the player object lives.
+                var err error
+                player, err = audio.NewPlayer(audioContext, &amp;stream{})
+                if err != nil {
+                        return err
+                }
+                player.Play()
+        }
+        if ebiten.IsRunningSlowly() {
+                return nil
+        }
+        msg := fmt.Sprintf(&#34;FPS: %0.2f\nThis is an example using infinite audio stream.&#34;, ebiten.CurrentFPS())
+        ebitenutil.DebugPrint(screen, msg)
+        return nil
+}
+
+func main() {
+        if err := ebiten.Run(update, screenWidth, screenHeight, 2, &#34;Sine Wave (Ebiten Demo)&#34;); err != nil {
+                log.Fatal(err)
+        }
+}
+</code></pre></div>
+
+</div></main>
+
+<footer><div class="container">
+  <p>© 2013 Hajime Hoshi</p>
+  <p>Code is licensed under <a href="https://github.com/hajimehoshi/ebiten/blob/master/LICENSE">the Apache License 2.0</a>.</p>
+  <p>The content of this page is licensed under <a href="https://creativecommons.org/licenses/by/4.0/">the Creative Commons Attribution 4.0 License</a>.</p>
+</div></footer>
+
+<script src="../scripts/highlight.pack.js"></script>
+<script>hljs.initHighlightingOnLoad();</script>
--- a/docs/images/examples/flood.png
+++ b/docs/images/examples/flood.png
--- a/docs/images/examples/mandelbrot.png
+++ b/docs/images/examples/mandelbrot.png
--- a/docs/images/examples/sinewave.png
+++ b/docs/images/examples/sinewave.png
--- a/docs/index.html
+++ b/docs/index.html
@ -60,10 +60,20 @@
  </dl>

  <h2 id="examples">Examples</h2>
+  <h3>Games</h3>
+  <div class="row">
+  <div class="col-3">
+      <a href="examples/2048.html"><img src="images/examples/2048.png" width="210" height="300" alt="Ebiten example: 2048" class="img-thumbnail"></a>
+    </div><div class="col-3">
+      <a href="examples/blocks.html"><img src="images/examples/blocks.png" width="256" height="240" alt="Ebiten example: blocks" class="img-thumbnail"></a>
+    </div>
+  </div>
  <h3>Graphics</h3>
  <div class="row">
  <div class="col-3">
      <a href="examples/alphablending.html"><img src="images/examples/alphablending.png" width="320" height="240" alt="Ebiten example: alphablending" class="img-thumbnail"></a>
+    </div><div class="col-3">
+      <a href="examples/flood.html"><img src="images/examples/flood.png" width="320" height="240" alt="Ebiten example: flood" class="img-thumbnail"></a>
    </div><div class="col-3">
      <a href="examples/font.html"><img src="images/examples/font.png" width="320" height="240" alt="Ebiten example: font" class="img-thumbnail"></a>
    </div><div class="col-3">
@ -76,6 +86,8 @@
      <a href="examples/infinitescroll.html"><img src="images/examples/infinitescroll.png" width="320" height="240" alt="Ebiten example: infinitescroll" class="img-thumbnail"></a>
    </div><div class="col-3">
      <a href="examples/life.html"><img src="images/examples/life.png" width="320" height="240" alt="Ebiten example: life" class="img-thumbnail"></a>
+    </div><div class="col-3">
+      <a href="examples/mandelbrot.html"><img src="images/examples/mandelbrot.png" width="320" height="320" alt="Ebiten example: mandelbrot" class="img-thumbnail"></a>
    </div><div class="col-3">
      <a href="examples/masking.html"><img src="images/examples/masking.png" width="320" height="240" alt="Ebiten example: masking" class="img-thumbnail"></a>
    </div><div class="col-3">
@ -108,14 +120,8 @@
      <a href="examples/audio.html"><img src="images/examples/audio.png" width="320" height="240" alt="Ebiten example: audio" class="img-thumbnail"></a>
    </div><div class="col-3">
      <a href="examples/piano.html"><img src="images/examples/piano.png" width="320" height="240" alt="Ebiten example: piano" class="img-thumbnail"></a>
-    </div>
-  </div>
-  <h3>Game</h3>
-  <div class="row">
-  <div class="col-3">
-      <a href="examples/2048.html"><img src="images/examples/2048.png" width="210" height="300" alt="Ebiten example: 2048" class="img-thumbnail"></a>
    </div><div class="col-3">
-      <a href="examples/blocks.html"><img src="images/examples/blocks.png" width="256" height="240" alt="Ebiten example: blocks" class="img-thumbnail"></a>
+      <a href="examples/sinewave.html"><img src="images/examples/sinewave.png" width="320" height="240" alt="Ebiten example: sinewave" class="img-thumbnail"></a>
    </div>
  </div>