Particle animation

by Scott Kaye

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/MaskPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/ShaderPass.js"></script>
<script src="https://threejs.org/examples/js/shaders/CopyShader.js"></script>
<script src="https://threejs.org/examples/js/shaders/FXAAShader.js"></script>
<script src="https://threejs.org/examples/js/shaders/ConvolutionShader.js"></script>
<script src="https://threejs.org/examples/js/shaders/LuminosityHighPassShader.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/UnrealBloomPass.js"></script>

CSS

body {
    margin: 0;
    overflow: hidden;
    background: linear-gradient(#f00, #00f);
}

canvas {
    background: #000;
    mix-blend-mode: screen;
}

JavaScript

const numPoints = 200;
const maxDistance = 100;
const primaryColor = 0x4488ff;
const speed = 0.25;
const starRadius = 4;

var params = {
    bloomStrength: 1,
    bloomThreshold: 0.1,
    bloomRadius: 1.1
};


const scene = new THREE.Scene();
let width = window.innerWidth;
let height = window.innerHeight;
const camera = new THREE.OrthographicCamera(width / -2, width / 2, height / 2, height / -2, -10, 1000);

var renderer = new THREE.WebGLRenderer({
    alpha: true,
    antialias: true
});
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

let points = [];
let lineGeometry = new THREE.BufferGeometry();
let lineMaterial = new THREE.LineBasicMaterial({
    vertexColors: THREE.VertexColors,
    color: primaryColor,
    blending: THREE.AdditiveBlending,
    transparent: true
});

let theLine = new THREE.LineSegments(lineGeometry, lineMaterial);
scene.add(theLine);

for (let i = 0; i < numPoints; ++i) {
    var geometry = new THREE.SphereGeometry(starRadius, 8, 8);
    var material = new THREE.PointsMaterial({
        color: 0xffffff
    });

    var cube = new THREE.Mesh(geometry, material);
    cube.position.x = Math.random() * width - width / 2;
    cube.position.y = Math.random() * height - height / 2;

    scene.add(cube);

    let point = {
        mesh: cube,
        vx: (Math.random() - 0.5) * speed,
        vy: (Math.random() - 0.5) * speed
    };

    points.push(point);
}

let vertices = new Float32Array(numPoints * numPoints * 3);
let colors = new Float32Array(numPoints * numPoints * 3);

lineGeometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3).setDynamic(true));
lineGeometry.setAttribute("color", new THREE.BufferAttribute(colors, 3).setDynamic(true));

const renderScene = new THREE.RenderPass(scene, camera);
const bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(width, height), 1.5, 0.4, 0.85);
bloomPass.threshold = params.bloomThreshold;
bloomPass.strength = params.bloomStrength;
bloomPass.radius =...