Browse Source

base working, added images assets, todo random generation

master
gbrochar 2 years ago
parent
commit
1c6a777a36
28 changed files with 547 additions and 99 deletions
  1. +1
    -1
      config/webpack.server.common.js
  2. +84
    -0
      public/css/style.css
  3. BIN
      public/images/1.jpg
  4. BIN
      public/images/10.jpg
  5. BIN
      public/images/11.jpg
  6. BIN
      public/images/12.jpg
  7. BIN
      public/images/2.jpg
  8. BIN
      public/images/3.jpg
  9. BIN
      public/images/4.jpg
  10. BIN
      public/images/5.jpg
  11. BIN
      public/images/6.jpg
  12. BIN
      public/images/7.jpg
  13. BIN
      public/images/8.jpg
  14. BIN
      public/images/9.jpg
  15. BIN
      public/images/article.jpg
  16. BIN
      public/images/carte.png
  17. +14
    -0
      src/client/components/BaseLattice.tsx
  18. +39
    -0
      src/client/components/ClickMe.tsx
  19. +14
    -14
      src/client/components/Collapse.tsx
  20. +37
    -0
      src/client/components/DownloadCV.tsx
  21. +45
    -0
      src/client/components/Git.tsx
  22. +65
    -4
      src/client/components/Root.tsx
  23. +4
    -0
      src/client/components/Shader.tsx
  24. +14
    -14
      src/client/components/Torus.tsx
  25. +19
    -0
      src/client/components/WhoAmI.tsx
  26. +106
    -0
      src/client/shaders/baseLattice.js
  27. +104
    -66
      src/client/shaders/inception.js
  28. +1
    -0
      views/index.ejs

+ 1
- 1
config/webpack.server.common.js View File

@@ -23,7 +23,7 @@ module.exports = {
plugins: [
new EsLint({
extensions: ['.ts', '.tsx'],
context: path.join(__dirname, '../src/client'),
context: path.join(__dirname, '../src/server'),
}),
],
};

+ 84
- 0
public/css/style.css View File

@@ -29,9 +29,93 @@ body {
width: 25%;
}

.tile-child {
display: inline-block;
vertical-align: top;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}

#whoami {
background-color: #1d2021;
color: #ebdbb2;
}

#git {
background-color: #282828;
}

#downloadcv {
background-color: #282828;
color: #8ec07c;
border-color: #8ec07c;
}

#clickme {
background-color: #1d2021;
color: #d3869b;
border-color: #d3869b;
}

#root {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}

.btn,
.btn:focus,
.btn:active {
outline: none;
box-shadow: none;
background-color: none;
}

.btn-mine {
border-radius: 0;
white-space: normal;
background-color: #1d2021;
color: #ebdbb2;
border-color: #ebdbb2;
transition: none;
}

.btn-mine:hover,
.btn-mine:focus,
.btn-mine:active {
background-color: #3c3638;
color: #fbf1c7;
border-color: #fbf1c7;
}

.btn-clickme,
.btn-clickme:focus {
border-radius: 0;
white-space: normal;
background-color: #1d2021;
color: #ebdbb2;
border-color: #ebdbb2;
transition: none;
}

.btn-clickme:hover,
.btn-clickme:active {
background-color: #3c3638;
color: #fbf1c7;
border-color: #fbf1c7;
animation: clickme 2s infinite;
}

