cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <script type="x-shader/vertex-shader" id="starVert">

uniform float u_time;

//
// Description : Array and textureless GLSL 2D/3D/4D simplex 
//               noise functions.
//      Author : Ian McEwan, Ashima Arts.
//  Maintainer : stegu
//     Lastmod : 20110822 (ijm)
//     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
//               Distributed under the MIT License. See LICENSE file.
//               https://github.com/ashima/webgl-noise
//               https://github.com/stegu/webgl-noise
// 

vec3 mod289(vec3 x) {
  return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec4 mod289(vec4 x) {
  return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec4 permute(vec4 x) {
     return mod289(((x*34.0)+1.0)*x);
}

vec4 taylorInvSqrt(vec4 r)
{
  return 1.79284291400159 - 0.85373472095314 * r;
}

float snoise(vec3 v)
  { 
  const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
  const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);

// First corner
  vec3 i  = floor(v + dot(v, C.yyy) );
  vec3 x0 =   v - i + dot(i, C.xxx) ;

// Other corners
  vec3 g = step(x0.yzx, x0.xyz);
  vec3 l = 1.0 - g;
  vec3 i1 = min( g.xyz, l.zxy );
  vec3 i2 = max( g.xyz, l.zxy );

  //   x0 = x0 - 0.0 + 0.0 * C.xxx;
  //   x1 = x0 - i1  + 1.0 * C.xxx;
  //   x2 = x0 - i2  + 2.0 * C.xxx;
  //   x3 = x0 - 1.0 + 3.0 * C.xxx;
  vec3 x1 = x0 - i1 + C.xxx;
  vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
  vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y

// Permutations
  i = mod289(i); 
  vec4 p = permute( permute( permute( 
             i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
           + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) 
           + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));

// Gradients: 7x7 points over a square, mapped onto an octahedron.
// The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
  float n_ = 0.142857142857; // 1.0/7.0
  vec3  ns = n_ * D.wyz - D.xzx;

  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)

  vec4 x_ = floor(j * ns.z);
  vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)

  vec4 x = x_ *ns.x + ns.yyyy;
  vec4 y = y_ *ns.x + ns.yyyy;
  vec4 h = 1.0 - abs(x) - abs(y);

  vec4 b0 = vec4( x.xy, y.xy );
  vec4 b1 = vec4( x.zw, y.zw );

  //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
  //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
  vec4 s0 = floor(b0)*2.0 + 1.0;
  vec4 s1 = floor(b1)*2.0 + 1.0;
  vec4 sh = -step(h, vec4(0.0));

  vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
  vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;

  vec3 p0 = vec3(a0.xy,h.x);
  vec3 p1 = vec3(a0.zw,h.y);
  vec3 p2 = vec3(a1.xy,h.z);
  vec3 p3 = vec3(a1.zw,h.w);

//Normalise gradients
  vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
  p0 *= norm.x;
  p1 *= norm.y;
  p2 *= norm.z;
  p3 *= norm.w;

// Mix final noise value
  vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
  m = m * m;
  return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), 
                                dot(p2,x2), dot(p3,x3) ) );
  }

  vec3 snoiseVec3( vec3 x ){

  float s  = snoise(vec3( x ));
  float s1 = snoise(vec3( x.y - 19.1 , x.z + 33.4 , x.x + 47.2 ));
  float s2 = snoise(vec3( x.z + 74.2 , x.x - 124.5 , x.y + 99.4 ));
  vec3 c = vec3( s , s1 , s2 );
  return c;

}


