Create circle with fuzzy edge made of individual random particles

Questions
6

Another strongly modified variant.

2021-09-22 21.19.05
2021-09-22 21.19.05924×881 28.2 KB 


<!DOCTYPE html>
<!-- https://discourse.threejs.org/t/create-circle-with-fuzzy-edge-made-of-individual-random-particles/30150/5 -->

<!-- see also 
	https://discourse.threejs.org/t/how-move-all-points-to-sphere/1836/2 
	and 
	https://codepen.io/looeee/pen/LQLQRd
-->

<head>
  <title> PointsToCircleRandom </title>
  <meta charset="utf-8" />
  <style>
	body {
	margin: 0;
	overflow: hidden;
	}
  </style>
</head>

<body> </body>
<script type="module">

// @author  looeee - strongly changed by hofk

import * as THREE from "../jsm/three.module.132.js";
import { OrbitControls } from "../jsm/OrbitControls.132.js";

let camera, renderer, scene;

const v = new THREE.Vector2();
let r;

window.addEventListener( 'resize', onWindowResize );
init();
randomPoints();
animate();

function onWindowResize() {
  
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize( window.innerWidth, window.innerHeight );
  
}

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, 0.1, 1000 );
  camera.position.set( 1, -1, 3 );
  
  const controls = new OrbitControls( camera, renderer.domElement );
  
}

function randomPoints() {
  
  const geometry = new THREE.BufferGeometry();
  
  var positions = [];
  
  for ( let i = 0; i < 50000; i ++ ) {

    const phi = Math.random( ) * Math.PI * 2;
	
 	r =  Math.pow( Math.random( ), 1 / 6 ) + 0.2;
	
    v.x = r * Math.cos( phi );
    v.y = r * Math.sin( phi );
	
    positions.push( v.x, v.y, 0 );
    
  }
  
  geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );

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

}

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

}

</script>
</html>

UPDATE: :mouse2: There you can experiment nicely. :slightly_smiling_face:

:woman_student: Of course, you can also derive the required functions theoretically. :man_student:

2021-09-23 09.15.55
2021-09-23 09.15.55742×585 3.82 KB

Try it out.
In the Collection of examples from discourse.threejs.org

2021 >>> PointsToCircleRandom


function randomPoints() {
  
  const geometry = new THREE.BufferGeometry();
  
  var positions = [];
  
  for ( let i = 0; i < 3000; i ++ ) {

    const phi = Math.random( ) * Math.PI * 2;	
	const rnd = Math.random( )
	
 	r = 0.2 + ( rnd < 0.6 ? Math.pow( Math.random( ), 1 / 6 ) :  Math.pow( ( 3 +  5 * Math.random( ) ) * Math.random( ), 1 / 6 ) );
	
    v.x = r * Math.cos( phi );
    v.y = r * Math.sin( phi );
	
    positions.push( v.x, v.y, 0 );
    
  }
3 Likes