(function () {
    //-------- ----------
    // SCENE, RENDER, CAMERA
    //-------- ----------
    const scene = new THREE.Scene();
    scene.add( new THREE.GridHelper(10, 10))
    const camera = new THREE.PerspectiveCamera(40, 320 / 240, 1, 1000);
    camera.position.set(15, 15, 15);
    camera.lookAt(0, 0, 0);
    const renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(640, 480, false);
    (document.getElementById('demo') || document.body).appendChild(renderer.domElement);
    //-------- ----------
    // HELPERS
    //-------- ----------
    // create sin wave position array to use with the setPositions method
    const sinWave = (zStart, zEnd, x, waves, yMax, pointCount, radianOffset) => {
        const pos = [];
        let i = 0;
        while(i < pointCount){
           const a1 = i / (pointCount - 1);
           const z = zStart - (zStart - zEnd) * a1;
           let r = Math.PI * 2 * waves * a1 + radianOffset;
           r = THREE.MathUtils.euclideanModulo(r, Math.PI * 2);
           const y = Math.sin(r) * yMax;
           pos.push(x, y, z);
           i += 1;
        }
        return pos;
    };
    // color trans
    const colorTrans = (color1, color2, pointCount) => {
        const colors = [];
        let i = 0;
        while(i < pointCount){
           const a1 = i / (pointCount - 1);
           let r = color1.r * (1 - a1) + color2.r * a1;
           let g = color1.g * (1 - a1) + color2.g * a1;
           let b = color1.b * (1 - a1) + color2.b * a1;
           colors.push(r,g,b);
           i += 1;
        }
        return colors;
    }
    //-------- ----------
    // LINE2
    //-------- ----------
    // use vertex colors when setting up the material
    const line_material = new THREE.LineMaterial({
        linewidth: 0.025,
        vertexColors: true
    });
    const group = new THREE.Group();
    scene.add(group);
    let i = 0;
    const count = 7;
    while(i < count){
        const a_line = i / (count - 1);
        const geo = new THREE.LineGeometry();
        const colorArray = colorTrans( new THREE.Color(1,0,1 -a_line), new THREE.Color(a_line,1, 0), 80




    
 );
        geo.setColors( colorArray);
        const line = new THREE.Line2(geo, line_material);
        group.add(line);
        i += 1;
    }
    // ---------- ----------
    // ANIMATION LOOP
    // ---------- ----------
    const FPS_UPDATE = 30, // fps rate to update ( low fps for low CPU use, but choppy video )
    FPS_MOVEMENT = 30;     // fps rate to move object by that is independent of frame update rate
    FRAME_MAX = 120;
    let secs = 0,
    frame = 0,
    lt = new Date();
    // update
    const update = function(frame, frameMax){
        const a1 = frame / frameMax;
        const a2 = 1 - Math.abs(0.5 - a1) / 0.5;
        let i = 0;
        const count = group.children.length;
        while(i < count){
            const a_line = i / (count - 1);
            const a_line2 = 1 - Math.abs(0.5 - a_line) / 0.5;
            const line = group.children[i];
            const x = -5 + 10 * a_line;
            const yMax = 1 + 3 * a_line2;
            const radianOffset = Math.PI * 2 / count * i + Math.PI * 2 * a1; 
            line.geometry.setPositions( sinWave(5, -5, x, 4, yMax, 80, radianOffset) );
            i += 1;
        }
    };
    // loop
    const loop = () => {
        const now = new Date(),
        secs = (now - lt) / 1000;
        requestAnimationFrame(loop);
        if(secs > 1 / FPS_UPDATE){
            // update, render
            update( Math.floor(frame), FRAME_MAX);
            renderer.render(scene, camera);
            // step frame
            frame += FPS_MOVEMENT * secs;
            frame %= FRAME_MAX;
            lt = now;
        }
    };
    loop();
}
    ());

