heck
2 years ago
4 changed files with 351 additions and 1601 deletions
@ -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> |
|
||||
@ -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> |
|
||||
@ -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> |
|
||||
Loading…
Reference in new issue