A Pen by Xanmia.

index.html

<canvas id="randomness" style="display:none;"></canvas>
<canvas id="bumprandomness" style="display:none;"></canvas>

Random-material-generator-with-bump-map.markdown

Random material generator with bump map

Generates a random material with a matching bump map. Refresh for new material

A Pen by Xanmia on CodePen.

License.

script.js

function getMaterial(mono){
var canvas = document.getElementById('randomness');
var context = canvas.getContext('2d');
  
var bumpcanvas = document.getElementById('bumprandomness');
var bumpcontext = bumpcanvas.getContext('2d'); 
var rez= 1500;
canvas.width = rez;
canvas.height = rez;
bumpcanvas.width = rez;
bumpcanvas.height = rez;
  
var h = canvas.height*2;
var w = canvas.width*2;
bumpcontext.fillStyle = "rgba(255,255,255,1)";
bumpcontext.fillRect(0,0,w,h);
var passes = 1500;
while(passes--)
{
   var opacity = Math.random()*1 ;
   var bumpColor = Math.round(Math.random() * 1);
   bumpcontext.fillStyle = "rgba(" + 255*bumpColor + "," + 255*bumpColor + ", " + 255*bumpColor + "," + opacity + ")";
   bumpcontext.strokeStyle = bumpcontext.fillStyle;
  
   if(mono)
    {
      var test = Math.round(Math.random() * 255);
      context.fillStyle = "rgba(" + test + "," + test + ", " + test + "," + 1 + ")";
    }
    else{
      context.fillStyle = "rgba("+Math.floor(Math.random()*255)+"," + Math.floor(Math.random()*255) + ", " + Math.floor(Math.random()*255) + "," + opacity + ")";
    }
    context.strokeStyle = context.fillStyle;
    var size = Math.random()*50;
    var x = (Math.random()*w)-w/2, y=(Math.random()*h)-h/2;
    var tox = Math.random()*w, toy=Math.random()*h;
  
    var moreRandomness = Math.round(Math.random()*2);
  
    if(moreRandomness==0){
      context.fillRect(x,y,size*2,size*2);
      bumpcontext.fillRect(x,y,size*2,size*2);
    }
    else if (moreRandomness==1){
      context.beginPath();
      context.arc(x,y,size*2,0,Math.PI*2, true);
      context.fill();
      bumpcontext.beginPath();
      bumpcontext.arc(x,y,size*2,0,Math.PI*2, true);
      bumpcontext.fill();
    }
    else{
     context.lineWidth = size;
      context.beginPath();
      context.moveTo(x,y);
      context.lineTo(tox,toy);
      context.stroke();
      bumpcontext.lineWidth = size;
      bumpcontext.beginPath();
      bumpcontext.moveTo(x,y);
      bumpcontext.lineTo(tox,toy);
      bumpcontext.stroke();
    }
}
  return {material: canvas.toDataURL(),bump: bumpcanvas.toDataURL()};
}

var vertexHeight = 10;
var Definition = 30;
var Size = 1500;

var container = document.createElement('div');
document.body.appendChild( container );

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight,1, 10000)
camera.position.z = 6000; 

var scene = new THREE.Scene();

var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( -200, 2500, 13000 );

var createdMaterial = getMaterial(false);

var  texturef = THREE.ImageUtils.loadTexture(createdMaterial.material);
var  bumpf = THREE.ImageUtils.loadTexture(createdMaterial.bump);

   texturef.wrapT = texturef.wrapS = THREE.RepeatWrapping;
var vground_material = new THREE.MeshPhongMaterial({ map: texturef, bumpMap: bumpf, bumpScale:20, transparent:true });

var	plane = new THREE.Mesh( new THREE.SphereGeometry( Size, Definition, Definition ),vground_material );

scene.add( plane );
scene.add(spotLight);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild( renderer.domElement );

render();

			function render() {
        requestAnimationFrame( render );
        plane.rotation.y+=.001;
        renderer.render( scene, camera );
			}

style.css

body{
  background-color: #000000;
  margin: 0px;
  overflow: hidden;
}