finishing presentation
BIN
img/cartesien.jpg
Normal file
After Width: | Height: | Size: 11 KiB |
BIN
img/flocon-calculs.png
Normal file
After Width: | Height: | Size: 24 KiB |
BIN
img/flocon1.png
Normal file
After Width: | Height: | Size: 9.1 KiB |
BIN
img/flocon10.png
Normal file
After Width: | Height: | Size: 13 KiB |
BIN
img/flocon2.png
Normal file
After Width: | Height: | Size: 9.1 KiB |
BIN
img/flocon3.png
Normal file
After Width: | Height: | Size: 9.9 KiB |
BIN
img/flocon6.png
Normal file
After Width: | Height: | Size: 14 KiB |
BIN
img/fractal-river.jpg
Normal file
After Width: | Height: | Size: 233 KiB |
BIN
img/gaston-julia.jpg
Normal file
After Width: | Height: | Size: 13 KiB |
BIN
img/paon.jpg
Normal file
After Width: | Height: | Size: 428 KiB |
BIN
img/shell.jpg
Normal file
After Width: | Height: | Size: 20 KiB |
227
index.html
|
@ -23,8 +23,22 @@
|
|||
<script src="lib/js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
<style>
|
||||
.red { color: #DC322F; }
|
||||
.yellow { color: #B58900; }
|
||||
.base03{color:#002b36}
|
||||
.base02{color:#073642}
|
||||
.base01{color:#586e75}
|
||||
.base00{color:#657b83}
|
||||
.base0{color:#839496}
|
||||
.base1{color:#93a1a1}
|
||||
.base2{color:#eee8d5}
|
||||
.base3{color:#fdf6e3}
|
||||
.yellow{color:#b58900}
|
||||
.orange{color:#cb4b16}
|
||||
.red{color:#dc322f}
|
||||
.magenta{color:#d33682}
|
||||
.violet{color:#6c71c4}
|
||||
.blue{color:#268bd2}
|
||||
.cyan{color:#2aa198}
|
||||
.green{color:#859900}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
@ -36,9 +50,7 @@
|
|||
<h1>Les Fractales</h1>
|
||||
<h3>Les maths cachées dans ton chat</h3>
|
||||
<img src="img/fractal-cat.jpg" alt="fractal cat"/>
|
||||
<p>
|
||||
<small>Par <a href="http://yannesposito.com">Yann Esposito</a></small>
|
||||
</p>
|
||||
<p><small>Par <a href="http://yannesposito.com">Yann Esposito</a></small></p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
@ -53,25 +65,28 @@
|
|||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Les fractales ça peut être très beau</h2>
|
||||
<iframe src="http://player.vimeo.com/video/8601479"
|
||||
width="800"
|
||||
height="500"
|
||||
frameborder="0"
|
||||
webkitAllowFullScreen
|
||||
mozallowfullscreen
|
||||
allowFullScreen></iframe>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Les fractales ça peut être très beau</h2>
|
||||
<iframe src="http://player.vimeo.com/video/8601479"
|
||||
width="800"
|
||||
height="500"
|
||||
frameborder="0"
|
||||
webkitAllowFullScreen
|
||||
mozallowfullscreen
|
||||
allowFullScreen></iframe>
|
||||
<p><a href="http://vimeo.com/8601479" target="_blank">lien →</a></p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Les fractales ça peut être très étrange</h2>
|
||||
<img src="img/fractal-gorilla.jpg" alt="gorilla fractal"/>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Les fractales ça peut être très étrange</h2>
|
||||
<img src="img/fractal-gorilla.jpg" alt="gorilla fractal" width="70%"/>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Les fractales ça peut ressembler à la réalité</h2>
|
||||
<img src="img/Shells.jpg" alt="Shells"/>
|
||||
<a class="small" href="http://www.deviantart.com/art/Rotbox-Beach-337639948">Author</a>
|
||||
<section>
|
||||
<h2>Les fractales ça peut ressembler à la réalité</h2>
|
||||
<img src="img/Shells.jpg" alt="Shells" width="70%"/>
|
||||
<p><a class="small" href="http://www.deviantart.com/art/Rotbox-Beach-337639948">source</a></p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
@ -87,21 +102,48 @@
|
|||
<h2>Le choux romanesco</h2>
|
||||
<img src="img/romanesco.jpg" alt="Choux Romanesco"/>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Coquille</h2>
|
||||
<img src="img/shell.jpg" alt="Coquille"/>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Paons</h2>
|
||||
<img src="img/paon.jpg" alt="Paon"/>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Rivières</h2>
|
||||
<img src="img/fractal-river.jpg" alt="Rivière"/>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<section>
|
||||
<h2>Les Math avant les fractales (Descartes)</h2>
|
||||
<img src="img/cartesien.jpg" alt="Descartes"/>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Gaston Maurice Julia</h2>
|
||||
<img src="img/gaston-julia.jpg" alt="Gaston Julia"/>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Benoît B. Mandelbrot</h2>
|
||||
<img src="img/Benoit-Mandelbrot.jpg" alt="Benoit B. Mandelbrot" width="35%"/>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<section>
|
||||
<h2>Quelle est la longueur des cotes de la Bretagne?</h2>
|
||||
<img src="img/bretagne.jpg" alt="La bretagne"/>
|
||||
<img src="img/bretagne.jpg" alt="La bretagne" width="50%"/>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Quelle est la longueur des cotes de la Bretagne?</h2>
|
||||
<img src="img/bretagne01.jpeg" alt="La bretagne"/>
|
||||
<img src="img/bretagne01.jpeg" alt="La bretagne" width="50%"/>
|
||||
<p>1000km?</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Quelle est la longueur des cotes de la Bretagne?</h2>
|
||||
<img src="img/bretagne02.jpeg" alt="La bretagne"/>
|
||||
<img src="img/bretagne02.jpeg" alt="La bretagne" width="50%"/>
|
||||
<p>2000km?</p>
|
||||
</section>
|
||||
</section>
|
||||
|
@ -114,9 +156,12 @@
|
|||
<h2>L-Systems</h2>
|
||||
<ul><li>Règles de réécritures
|
||||
</li><li><span style="border:solid;border-color:#DC322F;">F → <span class="red">F+F-F</span></span>
|
||||
</li><li>F → F+F-F → <span class="red">F+F-F</span> + <span class="red">F+F-F</span> - <span class="red">F+F-F</span>
|
||||
</li><li>F+F-F+F+F-F-F+F-F →
|
||||
<span class="red">F+F-F</span> + <span class="red">F+F-F</span> -<span class="red">F+F-F</span> + <span class="red">F+F-F</span> + <span class="red">F+F-F</span> -<span class="red">F+F-F</span> -<span class="red">F+F-F</span> + <span class="red">F+F-F</span> -<span class="red">F+F-F</span>
|
||||
</li><li>F → <span class="red">F</span>+<span class="blue">F</span>-<span class="green">F</span> → <span class="red">F+F-F</span> + <span class="blue">F+F-F</span> - <span class="green">F+F-F</span>
|
||||
</li><li><span class="red">F+F-F</span> + <span class="blue">F+F-F</span> - <span class="green">F+F-F</span>
|
||||
→ <br/>
|
||||
<span class="red">F+F-F</span> + <span class="red">F+F-F</span> -<span class="red">F+F-F</span>
|
||||
<br/> + <span class="blue">F+F-F</span> + <span class="blue">F+F-F</span> -<span class="blue">F+F-F</span>
|
||||
<br/> - <span class="green">F+F-F</span> + <span class="green">F+F-F</span> -<span class="green">F+F-F</span>
|
||||
|
||||
</li><li> 1 → 3 → 9 → 27 → 81 → 243 ...
|
||||
</li></ul>
|
||||
|
@ -130,7 +175,7 @@
|
|||
</li><li>- → Tourne à droite
|
||||
</li></ul>
|
||||
<p>Inventé par un biologiste (algues)</p>
|
||||
<a href="http://www.kevs3d.co.uk/dev/lsystems/">TEST sur <code>http://www.kevs3d.co.uk/dev/lsystems/</code></a>
|
||||
<a href="http://www.kevs3d.co.uk/dev/lsystems/">TEST sur <code style="border:1px solid">http://goo.gl/N5fG2</code></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>L-Systems</h2>
|
||||
|
@ -143,26 +188,48 @@
|
|||
</section>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Longueur ?</h2>
|
||||
A chaque iteration la longueur double!
|
||||
La longeur de la forme est donc?
|
||||
|
||||
<b>∞</b>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Ensemble de Mandelbrot</h2>
|
||||
<section>
|
||||
<h2>Auto référentes</h2>
|
||||
<iframe src="http://player.vimeo.com/video/61190538"
|
||||
width="800"
|
||||
height="500"
|
||||
frameborder="0"
|
||||
webkitAllowFullScreen
|
||||
mozallowfullscreen
|
||||
allowFullScreen></iframe>
|
||||
<h2>Longueur ?</h2>
|
||||
<p>Flocon: <code>F → F+F--F+F</code></p>
|
||||
<img src="img/flocon1.png" alt="flocon 1"/>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Les fractales ça peut faire tourner la tête</h2>
|
||||
<h2>Longueur ?</h2>
|
||||
<p>Flocon: <code>F → F+F--F+F</code></p>
|
||||
<img src="img/flocon-calculs.png" alt="flocon calcul"/>
|
||||
<p>Longeur (1): <strong class="red">1.171</strong></p>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Longueur ?</h2>
|
||||
<img src="img/flocon2.png" alt="flocon 2"/>
|
||||
<p>Longeur (2): 1.171×1.171 ≃ 1.371</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Longueur ?</h2>
|
||||
<img src="img/flocon3.png" alt="flocon 3"/>
|
||||
<p>Longeur (3): 1.171×1.171×1.171 ≃ 1.605</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Longueur ?</h2>
|
||||
<img src="img/flocon6.png" alt="flocon 6"/>
|
||||
<p>Longeur (6) ≃ 2.578</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Longueur ?</h2>
|
||||
<img src="img/flocon10.png" alt="flocon 10"/>
|
||||
<p>Longeur (10) ≃ 4.84</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Quelle est la longueur des cotes de la Bretagne?</h2>
|
||||
<img src="img/bretagne.jpg" alt="La bretagne" width="50%"/>
|
||||
<p>Sans donner de précision, la longueur est sans borne</p>
|
||||
<p>Elle pourrait être infinie !</p>
|
||||
<p>En tout cas beaucoup plus que 2000km</p>
|
||||
</section>
|
||||
</section>
|
||||
<section>
|
||||
<section>
|
||||
<h2>Ensemble de Mandelbrot</h2>
|
||||
<iframe src="http://player.vimeo.com/video/12185093"
|
||||
width="800"
|
||||
height="500"
|
||||
|
@ -171,53 +238,45 @@
|
|||
mozallowfullscreen
|
||||
allowFullScreen></iframe>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section data-markdown>
|
||||
<script type="text/template">
|
||||
## Markdown support
|
||||
|
||||
For those of you who like that sort of thing. Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
|
||||
|
||||
<section data-markdown>
|
||||
## Markdown support
|
||||
|
||||
For those of you who like that sort of thing.
|
||||
Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
|
||||
</section>
|
||||
</script>
|
||||
<section>
|
||||
<h2>Une idée de la taille ?</h2>
|
||||
<p>Agrandir de 1 à 6×10<sup>228</sup> revient à faire grandir un proton pour être aussi grand que<br/> 7 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000<br/> de fois la taille de l'Univers visible</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Une infinité de détail</h2>
|
||||
<p>Avec une tout petite formule: z=z<sup>2</sup>+c</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Exploration</h2>
|
||||
<p><a href="http://people.canonical.com/~jamesh/fractal/mandelbrot.html"><code>http://goo.gl/Bfgil</code></a> </p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<section data-state="alert">
|
||||
<h2>Global State</h2>
|
||||
<p>
|
||||
Set <code>data-state="something"</code> on a slide and <code>"something"</code>
|
||||
will be added as a class to the document element when the slide is open. This lets you
|
||||
apply broader style changes, like switching the background.
|
||||
</p>
|
||||
<a href="#" class="image navigate-down">
|
||||
<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
|
||||
</a>
|
||||
<section>
|
||||
<h2>Flame</h2>
|
||||
<p>Une flamme et des mirroirs</p>
|
||||
<p>On pose une chandelle allumé dans le noir.</p>
|
||||
<p>Au milieu de quelques miroirs déformants (ou pas)</p>
|
||||
<p>Et ça donne ça:</p>
|
||||
<p>TEST sur <a href="http://rectangleworld.com/demos/ChaosGame2/chaos_game_2.html"><code>http://goo.gl/gkaKZ</code></a></p>
|
||||
</section>
|
||||
<section data-state="blackout">
|
||||
<h2>"blackout"</h2>
|
||||
<a href="#" class="image navigate-down">
|
||||
<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
|
||||
</a>
|
||||
</section>
|
||||
<section data-state="soothe">
|
||||
<h2>"soothe"</h2>
|
||||
<a href="#" class="image navigate-next">
|
||||
<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(-90deg);">
|
||||
</a>
|
||||
<section>
|
||||
<h2>Video</h2>
|
||||
<iframe src="http://player.vimeo.com/video/10159449"
|
||||
width="800"
|
||||
height="500"
|
||||
frameborder="0"
|
||||
webkitAllowFullScreen
|
||||
mozallowfullscreen
|
||||
allowFullScreen></iframe>
|
||||
<p><a href="http://vimeo.com/10159449" target="_blank">lien →</a></p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
|
||||
<section>
|
||||
<h1>THE END</h1>
|
||||
<h3>BY Yann Esposito</h3>
|
||||
<h1>Questions ?</h1>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
|