Compare commits
2 Commits
97f9fe4e33
...
407092fe90
Author | SHA1 | Date | |
---|---|---|---|
407092fe90 | |||
185e8b336b |
0
ansible/.gitkeep
Normal file
0
ansible/.gitkeep
Normal file
0
doc/.gitkeep
Normal file
0
doc/.gitkeep
Normal file
32
website/css/fonts.css
Normal file
32
website/css/fonts.css
Normal file
@ -0,0 +1,32 @@
|
||||
@font-face {
|
||||
font-family: 'Franchise';
|
||||
src: local('Franchise Regular'), local('Franchise-Regular'),
|
||||
url('fonts/Franchise-Regular.woff2') format('woff2'),
|
||||
url('fonts/Franchise-Regular.woff') format('woff'),
|
||||
url('fonts/Franchise-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Franchise Filled';
|
||||
src: local('Franchise Filled Regular'), local('FranchiseFilled-Regular'),
|
||||
url('fonts/FranchiseFilled-Regular.woff2') format('woff2'),
|
||||
url('fonts/FranchiseFilled-Regular.woff') format('woff'),
|
||||
url('fonts/FranchiseFilled-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Cube';
|
||||
src: local('Cube'),
|
||||
url('fonts/Cube.woff2') format('woff2'),
|
||||
url('fonts/Cube.woff') format('woff'),
|
||||
url('fonts/Cube.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
BIN
website/css/fonts/Cube.ttf
Normal file
BIN
website/css/fonts/Cube.ttf
Normal file
Binary file not shown.
BIN
website/css/fonts/Cube.woff
Normal file
BIN
website/css/fonts/Cube.woff
Normal file
Binary file not shown.
BIN
website/css/fonts/Cube.woff2
Normal file
BIN
website/css/fonts/Cube.woff2
Normal file
Binary file not shown.
BIN
website/css/fonts/Franchise-Regular.ttf
Normal file
BIN
website/css/fonts/Franchise-Regular.ttf
Normal file
Binary file not shown.
BIN
website/css/fonts/Franchise-Regular.woff
Normal file
BIN
website/css/fonts/Franchise-Regular.woff
Normal file
Binary file not shown.
BIN
website/css/fonts/Franchise-Regular.woff2
Normal file
BIN
website/css/fonts/Franchise-Regular.woff2
Normal file
Binary file not shown.
BIN
website/css/fonts/FranchiseFilled-Regular.ttf
Normal file
BIN
website/css/fonts/FranchiseFilled-Regular.ttf
Normal file
Binary file not shown.
BIN
website/css/fonts/FranchiseFilled-Regular.woff
Normal file
BIN
website/css/fonts/FranchiseFilled-Regular.woff
Normal file
Binary file not shown.
BIN
website/css/fonts/FranchiseFilled-Regular.woff2
Normal file
BIN
website/css/fonts/FranchiseFilled-Regular.woff2
Normal file
Binary file not shown.
55
website/css/master.css
Normal file
55
website/css/master.css
Normal file
@ -0,0 +1,55 @@
|
||||
body {
|
||||
background-color: black;
|
||||
color: white;
|
||||
font-family: sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
section {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
canvas, .texte {
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.texte {
|
||||
z-index: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
background-blend-mode: exclusion;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.texte, a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font: 4em "Franchise", sans-serif;
|
||||
}
|
||||
|
||||
main {
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
main > * {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
canvas {
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
}
|
41
website/index.html
Normal file
41
website/index.html
Normal file
@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link rel="stylesheet" href="/css/master.css">
|
||||
<link rel="stylesheet" href="/css/fonts.css">
|
||||
|
||||
<title>shlag zone</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section>
|
||||
<main></main>
|
||||
|
||||
<div class="texte">
|
||||
<h1>Bienvenue dans la Shlag Zone</h1>
|
||||
|
||||
<h2>C'est quoi ?</h2>
|
||||
|
||||
<p>On sait pas trop :)</p>
|
||||
|
||||
<h2>C'est qui ?</h2>
|
||||
|
||||
<p>Des gens chouettes qui font de l'internet</p>
|
||||
|
||||
<h2>C'est comment ?</h2>
|
||||
|
||||
<p>Bien et toi ? :)</p>
|
||||
|
||||
<h2>Mais encore ?</h2>
|
||||
|
||||
<a href="zone/liens.html">Entre dans la zone et tu verra</a>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script src="js/p5.min.js" charset="utf-8"></script>
|
||||
<script src="js/background.js" charset="utf-8"></script>
|
||||
</body>
|
||||
</html>
|
94
website/js/background.js
Normal file
94
website/js/background.js
Normal file
@ -0,0 +1,94 @@
|
||||
let count = 1000;
|
||||
|
||||
var particles_a = [];
|
||||
var particles_b = [];
|
||||
var particles_c = [];
|
||||
var fade = 200;
|
||||
var radius = 3;
|
||||
|
||||
const w = window.innerWidth;
|
||||
const h = 600;
|
||||
|
||||
let noiseScale = 10;
|
||||
let noiseStrength = 1.2;
|
||||
|
||||
function setup() {
|
||||
createCanvas(windowWidth, windowHeight);
|
||||
noStroke();
|
||||
|
||||
for (let i=0; i<count; i++) {
|
||||
let loc_a = createVector(random(w) + windowWidth*0.5 - w*0.5, random(h) + windowHeight*0.5 -h*0.5, 2);
|
||||
let angle_a = random(TWO_PI);
|
||||
let dir_a = createVector(cos(angle_a), sin(angle_a));
|
||||
|
||||
let loc_b = createVector(random(w) + windowWidth*0.5 - w*0.5, random(h) + windowHeight*0.5-h*0.5, 2);
|
||||
let angle_b = random(TWO_PI);
|
||||
let dir_b = createVector(cos(angle_b), sin(angle_b));
|
||||
|
||||
let loc_c = createVector(random(w) + windowWidth*0.5 - w*0.5, random(h) + windowHeight*0.5-h*0.5, 2);
|
||||
let angle_c = random(TWO_PI);
|
||||
let dir_c = createVector(cos(angle_c), sin(angle_c));
|
||||
|
||||
particles_a[i] = new Particle(loc_a, dir_a, 0.5);
|
||||
particles_b[i] = new Particle(loc_b, dir_b,0.6);
|
||||
particles_c[i] = new Particle(loc_c, dir_c, 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function draw() {
|
||||
fill(0,5);
|
||||
noStroke();
|
||||
rect(0,0,width, height);
|
||||
|
||||
for (let i=0; i<count; i++) {
|
||||
|
||||
fill(191, 19, 99, fade);
|
||||
particles_a[i].move();
|
||||
particles_a[i].update(radius);
|
||||
particles_a[i].checkEdges();
|
||||
|
||||
fill (57,166,163, fade);
|
||||
particles_b[i].move();
|
||||
particles_b[i].update(radius);
|
||||
particles_b[i].checkEdges();
|
||||
|
||||
fill(222,238,234,fade);
|
||||
particles_c[i].move();
|
||||
particles_c[i].update(radius);
|
||||
particles_c[i].checkEdges();
|
||||
}
|
||||
}
|
||||
|
||||
let Particle = function(loc_, dir_, speed_) {
|
||||
this.loc = loc_;
|
||||
this.dir = dir_;
|
||||
this.speed = speed_;
|
||||
this.d = 1;
|
||||
}
|
||||
|
||||
Particle.prototype.run = function() {
|
||||
this.move();
|
||||
this.checkEdges();
|
||||
this.update();
|
||||
}
|
||||
|
||||
Particle.prototype.update = function(r) {
|
||||
ellipse(this.loc.x, this.loc.y, r);
|
||||
}
|
||||
|
||||
Particle.prototype.checkEdges = function() {
|
||||
if (this.loc.x < 0 || this.loc.x > width || this.loc.y < 0 || this.loc.y > height) {
|
||||
this.loc.x = random(w) + windowWidth*0.5 - w*0.5;
|
||||
this.loc.y = random(h) + windowHeight*0.5 - h*0.5;
|
||||
}
|
||||
}
|
||||
|
||||
Particle.prototype.move = function() {
|
||||
this.angle = noise(this.loc.x/noiseScale, this.loc.y/noiseScale, frameCount/noiseScale) * TWO_PI*noiseStrength;
|
||||
this.dir.x = cos(this.angle) + sin(this.angle) - sin(this.angle);
|
||||
this.dir.y = sin(this.angle) - cos(this.angle)*sin(this.angle);
|
||||
this.vel = this.dir.copy();
|
||||
this.vel.mult(this.speed*this.d);
|
||||
this.loc.add(this.vel);
|
||||
}
|
3
website/js/p5.min.js
vendored
Normal file
3
website/js/p5.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
12
website/zone/liens.html
Normal file
12
website/zone/liens.html
Normal file
@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Les liens de la shlag zone</title>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li><a href="art/bubbles.html">Bubbles</a></li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue
Block a user