#333 Deep space cartography part N

_.md

[ Launch: #333 Deep space cartography part N ] 5512651 by enjalot
[ Launch: webgl spring coil 4wgrid ] 5509977 by zeffii
[ Launch: webgl spring coil 3wgrid ] 5478586 by zeffii
[ Launch: webgl spring coil 3wgrid ] 5478195 by zeffii
[ Launch: webgl spring coil 3 ] 5478168 by zeffii
[ Launch: webgl spring coil 2 ] 5477928 by zeffii
[ Launch: webgl spring coil ] 5477822 by zeffii
[ Launch: minimal_webgl ] 5477538 by zeffii
[ Launch: gnomesayin _wat ] 5472636 by zeffii
[ Launch: gnomesayin _wat ] 5469567 by zeffii
[ Launch: gnomesayin _wat ] 5469562 by enjalot
[ Launch: gnomesayin 4 ] 5469477 by zeffii
[ Launch: gnomesayin 2 ] 5461140 by zeffii
[ Launch: gnomesayin ] 5331716 by zeffii
[ Launch: Tributary inlet ] 5330989 by zeffii

See Previous Inlet [ Gist ]

config.json

{"description":"#333 Deep space cartography part N","endpoint":"","display":"webgl","public":true,"require":[{"name":"trackballcontrols","url":"https://raw.github.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js"}],"fileconfigs":{"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"tough.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":347,"height":323,"hide":false},"thumbnail":"http://i.imgur.com/OhJNeVG.png"}

inlet.js

// learning THREE.js
// #333 Deep space cartography part II
// after @tilman
// http://geometrydaily.tumblr.com/post/36739162154/

var container, 
    camera,
    cameraControls,
    scene,
    renderer,
    mesh,
    light;

var mouseX = 0, 
    mouseY = 0;

var gridWireMaterial, gridFaceMaterial, gridMixMaterial, ballMaterial;

init();


function init() {
  
    container = document.getElementById( 'container' );

    scene = tributary.scene; 
    camera = tributary.camera;
    camera.position.set(0,0,5);
    scene.add( camera );
    
    cameraControls = new THREE.TrackballControls( camera );
    
    light = new THREE.DirectionalLight( 0xffffff );
    light.position.set( 0, 0, 1 ).normalize();
    scene.add( light );

    ballMaterial = new THREE.MeshBasicMaterial( {color: 0x488967, transparent: true, opacity: 0.8, blending: THREE.AdditiveyBlending } );
  
    // declaration of materials and then joining them in an array, for multimaterials
    gridWireMaterial = new THREE.MeshBasicMaterial( {color: 0xeeeeee, wireframe: true});
    gridFaceMaterial = new THREE.MeshBasicMaterial( { color: 0x443f21, transparent: false, wireframe: false } );
    gridMixMaterial = [gridWireMaterial, gridFaceMaterial];
    
    createScene()  
    renderer = tributary.renderer;
}

function createScene() {

    // add a grid
    var grid = generate_grid();
    var gridWire = new THREE.Mesh( grid, gridWireMaterial );
    gridWire.position.z = 0.005;
    scene.add( gridWire );

    var gridFace = new THREE.Mesh( grid, gridFaceMaterial );
    scene.add( gridFace );
  
    
    // avoid zfighting with wireframe, draw mesh wire slightly higher than face material..
  
    var ball_1_geom = new THREE.SphereGeometry(0.1, 32, 32);
    var ball_1 = new THREE.Mesh(ball_1_geom, ballMaterial);
    ball_1.position.z = 1.5;
    scene.add( ball_1);
    
    var ball_2_geom = new THREE.SphereGeometry(0.3, 32, 32);
    var ball_2 = new THREE.Mesh(ball_2_geom, ballMaterial);
    ball_2.position.z = 0.7;
    ball_2.position.x = 0.5;
    ball_2.position.y = 1.2;
    scene.add( ball_2);

    var ball_3_geom = new THREE.SphereGeometry(0.3, 32, 32);
    var ball_3 = new THREE.Mesh(ball_3_geom, ballMaterial);
    ball_3.position.z = 0.2;
    ball_3.position.x = 1.5;
    ball_3.position.y = 1.1;    
    scene.add( ball_3);

    var ball_4_geom = new THREE.SphereGeometry(0.2, 32, 32);
    var ball_4 = new THREE.Mesh(ball_4_geom, ballMaterial);
    ball_4.position.z = 0.5;
    ball_4.position.x = -1.5;
    ball_4.position.y = -1.1;       
    scene.add( ball_4);

}


tributary.run = function(scene, t) {
    render();
}

function render() {
    cameraControls.update();
    renderer.render( scene, camera );

}

function generate_grid(){
    var geometry = new THREE.Geometry();

    var two_pi = 2 * Math.PI,
        edge_length = 0.4,
        x_pos, y_pos,
        num_points,
        xy_val = get_point(2/3*-Math.PI, {x:0, y:0}, edge_length),
        even, x_offset,
        y_shift = 5 * xy_val[1],
        x_shift = 8 * edge_length / 2;

    // console.log("----")
    var index = 0, faces = [], verts = [];
    var items_high = 11;
    for (var i = 0; i < items_high; i+=1){
        even =  (i%2===0)
        num_points = even? 9 : 10
        x_pos = 0;
          
        for( var j = 0; j < num_points; j +=1){
            x_offset = even? 0 : xy_val[0]
            y_pos = i * xy_val[1] - y_shift;
            x_pos = j * edge_length + x_offset - x_shift;

            geometry.vertices.push( new THREE.Vector3( x_pos, y_pos, 0.0 ) );
            
            // hitch a ride on the loop to fill the face indices array
            if (even && i < items_high-2) {
                geometry.faces.push( new THREE.Face3( index, index + 9, index+10) );
            }
            if (j < num_points-1 && i < items_high-1) {
                geometry.faces.push( new THREE.Face3( index, index + 10, index+1) );

            }
            if (even && i > 1 && j < num_points-1) {
                geometry.faces.push( new THREE.Face3( index, index + 1, index-9) );

            }
            if (even && i === items_high-2){
                if (j < num_points-2) {
                    geometry.faces.push( new THREE.Face3( index+1, index + 10, index + 11) );
                }

            }
            
        index += 1;
        }
      
    }

    return geometry

}

function get_point(angle, cp, amp){
    var x = (Math.cos(angle) * amp) + cp.x
    var y = (Math.sin(angle) * amp) + cp.y
    return [x,y]
}