EffectHub.com: your best source for gaming

Recommendation

More Effects...

/*
Copyright (c) 2014 Mikhail Chernov (http://codepen.io/mikkamikka)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/

var	boundsx,boundsy,
    mouse = {
		down: false, button:1, x:0,	y:0, px:0,py:0	};
var ic = 0x1000000;
var random_color = '#0';

var clear = { clear: function(){
        canvas.width = canvas.width;}};

window.addEventListener('mousemove', function (event) {
        mouse.x = event.clientX;
        mouse.y = event.clientY;   });

window.onmousemove = function(e) {
		mouse.px = mouse.x;
		mouse.py = mouse.y;
  mouse.x = e.clientX - window.innerWidth/2;
  mouse.y = -(e.clientY - window.innerHeight/2);
    if (mouse.down) {
    }
		e.preventDefault();
	};

window.onmousedown = function(e){
  mouse.down = true;
  mouse.px = mouse.x;
  mouse.py = mouse.y;
  mouse.x = e.clientX - window.innerWidth/2;
  mouse.y = -(e.clientY - window.innerHeight/2);
  public_color =  getRandomColor();  
}
window.onmouseup = function(e){
    mouse.down = false;
}

window.onload = function(){
}

function drawLine(x,y, x0,y0, color, width) {
  ctx.beginPath();
  ctx.moveTo(x,y);
  ctx.lineTo(x0,y0);
  ctx.strokeStyle = color;
  if (params.constantWidth) ctx.lineWidth = 1; else
  ctx.lineWidth = width;
  ctx.stroke();
}
function getRandomColor() {
        var r = ~~( 255 * Math.random());
		   var g = ~~( 255 * Math.random());
			var b = ~~( 255 * Math.random() );
        var a = colors.alpha;  
       return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
}

function DrawTheTree(geom, x_init, y_init, z_init){   
  var geometry = geom;
    var Wrule = GetAxiomTree();
    var n = Wrule.length;
    var stackX = []; var stackY = [];  var stackZ = []; var stackA = [];
    var stackV = []; var stackAxis = [];
    
    var theta = params.theta * Math.PI / 180; 
    var scale = params.scale;
    var angle = params.angle * Math.PI / 180;
    
    var x0 = x_init;    var y0 = y_init;   var z0 = z_init ;
    var x;    var y;    var z;  
    var rota = 0, rota2 = 0,
        deltarota = 18 * Math.PI/180;  
    var newbranch = false;
  var axis_x = new THREE.Vector3( 1, 0, 0 );
  var axis_y = new THREE.Vector3( 0, 1, 0 );
  var axis_z = new THREE.Vector3( 0, 0, 1 );
  var zero = new THREE.Vector3( 0, 0, 0 );
  var axis_delta = new THREE.Vector3(),
      prev_startpoint = new THREE.Vector3();
  
  var startpoint = new THREE.Vector3(x0,y0,z0), 
      endpoint = new THREE.Vector3();
  var bush_mark;
  var vector_delta = new THREE.Vector3(scale, scale, 0);

for (var j=0; j<n; j++){        
        var a = Wrule[j];
        if (a == "+"){angle -= theta;                     
                     }
        if (a == "-"){angle += theta;                     
                     }
        if (a == "F"){
          var a = vector_delta.clone().applyAxisAngle( axis_y, angle );          
          endpoint.addVectors(startpoint, a);  
         
          geometry.vertices.push(startpoint.clone());
          geometry.vertices.push(endpoint.clone());

prev_startpoint.copy(startpoint);
          startpoint.copy(endpoint);
          axis_delta = new THREE.Vector3().copy(a).normalize();
          rota += deltarota;// + (5.0 - Math.random()*10.0);
          
        } 
        if (a == "L"){
          endpoint.copy(startpoint);
          endpoint.add(new THREE.Vector3(0, scale*1.5, 0));
          var vector_delta2 = new THREE.Vector3().subVectors(endpoint, startpoint);
          vector_delta2.applyAxisAngle( axis_delta, rota2 );
          endpoint.addVectors(startpoint, vector_delta2); 
          
          geometry.vertices.push(startpoint.clone());
          geometry.vertices.push(endpoint.clone());

rota2 += 45 * Math.PI/180;
        }
        if (a == "%"){}
        if (a == "["){
            stackV.push(new THREE.Vector3(startpoint.x, startpoint.y, startpoint.z));            
            stackA[stackA.length] = angle;            
        }
        if (a == "]"){
            var point = stackV.pop();
            startpoint.copy(new THREE.Vector3(point.x, point.y, point.z));
            angle = stackA.pop();
        }        
      bush_mark = a;
    }
  return geometry;
}

function setRules0(){
  rules.axiom = "F";
  rules.mainRule = "F-F[-F+F[LLLLLLLL]]++F[+F[LLLLLLLL]]--F[+F[LLLLLLLL]]";
  params.iterations =3;
  params.angle = 0;
  params.theta = 30;
  params.scale = 6;    
}

var camera, scene, renderer;
var plant, mesh;
var material;
var tmp = new THREE.Vector3();

init();
animate();

function init() {

renderer = new THREE.WebGLRenderer( { antialias: true } );
	//renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.setSize( 800, 800 );
	document.body.appendChild( renderer.domElement );

camera = new THREE.PerspectiveCamera( 45, 800 / 800, 1, 1000 );
  //camera = new THREE.Camera();
	camera.position.z = 300;
	camera.position.y = 150;

scene = new THREE.Scene();
	//camera.lookAt(scene.position)
	
	light2 = new THREE.PointLight( 0xffffff, 1, 100 );
	light2.position.set(0, 100, -200);
	scene.add( light2 );
	directionalLight = new THREE.DirectionalLight( 0xffffff );
	directionalLight.position.set(0, 0.5, -0.5);
	directionalLight.position.normalize();
	scene.add( directionalLight );
	light2.position.y = 100;
	light2.position.z = 100;
  
  setRules0();
  
  var material = new THREE.LineBasicMaterial({color: 0x333333});
  var line_geometry = new THREE.Geometry();
  line_geometry = DrawTheTree(line_geometry, 0, -150, 0);  
  //plant = new THREE.Mesh(line_geometry, material);
  plant = new THREE.Line(line_geometry, material, THREE.LinePieces);
  scene.add(plant);         
  
	renderer.setClearColor(0xeeeeee);
	window.addEventListener( 'resize', onWindowResize, false );

}

function addTree(x,y){
  var material = new THREE.LineBasicMaterial({color: 0xaaa});
  var line_geometry = new THREE.Geometry();
  line_geometry = DrawTheTree(line_geometry, x, y, 0);
}

function onWindowResize() {
}
function animate() {
	requestAnimationFrame( animate );
	t0 = Date.now() / 60;
  //scene.rotation.y = t0;
  plant.rotation.y += 0.01;
  camera.lookAt(plant.position);
	renderer.render( scene, camera );
}

window.onkeypress = function(e) {
  e = e || window.event;
  if(e.keyCode == 87) params.deltarota +=1;
}

CSS

HTML

Recommendation

Join Effecthub.com