pschroen / Alien.js
Programming Languages
Projects that are alternatives of or similar to Alien.js
Alien.js
Future web pattern
Alien.js is a design pattern and project structure for building SPA websites with ES modules and GSAP.
The idea is to keep it simple, with minimal abstraction, and to build websites more like a framework, which is why Rollup is used instead for bundling.
In its design, everything is an ES module, all user interfaces and components follow the same class structure, making it easy to copy-paste from examples and between projects.
Note this design pattern intentionally does not use underscores or private fields, in favour of cleaner code.
Examples
ui
logo
logo (interface)
tilt
ufo
3d
ripple
physics
audio
audio (fast)
spherical cube
penrose triangle
polyhedron (orbit camera, debug)
camera wobble
camera shake
shader
noise
fxaa
blur (Gaussian blur)
blur (Poisson disc blur)
blur (Bokeh blur)
bloom
bloom (Unreal bloom)
bloom (Unreal bloom with dither)
matcap
pbr
soft particles
dof (fake with Bokeh blur, debug)
chromatic aberration
film grain
reflection (with fast Gaussian blur)
flowmap
flowmap (RGB shift)
flowmap (view)
depth (fragment depth with dither)
hologram
text (MSDF text)
alienkitty (flowmap with RGB shift, MSDF text)
thread
canvas (noise)
physics
audio
audio (fast)
polyhedron (OBJ loader thread)
camera shake
pbr (texture loader thread)
Class structure
import gsap from 'gsap';
export class Logo {
constructor() {
this.element;
this.image;
this.initHTML();
this.addListeners();
this.onResize();
}
initHTML() {
this.element = document.createElement('div');
this.element.classList.add('logo');
gsap.set(this.element, {
top: 50,
left: 50,
width: 64,
height: 64,
cursor: 'pointer',
opacity: 0
});
this.image = document.createElement('img');
this.image.src = 'assets/images/alienkitty.svg';
gsap.set(this.image, {
position: 'relative',
width: '100%'
});
this.element.appendChild(this.image);
}
addListeners() {
window.addEventListener('resize', this.onResize);
window.addEventListener('orientationchange', this.onResize);
this.element.addEventListener('mouseenter', this.onHover);
this.element.addEventListener('mouseleave', this.onHover);
this.element.addEventListener('click', this.onClick);
}
removeListeners() {
window.removeEventListener('resize', this.onResize);
window.removeEventListener('orientationchange', this.onResize);
this.element.removeEventListener('mouseenter', this.onHover);
this.element.removeEventListener('mouseleave', this.onHover);
this.element.removeEventListener('click', this.onClick);
}
/**
* Event handlers
*/
onResize = () => {
if (window.innerWidth < window.innerHeight) {
gsap.set(this.element, {
top: 30,
left: 30,
width: 40,
height: 40
});
} else {
gsap.set(this.element, {
top: 50,
left: 50,
width: 64,
height: 64
});
}
};
onHover = ({ type }) => {
if (type === 'mouseenter') {
gsap.to(this.element, { opacity: 0.6, duration: 0.3, ease: 'power2.out' });
} else {
gsap.to(this.element, { opacity: 1, duration: 0.3, ease: 'power2.out' });
}
};
onClick = () => {
open('https://alien.js.org/');
};
/**
* Public methods
*/
animateIn = () => {
gsap.to(this.element, { opacity: 1, duration: 0.6, ease: 'sine.inOut' });
};
destroy = () => {
this.element.parentNode.removeChild(this.element);
this.removeListeners();
this.element = null;
this.image = null;
return null;
};
}
Class hierarchy
Preloader
\
'--- PreloaderView
\
'- App
\
'----- World ---.
\ \
'--- Views -----.
\ \
'- Controllers -.
Project structure
public
│
├── assets
│ │
│ ├── css
│ │ │
│ │ └── style.css
│ │
│ ├── data
│ │ │
│ │ └── data.json
│ │
│ ├── images
│ │
│ ├── js
│ │ │
│ │ ├── loader.js
│ │ └── main.js
│ │
│ ├── meta
│ │ │
│ │ └── share.png
│ │
│ └── textures
│
├── favicon.ico
└── index.html
src
│
├── config
│ │
│ ├── Config.js
│ ├── Device.js
│ ├── Events.js
│ └── Global.js
│
├── controllers
│ │
│ ├── audio
│ │ │
│ │ └── AudioController.js
│ │
│ ├── world
│ │ │
│ │ ├── CameraController.js
│ │ ├── InputManager.js
│ │ ├── RenderManager.js
│ │ ├── SceneController.js
│ │ └── WorldController.js
│ │
│ ├── App.js
│ ├── Preloader.js
│ └── Stage.js
│
├── data
│ │
│ ├── Data.js
│ ├── Geo.js
│ └── Socket.js
│
├── lib
│ │
│ └── CustomEase.js
│
├── partials
│ │
│ ├── icons
│ │ │
│ │ ├── arrow.svg.js
│ │ └── close.svg.js
│ │
│ └── Icons.js
│
├── loaders
│ │
│ ├── world
│ │ │
│ │ ├── EnvironmentTextureLoader.js
│ │ ├── OBJLoaderThread.js
│ │ ├── SphericalCubeTextureLoader.js
│ │ ├── SpherizeTextureLoader.js
│ │ ├── TextGeometryLoader.js
│ │ ├── TextGeometryLoaderThread.js
│ │ └── TextureLoader.js
│ │
│ ├── AssetLoader.js
│ ├── Assets.js
│ ├── FontLoader.js
│ ├── ImageBitmapLoader.js
│ ├── ImageBitmapLoaderThread.js
│ ├── Loader.js
│ └── MultiLoader.js
│
├── materials
│ │
│ ├── BasicMaterial.js
│ └── FXAAMaterial.js
│
├── shaders
│ │
│ ├── modules
│ │ │
│ │ └── noise
│ │ │
│ │ └── simplex2d.glsl.js
│ │
│ ├── BasicMaterial.frag.js
│ ├── BasicMaterial.vert.js
│ ├── FXAAPass.frag.js
│ └── FXAAPass.vert.js
│
├── utils
│ │
│ ├── audio
│ │ │
│ │ ├── Sound.js
│ │ ├── Sound3D.js
│ │ ├── WebAudio.js
│ │ ├── WebAudio3D.js
│ │ └── WebAudioParam.js
│ │
│ ├── world
│ │ │
│ │ ├── Flowmap.js
│ │ ├── Reflector.js
│ │ ├── SpherizeImage.js
│ │ ├── TextGeometry.js
│ │ ├── Utils3D.js
│ │ └── Wobble.js
│ │
│ ├── Cluster.js
│ ├── Component.js
│ ├── EventEmitter.js
│ ├── Interface.js
│ ├── LinkedList.js
│ ├── ObjectPool.js
│ ├── Thread.js
│ ├── Tween.js
│ └── Utils.js
│
├── views
│ │
│ ├── LandingView.js
│ ├── PreloaderView.js
│ └── SceneView.js
│
└── main.js
Code-splitting
public
│
└── assets
│
└── js
│
├── loader.js (~90kb with GSAP)
└── main.js (~700kb with three.js)
Multithreading
App (main thread)
│
└── Thread (instance thread)
│
├── shared (navigator.hardwareConcurrency)
│
└── events
│
├── on
├── off
└── send
Getting started
Clone this repository template and install its dependencies:
git clone https://github.com/pschroen/alien.js
cd alien.js
npm i
# or
npx degit pschroen/alien.js my-app
cd my-app
npm i
# Serve at localhost:8080
npm run dev
# Build for production
npm run build
With three.js
Uncomment all the lines in App.js
and install three
:
npm i && npm i three
npm run dev
With examples
npm i && npm i three
cd examples
npm i
npm run build
npm start
Resources
See also
- OGL
- Three.js
- Post Processing
- Oimo.js
- Bruno Simon's Folio 2019.
- Pierfrancesco Soffritti's Doodles.
- Jaume Sanchez Elias' Experiments with Perlin noise.
- Jaume Sanchez Elias' WebVR Physics.
- Jaume Sanchez Elias' Codevember 2017.
- Jaume Sanchez Elias' Codevember 2016.
- Jaume Sanchez Elias' Wagner.
- Evan Wallace's WebGL Filter.
- Felix Turner's Intro to Pixel Shaders in Three.js.
- Active Theory's Finding Love Shaders.
- Inspired by Active Theory's class structure and code style.