@keyframes clickme {
0% {background-color: #b16286;}
14.28% {background-color: #458588;}
28.57% {background-color: #689d6a;}
42.85% {background-color: #98971a;}
57.14% {background-color: #d79921;}
71.42% {background-color: #d65d0e;}
85.71% {background-color: #cc241d;}
100% {background-color: #b16286;}
}

BIN
public/images/1.jpg View File

Before After
Width: 3840  |  Height: 2160  |  Size: 2.4 MiB

BIN
public/images/10.jpg View File

Before After
Width: 3840  |  Height: 2160  |  Size: 2.6 MiB

BIN
public/images/11.jpg View File

Before After
Width: 3840  |  Height: 2160  |  Size: 2.4 MiB

BIN
public/images/12.jpg View File

Before After
Width: 3840  |  Height: 2160  |  Size: 2.2 MiB

BIN
public/images/2.jpg View File

Before After
Width: 3840  |  Height: 2160  |  Size: 2.3 MiB

BIN
public/images/3.jpg View File

Before After
Width: 3840  |  Height: 2160  |  Size: 2.3 MiB

BIN
public/images/4.jpg View File

Before After
Width: 3840  |  Height: 2160  |  Size: 2.6 MiB

BIN
public/images/5.jpg View File

Before After
Width: 3840  |  Height: 2160  |  Size: 2.8 MiB

BIN
public/images/6.jpg View File

Before After
Width: 3840  |  Height: 2160  |  Size: 3.3 MiB

BIN
public/images/7.jpg View File

Before After
Width: 3840  |  Height: 2160  |  Size: 1.8 MiB

BIN
public/images/8.jpg View File

Before After
Width: 3840  |  Height: 2160  |  Size: 1.2 MiB

BIN
public/images/9.jpg View File

Before After
Width: 3840  |  Height: 2160  |  Size: 1.4 MiB

BIN
public/images/article.jpg View File

Before After
Width: 2336  |  Height: 1259  |  Size: 1.0 MiB

BIN
public/images/carte.png View File

Before After
Width: 1019  |  Height: 720  |  Size: 242 KiB

+ 14
- 0
src/client/components/BaseLattice.tsx View File

@@ -0,0 +1,14 @@
import React from 'react';
// @ts-ignore
import ShadertoyReact from 'shadertoy-react';
// @ts-ignore
import fs from '../shaders/baseLattice';

/**
* @return {jsx} a shader
*/
export default function BaseLattice() {
return (
<ShadertoyReact fs={fs} />
);
};

+ 39
- 0
src/client/components/ClickMe.tsx View File

@@ -0,0 +1,39 @@
import React, {useState, useEffect} from 'react';

interface ClickMeProps {
windowSize: number;
setTrigger: any;
}

/**
* @return {jsx} a presentation of me
*/
export default function ClickMe({windowSize, setTrigger}: ClickMeProps) {
const [buttonClass, setButtonClass] = useState('');

useEffect(() => {
if (window.innerWidth > 1200) {
setButtonClass('btn-lg');
} else {
setButtonClass('');
}
}, [windowSize]);

return (
<div
className='
tile-child d-flex
flex-column
align-items-center
justify-content-center'
id='clickme'>
<button
type='button'
onClick={() => setTrigger(Math.random())}
className={'d-inline btn btn-clickme ' + buttonClass}>
Click me !
</button>
<br />
</div>
);
};

+ 14
- 14
src/client/components/Collapse.tsx View File

@@ -1,14 +1,14 @@
import React from 'react';
// @ts-ignore
import ShadertoyReact from 'shadertoy-react';
// @ts-ignore
import fs from '../shaders/collapse';
/**
* @return {jsx} a shader
*/
export default function Collapse() {
return (
<ShadertoyReact fs={fs} />
);
};
import React from 'react';
// @ts-ignore
import ShadertoyReact from 'shadertoy-react';
// @ts-ignore
import fs from '../shaders/collapse';
/**
* @return {jsx} a shader
*/
export default function Collapse() {
return (
<ShadertoyReact fs={fs} />
);
};

+ 37
- 0
src/client/components/DownloadCV.tsx View File

@@ -0,0 +1,37 @@
import React, {useState, useEffect} from 'react';

interface DownloadCVProps {
windowSize: number;
}

/**
* @return {jsx} a presentation of me
*/
export default function DownloadCV({windowSize}: DownloadCVProps) {
const [buttonClass, setButtonClass] = useState('');

useEffect(() => {
if (window.innerWidth > 1200) {
setButtonClass('btn-lg');
} else {
setButtonClass('');
}
}, [windowSize]);

return (
<div
className='
tile-child d-flex
flex-column
align-items-center
justify-content-center'
id='downloadcv'>
<a
href='https://git.gaetanbrochard.dev/gbrochar/expo-web'
className={'d-inline btn btn-mine ' + buttonClass}>
Download my CV
</a>
<br />
</div>
);
};

+ 45
- 0
src/client/components/Git.tsx View File

@@ -0,0 +1,45 @@
import React, {useState, useEffect} from 'react';

interface GitProps {
windowSize: number;
}

/**
* @return {jsx} a presentation of me
*/
export default function Git({windowSize}: GitProps) {
const [topClass, setTopClass] = useState('');
const [bottomClass, setBottomClass] = useState('');

useEffect(() => {
if (window.innerWidth > 1200) {
setTopClass('btn-lg mb-3');
setBottomClass('btn-lg mt-3');
} else {
setTopClass('mb-1');
setBottomClass('mt-1');
}
}, [windowSize]);

return (
<div
className='
tile-child d-flex
flex-column
align-items-center
justify-content-center'
id='git'>
<a
href='https://git.gaetanbrochard.dev/gbrochar/expo-web'
className={'d-inline btn btn-mine ' + topClass}>
This project&apos;s git
</a>
<br />
<a
href='https://git.gaetanbrochard.dev/gbrochar'
className={'d-inline btn btn-mine ' + bottomClass}>
My git
</a>
</div>
);
};

+ 65
- 4
src/client/components/Root.tsx View File

@@ -1,25 +1,86 @@
import React from 'react';
import React, {useState, useEffect, useCallback} from 'react';
import Shader from './Shader';
import WhoAmI from './WhoAmI';
import Git from './Git';
import DownloadCV from './DownloadCV';
import ClickMe from './ClickMe';

/**
* @return {jsx} The root component
*/
export default function Root() {
const [windowSize, setWindowSize] = useState(0);
const [trigger, setTrigger] = useState(0);
const [content, setContent]: any = useState([]);
const Shaders = [
'BaseRaymarching',
'Collapse',
'Droplets',
'Inception',
'Mentstom',
'Menstom',
'Torus',
'Triangle',
'BaseLattice',
];

const handleWindowResize = useCallback((_event) => {
setWindowSize(window.innerWidth);
}, []);
useEffect(() => {
window.addEventListener('resize', handleWindowResize);
return () => {
window.removeEventListener('resize', handleWindowResize);
};
}, [handleWindowResize]);

useEffect(() => {
let newContent = [];
let randomContent = [];
let shadersRandom = [];
let imagesRandom = [];

shadersRandom.push(Math.floor(Math.random() * 8));
shadersRandom.push(Math.floor(Math.random() * 8));
newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[0]]} /></div>);
newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[1]]} /></div>);
newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[2]]} /></div>);
newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[3]]} /></div>);
newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[4]]} /></div>);
newContent.push(<div className='tile'><WhoAmI /></div>);
newContent.push(<div className='tile'><Git windowSize={windowSize} /></div>);
newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[5]]} /></div>);
newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[6]]} /></div>);
newContent.push(<div className='tile'><DownloadCV windowSize={windowSize} /></div>);
newContent.push(<div className='tile'><ClickMe windowSize={windowSize} setTrigger={setTrigger} /></div>);
newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[7]]} /></div>);
newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[8]]} /></div>);
newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[9]]} /></div>);
newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[10]]} /></div>);
newContent.push(<div className='tile'><Shader name={Shaders[shadersRandom[11]]} /></div>);
setContent(newContent);
}, [trigger]);


