带几何特征的画布（canvas）

示例

CSS

@import "compass/css3";

body{
  background-color: #1f9ede;
  margin: 0; padding:0;
  width:100%; height:100%;
}
*{
  margin: 0; padding:0;
  width:100%; height:100%;
}

JS

var _scene, _camera, _light, _renderer, _windowHalfX, _windowHalfY;
var _mouseX = _mouseY = 0;
var _canvas;
var _textur;
var GRID_X = 32;
var GRID_Y = 32;


// init function
var createWorld = function(){
  //threejs - demo - https://threejs.org/examples/webgl_particles_random.html
  var ele = document.createElement('div');
  document.body.appendChild(ele);
  
  _windowHalfX = window.innerWidth / 2;
  _windowHalfY = window.innerHeight / 2;

  _camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000)
  _camera.position.z = 5250; // first view position, going zoom

  _scene = new THREE.Scene();
//  _scene.fog = new THREE.FogExp2(0x0f8ece, 0.0002);  //color of fog - objects are all color

  _light = new THREE.AmbientLight(0xcccccc);
  _scene.add(_light);

  _renderer = new THREE.WebGLRenderer();
  _renderer.setSize(window.innerWidth, window.innerHeight);
  ele.appendChild(_renderer.domElement);

  _renderer.render(_scene, _camera);
}



// add element
var addWorldSphere = function(r) {
  var geometry = new THREE.SphereGeometry(r, 50, 50);
  var material = new THREE.MeshBasicMaterial({color: 0x0f8ece, wireframe: true, fog:false});
  var sphere = new THREE.Mesh(geometry, material);
  _scene.add(sphere);
};

var addOctahedronGeometry = function(pre_sizeAr){
  for(var i = 0; i < pre_sizeAr.length; i++){
    var cutNum =Math.floor(Math.random() * 3);
    var octa = new THREE.Mesh(
      new THREE.OctahedronGeometry( pre_sizeAr[i]*25,cutNum),
      new THREE.MeshBasicMaterial  ( {
        color: 0xe44a81, ambient: 0xffffff,
        specular: 0xcccccc, shininess:1000,
        transparent :true, opacity :0.999
      })
    );
    octa.position.x = getRandOffsetNum();
    octa.position.y = getRandOffsetNum();
    octa.position.z = getRandOffsetNum();
    _scene.add( octa );

    var octaWire = new THREE.Mesh(
      new THREE.OctahedronGeometry( pre_sizeAr[i]*25,cutNum),
      new THREE.MeshBasicMaterial( { color: 0xffffff ,wireframe: true} )
    );
    octaWire.position = octa.position;
    _scene.add( octaWire );
  }
}

// パラメトリック関数の定義
var addParametric = function(){
  var width = _windowHalfX * 2; //1024
  var height = _windowHalfY * 2;//768
  var paramFunc = function(u, v){
    // uとvは0～1までの値をもらえる
    u *= 1;
    v *= 1;
    var x = u * width;
    var y = v * height;
    var z = (Math.sin(u* Math.PI) + Math.sin(v* Math.PI)) * (-60);
    return new THREE.Vector3(x,y,z);
  };
  // texture
  _canvas = document.createElement('canvas');
  drawCanvas();
  _textur = new THREE.Texture(_canvas);
  _textur.needsUpdate = true;
  
  // paramFuncに従って、uは8段階、vは32段階でパラメトリック曲面を作成
  var geometry = new THREE.ParametricGeometry(paramFunc, GRID_X, GRID_Y);
  var param = new THREE.Mesh(
    geometry,
    new THREE.MeshLambertMaterial( { color: 0x00ff00, map:_textur, transparent: true, opacity: 1 } )
  );
  var paramMesh = new THREE.Mesh(geometry,
    new THREE.MeshBasicMaterial( { color: 0x2faeee, wireframe: true, fog:false, transparent: true, opacity: 0.2} )
  );
  param.position.set(-width/2,-height/2,0);
  paramMesh.position.set(-width/2,-height/2,0);
  _scene.add( param );
  _scene.add( paramMesh );
}


