Planets

planets.markdown

Planets

A Pen by Manasseh Pierce on CodePen.

License.

script.js

let sumOctave = function(num_iterations, x, y, persistence, scale, low, high) {
	let simplex = new SimplexNoise(Math.random)
	let maxAmp = 0,
		 amp = 1,
		 freq = scale,
		 noise = 0
	
	for( let i = 0; i < num_iterations;  i++ ) {
		noise += simplex.noise2D( x * freq, y * freq ) * amp
		maxAmp += amp
		amp = amp * persistence
		freq = freq * 2
	}
	
	noise = noise / maxAmp
	
	noise = noise * ( high - low ) / 2 + ( high + low ) / 2
	
	return noise
}

class Planet {
	constructor( radius = 1, segments = 10, color ) {
		this.geometry = new THREE.BoxGeometry( 1, 1, 1, segments, segments, segments )
		this.material = new THREE.MeshLambertMaterial({ color: color })
		
		this.geometry.vertices.forEach( vertex => {
			vertex.normalize().multiplyScalar( radius )
			let scale = 0.007
			
			vertex.add( new THREE.Vector3( 0, 0, sumOctave(16, vertex.x, vertex.y, 0.5, scale, 0, 2)))
		})
		//console.log(  )
		return new THREE.Mesh( this.geometry, this.material )
	}
}

var scene = new THREE.Scene()
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 )
camera.position.set( 5, 5, 5 )

var controls = new THREE.OrbitControls( camera )

var renderer = new THREE.WebGLRenderer()
renderer.setSize( window.innerWidth, window.innerHeight )
document.body.appendChild( renderer.domElement )

var ambient = new THREE.AmbientLight( 0x404040 )
scene.add( ambient )

var light = new THREE.PointLight( 0xffffff, 1, 100, 2 )
light.position.set( 15, 20, 10 )
scene.add( light )

let p = new Planet( 2, 10, 0x00ff00 )
scene.add( p )

var size = 10;
var divisions = 10;

var gridHelper = new THREE.GridHelper( size, divisions );
scene.add( gridHelper );

var axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

controls.update()

var animate = function () {
	requestAnimationFrame( animate )
	controls.update()
	renderer.render( scene, camera )
}

animate()

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/103/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/EaselJS/1.0.2/easeljs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tweenjs/1.0.2/tweenjs.min.js"></script>
<script src="https://gitcdn.xyz/repo/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js"></script>

style.stylus

html
	background #000
	overflow hidden

canvas
	width 100vw
	height 100vh