Skip to content

Commit

Permalink
initial hydrogen scene
Browse files Browse the repository at this point in the history
  • Loading branch information
@AlexWarnes
AlexWarnes committed Jul 1, 2022
1 parent 6743cd6 commit ef0d31f
Show file tree
Hide file tree
Showing 8 changed files with 421 additions and 11 deletions.
28 changes: 23 additions & 5 deletions src/lib/utils/vectors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,30 @@ export const oscillatingVector = () => {
const v = oscillatingValue();
return [v, v, v]
}
export function randomVec3(){

export interface Vec3RangeOptions {
xMin: number;
xMax: number;
yMin: number;
yMax: number;
zMin: number;
zMax: number;
}

const defaultVec3RangeOptions: Vec3RangeOptions = {
xMin: -25,
xMax: 25,
yMin: -25,
yMax: 25,
zMin: -25,
zMax: 25,
}
export function randomVec3(range: Vec3RangeOptions = defaultVec3RangeOptions){
// TODO: add range config args
const x = THREE.MathUtils.randInt(-20, 20)
const y = THREE.MathUtils.randInt(-15, 0)
const z = THREE.MathUtils.randInt(-30, 20)
return new THREE.Vector3(x, y, z)
const x = THREE.MathUtils.randInt(range.xMin, range.xMax);
const y = THREE.MathUtils.randInt(range.yMin, range.yMax);
const z = THREE.MathUtils.randInt(range.zMin, range.zMax);
return new THREE.Vector3(x, y, z);
}

/*
Expand Down
16 changes: 11 additions & 5 deletions src/routes/showcase/h-tree/_routeLib/treeState.ts
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import type { Position, Rotation } from 'threlte';
import type { ThreltePointerEvent } from 'threlte';
import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial';
import { writable } from 'svelte/store';
import type { Vector3Tuple } from 'three';
import { degToRad, mapLinear, randInt } from 'three/src/math/MathUtils';
import { rxWritable } from "svelte-fuse-rx";
import { startWith, throttleTime, map, filter } from 'rxjs';
import { startWith, throttleTime, map, filter, Observable } from 'rxjs';
export interface Branch {
id: string;
points: Vector3Tuple[];
Expand Down Expand Up @@ -85,11 +85,17 @@ export const defaultLineMaterial_4 = new LineMaterial({
});

export const connectVectors = writable<boolean>(false);
export const pointerV3Event = new rxWritable(null);
export const pointerX = pointerV3Event.pipe(
export const pointerV3Event: any = new rxWritable(null);

// RxJS Version
export const pointerX: Observable<number> = pointerV3Event.pipe(
throttleTime(200),
filter(evt => !!evt),
map(evt => mapLinear(evt.detail.point['x'] / (window?.innerWidth || 800), 0, 1, -15, 15)),
map((evt: CustomEvent<ThreltePointerEvent>) => mapLinear(
evt.detail.point['x'] / (window?.innerWidth || 800),
0, 1,
-15, 15
)),
startWith(0),
)
export const allowRandomness = writable<boolean>(false);
Expand Down
1 change: 0 additions & 1 deletion src/routes/showcase/h-tree/index.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@
<PerspectiveCamera position={{ x: 0, y: 15, z: 30 }} fov={55}>
<OrbitControls autoRotate enabled enableDamping target={{ x: 0, y: 10, z: 0 }} />
</PerspectiveCamera>

<!-- BACKGROUND -->
<Mesh
interactive
Expand Down
87 changes: 87 additions & 0 deletions src/routes/showcase/hydrogen/_routeLib/Hydrogen.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<script lang="ts">
import { SphereBufferGeometry, DodecahedronBufferGeometry, OctahedronBufferGeometry } from 'three';
import { Mesh, Group, useFrame } from 'threlte';
import { Float } from 'threlte/extras';
import { atomicMaterial } from "./materials";
export let position = { x: 0, y: 0, z: 0 };
export let isotope = 'TRITIUM'; // "PROTIUM" | "DEUTERIUM" | "TRITIUM"
export let rotation = 0;
let dynamicRotation = 0;
useFrame(() => {
dynamicRotation += 0.01;
});
</script>

<Float speed={0.5} rotationIntensity={1} floatIntensity={40} floatingRange={[-0.1, 0.1]}>
<Group {position} rotation={{ x: rotation, y: rotation, z: rotation }}>

<!-- PROTON -->
<Mesh
geometry={new DodecahedronBufferGeometry()}
material={atomicMaterial[isotope].proton}
{position}
interactive
on:click
/>

<!-- NEUTRONS -->
{#if isotope === 'DEUTERIUM' || isotope === 'TRITIUM'}
<Mesh
geometry={new DodecahedronBufferGeometry(1)}
material={atomicMaterial[isotope].neutron}
position={{ x: position.x + 0.66, y: position.y + 0.33, z: position.z }}
scale={0.75}
interactive
on:click
/>
{/if}

{#if isotope === 'TRITIUM'}
<Mesh
geometry={new DodecahedronBufferGeometry(1)}
material={atomicMaterial[isotope].neutron}
position={{ x: position.x + -0.66, y: position.y + 0.33, z: position.z }}
scale={0.75}
interactive
on:click
/>
<!-- <Mesh
geometry={new DodecahedronBufferGeometry(1)}
material={atomicMaterial[isotope].neutron}
position={{ x: position.x, y: position.y + -0.66, z: position.z }}
scale={0.75}
interactive
on:click
/> -->
{/if}

<!-- ELECTRON -->
<Group rotation={{ x: rotation, y: dynamicRotation, z: rotation }}>
<Mesh
geometry={new OctahedronBufferGeometry(0.25)}
material={atomicMaterial[isotope].electron}
position={{ x: 10 }}
/>
</Group>
</Group>
</Float>

<style>
input {
color: #FF0605;
color: #9538FF;
color: #0605FF;
color: #FFFFFF;
color: #FFFFC0;
color: #FFFFA0;
color: #008FFF;
color: #006BFF;
color: #002b4d;
color: #00204d;
/* fresnel */
color: #E7B473;
}
</style>
216 changes: 216 additions & 0 deletions src/routes/showcase/hydrogen/_routeLib/materials.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,216 @@
import { LayerMaterial, Color as LaminaColor, Depth, Fresnel, Noise, Gradient } from 'lamina/vanilla';
import { BackSide, Color } from 'three';
import type { HydrogenIsotope } from './stores';
// Design/Code derived from Paul Henschel's implementation here: https://codesandbox.io/s/figma-noodles-iedfg?file=/src/Noodles.js:230-1026
// const colorA = new Color('#2032A5').convertSRGBToLinear();
// const colorB = new Color('#0F1C4D').convertSRGBToLinear();
const fresnel = new Color('#E7B473').convertSRGBToLinear();

