JSFiddle - React, Tailwind, and code Playground

by bemuse

HTML

<canvas id="canvas"></canvas>

CSS

body{
  background: black;
  overflow: hidden;
}
canvas{
  position: absolute;
  top: 0;
  left: 0;
}

JavaScript

import * as THREE from 'https://cdn.skypack.dev/[email protected]'
import {GPUComputationRenderer} from 'https://cdn.skypack.dev/[email protected]/examples/jsm/misc/GPUComputationRenderer.js'

const radian = Math.PI / 180
const width = window.innerWidth, height = window.innerHeight
const canvas = document.querySelector('#canvas')
const param = {
	count: 30,
  color: 'white',
  velocity: 0.2,
  size: 2,
  radius: 400
}

let renderer, scene, camera, gpuCompute, particle
let positionVariable, velocityVariable



/* texture */
const getSpherePosition = () => {
	return `
    vec3 getSpherePosition(float p, float t, float radius){
      float phi = p * ${radian};
      float theta = t * ${radian};
      float x = radius * sin(phi) * cos(theta);
      float y = radius * cos(phi);
      float z = radius * sin(phi) * sin(theta);
      return vec3(x, y, z);
  	}
	`
}
const fillVelocityTexture = (texture, vel) => {
	const {data, width, height} = texture.image
        
  for(let j = 0; j < width; j++){
    for(let i = 0; i < height; i++){
      const index = (i * width + j) * 4

      const pi = Math.random() * 180
      const theta = Math.random() * 360
      const phiVel = Math.random() > 0.5 ? Math.random() * (-vel / 2) - (vel / 2) : Math.random() * (vel / 2) + (vel / 2)
      const thetaVel = Math.random() > 0.5 ? Math.random() * (-vel / 2) - (vel / 2) : Math.random() * (vel / 2) + (vel / 2)

      // phi
      data[index] = pi
      // theta 
      data[index + 1] = theta
      // phi velocity
      data[index + 2] = phiVel
      // theta velocity
      data[index + 3] = thetaVel
    }
  }	
}
const fillPositionTexture = (texture) => {
	const {data, width, height} = texture.image

  for(let j = 0; j < width; j++){
    for(let i = 0; i < height; i++){
      const index = (i * width + j) * 4

      // x position
      data[index] = 0
      // y position
      data[index + 1] = 0
      // z position
      data[index + 2] = 0
      data[index + 3] = 0
    }
  }
}
const createTexture...