<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap" rel="stylesheet">

<div class="container">

  

  <h1>serenity</h1>

</div>

<script id="vertShader" type="text">

// attributes, in

attribute vec3 aPosition;

// matrices

uniform mat4 uModelViewMatrix;

uniform mat4 uProjectionMatrix;

void main() {

  gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);

}

</script>

<script id="fragShader" type="text">

#ifdef GL_ES

precision highp float;

#endif

uniform float uTime;

uniform float uSpeedColor;

uniform vec2 uResolution;

  

uniform vec3 uColor1;

uniform vec3 uColor2;

uniform vec3 uColor3;

uniform vec3 uColor4;

uniform vec3 uColor5;

const int AMOUNT = 2;

const float scale = 2.0;

  

vec3 blendExclusion(vec3 base, vec3 blend) {

return base+blend-2.0*base*blend;

}

body{

  margin: 0;

  overflow: clip;

  background: #1B2021;

  font-family: 'DM Serif Display', serif;

}

main{

  position: fixed;

  display: flex;

  top: 0;

  height: 100vh;

}

canvas{

  width: 100%;

  height: 100%;

  margin: auto;

}

.container{

  z-index: 2;

  position: fixed;

  top: 0;

  height: 100vh;

  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

}

h1{

  color: white;

  font-size: 5rem;

}

const colors = ["#225ee1", "#28d7bf", "#ac53cf", "#e7a39c"];

const backgroundColor = "#31AFD4";

const width = window.innerWidth;

const height = window.innerHeight;

const totalFrames = 1000;

let frameCount = 0;

let recording = false;

let recordingStarted = false;

let frameDelta = 0;

let s;

function setup() {

  canvas = createCanvas(width, height, WEBGL);

  noiseSeed(20);

  rectMode(CENTER);

  noStroke();

  

  let vert = document.getElementById('vertShader').innerText;

  let frag = document.getElementById('fragShader').innerText;

  s = createShader(vert, frag);

}

function draw() {

  frameCount += 1;

  frameDelta = (2 * Math.PI * (frameCount % totalFrames)) / totalFrames;

  background(backgroundColor);

  shader(s);

  

s.setUniform('uResolution',[width,height]);

s.setUniform('uTime',millis()/100);

  s.setUniform('uLowGpu',false);

  s.setUniform('uVeryLowGpu',false);

  s.setUniform('uSpeedColor',20.0);

  s.setUniform('uColor1',hex2rgb(colors[0]));

  s.setUniform('uColor2',hex2rgb(colors[1]));

  s.setUniform('uColor3',hex2rgb(colors[2]));

  s.setUniform('uColor4',hex2rgb(colors[3]));

  rect(0,0,width,height);

}

const hex2rgb = (hex) => {

    const r = parseInt(hex.slice(1, 3), 16)

    const g = parseInt(hex.slice(3, 5), 16)

    const b = parseInt(hex.slice(5, 7), 16)

    

    return [ r / 255, g / 255, b / 255 ];

}