// Proton: #FF0605
// Neutron: #9538FF
// Electron: #0605FF

// Protium: #FFFFFF
// Deuterium: #FFFFC0
// Tritium: #FFFFA0

// Uranium: #008FFF
// Plutonium: #006BFF

const colors: any = {
proton: new Color('#FF0605').convertSRGBToLinear(),
neutron: new Color('#9538FF').convertSRGBToLinear(),
electron: new Color('#0605FF').convertSRGBToLinear(),
protium: new Color('#0000FF').convertSRGBToLinear(),
deuterium: new Color('#0000C0').convertSRGBToLinear(),
tritium: new Color('#0000A0').convertSRGBToLinear(),
uranium: new Color('#002b4d').convertSRGBToLinear(),
// uranium: new Color('#008FFF').convertSRGBToLinear(),
plutonium: new Color('#006BFF').convertSRGBToLinear()
// plutonium: new Color('#00204d').convertSRGBToLinear()
};

export const atomicMaterial: any = {
PROTIUM: {
proton: atomicNoiseMaterial("PROTIUM", "PROTON"),
neutron: atomicNoiseMaterial("PROTIUM", "NEUTRON"),
electron: atomicNoiseMaterial("PROTIUM", "ELECTRON"),
},
DEUTERIUM: {
proton: atomicNoiseMaterial("DEUTERIUM", "PROTON"),
neutron: atomicNoiseMaterial("DEUTERIUM", "NEUTRON"),
electron: atomicNoiseMaterial("DEUTERIUM", "ELECTRON"),
},
TRITIUM: {
proton: atomicNoiseMaterial("TRITIUM", "PROTON"),
neutron: atomicNoiseMaterial("TRITIUM", "NEUTRON"),
electron: atomicNoiseMaterial("TRITIUM", "ELECTRON"),
},
}