return (
<div id='root'>
{content}
{/* <div className='tile'><Shader name={Shaders[0]} /></div>
<div className='tile'><Shader name={Shaders[0]} /></div>
<div className='tile'><Shader name={Shaders[0]} /></div>
<div className='tile'><Shader name={Shaders[0]} /></div>
<div className='tile'><Shader name={Shaders[0]} /></div>
<div className='tile'><WhoAmI /></div>
<div className='tile'><Git windowSize={windowSize} /></div>
<div className='tile'><Shader name={Shaders[0]} /></div>
<div className='tile'><Shader name={Shaders[0]} /></div>
<div className='tile'><DownloadCV windowSize={windowSize} /></div>
<div className='tile'><ClickMe windowSize={windowSize} setTrigger={setTrigger} /></div>
<div className='tile'><Shader name={Shaders[0]} /></div>
<div className='tile'><Shader name={Shaders[0]} /></div>
<div className='tile'><Shader name={Shaders[0]} /></div>
<div className='tile'><Shader name={Shaders[0]} /></div>
<div className='tile'><Shader name={Shaders[1]} /></div>
<div className='tile'><Shader name={Shaders[2]} /></div>
<div className='tile'><Shader name={Shaders[0]} /></div> */}
</div>
);
}

+ 4
- 0
src/client/components/Shader.tsx View File

@@ -13,6 +13,8 @@ import Menstom from './Menstom';
import Collapse from './Collapse';
// @ts-ignore
import Torus from './Torus';
// @ts-ignore
import BaseLattice from './BaseLattice';

