Create circle with fuzzy edge made of individual random particles

Questions
2

I took the example @looeee How move all points to sphere - #2 by looeee ( see also discourse.threejs.hofk.de ) and changed it a bit. It’s not quite what you want yet. You still have to add a random distribution function for the distance from the center of the circle.

2021-09-22 17.52.19
2021-09-22 17.52.19924×644 21.7 KB 


<!DOCTYPE html>
<!-- https://discourse.threejs.org/t/how-move-all-points-to-sphere/1836/2 -->
<!-- https://codepen.io/looeee/pen/LQLQRd -->
<head>
  <title> Points to Sphere </title>
  <meta charset="utf-8" />
  <style>
	body {
	margin: 0;
	overflow: hidden;
	}
  </style>
</head>

<body> </body>
<script src="../js/three.min.89.js"></script>
<script src="../js/OrbitControls.js"></script>

<script>

// @author  looeee  --- changed by hofk

let camera, renderer, scene;

function init() {

  renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  
  renderer.setPixelRatio( window.devicePixelRatio );

  document.body.appendChild( renderer.domElement );

  scene = new THREE.Scene();


  camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
  camera.position.set( 100, 0, 100 );
  
  const controls = new THREE.OrbitControls( camera );
  
}

const v = new THREE.Vector3();

function randomPointInSphere( radius ) {

  const x = THREE.Math.randFloat( -1, 1 );
  const y = THREE.Math.randFloat( -1, 1 );
  //const z = THREE.Math.randFloat( -1, 1 );
  const normalizationFactor = 1 / Math.sqrt( x * x + y * y );

  v.x = x * normalizationFactor * THREE.Math.randFloat( 0.5 * radius, 1.2 * radius );
  v.y = y * normalizationFactor *  THREE.Math.randFloat( 0.5 * radius, 1.2 * radius );
  v.z = 0; // z * normalizationFactor * radius;

  return v;
}

function initPoints() {
  
  const geometry = new THREE.BufferGeometry();
  
  var positions = [];
  
  for (var i = 0; i < 50000; i ++ ) {
    
    var vertex = randomPointInSphere( 50 );
    positions.push( vertex.x, vertex.y, 0 );
    
  }
  
  geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );

  material = new THREE.PointsMaterial( { color: 0xff00ff, size: 0.1 } );
  particles = new THREE.Points(geometry, material);
  scene.add( particles );


}

function animate() {
  
  requestAnimationFrame( animate );
  
  renderer.render( scene, camera );

}

function onWindowResize() {
  
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize( window.innerWidth, window.innerHeight );
  
}

window.addEventListener( 'resize', onWindowResize );

init();
initPoints();

animate();
</script>
</html>
3 Likes