diff --git a/html/index.html b/html/index.html
index 68c6ee0..aa0670a 100644
--- a/html/index.html
+++ b/html/index.html
@@ -1,35 +1,15 @@
<!DOCTYPE html>
-<html lang="en">
+<html lang="de">
<head>
- <title>SubFactory</title>
-
- <!-- Basic Page Needs
- –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+ <title>Sub Factory</title>
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
- <title>Skeleton: Responsive CSS Boilerplate</title>
- <meta name="description" content="">
- <meta name="author" content="">
- <!-- Mobile Specific Metas
- –––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
- <!-- FONT
- –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-<!-- <link href='//fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>-->
-
- <!-- CSS
- –––––––––––––––––––––––––––––––––––––––––––––––––– -->
- <link rel="stylesheet" href="./css/normalize.css">
- <link rel="stylesheet" href="./css/skeleton.css">
- <link rel="stylesheet" href="./css/custom.css">
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css">
- <!-- Scripts
- –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>-->
-
- <!-- Favicon
- –––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="./images/favicon.png">
@@ -66,17 +46,17 @@
vec2 f = pos.xy - i;
vec2 blend = f * f * (3.0 -(2.0 * f));
float noiseVal =
- mix(
- mix(
- dot(GetGradient(i + vec2(0, 0), pos.z), f - vec2(0, 0)),
- dot(GetGradient(i + vec2(1, 0), pos.z), f - vec2(1, 0)),
- blend.x),
- mix(
- dot(GetGradient(i + vec2(0, 1), pos.z), f - vec2(0, 1)),
- dot(GetGradient(i + vec2(1, 1), pos.z), f - vec2(1, 1)),
- blend.x),
- blend.y
- );
+ mix(
+ mix(
+ dot(GetGradient(i + vec2(0, 0), pos.z), f - vec2(0, 0)),
+ dot(GetGradient(i + vec2(1, 0), pos.z), f - vec2(1, 0)),
+ blend.x),
+ mix(
+ dot(GetGradient(i + vec2(0, 1), pos.z), f - vec2(0, 1)),
+ dot(GetGradient(i + vec2(1, 1), pos.z), f - vec2(1, 1)),
+ blend.x),
+ blend.y
+ );
return noiseVal / 0.7;
}
@@ -99,25 +79,18 @@
<style>
body {
- background-color: black;
- }
-
- .shaderhero {
- display: flex;
- justify-content: center;
- align-items: center;
- width: 100vw;
- height: 100vh;
+ background-color: #5fa873;
}
#hecksshader {
- position: absolute;
- left: 0px;
- top: 0px;
- z-index: -100;
width: 100%;
height: 100%;
- opacity: 0.9;
+ display: block;
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: -9999;
+ opacity: 0.15;
}
.shadercontainer {
@@ -156,113 +129,355 @@
}
}
-
#shadersoundsystem {
left: 0px;
top: 0px;
z-index: -50;
width: 100%;
- opacity: 0.2
+ opacity: 0.01;
}
- </style>
+ h2 {
+ font-family: 'Lato black', sans-serif;
+ font-size: 2.0rem;
+ text-transform: uppercase;
+ color: #111111;
+ margin-top: 4vh;
+ margin-bottom: 4vh;
+ }
+
+ .card-title {
+ font-family: 'Lato black', sans-serif;
+ color: #222222;
+ font-size: 1.5rem;
+ }
+
+ p, li {
+ font-family: 'Lato', sans-serif;
+ letter-spacing: 0.05em;
+ font-size: 1.4em;
+ color: #333333;
+ hyphens: auto;
+ }
+
+ img {
+ width:100%;
+ }
+
+ a:link {
+ color: #b2c778;
+ }
+
+ a:visited {
+ color: #b2c778;
+ }
+
+ a:hover {
+ color: silver;
+ }
+
+ a:active {
+ color: #b2c778;
+ }
+
+ .card {
+ width: 100%;
+ background-color: #5fa873;
+ }
+
+ .card-body {
+ border-style: solid;
+ border-top: 1px solid #dee2e6!important;
+ border-bottom: 1px solid #dee2e6!important;
+ border-left: 0;
+ border-right: 0;
+ }
+
+ .container {
+ background-color: #5fa873;
+ width: 100%;
+ border-left: 1px solid #dee2e6!important;
+ border-right: 1px solid #dee2e6!important;
+ margin-right: auto;
+ margin-left: auto;
+ padding: 0;
+ }
+
+ .row {
+ margin-left:0;
+ margin-right:0;
+ }
+
+ .col-12 {
+ padding-left:3vw;
+ padding-right:3vw;
+ }
+
+ .card {
+ border: 0px solid #dee2e6!important;
+ }
+
+ .fas, .fab {
+ color: white;
+ font-size: 2em;
+ }
+
+ .section, .cardcontainer {
+ margin-bottom: 5vh;
+ border-top: 1px solid #dee2e6!important;
+ }
+
+ .logo {
+ margin-left: auto;
+ margin-right: auto;
+ width: 40%;
+ display:block;
+ }
+ </style>
</head>
<body>
-
<audio autoplay>
<source src="./audio/SubfactoryClip_Faded2.wav">
</audio>
-
-<div class="shaderhero">
- <canvas id="hecksshader"></canvas>
- <img src="./images/02_Sub_Factory_Facebook_Banner.jpg" class="shadertitle hidden_mobile">
- <img src="./images/01_Sub_Factory_Flyer_A6_Web.jpg" class="shadertitle hidden_desktop">
+<canvas id="hecksshader"></canvas>
+
+<div class="container">
+ <div class="row">
+ <div class="img">
+ <img src="images/230518_subfactory_flyer_0.4.webp" alt="Subfactory Banner">
+ </div>
+ </div>
+
+ <div class="cardcontainer pt-2">
+ <h2 class="text-center">Präsentiert von</h2>
+ <div class="card-group">
+ <div class="card shadow-none">
+ <div class="card-body text-center">
+ <div class="fix_height">
+ <h5 class="card-title">Eulachbass</h5>
+ </div>
+ <img class="logo" src="images/eulachbass_logo.webp" alt="Eulachbass Logo">
+ <a href="https://eulachbass.ch/" target="_blank" class="card-link"><i class="fas fa-globe mr-2"></i></a>
+ <a href="https://www.instagram.com/eulachbass" target="_blank" class="card-link"><i
+ class="fab fa-instagram mr-2"></i></a>
+ <a href="https://www.facebook.com/eulachbass/" target="_blank" class="card-link"><i
+ class="fab fa-facebook mr-2"></i></a>
+ <a href="https://soundcloud.com/eulachbass" target="_blank" class="card-link"><i
+ class="fab fa-soundcloud mr-2"></i></a>
+ </div>
+ </div>
+
+ <div class="card shadow-none">
+ <div class="card-body text-center">
+ <div class="fix_height">
+ <h5 class="card-title">Sector B</h5>
+ </div>
+ <img class="logo" src="images/sectorb_logo.webp" alt="Eulachbass Logo">
+ <a href="https://www.instagram.com/sectorbevents/" target="_blank" class="card-link"><i
+ class="fab fa-instagram mr-2"></i></a>
+ <a href="https://www.facebook.com/sectorbevents/" target="_blank" class="card-link"><i
+ class="fab fa-facebook mr-2"></i></a>
+ </div>
+ </div>
+
+ <div class="card shadow-none">
+ <div class="card-body text-center">
+ <div class="fix_height">
+ <h5 class="card-title">Subsanity Soundystem</h5>
+ </div>
+ <img class="logo" src="images/subsanity_logo.webp" alt="Eulachbass Logo">
+ <a href="https://www.instagram.com/subsanitysoundsystem" target="_blank" class="card-link"><i
+ class="fab fa-instagram mr-2"></i></a>
+ <a href="https://www.facebook.com/subsanitysound" target="_blank" class="card-link"><i
+ class="fab fa-facebook mr-2"></i></a>
+ <a href="https://soundcloud.com/user-937924022" target="_blank" class="card-link"><i
+ class="fab fa-soundcloud mr-2"></i></a>
+ </div>
+
+ </div>
+ </div>
+ </div>
+
+ <!-- INFO -->
+ <div class="row">
+ <div class="col-12 section">
+ <h2 class="text-center">Info</h2>
+ <p>
+ Streiche dir den <b>17. Juni im Kalender fett</b> an! Von 13:00 bis
+ 22:00 findet auf dem Zeughausareal in Winterthur erstmalig ein Drum and
+ Bass Day Rave statt. Präsentiert werden internationale DnB Grössen wie
+ Benny Page (UK), Amoss (UK), FD (UK), und Creatures (UK). Unterstützt
+ werden sie von local DJs Delilah (Divercity), switch/case (Random) und
+ DJs aus unseren eigenen Reihen (Sector B und Eulachbass). Falls du nach
+ 22:00 noch weiter möchtest, gilt dein Eintrittsbändel als free entry für
+ die Afterparty im Kraftfeld Winterthur.
+ </p>
+ </div>
+ </div>
+
+ <!-- Tickets -->
+ <div class="row">
+ <div class="col-12 section">
+ <h2 class="text-center">Tickets</h2>
+ <p>
+ Tickets sind auf
+ <a href="https://embed.eventfrog.ch/de/p/party/electro/sub-factory-with-benny-page-amoss-fd-creatures-7054797958168861153.html" target="_blank">
+ Eventfrog
+ </a>
+ verfügbar
+ </p>
+ <iframe allowpaymentrequest="true"
+ src="https://embed.eventfrog.ch/de/p/party/electro/sub-factory-with-benny-page-amoss-fd-creatures-7054797958168861153.html?color=60BF00&infobox=0&description=0&location=0&organisator=0&sponsors=0"
+ width="100%"
+ height="500"
+ style="border: 1px solid black"
+ frameborder="0">
+ </iframe>
+ </div>
+ </div>
+
+ <!-- Vepflegung -->
+ <div class="row">
+ <div class="col-12 section">
+ <h2 class="text-center ">Verpflegung</h2>
+ <p>
+ Auf dem Gelände stehen Foodtrucks zur Verpflegung zur Verfügung. Der Truck von
+ <a href="http://www.incontropizza.ch/" target="_blank">'Incontro'</a>
+ bietet dir eine der besten Pizzen der Stadt und für vegane Köstlichkeiten kann man sich beim Truck
+ von der <a href="https://steibichuchi.ch/" target="_blank">'Steibi Chuchi'</a> verwöhnen lassen.
+ </p>
+ </div>
+ </div>
+
+ <!-- Anreise -->
+ <div class="row">
+ <div class="col-12 section">
+ <h2 class="text-center ">Anreise</h2>
+ <p>
+ Das Zeughausareal ist vom Bahnhof Winterthur einfach zu
+ Fuss oder per Bus und zu Fuss erreichbar. Zu Fuss vom Bahnhof 15
+ Minuten. Ansonsten Bus Linie 2 oder 3 Richtung Oberseen bis Haltestelle
+ Technikum und dann zu Fuss. Auf dem Gelände stehen keine Parkplätze zur
+ Verfügung.
+ </p>
+
+ <iframe style="border: 1px solid black" width="100%" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=8.732620775699617%2C47.49334170186654%2C8.736456334590914%2C47.49489482337585&layer=mapnik&marker=47.49411917450164%2C8.734538555145264"></iframe>
+ <br/><small><a href="https://www.openstreetmap.org/?mlat=47.49412&mlon=8.73454#map=19/47.49412/8.73454">View Larger Map</a></small>
+ </div>
+ </div>
+
+ <!-- Rave Etiquette -->
+ <div class="row">
+ <div class="col-12 section">
+ <h2 class="text-center ">Rave Etiquette</h2>
+ <ul>
+ <li>Diskriminierung jeglicher art wird nicht toleriert</li>
+ <li>Respektiere die persönlichen Grenzen anderer</li>
+ <li>Pass auf dich und auf andere auf</li>
+ <li>Respektiere den Raum der anderen, um ein harmonisches Miteinander zu gewährleisten</li>
+ <li>Solltest du dich in irgendeiner Weise unwohl fühlen oder
+ etwas beobachten, was dir nicht in Ordnung erscheint, setze dich bitte
+ mit einem Barmitarbeiter, dem Eingangspersonal oder einem anderen
+ Mitarbeiter in Verbindung
+ </li>
+ </ul>
+ </div>
+ </div>
+
+ <!-- Partner -->
+ <div class="row">
+ <div class="col-12 section">
+ <h2 class="text-center ">Partner:innen</h2>
+ <ul>
+ <li><a href="https://www.zeughaus1.ch/" target="_blank">ZEUGHAUS1</a></li>
+ <li><a href="https://www.kraftfeld.ch/" target="_blank">Kraftfeld Winterthur</a></li>
+ <li><a href="https://www.hakogetraenke.ch/" target="_blank">Hako Getränke</a></li>
+ <li><a href="https://www.helfereinsatz.ch/" target="_blank">Helfereinsatz.ch</a></li>
+ <li><a href="https://eventfrog.ch/de/home.html" target="_blank">Eventfrog</a></li>
+ </ul>
+ </div>
+ </div>
</div>
-<!--<img src="./images/soundsystem.svg" id="shadersoundsystem">-->
-
-
<script type="module">
- import * as THREE from 'https://unpkg.com/three/build/three.module.js';
-
- let camera, scene, renderer;
- let uniforms;
- let texture;
- let downsample_quality = 1.;
- init();
- render();
-
- function init() {
- camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
- scene = new THREE.Scene();
- const geometry = new THREE.PlaneGeometry( 2, 2 );
-
- const loader = new THREE.TextureLoader();
- const texture = loader.load('noise.png');
- texture.wrapS = THREE.RepeatWrapping;
- texture.wrapT = THREE.RepeatWrapping;
-
-
-
- uniforms = {
- iTime: { value: 1.0 },
- iResolution: { value: new THREE.Vector2(1.0,1.0) },
- iMouse: { value: new THREE.Vector2(0.0,0.0) },
- iChannel0: { value: texture },
- };
-
- const material = new THREE.ShaderMaterial( {
- uniforms: uniforms,
- vertexShader: document.getElementById( 'vertexShader' ).textContent,
- fragmentShader: document.getElementById( 'fragmentShader' ).textContent
- } );
-
- const mesh = new THREE.Mesh( geometry, material );
- scene.add( mesh );
-
- const canvas = document.querySelector('#hecksshader');
- renderer = new THREE.WebGLRenderer({antialias: true, canvas});
-
- document.addEventListener( 'pointermove', onPointerMove);
- }
-
- function onPointerMove(event) {
- var clientX = event.clientX;
- var clientY = event.clientY;
- var mouseX = clientX;
- var mouseY = 1 - clientY;
- uniforms[ 'iMouse' ].value = new THREE.Vector2(mouseX, mouseY);
- }
-
- function rendererNeedsResize(renderer) {
- const canvas = renderer.domElement;
- const width = canvas.clientWidth;
- const height = canvas.clientHeight;
- const needResize = canvas.width !== width || canvas.height !== height;
- return true;
- }
-
- function render() {
- requestAnimationFrame( render );
-
- if ( rendererNeedsResize(renderer)) {
- const canvas = renderer.domElement;
- renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
- camera.aspect = canvas.clientWidth / canvas.clientHeight;
- camera.updateProjectionMatrix();
- uniforms['iResolution'].value = new THREE.Vector2( canvas.clientWidth / downsample_quality, canvas.clientHeight / downsample_quality );
- }
-
- uniforms[ 'iTime' ].value = performance.now();
-
- renderer.render( scene, camera );
- }
+ import * as THREE from 'https://unpkg.com/three/build/three.module.js';
+
+ let camera, scene, renderer;
+ let uniforms;
+ let texture;
+ let downsample_quality = 1.;
+ init();
+ render();
+
+ function init() {
+ camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
+ scene = new THREE.Scene();
+ const geometry = new THREE.PlaneGeometry( 2, 2 );
+
+ const loader = new THREE.TextureLoader();
+ const texture = loader.load('noise.png');
+ texture.wrapS = THREE.RepeatWrapping;
+ texture.wrapT = THREE.RepeatWrapping;
+
+
+
+ uniforms = {
+ iTime: { value: 1.0 },
+ iResolution: { value: new THREE.Vector2(1.0,1.0) },
+ iMouse: { value: new THREE.Vector2(0.0,0.0) },
+ iChannel0: { value: texture },
+ };
+
+ const material = new THREE.ShaderMaterial( {
+ uniforms: uniforms,
+ vertexShader: document.getElementById( 'vertexShader' ).textContent,
+ fragmentShader: document.getElementById( 'fragmentShader' ).textContent
+ } );
+
+ const mesh = new THREE.Mesh( geometry, material );
+ scene.add( mesh );
+
+ const canvas = document.querySelector('#hecksshader');
+ renderer = new THREE.WebGLRenderer({antialias: true, canvas});
+
+ document.addEventListener( 'pointermove', onPointerMove);
+ }
+
+ function onPointerMove(event) {
+ var clientX = event.clientX;
+ var clientY = event.clientY;
+ var mouseX = clientX;
+ var mouseY = 1 - clientY;
+ uniforms[ 'iMouse' ].value = new THREE.Vector2(mouseX, mouseY);
+ }
+
+ function rendererNeedsResize(renderer) {
+ const canvas = renderer.domElement;
+ const width = canvas.clientWidth;
+ const height = canvas.clientHeight;
+ const needResize = canvas.width !== width || canvas.height !== height;
+ return true;
+ }
+
+ function render() {
+ requestAnimationFrame( render );
+
+ if ( rendererNeedsResize(renderer)) {
+ const canvas = renderer.domElement;
+ renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
+ camera.aspect = canvas.clientWidth / canvas.clientHeight;
+ camera.updateProjectionMatrix();
+ uniforms['iResolution'].value = new THREE.Vector2( canvas.clientWidth / downsample_quality, canvas.clientHeight / downsample_quality );
+ }
+ uniforms[ 'iTime' ].value = performance.now();
+ renderer.render( scene, camera );
+ }
</script>
</body>
</html>
diff --git a/html/preview.html b/html/preview.html
deleted file mode 100644
index cedf961..0000000
--- a/html/preview.html
+++ /dev/null
@@ -1,491 +0,0 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
- <title>Sub Factory</title>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <meta charset="utf-8">
-
- <meta name="viewport" content="width=device-width, initial-scale=1">
-
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css">
-
- <link rel="icon" type="image/png" href="./images/favicon.png">
-
-
- <!-- Shaders -->
- <script id="vertexShader" type="x-shader/x-vertex">
- varying vec2 vUv;
-
- void main() {
- vUv = uv;
- gl_Position = vec4(position, 1.0);
- }
- </script>
- <script id="fragmentShader" type="x-shader/x-fragment">
- #ifdef GL_ES
- precision highp float;
- #endif
-
- // #extension GL_OES_standard_derivatives : enable
-
- uniform float iTime;
- uniform vec2 iMouse;
- uniform vec2 iResolution;
- uniform sampler2D iChannel0;
-
-
- vec2 GetGradient(vec2 intPos, float t) {
- float rand = texture(iChannel0, intPos / 64.0).r * 4.0;
- float angle = 6.283185 * rand + 4.0 * t * rand;
- return vec2(cos(angle), sin(angle));
- }
-
- float Pseudo3dNoise(vec3 pos) {
- vec2 i = floor(pos.xy);
- vec2 f = pos.xy - i;
- vec2 blend = f * f * (3.0 -(2.0 * f));
- float noiseVal =
- mix(
- mix(
- dot(GetGradient(i + vec2(0, 0), pos.z), f - vec2(0, 0)),
- dot(GetGradient(i + vec2(1, 0), pos.z), f - vec2(1, 0)),
- blend.x),
- mix(
- dot(GetGradient(i + vec2(0, 1), pos.z), f - vec2(0, 1)),
- dot(GetGradient(i + vec2(1, 1), pos.z), f - vec2(1, 1)),
- blend.x),
- blend.y
- );
- return noiseVal / 0.7;
- }
-
- void mainImage(out vec4 fragColor, in vec2 fragCoord) {
- vec2 uv = fragCoord.xy / iResolution.y;
- vec2 uvm = iMouse.xy / iResolution.y;
-
- float time = (80.-(1.*uvm.y)) * sin(iTime / 30000.);
-
- float noiseVal = 0.5 + 0.1 + (time/100.) * Pseudo3dNoise(vec3(uv * (6. + (0.07 * uvm.x)), time/10.));
-
- float val = sin(noiseVal * time + (sin(time) * time / 10.));
- fragColor.rgba = vec4(vec3(val), 1.0);
- }
-
- void main() {
- mainImage(gl_FragColor, gl_FragCoord.xy);
- }
- </script>
-
- <style>
- body {
- background-color: black;
- }
-
- #hecksshader {
- width: 100%;
- height: 100%;
- display: block;
- position: fixed;
- top: 0;
- left: 0;
- z-index: -9999;
- opacity: 0.2;
- }
-
- .shadercontainer {
- position: relative;
- }
-
- .shadertitle {
- position: absolute;
- display: block;
- padding: 10rem 0;
-
- margin-left: auto;
- margin-right: auto;
- width: 75%;
- opacity: 0.98;
- z-index: -1;
- }
-
- .hidden_desktop{
- visibility: visible;
- display: block;
- }
- .hidden_mobile {
- visibility: hidden;
- display: none;
- }
-
- @media (min-width: 1000px) {
- .hidden_desktop{
- visibility: hidden;
- display: none;
- }
- .hidden_mobile {
- visibility: visible;
- display: block;
- }
- }
-
- #shadersoundsystem {
- left: 0px;
- top: 0px;
- z-index: -50;
- width: 100%;
- opacity: 0.01;
- }
-
-
- h2 {
- font-family: 'Lato black', sans-serif;
- font-size: 2.5rem;
- text-transform: uppercase;
- color: #eeeeee;
- margin-top: 4vh;
- margin-bottom: 4vh;
- }
-
- .card-title {
- font-family: 'Lato black', sans-serif;
- color: #eeeeee;
- font-size: 2rem;
- }
-
- p, li {
- font-family: 'Lato', sans-serif;
- letter-spacing: 0.05em;
- font-size: 1.4em;
- color: #333333;
- hyphens: auto;
- }
-
- img {
- width:100%;
- }
-
- a:link {
- color: #b2c778;
- }
-
- a:visited {
- color: #b2c778;
- }
-
- a:hover {
- color: silver;
- }
-
- a:active {
- color: #b2c778;
- }
-
- .card {
- width: 100%;
- background-color: #5fa873;
- }
-
- .card-body {
- border-style: solid;
- border-top: 1px solid #dee2e6!important;
- border-bottom: 1px solid #dee2e6!important;
- border-left: 0;
- border-right: 0;
- }
-
- .container {
- background-color: #5fa873;
- width: 100%;
- border-left: 1px solid #dee2e6!important;
- border-right: 1px solid #dee2e6!important;
- margin-right: auto;
- margin-left: auto;
- padding: 0;
- }
-
- .row {
- margin-left:0;
- margin-right:0;
- }
-
- .col-12 {
- padding-left:3vw;
- padding-right:3vw;
- }
-
- .card {
- border: 0px solid #dee2e6!important;
- }
-
- .fas, .fab {
- color: white;
- font-size: 2em;
- }
-
- .section, .cardcontainer {
- margin-bottom: 5vh;
- border-top: 1px solid #dee2e6!important;
- }
-
- .logo {
- margin-left: auto;
- margin-right: auto;
- width: 40%;
- display:block;
- }
- </style>
-</head>
-
-<body>
-<audio autoplay>
- <source src="./audio/SubfactoryClip_Faded2.wav">
-</audio>
-
-<canvas id="hecksshader"></canvas>
-
-<div class="container">
- <div class="row">
- <div class="img">
- <img src="images/230518_subfactory_flyer_0.4.webp" alt="Subfactory Banner">
- </div>
- </div>
-
- <div class="cardcontainer pt-2">
- <h2 class="text-center">Präsentiert von</h2>
- <div class="card-group">
- <div class="card shadow-none">
- <div class="card-body text-center">
- <div class="fix_height">
- <h5 class="card-title">Eulachbass</h5>
- </div>
- <img class="logo" src="images/eulachbass_logo.webp" alt="Eulachbass Logo">
- <a href="https://eulachbass.ch/" target="_blank" class="card-link"><i class="fas fa-globe mr-2"></i></a>
- <a href="https://www.instagram.com/eulachbass" target="_blank" class="card-link"><i
- class="fab fa-instagram mr-2"></i></a>
- <a href="https://www.facebook.com/eulachbass/" target="_blank" class="card-link"><i
- class="fab fa-facebook mr-2"></i></a>
- <a href="https://soundcloud.com/eulachbass" target="_blank" class="card-link"><i
- class="fab fa-soundcloud mr-2"></i></a>
- </div>
- </div>
-
- <div class="card shadow-none">
- <div class="card-body text-center">
- <div class="fix_height">
- <h5 class="card-title">Sector B</h5>
- </div>
- <img class="logo" src="images/sectorb_logo.webp" alt="Eulachbass Logo">
- <a href="https://www.instagram.com/sectorbevents/" target="_blank" class="card-link"><i
- class="fab fa-instagram mr-2"></i></a>
- <a href="https://www.facebook.com/sectorbevents/" target="_blank" class="card-link"><i
- class="fab fa-facebook mr-2"></i></a>
- </div>
- </div>
-
- <div class="card shadow-none">
- <div class="card-body text-center">
- <div class="fix_height">
- <h5 class="card-title">Subsanity</h5>
- </div>
- <img class="logo" src="images/subsanity_logo.webp" alt="Eulachbass Logo">
- <a href="https://www.instagram.com/subsanitysoundsystem" target="_blank" class="card-link"><i
- class="fab fa-instagram mr-2"></i></a>
- <a href="https://www.facebook.com/subsanitysound" target="_blank" class="card-link"><i
- class="fab fa-facebook mr-2"></i></a>
- <a href="https://soundcloud.com/user-937924022" target="_blank" class="card-link"><i
- class="fab fa-soundcloud mr-2"></i></a>
- </div>
-
- </div>
- </div>
- </div>
-
- <!-- INFO -->
- <div class="row">
- <div class="col-12 section">
- <h2 class="text-center">Info</h2>
- <p>
- Streiche dir den <b>17. Juni im Kalender fett</b> an! Von 13:00 bis
- 22:00 findet auf dem Zeughausareal in Winterthur erstmalig ein Drum and
- Bass Day Rave statt. Präsentiert werden internationale DnB Grössen wie
- Benny Page (UK), Amoss (UK), FD (UK), und Creatures (UK). Unterstützt
- werden sie von local DJs Delilah (Divercity), switch/case (Random) und
- DJs aus unseren eigenen Reihen (Sector B und Eulachbass). Falls du nach
- 22:00 noch weiter möchtest, gilt dein Eintrittsbändel als free entry für
- die Afterparty im Kraftfeld Winterthur.
- </p>
- </div>
- </div>
-
- <!-- Tickets -->
- <div class="row">
- <div class="col-12 section">
- <h2 class="text-center">Tickets</h2>
- <p>
- Tickets sind auf
- <a href="https://embed.eventfrog.ch/de/p/party/electro/sub-factory-with-benny-page-amoss-fd-creatures-7054797958168861153.html" target="_blank">
- Eventfrog
- </a>
- verfügbar
- </p>
- <iframe allowpaymentrequest="true"
- src="https://embed.eventfrog.ch/de/p/party/electro/sub-factory-with-benny-page-amoss-fd-creatures-7054797958168861153.html?color=60BF00&infobox=0&description=0&location=0&organisator=0&sponsors=0"
- width="100%"
- height="500"
- style="border: 1px solid black"
- frameborder="0">
- </iframe>
- </div>
- </div>
-
- <!-- Vepflegung -->
- <div class="row">
- <div class="col-12 section">
- <h2 class="text-center ">Verpflegung</h2>
- <p>
- Auf dem Gelände stehen Foodtrucks zur Verpflegung zur Verfügung. Der Truck von
- <a href="http://www.incontropizza.ch/" target="_blank">'Incontro'</a>
- bietet dir eine der besten Pizzen der Stadt und für vegane Köstlichkeiten kann man sich beim Truck
- von der <a href="https://steibichuchi.ch/" target="_blank">'Steibi Chuchi'</a> verwöhnen lassen.
- </p>
- </div>
- </div>
-
- <!-- Anreise -->
- <div class="row">
- <div class="col-12 section">
- <h2 class="text-center ">Anreise</h2>
- <p>
- Das Zeughausareal ist vom Bahnhof Winterthur einfach zu
- Fuss oder per Bus und zu Fuss erreichbar. Zu Fuss vom Bahnhof 15
- Minuten. Ansonsten Bus Linie 2 oder 3 Richtung Oberseen bis Haltestelle
- Technikum und dann zu Fuss. Auf dem Gelände stehen keine Parkplätze zur
- Verfügung.
- </p>
-
- <iframe style="border: 1px solid black" width="100%" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=8.732620775699617%2C47.49334170186654%2C8.736456334590914%2C47.49489482337585&layer=mapnik&marker=47.49411917450164%2C8.734538555145264"></iframe>
- <br/><small><a href="https://www.openstreetmap.org/?mlat=47.49412&mlon=8.73454#map=19/47.49412/8.73454">View Larger Map</a></small>
- </div>
- </div>
-
- <!-- Rave Etiquette -->
- <div class="row">
- <div class="col-12 section">
- <h2 class="text-center ">Rave Etiquette</h2>
- <ol>
- <li>Respektiere die persönlichen Grenzen anderer</li>
- <li>Pass auf dich und auf andere auf</li>
- <li>Halte die Tanzfläche sauber und respektiere den Raum der anderen, um ein harmonisches Miteinander zu
- gewährleisten
- </li>
- <li>Solltest du dich in irgendeiner Weise unwohl fühlen oder
- etwas beobachten, was dir nicht in Ordnung erscheint, setze dich bitte
- mit einem Barmitarbeiter, dem Eingangspersonal oder einem anderen
- Mitarbeiter in Verbindung
- </li>
- </ol>
- </div>
- </div>
-
- <!-- Partner -->
- <div class="row">
- <div class="col-12 section">
- <h2 class="text-center ">Partner:innen</h2>
- <ul>
- <li><a href="https://www.zeughaus1.ch/" target="_blank">ZEUGHAUS1</a></li>
- <li><a href="https://www.kraftfeld.ch/" target="_blank">Kraftfeld Winterthur</a></li>
- <li><a href="https://www.hakogetraenke.ch/" target="_blank">Hako Getränke</a></li>
- <li><a href="https://www.helfereinsatz.ch/" target="_blank">Helfereinsatz.ch</a></li>
- <li><a href="https://eventfrog.ch/de/home.html" target="_blank">Eventfrog</a></li>
- </ul>
- </div>
- </div>
-</div>
-
-<!--<script src="SubFactory_files/jquery-3.2.1.slim.min.js"></script>-->
-<!--<script src="SubFactory_files/popper.min.js"></script>-->
-<!--<script src="SubFactory_files/bootstrap.min.js"></script>-->
-
-
-<script type="module">
- import * as THREE from 'https://unpkg.com/three/build/three.module.js';
-
- let camera, scene, renderer;
- let uniforms;
- let texture;
- let downsample_quality = 1.;
- init();
- render();
-
- function init() {
- camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
- scene = new THREE.Scene();
- const geometry = new THREE.PlaneGeometry( 2, 2 );
-
- const loader = new THREE.TextureLoader();
- const texture = loader.load('noise.png');
- texture.wrapS = THREE.RepeatWrapping;
- texture.wrapT = THREE.RepeatWrapping;
-
-
-
- uniforms = {
- iTime: { value: 1.0 },
- iResolution: { value: new THREE.Vector2(1.0,1.0) },
- iMouse: { value: new THREE.Vector2(0.0,0.0) },
- iChannel0: { value: texture },
- };
-
- const material = new THREE.ShaderMaterial( {
- uniforms: uniforms,
- vertexShader: document.getElementById( 'vertexShader' ).textContent,
- fragmentShader: document.getElementById( 'fragmentShader' ).textContent
- } );
-
- const mesh = new THREE.Mesh( geometry, material );
- scene.add( mesh );
-
- const canvas = document.querySelector('#hecksshader');
- renderer = new THREE.WebGLRenderer({antialias: true, canvas});
-
- document.addEventListener( 'pointermove', onPointerMove);
- }
-
- function onPointerMove(event) {
- var clientX = event.clientX;
- var clientY = event.clientY;
- var mouseX = clientX;
- var mouseY = 1 - clientY;
- uniforms[ 'iMouse' ].value = new THREE.Vector2(mouseX, mouseY);
- }
-
- function rendererNeedsResize(renderer) {
- const canvas = renderer.domElement;
- const width = canvas.clientWidth;
- const height = canvas.clientHeight;
- const needResize = canvas.width !== width || canvas.height !== height;
- return true;
- }
-
- function render() {
- requestAnimationFrame( render );
-
- if ( rendererNeedsResize(renderer)) {
- const canvas = renderer.domElement;
- renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
- camera.aspect = canvas.clientWidth / canvas.clientHeight;
- camera.updateProjectionMatrix();
- uniforms['iResolution'].value = new THREE.Vector2( canvas.clientWidth / downsample_quality, canvas.clientHeight / downsample_quality );
- }
-
- uniforms[ 'iTime' ].value = performance.now();
-
- renderer.render( scene, camera );
- }
-
-
-
-</script>
-</body>
-</html>
diff --git a/html/preview2.html b/html/preview2.html
deleted file mode 100644
index b8168b7..0000000
--- a/html/preview2.html
+++ /dev/null
@@ -1,491 +0,0 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
- <title>Sub Factory</title>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <meta charset="utf-8">
-
- <meta name="viewport" content="width=device-width, initial-scale=1">
-
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css">
-
- <link rel="icon" type="image/png" href="./images/favicon.png">
-
-
- <!-- Shaders -->
- <script id="vertexShader" type="x-shader/x-vertex">
- varying vec2 vUv;
-
- void main() {
- vUv = uv;
- gl_Position = vec4(position, 1.0);
- }
- </script>
- <script id="fragmentShader" type="x-shader/x-fragment">
- #ifdef GL_ES
- precision highp float;
- #endif
-
- // #extension GL_OES_standard_derivatives : enable
-
- uniform float iTime;
- uniform vec2 iMouse;
- uniform vec2 iResolution;
- uniform sampler2D iChannel0;
-
-
- vec2 GetGradient(vec2 intPos, float t) {
- float rand = texture(iChannel0, intPos / 64.0).r * 4.0;
- float angle = 6.283185 * rand + 4.0 * t * rand;
- return vec2(cos(angle), sin(angle));
- }
-
- float Pseudo3dNoise(vec3 pos) {
- vec2 i = floor(pos.xy);
- vec2 f = pos.xy - i;
- vec2 blend = f * f * (3.0 -(2.0 * f));
- float noiseVal =
- mix(
- mix(
- dot(GetGradient(i + vec2(0, 0), pos.z), f - vec2(0, 0)),
- dot(GetGradient(i + vec2(1, 0), pos.z), f - vec2(1, 0)),
- blend.x),
- mix(
- dot(GetGradient(i + vec2(0, 1), pos.z), f - vec2(0, 1)),
- dot(GetGradient(i + vec2(1, 1), pos.z), f - vec2(1, 1)),
- blend.x),
- blend.y
- );
- return noiseVal / 0.7;
- }
-
- void mainImage(out vec4 fragColor, in vec2 fragCoord) {
- vec2 uv = fragCoord.xy / iResolution.y;
- vec2 uvm = iMouse.xy / iResolution.y;
-
- float time = (80.-(1.*uvm.y)) * sin(iTime / 30000.);
-
- float noiseVal = 0.5 + 0.1 + (time/100.) * Pseudo3dNoise(vec3(uv * (6. + (0.07 * uvm.x)), time/10.));
-
- float val = sin(noiseVal * time + (sin(time) * time / 10.));
- fragColor.rgba = vec4(vec3(val), 1.0);
- }
-
- void main() {
- mainImage(gl_FragColor, gl_FragCoord.xy);
- }
- </script>
-
- <style>
- body {
- background-color: #5fa873;
- }
-
- #hecksshader {
- width: 100%;
- height: 100%;
- display: block;
- position: fixed;
- top: 0;
- left: 0;
- z-index: -9999;
- opacity: 0.15;
- }
-
- .shadercontainer {
- position: relative;
- }
-
- .shadertitle {
- position: absolute;
- display: block;
- padding: 10rem 0;
-
- margin-left: auto;
- margin-right: auto;
- width: 75%;
- opacity: 0.98;
- z-index: -1;
- }
-
- .hidden_desktop{
- visibility: visible;
- display: block;
- }
- .hidden_mobile {
- visibility: hidden;
- display: none;
- }
-
- @media (min-width: 1000px) {
- .hidden_desktop{
- visibility: hidden;
- display: none;
- }
- .hidden_mobile {
- visibility: visible;
- display: block;
- }
- }
-
- #shadersoundsystem {
- left: 0px;
- top: 0px;
- z-index: -50;
- width: 100%;
- opacity: 0.01;
- }
-
-
- h2 {
- font-family: 'Lato black', sans-serif;
- font-size: 2.5rem;
- text-transform: uppercase;
- color: #eeeeee;
- margin-top: 4vh;
- margin-bottom: 4vh;
- }
-
- .card-title {
- font-family: 'Lato black', sans-serif;
- color: #eeeeee;
- font-size: 2rem;
- }
-
- p, li {
- font-family: 'Lato', sans-serif;
- letter-spacing: 0.05em;
- font-size: 1.5em;
- color: #eeeeee;
- hyphens: auto;
- }
-
- img {
- width:100%;
- }
-
- a:link {
- color: #b2c778;
- }
-
- a:visited {
- color: #b2c778;
- }
-
- a:hover {
- color: silver;
- }
-
- a:active {
- color: #b2c778;
- }
-
- .card {
- width: 100%;
- background-color: #5fa873;
- }
-
- .card-body {
- border-style: solid;
- border-top: 2px solid #dee2e6!important;
- border-bottom: 2px solid #dee2e6!important;
- border-left: 0;
- border-right: 0;
- }
-
- .container {
- background-color: #5fa873;
- width: 100%;
- border-left: 2px solid #dee2e6!important;
- border-right: 2px solid #dee2e6!important;
- margin-right: auto;
- margin-left: auto;
- padding: 0;
- }
-
- .row {
- margin-left:0;
- margin-right:0;
- }
-
- .col-12 {
- padding-left:3vw;
- padding-right:3vw;
- }
-
- .card {
- border: 0px solid #dee2e6!important;
- }
-
- .fas, .fab {
- color: white;
- font-size: 2em;
- }
-
- .section, .cardcontainer {
- margin-bottom: 5vh;
- border-top: 2px solid #dee2e6!important;
- }
-
- .logo {
- margin-left: auto;
- margin-right: auto;
- width: 40%;
- display:block;
- }
- </style>
-</head>
-
-<body>
-<audio autoplay>
- <source src="./audio/SubfactoryClip_Faded2.wav">
-</audio>
-
-<canvas id="hecksshader"></canvas>
-
-<div class="container">
- <div class="row">
- <div class="img">
- <img src="images/230518_subfactory_flyer_0.4.webp" alt="Subfactory Banner">
- </div>
- </div>
-
- <div class="cardcontainer pt-2">
- <h2 class="text-center">Präsentiert von</h2>
- <div class="card-group">
- <div class="card shadow-none">
- <div class="card-body text-center">
- <div class="fix_height">
- <h5 class="card-title">Eulachbass</h5>
- </div>
- <img class="logo" src="images/eulachbass_logo.webp" alt="Eulachbass Logo">
- <a href="https://eulachbass.ch/" target="_blank" class="card-link"><i class="fas fa-globe mr-2"></i></a>
- <a href="https://www.instagram.com/eulachbass" target="_blank" class="card-link"><i
- class="fab fa-instagram mr-2"></i></a>
- <a href="https://www.facebook.com/eulachbass/" target="_blank" class="card-link"><i
- class="fab fa-facebook mr-2"></i></a>
- <a href="https://soundcloud.com/eulachbass" target="_blank" class="card-link"><i
- class="fab fa-soundcloud mr-2"></i></a>
- </div>
- </div>
-
- <div class="card shadow-none">
- <div class="card-body text-center">
- <div class="fix_height">
- <h5 class="card-title">Sector B</h5>
- </div>
- <img class="logo" src="images/sectorb_logo.webp" alt="Eulachbass Logo">
- <a href="https://www.instagram.com/sectorbevents/" target="_blank" class="card-link"><i
- class="fab fa-instagram mr-2"></i></a>
- <a href="https://www.facebook.com/sectorbevents/" target="_blank" class="card-link"><i
- class="fab fa-facebook mr-2"></i></a>
- </div>
- </div>
-
- <div class="card shadow-none">
- <div class="card-body text-center">
- <div class="fix_height">
- <h5 class="card-title">Subsanity</h5>
- </div>
- <img class="logo" src="images/subsanity_logo.webp" alt="Eulachbass Logo">
- <a href="https://www.instagram.com/subsanitysoundsystem" target="_blank" class="card-link"><i
- class="fab fa-instagram mr-2"></i></a>
- <a href="https://www.facebook.com/subsanitysound" target="_blank" class="card-link"><i
- class="fab fa-facebook mr-2"></i></a>
- <a href="https://soundcloud.com/user-937924022" target="_blank" class="card-link"><i
- class="fab fa-soundcloud mr-2"></i></a>
- </div>
-
- </div>
- </div>
- </div>
-
- <!-- INFO -->
- <div class="row">
- <div class="col-12 section">
- <h2 class="text-center">Info</h2>
- <p>
- Streiche dir den <b>17. Juni im Kalender fett</b> an! Von 13:00 bis
- 22:00 findet auf dem Zeughausareal in Winterthur erstmalig ein Drum and
- Bass Day Rave statt. Präsentiert werden internationale DnB Grössen wie
- Benny Page (UK), Amoss (UK), FD (UK), und Creatures (UK). Unterstützt
- werden sie von local DJs Delilah (Divercity), switch/case (Random) und
- DJs aus unseren eigenen Reihen (Sector B und Eulachbass). Falls du nach
- 22:00 noch weiter möchtest, gilt dein Eintrittsbändel als free entry für
- die Afterparty im Kraftfeld Winterthur.
- </p>
- </div>
- </div>
-
- <!-- Tickets -->
- <div class="row">
- <div class="col-12 section">
- <h2 class="text-center">Tickets</h2>
- <p>
- Tickets sind auf
- <a href="https://embed.eventfrog.ch/de/p/party/electro/sub-factory-with-benny-page-amoss-fd-creatures-7054797958168861153.html" target="_blank">
- Eventfrog
- </a>
- verfügbar
- </p>
- <iframe allowpaymentrequest="true"
- src="https://embed.eventfrog.ch/de/p/party/electro/sub-factory-with-benny-page-amoss-fd-creatures-7054797958168861153.html?color=60BF00&infobox=0&description=0&location=0&organisator=0&sponsors=0"
- width="100%"
- height="500"
- style="border: 1px solid black"
- frameborder="0">
- </iframe>
- </div>
- </div>
-
- <!-- Vepflegung -->
- <div class="row">
- <div class="col-12 section">
- <h2 class="text-center ">Verpflegung</h2>
- <p>
- Auf dem Gelände stehen Foodtrucks zur Verpflegung zur Verfügung. Der Truck von
- <a href="http://www.incontropizza.ch/" target="_blank">'Incontro'</a>
- bietet dir eine der besten Pizzen der Stadt und für vegane Köstlichkeiten kann man sich beim Truck
- von der <a href="https://steibichuchi.ch/" target="_blank">'Steibi Chuchi'</a> verwöhnen lassen.
- </p>
- </div>
- </div>
-
- <!-- Anreise -->
- <div class="row">
- <div class="col-12 section">
- <h2 class="text-center ">Anreise</h2>
- <p>
- Das Zeughausareal ist vom Bahnhof Winterthur einfach zu
- Fuss oder per Bus und zu Fuss erreichbar. Zu Fuss vom Bahnhof 15
- Minuten. Ansonsten Bus Linie 2 oder 3 Richtung Oberseen bis Haltestelle
- Technikum und dann zu Fuss. Auf dem Gelände stehen keine Parkplätze zur
- Verfügung.
- </p>
-
- <iframe style="border: 1px solid black" width="100%" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=8.732620775699617%2C47.49334170186654%2C8.736456334590914%2C47.49489482337585&layer=mapnik&marker=47.49411917450164%2C8.734538555145264"></iframe>
- <br/><small><a href="https://www.openstreetmap.org/?mlat=47.49412&mlon=8.73454#map=19/47.49412/8.73454">View Larger Map</a></small>
- </div>
- </div>
-
- <!-- Rave Etiquette -->
- <div class="row">
- <div class="col-12 section">
- <h2 class="text-center ">Rave Etiquette</h2>
- <ol>
- <li>Respektiere die persönlichen Grenzen anderer</li>
- <li>Pass auf dich und auf andere auf</li>
- <li>Halte die Tanzfläche sauber und respektiere den Raum der anderen, um ein harmonisches Miteinander zu
- gewährleisten
- </li>
- <li>Solltest du dich in irgendeiner Weise unwohl fühlen oder
- etwas beobachten, was dir nicht in Ordnung erscheint, setze dich bitte
- mit einem Barmitarbeiter, dem Eingangspersonal oder einem anderen
- Mitarbeiter in Verbindung
- </li>
- </ol>
- </div>
- </div>
-
- <!-- Partner -->
- <div class="row">
- <div class="col-12 section">
- <h2 class="text-center ">Partner:innen</h2>
- <ul>
- <li><a href="https://www.zeughaus1.ch/" target="_blank">ZEUGHAUS1</a></li>
- <li><a href="https://www.kraftfeld.ch/" target="_blank">Kraftfeld Winterthur</a></li>
- <li><a href="https://www.hakogetraenke.ch/" target="_blank">Hako Getränke</a></li>
- <li><a href="https://www.helfereinsatz.ch/" target="_blank">Helfereinsatz.ch</a></li>
- <li><a href="https://eventfrog.ch/de/home.html" target="_blank">Eventfrog</a></li>
- </ul>
- </div>
- </div>
-</div>
-
-<!--<script src="SubFactory_files/jquery-3.2.1.slim.min.js"></script>-->
-<!--<script src="SubFactory_files/popper.min.js"></script>-->
-<!--<script src="SubFactory_files/bootstrap.min.js"></script>-->
-
-
-<script type="module">
- import * as THREE from 'https://unpkg.com/three/build/three.module.js';
-
- let camera, scene, renderer;
- let uniforms;
- let texture;
- let downsample_quality = 1.;
- init();
- render();
-
- function init() {
- camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
- scene = new THREE.Scene();
- const geometry = new THREE.PlaneGeometry( 2, 2 );
-
- const loader = new THREE.TextureLoader();
- const texture = loader.load('noise.png');
- texture.wrapS = THREE.RepeatWrapping;
- texture.wrapT = THREE.RepeatWrapping;
-
-
-
- uniforms = {
- iTime: { value: 1.0 },
- iResolution: { value: new THREE.Vector2(1.0,1.0) },
- iMouse: { value: new THREE.Vector2(0.0,0.0) },
- iChannel0: { value: texture },
- };
-
- const material = new THREE.ShaderMaterial( {
- uniforms: uniforms,
- vertexShader: document.getElementById( 'vertexShader' ).textContent,
- fragmentShader: document.getElementById( 'fragmentShader' ).textContent
- } );
-
- const mesh = new THREE.Mesh( geometry, material );
- scene.add( mesh );
-
- const canvas = document.querySelector('#hecksshader');
- renderer = new THREE.WebGLRenderer({antialias: true, canvas});
-
- document.addEventListener( 'pointermove', onPointerMove);
- }
-
- function onPointerMove(event) {
- var clientX = event.clientX;
- var clientY = event.clientY;
- var mouseX = clientX;
- var mouseY = 1 - clientY;
- uniforms[ 'iMouse' ].value = new THREE.Vector2(mouseX, mouseY);
- }
-
- function rendererNeedsResize(renderer) {
- const canvas = renderer.domElement;
- const width = canvas.clientWidth;
- const height = canvas.clientHeight;
- const needResize = canvas.width !== width || canvas.height !== height;
- return true;
- }
-
- function render() {
- requestAnimationFrame( render );
-
- if ( rendererNeedsResize(renderer)) {
- const canvas = renderer.domElement;
- renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
- camera.aspect = canvas.clientWidth / canvas.clientHeight;
- camera.updateProjectionMatrix();
- uniforms['iResolution'].value = new THREE.Vector2( canvas.clientWidth / downsample_quality, canvas.clientHeight / downsample_quality );
- }
-
- uniforms[ 'iTime' ].value = performance.now();
-
- renderer.render( scene, camera );
- }
-
-
-
-</script>
-</body>
-</html>
diff --git a/html/preview2_1.html b/html/preview2_1.html
deleted file mode 100644
index aa0670a..0000000
--- a/html/preview2_1.html
+++ /dev/null
@@ -1,483 +0,0 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
- <title>Sub Factory</title>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <meta charset="utf-8">
-
- <meta name="viewport" content="width=device-width, initial-scale=1">
-
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css">
-
- <link rel="icon" type="image/png" href="./images/favicon.png">
-
-
- <!-- Shaders -->
- <script id="vertexShader" type="x-shader/x-vertex">
- varying vec2 vUv;
-
- void main() {
- vUv = uv;
- gl_Position = vec4(position, 1.0);
- }
- </script>
- <script id="fragmentShader" type="x-shader/x-fragment">
- #ifdef GL_ES
- precision highp float;
- #endif
-
- // #extension GL_OES_standard_derivatives : enable
-
- uniform float iTime;
- uniform vec2 iMouse;
- uniform vec2 iResolution;
- uniform sampler2D iChannel0;
-
-
- vec2 GetGradient(vec2 intPos, float t) {
- float rand = texture(iChannel0, intPos / 64.0).r * 4.0;
- float angle = 6.283185 * rand + 4.0 * t * rand;
- return vec2(cos(angle), sin(angle));
- }
-
- float Pseudo3dNoise(vec3 pos) {
- vec2 i = floor(pos.xy);
- vec2 f = pos.xy - i;
- vec2 blend = f * f * (3.0 -(2.0 * f));
- float noiseVal =
- mix(
- mix(
- dot(GetGradient(i + vec2(0, 0), pos.z), f - vec2(0, 0)),
- dot(GetGradient(i + vec2(1, 0), pos.z), f - vec2(1, 0)),
- blend.x),
- mix(
- dot(GetGradient(i + vec2(0, 1), pos.z), f - vec2(0, 1)),
- dot(GetGradient(i + vec2(1, 1), pos.z), f - vec2(1, 1)),
- blend.x),
- blend.y
- );
- return noiseVal / 0.7;
- }
-
- void mainImage(out vec4 fragColor, in vec2 fragCoord) {
- vec2 uv = fragCoord.xy / iResolution.y;
- vec2 uvm = iMouse.xy / iResolution.y;
-
- float time = (80.-(1.*uvm.y)) * sin(iTime / 30000.);
-
- float noiseVal = 0.5 + 0.1 + (time/100.) * Pseudo3dNoise(vec3(uv * (6. + (0.07 * uvm.x)), time/10.));
-
- float val = sin(noiseVal * time + (sin(time) * time / 10.));
- fragColor.rgba = vec4(vec3(val), 1.0);
- }
-
- void main() {
- mainImage(gl_FragColor, gl_FragCoord.xy);
- }
- </script>
-
- <style>
- body {
- background-color: #5fa873;
- }
-
- #hecksshader {
- width: 100%;
- height: 100%;
- display: block;
- position: fixed;
- top: 0;
- left: 0;
- z-index: -9999;
- opacity: 0.15;
- }
-
- .shadercontainer {
- position: relative;
- }
-
- .shadertitle {
- position: absolute;
- display: block;
- padding: 10rem 0;
-
- margin-left: auto;
- margin-right: auto;
- width: 75%;
- opacity: 0.98;
- z-index: -1;
- }
-
- .hidden_desktop{
- visibility: visible;
- display: block;
- }
- .hidden_mobile {
- visibility: hidden;
- display: none;
- }
-
- @media (min-width: 1000px) {
- .hidden_desktop{
- visibility: hidden;
- display: none;
- }
- .hidden_mobile {
- visibility: visible;
- display: block;
- }
- }
-
- #shadersoundsystem {
- left: 0px;
- top: 0px;
- z-index: -50;
- width: 100%;
- opacity: 0.01;
- }
-
-
- h2 {
- font-family: 'Lato black', sans-serif;
- font-size: 2.0rem;
- text-transform: uppercase;
- color: #111111;
- margin-top: 4vh;
- margin-bottom: 4vh;
- }
-
- .card-title {
- font-family: 'Lato black', sans-serif;
- color: #222222;
- font-size: 1.5rem;
- }
-
- p, li {
- font-family: 'Lato', sans-serif;
- letter-spacing: 0.05em;
- font-size: 1.4em;
- color: #333333;
- hyphens: auto;
- }
-
- img {
- width:100%;
- }
-
- a:link {
- color: #b2c778;
- }
-
- a:visited {
- color: #b2c778;
- }
-
- a:hover {
- color: silver;
- }
-
- a:active {
- color: #b2c778;
- }
-
- .card {
- width: 100%;
- background-color: #5fa873;
- }
-
- .card-body {
- border-style: solid;
- border-top: 1px solid #dee2e6!important;
- border-bottom: 1px solid #dee2e6!important;
- border-left: 0;
- border-right: 0;
- }
-
- .container {
- background-color: #5fa873;
- width: 100%;
- border-left: 1px solid #dee2e6!important;
- border-right: 1px solid #dee2e6!important;
- margin-right: auto;
- margin-left: auto;
- padding: 0;
- }
-
- .row {
- margin-left:0;
- margin-right:0;
- }
-
- .col-12 {
- padding-left:3vw;
- padding-right:3vw;
- }
-
- .card {
- border: 0px solid #dee2e6!important;
- }
-
- .fas, .fab {
- color: white;
- font-size: 2em;
- }
-
- .section, .cardcontainer {
- margin-bottom: 5vh;
- border-top: 1px solid #dee2e6!important;
- }
-
- .logo {
- margin-left: auto;
- margin-right: auto;
- width: 40%;
- display:block;
- }
- </style>
-</head>
-
-<body>
-<audio autoplay>
- <source src="./audio/SubfactoryClip_Faded2.wav">
-</audio>
-
-<canvas id="hecksshader"></canvas>
-
-<div class="container">
- <div class="row">
- <div class="img">
- <img src="images/230518_subfactory_flyer_0.4.webp" alt="Subfactory Banner">
- </div>
- </div>
-
- <div class="cardcontainer pt-2">
- <h2 class="text-center">Präsentiert von</h2>
- <div class="card-group">
- <div class="card shadow-none">
- <div class="card-body text-center">
- <div class="fix_height">
- <h5 class="card-title">Eulachbass</h5>
- </div>
- <img class="logo" src="images/eulachbass_logo.webp" alt="Eulachbass Logo">
- <a href="https://eulachbass.ch/" target="_blank" class="card-link"><i class="fas fa-globe mr-2"></i></a>
- <a href="https://www.instagram.com/eulachbass" target="_blank" class="card-link"><i
- class="fab fa-instagram mr-2"></i></a>
- <a href="https://www.facebook.com/eulachbass/" target="_blank" class="card-link"><i
- class="fab fa-facebook mr-2"></i></a>
- <a href="https://soundcloud.com/eulachbass" target="_blank" class="card-link"><i
- class="fab fa-soundcloud mr-2"></i></a>
- </div>
- </div>
-
- <div class="card shadow-none">
- <div class="card-body text-center">
- <div class="fix_height">
- <h5 class="card-title">Sector B</h5>
- </div>
- <img class="logo" src="images/sectorb_logo.webp" alt="Eulachbass Logo">
- <a href="https://www.instagram.com/sectorbevents/" target="_blank" class="card-link"><i
- class="fab fa-instagram mr-2"></i></a>
- <a href="https://www.facebook.com/sectorbevents/" target="_blank" class="card-link"><i
- class="fab fa-facebook mr-2"></i></a>
- </div>
- </div>
-
- <div class="card shadow-none">
- <div class="card-body text-center">
- <div class="fix_height">
- <h5 class="card-title">Subsanity Soundystem</h5>
- </div>
- <img class="logo" src="images/subsanity_logo.webp" alt="Eulachbass Logo">
- <a href="https://www.instagram.com/subsanitysoundsystem" target="_blank" class="card-link"><i
- class="fab fa-instagram mr-2"></i></a>
- <a href="https://www.facebook.com/subsanitysound" target="_blank" class="card-link"><i
- class="fab fa-facebook mr-2"></i></a>
- <a href="https://soundcloud.com/user-937924022" target="_blank" class="card-link"><i
- class="fab fa-soundcloud mr-2"></i></a>
- </div>
-
- </div>
- </div>
- </div>
-
- <!-- INFO -->
- <div class="row">
- <div class="col-12 section">
- <h2 class="text-center">Info</h2>
- <p>
- Streiche dir den <b>17. Juni im Kalender fett</b> an! Von 13:00 bis
- 22:00 findet auf dem Zeughausareal in Winterthur erstmalig ein Drum and
- Bass Day Rave statt. Präsentiert werden internationale DnB Grössen wie
- Benny Page (UK), Amoss (UK), FD (UK), und Creatures (UK). Unterstützt
- werden sie von local DJs Delilah (Divercity), switch/case (Random) und
- DJs aus unseren eigenen Reihen (Sector B und Eulachbass). Falls du nach
- 22:00 noch weiter möchtest, gilt dein Eintrittsbändel als free entry für
- die Afterparty im Kraftfeld Winterthur.
- </p>
- </div>
- </div>
-
- <!-- Tickets -->
- <div class="row">
- <div class="col-12 section">
- <h2 class="text-center">Tickets</h2>
- <p>
- Tickets sind auf
- <a href="https://embed.eventfrog.ch/de/p/party/electro/sub-factory-with-benny-page-amoss-fd-creatures-7054797958168861153.html" target="_blank">
- Eventfrog
- </a>
- verfügbar
- </p>
- <iframe allowpaymentrequest="true"
- src="https://embed.eventfrog.ch/de/p/party/electro/sub-factory-with-benny-page-amoss-fd-creatures-7054797958168861153.html?color=60BF00&infobox=0&description=0&location=0&organisator=0&sponsors=0"
- width="100%"
- height="500"
- style="border: 1px solid black"
- frameborder="0">
- </iframe>
- </div>
- </div>
-
- <!-- Vepflegung -->
- <div class="row">
- <div class="col-12 section">
- <h2 class="text-center ">Verpflegung</h2>
- <p>
- Auf dem Gelände stehen Foodtrucks zur Verpflegung zur Verfügung. Der Truck von
- <a href="http://www.incontropizza.ch/" target="_blank">'Incontro'</a>
- bietet dir eine der besten Pizzen der Stadt und für vegane Köstlichkeiten kann man sich beim Truck
- von der <a href="https://steibichuchi.ch/" target="_blank">'Steibi Chuchi'</a> verwöhnen lassen.
- </p>
- </div>
- </div>
-
- <!-- Anreise -->
- <div class="row">
- <div class="col-12 section">
- <h2 class="text-center ">Anreise</h2>
- <p>
- Das Zeughausareal ist vom Bahnhof Winterthur einfach zu
- Fuss oder per Bus und zu Fuss erreichbar. Zu Fuss vom Bahnhof 15
- Minuten. Ansonsten Bus Linie 2 oder 3 Richtung Oberseen bis Haltestelle
- Technikum und dann zu Fuss. Auf dem Gelände stehen keine Parkplätze zur
- Verfügung.
- </p>
-
- <iframe style="border: 1px solid black" width="100%" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=8.732620775699617%2C47.49334170186654%2C8.736456334590914%2C47.49489482337585&layer=mapnik&marker=47.49411917450164%2C8.734538555145264"></iframe>
- <br/><small><a href="https://www.openstreetmap.org/?mlat=47.49412&mlon=8.73454#map=19/47.49412/8.73454">View Larger Map</a></small>
- </div>
- </div>
-
- <!-- Rave Etiquette -->
- <div class="row">
- <div class="col-12 section">
- <h2 class="text-center ">Rave Etiquette</h2>
- <ul>
- <li>Diskriminierung jeglicher art wird nicht toleriert</li>
- <li>Respektiere die persönlichen Grenzen anderer</li>
- <li>Pass auf dich und auf andere auf</li>
- <li>Respektiere den Raum der anderen, um ein harmonisches Miteinander zu gewährleisten</li>
- <li>Solltest du dich in irgendeiner Weise unwohl fühlen oder
- etwas beobachten, was dir nicht in Ordnung erscheint, setze dich bitte
- mit einem Barmitarbeiter, dem Eingangspersonal oder einem anderen
- Mitarbeiter in Verbindung
- </li>
- </ul>
- </div>
- </div>
-
- <!-- Partner -->
- <div class="row">
- <div class="col-12 section">
- <h2 class="text-center ">Partner:innen</h2>
- <ul>
- <li><a href="https://www.zeughaus1.ch/" target="_blank">ZEUGHAUS1</a></li>
- <li><a href="https://www.kraftfeld.ch/" target="_blank">Kraftfeld Winterthur</a></li>
- <li><a href="https://www.hakogetraenke.ch/" target="_blank">Hako Getränke</a></li>
- <li><a href="https://www.helfereinsatz.ch/" target="_blank">Helfereinsatz.ch</a></li>
- <li><a href="https://eventfrog.ch/de/home.html" target="_blank">Eventfrog</a></li>
- </ul>
- </div>
- </div>
-</div>
-
-
-<script type="module">
- import * as THREE from 'https://unpkg.com/three/build/three.module.js';
-
- let camera, scene, renderer;
- let uniforms;
- let texture;
- let downsample_quality = 1.;
- init();
- render();
-
- function init() {
- camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
- scene = new THREE.Scene();
- const geometry = new THREE.PlaneGeometry( 2, 2 );
-
- const loader = new THREE.TextureLoader();
- const texture = loader.load('noise.png');
- texture.wrapS = THREE.RepeatWrapping;
- texture.wrapT = THREE.RepeatWrapping;
-
-
-
- uniforms = {
- iTime: { value: 1.0 },
- iResolution: { value: new THREE.Vector2(1.0,1.0) },
- iMouse: { value: new THREE.Vector2(0.0,0.0) },
- iChannel0: { value: texture },
- };
-
- const material = new THREE.ShaderMaterial( {
- uniforms: uniforms,
- vertexShader: document.getElementById( 'vertexShader' ).textContent,
- fragmentShader: document.getElementById( 'fragmentShader' ).textContent
- } );
-
- const mesh = new THREE.Mesh( geometry, material );
- scene.add( mesh );
-
- const canvas = document.querySelector('#hecksshader');
- renderer = new THREE.WebGLRenderer({antialias: true, canvas});
-
- document.addEventListener( 'pointermove', onPointerMove);
- }
-
- function onPointerMove(event) {
- var clientX = event.clientX;
- var clientY = event.clientY;
- var mouseX = clientX;
- var mouseY = 1 - clientY;
- uniforms[ 'iMouse' ].value = new THREE.Vector2(mouseX, mouseY);
- }
-
- function rendererNeedsResize(renderer) {
- const canvas = renderer.domElement;
- const width = canvas.clientWidth;
- const height = canvas.clientHeight;
- const needResize = canvas.width !== width || canvas.height !== height;
- return true;
- }
-
- function render() {
- requestAnimationFrame( render );
-
- if ( rendererNeedsResize(renderer)) {
- const canvas = renderer.domElement;
- renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
- camera.aspect = canvas.clientWidth / canvas.clientHeight;
- camera.updateProjectionMatrix();
- uniforms['iResolution'].value = new THREE.Vector2( canvas.clientWidth / downsample_quality, canvas.clientHeight / downsample_quality );
- }
-
- uniforms[ 'iTime' ].value = performance.now();
-
- renderer.render( scene, camera );
- }
-</script>
-</body>
-</html>