function atomicNoiseMaterial(isotope: HydrogenIsotope, particle: 'PROTON' | 'NEUTRON' | 'ELECTRON') {
return new LayerMaterial({
lighting: "basic",
layers: [
new LaminaColor({ color: colors[particle.toLowerCase()] }),
new Depth({
colorA: colors[isotope.toLowerCase()],
colorB: colors[particle.toLowerCase()],
alpha: 0.5,
mode: 'normal',
near: 0,
far: 2,
origin: [1, 1, 1]
}),
new Depth({
colorA: colors.neutron,
colorB: colors[particle.toLowerCase()],
alpha: 0.5,
mode: 'add',
near: 3,
far: 2,
origin: [1, 1, 1]
}),
new Fresnel({ mode: 'add', color: fresnel, intensity: 0.3, power: 2.5, bias: 0.0 }),
new Noise({
mapping: 'local',
type: 'white',
scale: 1,
colorA: colors[particle.toLowerCase()],
colorB: colors[isotope.toLowerCase()],
mode: 'overlay',
})
]
});
};
// export const specialNoiseMaterial = new LayerMaterial({
// layers: [
// new LaminaColor({ color: colorA }),
// new Depth({
// colorA: colorA,
// colorB: colorB,
// alpha: 0.5,
// mode: 'normal',
// near: 0,
// far: 2,
// origin: [1, 1, 1]
// }),
// new Depth({
// colorA: 'purple',
// colorB: colorB,
// alpha: 0.5,
// mode: 'add',
// near: 3,
// far: 2,
// origin: [1, 1, 1]
// }),
// new Fresnel({ mode: 'add', color: fresnel, intensity: 0.3, power: 2.5, bias: 0.0 }),
// new Noise({
// mapping: 'local',
// type: 'white',
// scale: 1,
// colorA: '#ffaf40',
// colorB: 'black',
// mode: 'overlay'
// })
// ]
// });

export const backgroundMaterial = new LayerMaterial({
side: BackSide,
layers: [
// new LaminaColor({
// color: colors.uranium,
// alpha: 0.95,
// }),
// new LaminaColor({
// color: colors.proton,
// alpha: 0.05,
// }),
// new Depth({
// colorA: colors.uranium,
// colorB: colors.proton,
// alpha: 1,
// mode: 'normal',
// near: 130,
// far: 200,
// origin: [100, 100, -100]
// }),
new Gradient({
colorA: colors.uranium,
colorB: colors.proton,
alpha: 1,
contrast: 0.5,
start: 1,
end: -4,
axes: "x",
mapping: "local",
visible: true,
}),

new Noise({
mapping: 'local',
type: 'white',
scale: 1,
colorA: 'white',
colorB: 'black',
mode: 'subtract',
alpha: 0.2
})
]
});

/*
blue/purple
import {
LayerMaterial,
Noise,
Gradient,
Fresnel
} from "lamina/vanilla";
const laminaMaterial = new LayerMaterial({
color: "#ffffff",
lighting: "standard",
layers: [
new Noise({
colorA: new THREE.Color("#ff0605"),
colorB: new THREE.Color("#ff0605"),
colorC: new THREE.Color("#e9d3d3"),
colorD: new THREE.Color("#e9e7e7"),
alpha: 1,
scale: 1,
type: "white",
offset: [0,0,0],
mapping: "local",
mode: "normal",
visible: true,
}),
new Gradient({
colorA: new THREE.Color("#00129e"),
colorB: new THREE.Color("#350061"),
alpha: 0.45,
contrast: 1,
start: 1,
end: "-1",
axes: "x",
mapping: "local",
visible: true,
}),
new Fresnel({
color: new THREE.Color("#faffff"),
alpha: 1,
power: 2,
intensity: 1,
bias: 0,
mode: "softlight",
visible: true,
}),
]
});
*/
Loading

1 comment on commit ef0d31f

@vercel
Copy link

@vercel vercel bot commented on ef0d31f Jul 1, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

photon – ./

photon-one.vercel.app
photon-git-main-alexwarnes.vercel.app
photon-alexwarnes.vercel.app

Please sign in to comment.