You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
458 lines
17 KiB
458 lines
17 KiB
<!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="icon" type="image/png" href="./images/favicon.png">
|
|
<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">
|
|
|
|
|
|
<!-- 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;
|
|
}
|
|
|
|
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;
|
|
border: 0px solid #dee2e6!important;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
padding-bottom: 2vh;
|
|
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.svg" 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
|
|
width="100%"
|
|
height="350"
|
|
frameborder="0"
|
|
scrolling="no"
|
|
marginheight="0"
|
|
marginwidth="0"
|
|
src="https://facilmap.org/mymap#q=w315995935%20to%2047.49364%2C8.7348%20by%20pedestrian%20details"
|
|
style="border: 1px solid black">
|
|
</iframe>
|
|
<br/>
|
|
<small><a href="https://www.openstreetmap.org/#map=19/47.49401/8.73429" target="_blank">View Larger Map</a></small>
|
|
<!-- <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>
|
|
<p>Mit der Teilnahme an der Sub Factory übernimmst du Verantwortung für dein Verhalten und
|
|
gestaltest den Anlass aktiv mit:</p>
|
|
<ul>
|
|
<li><h5 class="card-title">Konsens - nur ja heisst ja</h5></li>
|
|
<p>Respektiere physische und emotionale Grenzen. Die Grenzen aller Menschen sind individuell
|
|
und können sich jederzeit ändern. Frage immer nach Zustimmung. Das gilt auch beim
|
|
Fotografieren.</p>
|
|
<li><h5 class="card-title">Füreinander da</h5></li>
|
|
<p>Wir kümmern uns um unsere Freund:innen, die Menschen um uns herum und um uns selbst.
|
|
Siehst du eine Situation, in der du denkst, dass sich eine Person nicht wohl fühlt: Frag nach!
|
|
Jede Person definiert für sich selbst, wann eine Grenze überschritten ist. Falls du selbst mit der
|
|
Situation überfordert bist, kannst du Hilfe beim Ordnungsdienst holen.</p>
|
|
<li><h5 class="card-title">Keine Annahmen</h5></li>
|
|
<p>Vermeide Annahmen und daraus entstehende Fragen und Urteile über die Geschlechtsidentität,
|
|
sexuelle Orientierung, Herkunft oder soziale Zugehörigkeit einer Person.</p>
|
|
<li><h5 class="card-title">Kenne deine Grenzen</h5></li>
|
|
<p>Sei achtsam, wenn du Alkohol und ander Rauschmittel konsumierst. Stelle sicher, dass du
|
|
deine eigenen und die Grenzen anderer Personen noch wahrnehmen und respektieren kannst.
|
|
<br>
|
|
Fühlst du dich unwohl oder brauchst du Unterstützung? Wende dich an den Ordnungsdienst.
|
|
Sie können dir weiterhelfen oder einen ruhigen Ort anbieten.
|
|
</p>
|
|
</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('./images/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>
|
|
|