@@ -23,7 +23,7 @@ module.exports = { | |||
plugins: [ | |||
new EsLint({ | |||
extensions: ['.ts', '.tsx'], | |||
context: path.join(__dirname, '../src/client'), | |||
context: path.join(__dirname, '../src/server'), | |||
}), | |||
], | |||
}; |
@@ -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;} | |||
} |
@@ -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} /> | |||
); | |||
}; |
@@ -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> | |||
); | |||
}; |
@@ -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} /> | |||
); | |||
}; |
@@ -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> | |||
); | |||
}; |
@@ -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's git | |||
</a> | |||
<br /> | |||
<a | |||
href='https://git.gaetanbrochard.dev/gbrochar' | |||
className={'d-inline btn btn-mine ' + bottomClass}> | |||
My git | |||
</a> | |||
</div> | |||
); | |||
}; |
@@ -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> | |||
); | |||
} |
@@ -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 ( | |||
@@ -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} /> | |||
); | |||
}; |
@@ -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> | |||
); | |||
}; |
@@ -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); | |||
}`; |
@@ -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); | |||
}` |
@@ -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> | |||