interface ShaderProps {
name: string;
@@ -38,6 +40,8 @@ export default function Shader({name}: ShaderProps) {
Shader = <Collapse />;
} else if (name == 'Torus') {
Shader = <Torus />;
} else if (name == 'BaseLattice') {
Shader = <BaseLattice />;
}

return (


+ 14
- 14
src/client/components/Torus.tsx View File

@@ -1,14 +1,14 @@
import React from 'react';
// @ts-ignore
import ShadertoyReact from 'shadertoy-react';
// @ts-ignore
import fs from '../shaders/torus';
/**
* @return {jsx} a shader
*/
export default function Torus() {
return (
<ShadertoyReact fs={fs} />
);
};
import React from 'react';
// @ts-ignore
import ShadertoyReact from 'shadertoy-react';
// @ts-ignore
import fs from '../shaders/torus';
/**
* @return {jsx} a shader
*/
export default function Torus() {
return (
<ShadertoyReact fs={fs} />
);
};

+ 19
- 0
src/client/components/WhoAmI.tsx View File

@@ -0,0 +1,19 @@
import React from 'react';

/**
* @return {jsx} a presentation of me
*/
export default function WhoAmI() {
return (
<div
className='
tile-child d-flex
flex-column
align-items-center
justify-content-center'
id='whoami'>
<div className='display-4 text-center'>Gaëtan Brochard</div>
<div className='lead text-center'>Developer</div>
</div>
);
};

+ 106
- 0
src/client/shaders/baseLattice.js View File

@@ -0,0 +1,106 @@
export default `#define MAX_STEPS 1000
#define MAX_DIST 500.
#define E 0.000001

float sdCapsule(vec3 p, vec3 a, vec3 b, float r)
{
vec3 ab = b - a;
vec3 ap = p - a;
float t = dot(ab, ap) / dot(ab, ab);
t = clamp(t, 0., 1.);
vec3 c = a + t * ab;
return length(p - c) - r;
}

float sdTorus(vec3 p, vec2 r)
{
float x = length(p.xz) - r.x;
return length(vec2(x, p.y)) - r.y;
}

float sdBox(vec3 p, vec3 s)
{
return length(max(abs(p) - s, 0.));
}

float GetDist(vec3 p)
{
vec4 s = vec4(0, 0, 0, 2);
p.x += iTime;
float s_dist = (length(mod(p, 10.) - s.xyz) - s.w);
float b_dist1 = sdBox(mod(p + 5., 10.) - vec3(5.) - vec3(0., sin(p.x * 0.2) * 2., sin(p.x * 0.2) * 2.), vec3(10., 0.5, 0.5)) * 0.3;
float b_dist2 = sdBox(mod(p + 5., 10.) - vec3(5.) - vec3(sin(p.y * 0.2) * 2., 0., sin(p.y * 0.2) * 2.), vec3(0.5, 10., 0.5)) * 0.3;
float b_dist3 = sdBox(mod(p + 5., 10.) - vec3(5.) - vec3(sin(p.z * 0.2) * 2., sin(p.z * 0.2) * 2., 0.), vec3(0.5, 0.5, 10.)) * 0.3;
float d = min(b_dist1, b_dist2);
d = min(d, b_dist3);
return d;
}

float RayMarch(vec3 ro, vec3 rd) {
float dO = 0.;
for (int i = 0; i < MAX_STEPS; i++)
{
vec3 p = ro + rd * dO;
float dS = GetDist(p);
dO += dS;
if (dO > MAX_DIST || dS < E)
break;
}
return dO;
}

vec3 GetNormal(vec3 p)
{
float d = GetDist(p);
vec2 e = vec2(0.3, 0);
vec3 n = d - vec3(
GetDist(p - e.xyy),
GetDist(p - e.yxy),
GetDist(p - e.yyx));
return (normalize(n));
}

float GetLight(vec3 p)
{
vec3 lightPos = vec3(0, 10, iTime* 3.);
lightPos.xz += vec2(sin(iTime), cos(iTime)) * 5.;
vec3 l = normalize(lightPos - p);
vec3 n = GetNormal(p);
float dif = clamp(dot(l, n), 0., 1.);
//float d = RayMarch(p+n*E * 30., l);
//if (d < length(lightPos - p))
// dif *= 0.1;
return (dif);
}

vec2 rotate(vec2 p, float theta)
{
return vec2(cos(p.x) - sin(p.y), sin(p.x) + cos(p.y));
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
vec2 uv = ((fragCoord - .5 * iResolution.xy) / iResolution.y);
vec3 up = normalize(vec3(cos(iTime), sin(iTime), 0));
vec3 ro = vec3(5. + cos(iTime), 5. + sin(iTime), iTime* 3.);
vec3 rd = normalize(vec3(uv.x + 1., uv.y + 1., 1 + 1));
float d = RayMarch(ro, rd);
vec3 p = ro + rd * d;
float dif = GetLight(p);
vec3 col = vec3(abs(mod((p.x + sin(iTime))/ 10., 1.) - 0.5) * dif, abs(mod((p.y + sin(iTime)) / 10., 1.) - 0.5) * dif, abs(mod((p.z + sin(iTime)) / 10., 1.) - 0.5) * dif);
//col = myvec;
fragColor = vec4(col,1.0);
}`;

+ 104
- 66
src/client/shaders/inception.js View File

@@ -1,106 +1,144 @@
export default `#define MAX_STEPS 1000
#define MAX_DIST 500.
#define E 0.000001
export default `
#define MAX_STEPS 1280
#define MAX_DIST 128.
#define E 0.0001
#define PI 3.141592

float sdCapsule(vec3 p, vec3 a, vec3 b, float r)
vec3 rotX(vec3 v, float a)
{
vec3 ab = b - a;
vec3 ap = p - a;
float t = dot(ab, ap) / dot(ab, ab);
t = clamp(t, 0., 1.);
vec3 c = a + t * ab;
return length(p - c) - r;
return vec3(v.x, v.y * cos(a) - v.z * sin(a), v.y * sin(a) + v.z * cos(a));
}

float sdTorus(vec3 p, vec2 r)
vec3 rotY(vec3 v, float a)
{
return vec3(v.x * cos(a) + v.z * sin(a), v.y, v.z * cos(a) - v.x * sin(a));
}

vec3 rotZ(vec3 v, float a)
{
return vec3(v.x * cos(a) - v.y * sin(a), v.x * sin(a) + v.y * cos(a), v.z);
}

vec3 modSDF(vec3 p, vec3 c)
{
return mod(p + 0.5 * c, c) - 0.5 * c;
}

float sdfTorus(vec3 p, vec2 r)
{
float x = length(p.xz) - r.x;
return length(vec2(x, p.y)) - r.y;
}

float sdBox(vec3 p, vec3 s)

// blackbody by aiekick : https://www.shadertoy.com/view/lttXDn

// -------------blackbody----------------- //

// return color from temperature
//http://www.physics.sfasu.edu/astro/color/blackbody.html
//http://www.vendian.org/mncharity/dir3/blackbody/
//http://www.vendian.org/mncharity/dir3/blackbody/UnstableURLs/bbr_color.html

vec3 blackbody(float Temp)
{
return length(max(abs(p) - s, 0.));
vec3 col = vec3(255.);
col.x = 56100000. * pow(Temp,(-3. / 2.)) + 148.;
col.y = 100.04 * log(Temp) - 623.6;
if (Temp > 6500.) col.y = 35200000. * pow(Temp,(-3. / 2.)) + 184.;
col.z = 194.18 * log(Temp) - 1448.6;
col = clamp(col, 0., 255.)/255.;
if (Temp < 1000.) col *= Temp/1000.;
return col;
}

float GetDist(vec3 p)
// -------------blackbody----------------- //


float scene(vec3 p)
{
vec4 s = vec4(0, 0, 0, 2);
p.x += iTime;
float s_dist = (length(mod(p, 10.) - s.xyz) - s.w);
float b_dist1 = sdBox(mod(p + 5., 10.) - vec3(5.) - vec3(0., sin(p.x * 0.2) * 2., sin(p.x * 0.2) * 2.), vec3(10., 0.5, 0.5)) * 0.3;
float b_dist2 = sdBox(mod(p + 5., 10.) - vec3(5.) - vec3(sin(p.y * 0.2) * 2., 0., sin(p.y * 0.2) * 2.), vec3(0.5, 10., 0.5)) * 0.3;
float b_dist3 = sdBox(mod(p + 5., 10.) - vec3(5.) - vec3(sin(p.z * 0.2) * 2., sin(p.z * 0.2) * 2., 0.), vec3(0.5, 0.5, 10.)) * 0.3;
float d = min(b_dist1, b_dist2);
d = min(d, b_dist3);
float td1 = sdfTorus(
modSDF(
rotX(
p - vec3(3. + cos(p.x * 10. + iTime) / 3., sin(p.y * 10. + iTime) / 3., 6.),
PI / 2.),
vec3(6.)), vec2(2., abs(sin(iTime)) * 0.2 + 0.1)) * 0.1;
float td2 = sdfTorus(
modSDF(
rotZ(
rotX(
p - vec3(3. + cos(p.x * 10. + iTime) / 3., -3. + sin(p.y * 10. + iTime) / 3., 6.), PI / 2.), PI / 2.), vec3(6.)), vec2(2., abs(cos(iTime)) * 0.2 + 0.1))* 0.1;
float td3 = sdfTorus(
modSDF(
rotZ(
p - vec3(cos(p.x * 10. + iTime) / 3., sin(p.y * 10. + iTime) / 3., 3.), PI / 2.), vec3(6.)), vec2(2., abs(sin(iTime)) * 0.2 + 0.1))* 0.1;
float td4 = sdfTorus(modSDF(p + vec3(cos(p.x * 10. + iTime) / 3., sin(p.y * 10. + iTime) / 3., -6.), vec3(6.)), vec2(2., abs(cos(iTime)) * 0.2 + 0.1))* 0.1;
//float td2 = 10000.;
float d = min(td1, td2);
d = min(d, td3);
d = min(d, td4);
return d;
}

float RayMarch(vec3 ro, vec3 rd) {
float march(vec3 ro, vec3 rd)
{
float dO = 0.;
for (int i = 0; i < MAX_STEPS; i++)
for (int steps = 0; steps < MAX_STEPS; steps++)
{
vec3 p = ro + rd * dO;
float dS = GetDist(p);
float dS = scene(p);
dO += dS;
if (dO > MAX_DIST || dS < E)
break;
if (dS < E || dO > MAX_DIST)
break;
}
return dO;
}

vec3 GetNormal(vec3 p)
vec3 normal(vec3 p)
{
float d = GetDist(p);
float d = scene(p);
vec2 e = vec2(0.3, 0);
vec3 n = d - vec3(
GetDist(p - e.xyy),
GetDist(p - e.yxy),
GetDist(p - e.yyx));
scene(p - e.xyy),
scene(p - e.yxy),
scene(p - e.yyx));
return (normalize(n));
}

float GetLight(vec3 p)
float light(vec3 p)
{
vec3 lightPos = vec3(0, 10, iTime* 3.);
lightPos.xz += vec2(sin(iTime), cos(iTime)) * 5.;
vec3 lightPos = vec3(0., 0., 0.);
vec3 l = normalize(lightPos - p);
vec3 n = GetNormal(p);
vec3 n = normal(p);
float dif = clamp(dot(l, n), 0., 1.);
//float d = RayMarch(p+n*E * 30., l);
//if (d < length(lightPos - p))
// dif *= 0.1;
// float d = march(p+n*E * 30., l);
// if (d < length(lightPos - p))
// dif *= 0.1;
return (dif);
}

vec2 rotate(vec2 p, float theta)
{
return vec2(cos(p.x) - sin(p.y), sin(p.x) + cos(p.y));
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
vec2 uv = ((fragCoord - .5 * iResolution.xy) / iResolution.y);
vec3 up = normalize(vec3(cos(iTime), sin(iTime), 0));
vec3 ro = vec3(5. + cos(iTime), 5. + sin(iTime), iTime* 3.);
vec3 rd = normalize(vec3(uv.x + 1., uv.y + 1., 1 + 1));
float d = RayMarch(ro, rd);

vec3 ro = vec3(7., 7., iTime);
vec3 rd = normalize(vec3(uv.x, uv.y, 1));
rd = rotX(rd, iTime * 0.256);
rd = rotY(rd, iTime * 0.314);
rd = rotZ(rd, iTime * 0.1618);
//rd = rotX(rd, PI / 2.);

float d = march(ro, rd);

vec3 p = ro + rd * d;
float dif = GetLight(p);
vec3 col = vec3(abs(mod((p.x + sin(iTime))/ 10., 1.) - 0.5) * dif, abs(mod((p.y + sin(iTime)) / 10., 1.) - 0.5) * dif, abs(mod((p.z + sin(iTime)) / 10., 1.) - 0.5) * dif);
//col = myvec;
fragColor = vec4(col,1.0);
}`;
float dif = light(p);
vec3 col = vec3(dif);
col = blackbody(d * 10.);
col += vec3(abs(mod((p.x + sin(iTime))/ 10., 1.) - 0.5) * dif, abs(mod((p.y + sin(iTime)) / 10., 1.) - 0.5) * dif, abs(mod((p.z + sin(iTime)) / 10., 1.) - 0.5) * dif);
// Output to screen
col = pow(col, vec3(0.454545));
fragColor = vec4(col, 1.0);
}`

+ 1
- 0
views/index.ejs View File

@@ -6,6 +6,7 @@
<meta name="Description" content="Web version of digital art exhibition">
<title>Web-Expo</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="static/css/style.css">
</head>
<body>


Loading…
Cancel
Save