andras/sdf-2d-demo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use new library version

Browse source
This commit is contained in:
schmelczerandras 2020-09-24 14:20:30 +02:00
parent c459a43667
commit e4b15ff5f6
9 changed files with 51 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/index.html
View file

@ -11,7 +11,7 @@
<meta name="theme-color" content="#103783" />
<meta
name="description"
content="Some simple demos to showcase the possibilities of the sdf-2d library library. Click on the title to find out more."
content="Some simple demos to showcase the possibilities of the sdf-2d library. Click on the title to find out more."
/>
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />

11
src/index.ts
View file

@ -21,21 +21,16 @@ removeUnnecessaryOutlines();
const deltaTimeCalculator = new DeltaTimeCalculator();
const canvas = document.querySelector('canvas') as HTMLCanvasElement;
const info = document.querySelector('#info') as HTMLDivElement;
const errorText = document.querySelector('#error-text') as HTMLParamElement;
const errors = document.querySelector('#errors') as HTMLDivElement;
const errorsContainer = document.querySelector('#errors-container') as HTMLDivElement;
const toggleButton = document.querySelector('#toggle-text');
const overlay = document.querySelector('#overlay') as HTMLDivElement;
let textVisible = false;
let textVisible = true;
const handleTextToggle = () => {
textVisible = !textVisible;
[info, overlay, errors].forEach(
(e) => (e.style.visibility = textVisible ? 'inherit' : 'hidden')
);
toggleButton.innerHTML = textVisible ? 'Hide text' : 'Show text';
overlay.style.visibility = textVisible ? 'visible' : 'hidden';
toggleButton.innerHTML = textVisible ? 'Hide insights' : 'Show insights';
if (textVisible) {
toggleButton.classList.remove('off');
} else {

31
src/scenes/blob/blob-scene.ts
View file

@ -1,6 +1,7 @@
import { vec2, vec3 } from 'gl-matrix';
import { Circle, CircleLight, compile, InvertedTunnel, Renderer } from 'sdf-2d';
import { prettyPrint } from '../../helper/pretty-print';
import { rgb255 } from '../../helper/rgb255';
import { Scene } from '../scene';
import { Blob } from './blob';
@ -18,26 +19,24 @@ export class BlobScene implements Scene {
): Promise<void> {
this.canvas = canvas;
this.overlay = overlay;
this.renderer = await compile(
canvas,
[
Circle.descriptor,
{
...CircleLight.descriptor,
shaderCombinationSteps: [1, 2],
},
Blob.descriptor,
],
[
vec3.fromValues(0, 0, 0),
vec3.fromValues(224 / 255, 96 / 255, 126 / 255),
vec3.fromValues(119 / 255, 173 / 255, 120 / 255),
]
);
this.renderer = await compile(canvas, [
Circle.descriptor,
{
...CircleLight.descriptor,
shaderCombinationSteps: [1, 2],
},
Blob.descriptor,
]);
this.renderer.setRuntimeSettings({
ambientLight: vec3.fromValues(0.35, 0.1, 0.45),
shadowLength: 800,
colorPalette: [
rgb255(0, 0, 0),
rgb255(119, 173, 120),
rgb255(224, 96, 126),
rgb255(224, 96, 126),
],
});
const { width, height } = this.canvas.getBoundingClientRect();

2
src/scenes/blob/blob.ts
View file

@ -35,7 +35,7 @@ export class Blob extends Drawable {
);
minDistance = min(minDistance, res);
color = mix(1.0, color, step(distanceNdcPixelSize + SURFACE_OFFSET, res));
color = mix(3.0 / {paletteSize}, color, step(distanceNdcPixelSize + SURFACE_OFFSET, res));
}
}
`,

33
src/scenes/rain/rain-scene.ts
View file

@ -1,6 +1,7 @@
import { vec2, vec3 } from 'gl-matrix';
import { vec2 } from 'gl-matrix';
import { CircleLight, compile, Renderer, Tunnel } from 'sdf-2d';
import { prettyPrint } from '../../helper/pretty-print';
import { rgb } from '../../helper/rgb';
import { rgb255 } from '../../helper/rgb255';
import { Scene } from '../scene';
import { Droplet } from './droplet';
@ -20,27 +21,23 @@ export class RainScene implements Scene {
): Promise<void> {
this.canvas = canvas;
this.overlay = overlay;
this.renderer = await compile(
canvas,
[
{
...Tunnel.descriptor,
shaderCombinationSteps: [0, 1, 2, 4, 8, 12, 16, 24],
},
{
...CircleLight.descriptor,
shaderCombinationSteps: [2],
},
],
[vec3.fromValues(0.4, 1, 0.6), vec3.fromValues(1, 1, 0), vec3.fromValues(0.3, 1, 1)]
);
this.renderer = await compile(canvas, [
{
...Tunnel.descriptor,
shaderCombinationSteps: [0, 1, 2, 4, 8, 12, 16, 24],
},
{
...CircleLight.descriptor,
shaderCombinationSteps: [2],
},
]);
this.renderer.setRuntimeSettings({
ambientLight: vec3.fromValues(0.2, 0.2, 0.2),
tileMultiplier: 8,
ambientLight: rgb(0.2, 0.2, 0.2),
colorPalette: [rgb(1, 1, 0), rgb(1, 1, 0), rgb(0.3, 1, 1), rgb(0.3, 1, 1)],
});
for (let i = 0; i < (canvas.getBoundingClientRect().width / 1000) * 20; i++) {
for (let i = 0; i < (canvas.getBoundingClientRect().width / 800) * 20; i++) {
this.droplets.push(new Droplet());
}
}

27
src/scenes/tunnel-scene.ts
View file

@ -64,25 +64,22 @@ export class TunnelScene implements Scene {
): Promise<void> {
this.canvas = canvas;
this.overlay = overlay;
this.renderer = await compile(
canvas,
[
{
...InvertedTunnel.descriptor,
shaderCombinationSteps: [0, 1, 2, 4, 8, 12],
},
{
...CircleLight.descriptor,
shaderCombinationSteps: [1, 2, 3, 4, 5, 6, 7],
},
],
[rgb(0.4, 1, 0.6), rgb(1, 1, 0), rgb(0.3, 1, 1)]
);
this.renderer = await compile(canvas, [
{
...InvertedTunnel.descriptor,
shaderCombinationSteps: [0, 1, 2, 4, 8, 12],
},
{
...CircleLight.descriptor,
shaderCombinationSteps: [1, 2, 3, 4, 5, 6, 7],
},
]);
this.renderer.setRuntimeSettings({
isWorldInverted: true,
ambientLight: vec3.fromValues(0.35, 0.1, 0.45),
ambientLight: rgb(0.35, 0.1, 0.45),
shadowLength: 550,
colorPalette: [rgb(0.4, 1, 0.6), rgb(1, 1, 0), rgb(0.3, 1, 1)],
});
for (let i = 0; i < 200; i++) {

4
src/styles/index.scss
View file

@ -80,7 +80,7 @@ body {
@include card();
font-size: 1.25rem;
width: 120px;
width: 150px;
cursor: pointer;
padding: 0.2em 0.5rem;
background: none;
@ -92,7 +92,7 @@ body {
transition: opacity 200ms;
@media (max-width: $breakpoint) {
width: 90px;
width: 110px;
}
}