Merge branch 'develop'

src/app/cubic/1/page.tsx

@@ -11,6 +11,7 @@ export default class Cubic1 extends React.Component<any, ExperimentControlItems>
     shapes: Shape[] = [];
 
     state = {
+        // TODO: Add layers
         delay: { min: 0, max: 2, value: 1 },
         speed: { min: 1, max: 10, step: 1, value: 1 },
     };

src/app/cubic/2/page.tsx

@@ -10,6 +10,7 @@ export default class Cubic2 extends React.Component<any, ExperimentControlItems>
     shapes: Shape[] = [];
 
     state = {
+        // TODO: Add layers
         delay: { min: 0, max: 2, value: 1 },
         speed: { min: 1, max: 10, step: 1, value: 1 },
     };

src/app/cubic/3/page.tsx

@@ -13,6 +13,7 @@ export default class Cubic3 extends React.Component<any, ExperimentControlItems>
     particles: Particle[] = [];
 
     state = {
+        // TODO: Add layers
         delay: { min: 0, max: 2, value: 1 },
         speed: { min: 1, max: 10, step: 1, value: 1 },
     };

src/app/page.tsx

@@ -1,20 +1,30 @@
 'use client';
 import { experiments } from '@/setup';
-import { Card, CardActionArea, CardHeader, CardMedia, Grid } from '@mui/material';
+import { Box, Card, CardActionArea, CardContent, CardHeader, CardMedia, Grid, Typography } from '@mui/material';
 
 export default function Home() {
 
-    return <Grid container overflow="auto" padding={3} spacing={3}>
-        {experiments.map((experiment, index) => !experiment.disabled && (
-            <Grid item key={index} xs={12} md={6} lg={4} xl={3}>
-                <CardActionArea href={experiment.path}>
-                    <Card>
-                        <CardMedia image={experiment.image} sx={{ paddingTop: '100%' }} />
-                        <CardHeader subheader={experiment.index} title={experiment.title} />
-                    </Card>
-                </CardActionArea>
-            </Grid>
-        ))}
-    </Grid>;
+    return <Box overflow="auto" padding={3}>
+        <Card>
+            <CardHeader title="Experimental" />
+            <CardContent>
+                <Typography>
+                    Just some experimental digital artwork
+                </Typography>
+            </CardContent>
+        </Card>
+        <Grid container marginTop={0} overflow="auto" spacing={3}>
+            {experiments.map((experiment, index) => !experiment.disabled && (
+                <Grid item key={index} xs={12} md={6} lg={4} xl={3}>
+                    <CardActionArea href={experiment.path}>
+                        <Card>
+                            <CardMedia image={experiment.image} sx={{ paddingTop: '100%' }} />
+                            <CardHeader subheader={experiment.index} title={experiment.title} />
+                        </Card>
+                    </CardActionArea>
+                </Grid>
+            ))}
+        </Grid>
+    </Box>;
 
 }

src/app/sphere/1/page.tsx

@@ -0,0 +1,105 @@
+'use client';
+import { ExperimentControls, ThreePlayer } from '@/components';
+import { PI, PI_D2, PI_M2 } from '@/setup';
+import React from 'react';
+import * as THREE from 'three';
+
+export default class Sphere1 extends React.Component<any, ExperimentControlItems> {
+
+    color = 0xFFFFFF;
+    container = new THREE.Group();
+    depth = 400;
+    particles: THREE.Object3D[] = [];
+    particleSize = 100;
+
+    mesh: THREE.Mesh;
+
+    state = {
+        particles: { min: 10, max: 1000, step: 1, value: 200 },
+        radius: { min: 10, max: 1000, step: 1, value: 200 },
+        size: { min: 1, max: 100, step: 1, value: 20 },
+        speed: { min: 1, max: 10, step: 1, value: 1 },
+    };
+
+    handleInit = (scene: THREE.Scene, camera: THREE.PerspectiveCamera) => {
+        camera.far = 10000;
+        camera.position.z = this.depth;
+        scene.add(this.container);
+
+        // Add lights
+        const ambient = new THREE.AmbientLight(this.color, 0.1);
+        scene.add(ambient);
+
+        const light = new THREE.PointLight(this.color, this.depth ** 2);
+        scene.add(light);
+
+        // Get particle mesh
+        const geometry = new THREE.BoxGeometry(this.particleSize, this.particleSize, Math.ceil(this.particleSize / 10));
+        const material = new THREE.MeshPhongMaterial({
+            side: THREE.DoubleSide,
+        });
+        this.mesh = new THREE.Mesh(geometry, material);
+
+        // Trigger state change
+        this.setState({});
+    }
+
+    componentDidUpdate() {
+        const { particles, radius, size } = this.state;
+
+        // Add missing particles
+        for (let i = this.particles.length; i < particles.value; i++) {
+            const particle = new THREE.Object3D();
+            this.particles.push(particle);
+
+            particle.userData.plane = this.mesh.clone();
+            particle.add(particle.userData.plane);
+        }
+
+        // Remove particles from container
+        this.container.children.forEach(particle => particle.removeFromParent());
+
+        // Add particles
+        const f = 2 / particles.value;
+        for (let i = 0; i < particles.value; i++) {
+            const particle = this.particles[i];
+            this.container.add(particle);
+
+            const n = (i * f) - 1 + (f / 2);
+            const r = Math.sqrt(1 - (n * n)) * radius.value;
+            const alpha = (i % particles.value) * PI * (3 - Math.sqrt(5));
+
+            particle.position.x = Math.cos(alpha) * r;
+            particle.position.y = -n * radius.value;
+            particle.position.z = Math.sin(alpha) * r;
+            particle.scale.setScalar(size.value / this.particleSize);
+            particle.lookAt(0, 0, 0);
+        }
+    }
+
+    handleTick = (progress: number) => {
+        const { speed } = this.state;
+        const tick = (progress * speed.value) % 1;
+
+        this.container.rotation.y = PI_M2 * tick;
+
+        for (const face of this.container.children) {
+            face.userData.plane.rotation.x = PI_D2 * (Math.sin(PI_M2 * tick * 2) + 1);
+            face.userData.plane.rotation.z = PI * tick;
+        }
+    }
+
+    render() {
+        return <>
+            <ExperimentControls
+                items={this.state}
+                onChange={items => this.setState(items)}
+            />
+            <ThreePlayer
+                onInit={this.handleInit}
+                onTick={this.handleTick}
+            />
+        </>;
+    }
+
+}