# Create circle with fuzzy edge made of individual random particles

**URL:** <https://discourse.threejs.org/t/create-circle-with-fuzzy-edge-made-of-individual-random-particles/30150>\
**Category:** Questions\
**Tags:** shaders\
**Created:** [September 22, 2021, 1:53pm UTC](https://discourse.threejs.org/t/create-circle-with-fuzzy-edge-made-of-individual-random-particles/30150 "2021-09-22T13:53:21Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [September 22, 2021, 3:55pm UTC](https://discourse.threejs.org/t/create-circle-with-fuzzy-edge-made-of-individual-random-particles/30150/2 "2021-09-22T15:55:55Z")

</div>

I took the example @looeee[How move all points to sphere - #2 by looeee](https://discourse.threejs.org/t/how-move-all-points-to-sphere/1836/2) ( see also [discourse.threejs.hofk.de](https://hofk.de/main/discourse.threejs/2018/index2018.html) ) 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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/e/fe7bf7b365d4feee41a2e13648939b73bd7783d7.png)

```javascript

<!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>

```

---

_[View the full topic](https://discourse.threejs.org/t/create-circle-with-fuzzy-edge-made-of-individual-random-particles/30150)._