(function () 




    
{
    //-------- ----------
    // SCENE, RENDER, CAMERA
    //-------- ----------
    var scene = new THREE.Scene();
    scene.add( new THREE.GridHelper(10, 10))
    var camera = new THREE.PerspectiveCamera(40, 320 / 240, 1, 1000);
    camera.position.set(15, 15, 15);
    var renderer = new THREE.WebGLRenderer({
            antialias: true
        });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setClearColor(0x000000, 0.0);
    renderer.setSize(640, 480, false);
    (document.getElementById('demo') || document.body).appendChild(renderer.domElement);
    //-------- ----------
    // HELPERS
    //-------- ----------
    var createFatLineGeometry = function (opt) {
        opt = opt || {};
        opt.forPoint = opt.forPoint || function (i, per) {
            return {
                x: i * 5,
                y: 0,
                z: 0
            }
        };
        opt.ptCount = opt.ptCount === undefined ? 20 : opt.ptCount;
        opt.colorSolid = opt.colorSolid === undefined ? false : opt.colorSolid;
        opt.color = opt.color === undefined ? new THREE.Color(0xffffff) : opt.color;
        // Position and Color Data
        var positions = [],
        colors = [],
        i = 0,
        point,
        geo;
        // for each point
        while (i < opt.ptCount) {
            // push point
            point = opt.forPoint(i, i / opt.ptCount);
            positions.push(point.x, point.y, point.z);
            // push color
            if (!opt.colorSolid) {
                opt.color.setHSL(i / opt.ptCount, 1.0, 0.5);
            }
            colors.push(opt.color.r, opt.color.g, opt.color.b);
            i += 1;
        }
        // return geo
        geo = new THREE.LineGeometry();
        geo.setPositions(positions);
        geo.setColors(colors);
        return geo;
    };
    var createFatLine = function (opt) {
        opt = opt || {};
        opt.width = opt.width || 5;
        // LINE MATERIAL
        var matLine = new THREE.LineMaterial({
            linewidth: opt.width, // in pixels
            color: 0xff0000
            //vertexColors: THREE.VertexColors
        });
        matLine.trasparent = true;
        matLine.opacity = 0.4;
        matLine.resolution.set(320, 240);
        var line = new THREE.Line2(opt.geo, matLine);
        return line;
    };
    //-------- ----------
    // FAT LINES
    //-------- ----------
    // CREATE FAT LINE
    var line = createFatLine({
            width: 10,
            geo: createFatLineGeometry({
                ptCount: 80,
                colorSolid: true,
                color: new THREE.Color(0x00ff00),
                forPoint: function (i, per) {
                    return {
                        x: i * 0.1,
                        y: Math.cos(Math.PI * 4 * (per)) * 5,
                        z: Math.sin(Math.PI * 4 * (per)) * 2.5
                    }
                }
            })
        });
    scene.add(line);
    // CREATE ANOTHER FAT LINE
    var line2 = createFatLine({
            width: 10,
            geo: createFatLineGeometry({
                ptCount: 2
            })
        });
    scene.add(line2);
    //-------- ----------
    // CONTROLS
    //-------- ----------
    var controls = new THREE.OrbitControls(camera, renderer.domElement);
    //-------- ----------
    // LOOP
    //-------- ----------
    var loop = function () {
        requestAnimationFrame(loop);
        // main scene
        renderer.setClearColor(0x000000, 0);
        renderer.setViewport(0, 0, 640, 480);
        // renderer will set this eventually
        renderer.render(scene, camera);
        renderer.setClearColor(0x222222, 1);
        renderer.clearDepth();
    };
    loop();
}
    ());

// ---------- ----------
// IMPORT - threejs and any addons I want to use
// ---------- ----------
import * as THREE from 'three';
//-------- ----------
// SCENE, CAMERA, RENDERER
//-------- ----------
const scene = new THREE.Scene();
scene.background = new THREE.Color(0, 1, 1);
const camera = new THREE.PerspectiveCamera(50, 640 / 480, 0.1, 1000);
const renderer = new THREE.WebGL1Renderer();
renderer.setSize(640, 480, false);
( document.getElementById('demo') || document.body ).appendChild(renderer.domElement);
// ---------- ----------
// CURVE
// ---------- ----------
const v_start = new THREE.Vector3(-5,0,0);
const v_end = new THREE.Vector3(5,0,0);
const v_control = v_start.clone().lerp(v_end, 0.5).add( new THREE.Vector3(-4,3,-5) );
const curve = new THREE.QuadraticBezierCurve3(v_start, v_control, v_end);
// ---------- ----------
// GEOMETRY
// ---------- ----------
const tubular_segments = 32;
const radius = 0.4;
const radial_segments = 16;
const closed = false;
const geometry = new THREE.TubeGeometry(curve, tubular_segments, radius, radial_segments, closed);
// ---------- ----------
// SCENE CHILD OBJECTS
// ---------- ----------
// grid
scene.add( new THREE.GridHelper(10, 10) );
// light
const dl = new THREE.DirectionalLight(0xffffff, 1);
dl.position.set(7, -1.5, 3);
scene.add(dl);
// mesh
const material = new THREE.MeshPhongMaterial({ side: THREE.DoubleSide });
const mesh1 = new THREE.Mesh(geometry, material);
scene.add(mesh1);
// ---------- ----------
// RENDER
// ---------- ----------
camera.position.set(5.5, 2, 5.25);
camera.lookAt(2, 0, 0);
renderer.render(scene, camera);