255 lines
11 KiB
HTML
255 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>HSF 2020 </title>
|
|
<link rel="stylesheet" type="text/css" href="assets/experiments.css"/>
|
|
<link rel="stylesheet" type="text/css" href="assets/gradientui.css"/>
|
|
<style type="text/css">
|
|
@font-face {font-family: "Museo W01 500";
|
|
src: url("assets/fonts/@font-face/d4d3be6c923464b81f4e89e6a57bc539.eot"); /* IE9*/
|
|
src: url("assets/fonts/@font-face/d4d3be6c923464b81f4e89e6a57bc539.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
|
|
url("assets/fonts/@font-face/d4d3be6c923464b81f4e89e6a57bc539.woff2") format("woff2"), /* chrome、firefox */
|
|
url("assets/fonts/@font-face/d4d3be6c923464b81f4e89e6a57bc539.woff") format("woff"), /* chrome、firefox */
|
|
url("assets/fonts/@font-face/d4d3be6c923464b81f4e89e6a57bc539.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
|
|
url("assets/fonts/@font-face/d4d3be6c923464b81f4e89e6a57bc539.svg#Museo W01 500") format("svg"); /* iOS 4.1- */
|
|
}
|
|
</style>
|
|
<link type="text/css" href="assets/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
|
|
<script type="text/javascript" src="assets/jquery-1.6.2.min.js"></script>
|
|
<script type="text/javascript" src="assets/jquery-ui-1.8.16.custom.min.js"></script>
|
|
<script type="text/javascript" src="assets/colorPicker.js"></script>
|
|
<script type="text/javascript" src="assets/three.min.js"></script>
|
|
<script type="text/javascript" src="assets/gradientui.js"></script>
|
|
<!--script type="text/javascript" src="http://mrdoob.github.com/three.js/build/three.min.js"></script-->
|
|
<script type="x-shader/x-vertex" id="standardVertexShader">
|
|
varying vec2 vUv;
|
|
|
|
void main()
|
|
{
|
|
vUv = uv;
|
|
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
|
}
|
|
</script>
|
|
<script type="x-shader/x-fragment" id="gsFragmentShader">
|
|
varying vec2 vUv;
|
|
uniform float screenWidth;
|
|
uniform float screenHeight;
|
|
uniform sampler2D tSource;
|
|
uniform float delta;
|
|
uniform float feed;
|
|
uniform float kill;
|
|
uniform vec2 brush;
|
|
|
|
vec2 texel = vec2(1.0/screenWidth, 1.0/screenHeight);
|
|
float step_x = 1.0/screenWidth;
|
|
float step_y = 1.0/screenHeight;
|
|
|
|
void main()
|
|
{
|
|
if(brush.x < -5.0)
|
|
{
|
|
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
|
|
return;
|
|
}
|
|
|
|
//float feed = vUv.y * 0.083;
|
|
//float kill = vUv.x * 0.073;
|
|
|
|
vec2 uv = texture2D(tSource, vUv).rg;
|
|
vec2 uv0 = texture2D(tSource, vUv+vec2(-step_x, 0.0)).rg;
|
|
vec2 uv1 = texture2D(tSource, vUv+vec2(step_x, 0.0)).rg;
|
|
vec2 uv2 = texture2D(tSource, vUv+vec2(0.0, -step_y)).rg;
|
|
vec2 uv3 = texture2D(tSource, vUv+vec2(0.0, step_y)).rg;
|
|
|
|
vec2 lapl = (uv0 + uv1 + uv2 + uv3 - 4.0*uv);//10485.76;
|
|
float du = /*0.00002*/0.2097*lapl.r - uv.r*uv.g*uv.g + feed*(1.0 - uv.r);
|
|
float dv = /*0.00001*/0.105*lapl.g + uv.r*uv.g*uv.g - (feed+kill)*uv.g;
|
|
vec2 dst = uv + delta*vec2(du, dv);
|
|
|
|
if(brush.x > 0.0)
|
|
{
|
|
vec2 diff = (vUv - brush)/texel;
|
|
float dist = dot(diff, diff);
|
|
if(dist < 5.0)
|
|
dst.g = 0.9;
|
|
}
|
|
|
|
gl_FragColor = vec4(dst.r, dst.g, 0.0, 1.0);
|
|
}
|
|
</script>
|
|
<script type="x-shader/x-fragment" id="screenFragmentShader">
|
|
varying vec2 vUv;
|
|
uniform float screenWidth;
|
|
uniform float screenHeight;
|
|
uniform sampler2D tSource;
|
|
uniform float delta;
|
|
uniform float feed;
|
|
uniform float kill;
|
|
uniform vec4 color1;
|
|
uniform vec4 color2;
|
|
uniform vec4 color3;
|
|
uniform vec4 color4;
|
|
uniform vec4 color5;
|
|
|
|
vec2 texel = vec2(1.0/screenWidth, 1.0/screenHeight);
|
|
|
|
void main()
|
|
{
|
|
float value = texture2D(tSource, vUv).g;
|
|
//int step = int(floor(value));
|
|
//float a = fract(value);
|
|
float a;
|
|
vec3 col;
|
|
|
|
if(value <= color1.a)
|
|
col = color1.rgb;
|
|
if(value > color1.a && value <= color2.a)
|
|
{
|
|
a = (value - color1.a)/(color2.a - color1.a);
|
|
col = mix(color1.rgb, color2.rgb, a);
|
|
}
|
|
if(value > color2.a && value <= color3.a)
|
|
{
|
|
a = (value - color2.a)/(color3.a - color2.a);
|
|
col = mix(color2.rgb, color3.rgb, a);
|
|
}
|
|
if(value > color3.a && value <= color4.a)
|
|
{
|
|
a = (value - color3.a)/(color4.a - color3.a);
|
|
col = mix(color3.rgb, color4.rgb, a);
|
|
}
|
|
if(value > color4.a && value <= color5.a)
|
|
{
|
|
a = (value - color4.a)/(color5.a - color4.a);
|
|
col = mix(color4.rgb, color5.rgb, a);
|
|
}
|
|
if(value > color5.a)
|
|
col = color5.rgb;
|
|
|
|
gl_FragColor = vec4(col.r, col.g, col.b, 1.0);
|
|
}
|
|
</script>
|
|
<script type="text/javascript" src="grayscott.js"></script>
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
#gradient
|
|
{
|
|
height: 40px;
|
|
width: 85%;
|
|
margin-top: 5px;
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
}
|
|
</style>
|
|
<script>
|
|
$(function()
|
|
{
|
|
$("#gradient").gradient({values:
|
|
[[0.0, '#000000'],
|
|
[0.20, '#000000'],
|
|
[0.21, '#FFFF00'],
|
|
[0.90, '#FFFF00'],
|
|
[0.99, '#FFFFFF'],
|
|
]});
|
|
|
|
// KLUDGE!
|
|
colorPicker.offsetX = -512;
|
|
colorPicker.offsetY = -256;
|
|
|
|
document.getElementById("gradient").onselectstart = function () {return false;};
|
|
|
|
init();
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="simulation" style="position: relative;">
|
|
<div id="content" class="over_graph">
|
|
<a class="close" title="Fermer la colonne">x</a>
|
|
<h1 style>Hacker Space Festival 2020</h1>
|
|
<p>Le vendredi 7 et le samedi 8 février, le <a href="https://www.tmplab.org">/tmp/lab</a> propose une rencontre libre dont le programme est ouvert : faites vos propositions !</p>
|
|
<p>Au programme de cette rencontre</p>
|
|
<ul>
|
|
<li>Ateliers</li>
|
|
<li>Installation</li>
|
|
<li>Démos</li>
|
|
<li>Concerts</li>
|
|
<li>Projections de films</li>
|
|
<li>Conférences</li>
|
|
</ul>
|
|
<p>Quelques thèmes sélectionnés</p>
|
|
<ul class="patchwork">
|
|
<li>Shaders </li>
|
|
<li>Lasers </li>
|
|
<li>Fiction interactive</li>
|
|
<li>Blobs</li>
|
|
<li>Aquaponie</li>
|
|
<li>Dômes géodésiques
|
|
<li>Jeu vidéo
|
|
<li>Logiciel Libre
|
|
<li>Sécurité Linux
|
|
</ul>
|
|
<p>Pour <a href="#format" id="format_show"></a>l'appel à participation ouvert à tou·te·s ou toute autre question,<br> merci d'utiliser <a href="mailto:info@hackersfest.org">info@hackersfest.org</a></p>
|
|
|
|
</div>
|
|
<div id="format" class="over_graph" style=";">
|
|
<a name="format"> </a>
|
|
<a class="close" title="Fermer la colonne">x</a>
|
|
|
|
<h1>Appel à participation</h1>
|
|
<p>Merci de nous fournir</p>
|
|
<ul>
|
|
|
|
<li>Le nom du hackerspace / orga (si besoin)
|
|
<li>Vos identités / pseudos
|
|
<li>Vos adresses mail
|
|
<li>Vos jours de présence
|
|
<li>Vos besoins matériels
|
|
<ul>
|
|
<li>Hébergement
|
|
<li>Nourriture (vegan/veggie/whatever)
|
|
<li>Parking
|
|
</ul>
|
|
<li>Pour chacune de vos propositions :
|
|
<ul>
|
|
<li>Format (atelier, démo, conf, etc.)
|
|
<li>Titre
|
|
<li>Description
|
|
<li>Liens éventuels (images, sites, etc.)
|
|
</ul>
|
|
</ul>
|
|
<p>La date limite pour nous communiquer vos propositions est fixée au 1er janvier 2020.</p>
|
|
<p>Votre participation à l'évènement vaut acceptation du <a href="code-de-conduite.html">code de conduite</a>.</p>
|
|
|
|
</div>
|
|
<div id="visual">
|
|
<canvas id="myCanvas" class="viewer" style="width:1024px;height:768px"></canvas>
|
|
<div id="replacementImage" style="display: none;">
|
|
<img src="images/background-01.png" width="1024px" height="768px">
|
|
</div>
|
|
</div>
|
|
<aside class="panel" style="display: none;">
|
|
<section id="instructions">
|
|
<header><h4>Instructions</h4></header>
|
|
<ol>
|
|
<li>Paint some strokes on the canvas.</li>
|
|
<li>Choose the evolution settings with the controls below.</li>
|
|
<li>Watch the evolution.</li>
|
|
</ol>
|
|
</section>
|
|
<section id="controls">
|
|
<div id="gradient" style=""></div>
|
|
</section>
|
|
</aside>
|
|
</div>
|
|
<footer>
|
|
<div id="copyright">
|
|
Based on work by
|
|
<a href="https://twitter.com/pmneila">@pmneila</a>
|
|
<a href="https://github.com/pmneila/jsexp">Github</a>
|
|
</div>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|