var j = 0;
var drawCanvas = function(){
  j++;
  var width = _windowHalfX * 2; //1024
  var height = _windowHalfY * 2;//768
  var ctx = _canvas.getContext('2d');
  ctx.clearRect(0, 0, _canvas.width, _canvas.height);
  _canvas.width = width;
  _canvas.height = height;
  ctx.globalAlpha = 0.5;
  ctx.fillStyle = '#000000';
  var loopFPS = 100;
  if(loopFPS < j){j=0};
  ctx.fillRect(_canvas.width/loopFPS * j,
               _canvas.height*0.45,
               _canvas.width*0.5,
               _canvas.height*0.1);
  ctx.fillRect(_canvas.width/loopFPS * j - _canvas.width,
               _canvas.height*0.45,
               _canvas.width*0.5,
               _canvas.height*0.1);

  ctx.fillStyle = '#FFFFFF';
  if(j %100 < 10){
    var fillRandomPixcel = function(){
      var rndX = Math.floor(Math.random() * GRID_X);
      var rndY = Math.floor(Math.random() * GRID_Y);
      ctx.fillRect(_canvas.width/GRID_X * rndX,
                   _canvas.height/GRID_Y * rndY,
                   _canvas.width/GRID_X,
                   _canvas.height/GRID_Y);
    }
    fillRandomPixcel();
    fillRandomPixcel();
    fillRandomPixcel();
    fillRandomPixcel();
    fillRandomPixcel();
    fillRandomPixcel();

  }
  ctx.lineWidth = 14;
  ctx.strokeStyle = '#000000';
  ctx.rect(0, 0, _canvas.width,_canvas.height);
  ctx.stroke();
    
  ctx.lineWidth = 0.6;
  ctx.strokeStyle = '#000000';
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(width, height);
  ctx.stroke();
  ctx.moveTo(width, 0);
  ctx.lineTo(0, height);
  ctx.stroke();
  
  ctx.fillStyle = '#000000';
  ctx.textAlign = "center";
  ctx.textBaseline = "top";
  ctx.font = "24px 'Futura'";
  ctx.fillText(yyyymmdd(), _canvas.width/2, _canvas.height*0.065, 500);
  ctx.font = "55px 'Futura'";
  ctx.fillText(hhmissms(), _canvas.width/2, _canvas.height*0.1, 500);
}


// event
window.addEventListener('resize', onWindowResize, false);
function onWindowResize(){
  _windowHalfX = window.innerWidth / 2;
  _windowHalfY = window.innerHeight / 2;
  _camera.aspect = window.innerWidth / window.innerHeight;
  _camera.updateProjectionMatrix();
  _renderer.setSize(window.innerWidth, window.innerHeight);
}

window.addEventListener('mousemove', onWindowMouseMove, false);
function onWindowMouseMove(event){
  _mouseX = event.clientX - _windowHalfX;
  _mouseY = event.clientY - _windowHalfY;
}



// other
// 1桁の数字を0埋めで2桁にする
var toDoubleDigits = function(num) {
  num += "";
  if (num.length === 1)num = "0" + num;
 return num;     
};
var toTripleDigits = function(num) {
  num += "";
  if (num.length === 1)num = "0" + num;
  if (num.length === 2)num = "0" + num;
 return num;     
};

// 日付をYYYY/MM/DD HH:DD:MI:SS形式で取得
var yyyymmdd = function() {
  var date = new Date();
  var yyyy = date.getFullYear();
  var mm = toDoubleDigits(date.getMonth() + 1);
  var dd = toDoubleDigits(date.getDate());
  return yyyy + '/' + mm + '/' + dd;
};
var hhmissms = function() {
  var date = new Date();
  var hh = toDoubleDigits(date.getHours());
  var mi = toDoubleDigits(date.getMinutes());
  var ss = toDoubleDigits(date.getSeconds());
  var ms = toTripleDigits(date.getMilliseconds())
  return hh + ':' + mi + ':' + ss + ':' + ms;
};
var getRandOffsetNum = function(){
  var num = Math.random() * 1800 + 250;
  if(Math.random() < 0.6){
    num *= -1;
  }
  return num;
}




// render task
var render = function() {
  requestAnimationFrame(render);
  _camera.position.x += ((_mouseX*0.05) - _camera.position.x) * .05;
  _camera.position.y += (( _mouseY*(-0.1)) - _camera.position.y) * .05;
  var posZ = _camera.position.z + (( _mouseY*(-0.5)) - _camera.position.z) * .05;
  var minZ = 400;
  if(posZ < minZ) posZ = minZ + (minZ - posZ);
  _camera.position.z = posZ;
  _light.position.set(_camera.position.x,
                      _camera.position.y,
                      _camera.position.z);
  _camera.lookAt(new THREE.Vector3(0,0,0));
  drawCanvas();
  _textur.needsUpdate = true;

  _renderer.render(_scene, _camera);
}




// main
createWorld();
addWorldSphere(3000);
addOctahedronGeometry([10,8,10,20,10,8,10,20,2,8]);
addParametric();
render();