vec3 curlNoise( vec3 p ){
  
  const float e = .1;
  vec3 dx = vec3( e   , 0.0 , 0.0 );
  vec3 dy = vec3( 0.0 , e   , 0.0 );
  vec3 dz = vec3( 0.0 , 0.0 , e   );

  vec3 p_x0 = snoiseVec3( p - dx );
  vec3 p_x1 = snoiseVec3( p + dx );
  vec3 p_y0 = snoiseVec3( p - dy );
  vec3 p_y1 = snoiseVec3( p + dy );
  vec3 p_z0 = snoiseVec3( p - dz );
  vec3 p_z1 = snoiseVec3( p + dz );

  float x = p_y1.z - p_y0.z - p_z1.y + p_z0.y;
  float y = p_z1.x - p_z0.x - p_x1.z + p_x0.z;
  float z = p_x1.y - p_x0.y - p_y1.x + p_y0.x;

  const float divisor = 1.0 / ( 2.0 * e );
  return normalize( vec3( x , y , z ) * divisor );

}

varying vec3 newPosition;

void main() {
  gl_PointSize = 1.;
	newPosition = position * (40. + curlNoise(position+u_time/5.)* 10.);

  	gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
}
</script>

<script type="x-shader/fragment-shader" id="starFrag">
varying vec3 newPosition;

void main() {
  gl_FragColor = vec4(0.,0,0.,1);
}
</script>

            
          
!
            
              body, html {
  margin:0;
  overflow:hidden;
}
canvas {
  margin:0;
  width:100%;
  height:100%;
background: #d8d8d8;  /* fallback for old  
}
            
          
!
            
              class Galaxy {
  constructor(){
    this.ww = window.innerWidth
    this.wh = window.innerHeight
    
    this.time = 0;
    this.scene = new THREE.Scene()
    this.camera = new THREE.PerspectiveCamera(75,this.ww/this.wh,0.1,1000)
    this.camera.position.z = 100;
    
    this.controls = new THREE.OrbitControls(this.camera);
    this.renderer = new THREE.WebGLRenderer({antialias:true, alpha:true})
    this.renderer.setSize (this.ww, this.wh)
    
    window.addEventListener('resize', this.resize.bind(this))
    document.body.appendChild(this.renderer.domElement)
    
    this.stars()
    this.planet()
    this.animate()
  }
  
  resize() {
    this.ww = window.innerWidth
    this.wh = window.innerHeight
    console.log(this.wh)
    this.camera.aspect =this.ww / this.wh;
  this.camera.updateProjectionMatrix();
    this.renderer.setSize(this.ww, this.wh)
  }
  
  stars() {
    let starVert = document.getElementById('starVert').textContent
    let starFrag = document.getElementById('starFrag').textContent
    
    console.log( starFrag)
    
    let starsGeometry = new THREE.Geometry()
    
    for ( var i = 0; i < 100000; i ++ )   {

       var star = new THREE.Vector3();
       this.alpha = Math.random()*(Math.PI*2)
       this.theta = Math.random()*(Math.PI)
    
       star.x = Math.cos(this.alpha)*Math.sin(this.theta)
       star.y = Math.sin(this.alpha)*Math.sin(this.theta)
       star.z = Math.cos(this.theta)

       starsGeometry.vertices.push( star );

     }
        
    var uniforms = {
      u_time: { type: "f", value: 1.0 },
    }

    this.starsMaterial = new THREE.ShaderMaterial( { 
      uniforms : uniforms,
      vertexShader: starVert,
      fragmentShader: starFrag
    } );

    this.starField = new THREE.Points( starsGeometry, this.starsMaterial );
    this.scene.add( this.starField );
  }
  
  planet() {
    this.planGeo = new THREE.SphereGeometry(20,32,32);
    this.planMat = new THREE.MeshBasicMaterial({color:0x000, flatShading:true})
    
    this.planet = new THREE.Mesh(this.planGeo, this.planMat)
    this.scene.add(this.planet)
  }
  
  animate(){
    requestAnimationFrame(this.animate.bind(this))
    
    this.time += 0.01;
    
    this.starsMaterial.uniforms.u_time.value = this.time;
     this.renderer.render(this.scene,this.camera)
  }
}

let galaxy = new Galaxy()
            
          
!
999px
Loading ..................

Console