HSF-2020-CFP-Website/appel.html

255 lines
11 KiB
HTML
Raw Permalink Normal View History

2020-01-13 17:29:39 +00:00
<!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">&nbsp;</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>