46 lines
1.9 KiB
HTML
46 lines
1.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" >
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Generative Poster V (CSS)</title>
|
||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
|
||
|
|
<link rel="stylesheet" href="./style.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- partial:index.partial.html -->
|
||
|
|
<div id="app" ref="app" class="section" v-bind:style="{
|
||
|
|
'--s-padding': padding,
|
||
|
|
'--iterations': iterations,
|
||
|
|
'--s-rotation': rotation,
|
||
|
|
'--bg-rotation': bgrotation,
|
||
|
|
'--s-rotationAlternation': rotalt,
|
||
|
|
'--waves': waves,
|
||
|
|
}">
|
||
|
|
<div ref="wrap" class="section__inner" v-bind:style="{background: background}">
|
||
|
|
<div v-for="i in iteration" class="blob" v-bind:key="i" v-bind:style="{
|
||
|
|
'--c-bg': colorSrc[i],
|
||
|
|
'--c-bg2': colorSrc[i+1],
|
||
|
|
'--noise': Math.sqrt(noise.noise2D(noisePos + i*.01,i*.2)),
|
||
|
|
'--noiseAbs': Math.sqrt(Math.abs(noise.noise2D(noisePos + i*.11,i*.02))),
|
||
|
|
}">
|
||
|
|
<i v-for="j in stack" v-bind:key="j" class="blob__inner" v-bind:style="{ '--pos': j/stack,
|
||
|
|
'--noise1': Math.sqrt(Math.abs(noise.noise2D(noisePos + i*.1 + .3,i*.3 + j/stack * density))),
|
||
|
|
'--noise2': Math.sqrt(Math.abs(noise.noise2D(noisePos + i*.2 - .6,i*.25 + j/stack * density))),
|
||
|
|
'--noise3': Math.sqrt(Math.abs(noise.noise2D(noisePos + i*.3 + .2,i*.1 + j/stack * density))),
|
||
|
|
'--noise4': Math.sqrt(Math.abs(noise.noise2D(noisePos + i*.4 + .1,i*.4 + j/stack * density))),
|
||
|
|
'--sin': Math.sin(j/stack * 18 + i),
|
||
|
|
}">
|
||
|
|
|
||
|
|
</i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- partial -->
|
||
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js'></script>
|
||
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.0.3/chroma.min.js'></script>
|
||
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js'></script>
|
||
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js'></script>
|
||
|
|
<script src="./script.js"></script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|