Merge branch 'develop'

codepen/arcs.html

@@ -0,0 +1,124 @@
+<style>
+    html,
+    body {
+        background-color: #fff;
+        padding: 0;
+        margin: 0;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    canvas {
+        margin: 0;
+    }
+</style>
+
+<script>
+    const PI2 = Math.PI * 2;
+
+    let scene, camera, renderer, container, fov, light, ambient;
+    let gui, controls = {
+        color: 0xF22200,
+        ambient: 0.01,
+        arcs: 7,
+        gap: 30,
+        radius: 50,
+        width: 50,
+        side: 'front',
+        speed: 0.003,
+    };
+
+    window.onload = () => {
+        gui = new dat.GUI();
+        gui.addColor(controls, 'color').onChange(change);
+        gui.add(controls, 'ambient', 0, 1).step(0.01).onChange(change);
+        gui.add(controls, 'side', ['front', 'back', 'double']).onChange(change);
+        gui.add(controls, 'arcs', 1, 20).step(1).onChange(populate);
+        gui.add(controls, 'gap', 1, 100).step(1).onChange(populate);
+        gui.add(controls, 'radius', 1, 100).step(1).onChange(populate);
+        gui.add(controls, 'width', 1, 100).step(1).onChange(populate);
+        gui.add(controls, 'speed', 0, 0.03).step(0.0001);
+        gui.close();
+
+        scene = new THREE.Scene();
+
+        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+        fov = Math.tan(camera.fov * (Math.PI / 180) / 2) * 2;
+
+        renderer = new THREE.WebGLRenderer();
+        renderer.setPixelRatio(window.devicePixelRatio);
+        document.body.appendChild(renderer.domElement);
+
+        ambient = new THREE.AmbientLight(controls.color, controls.ambient);
+        scene.add(ambient);
+
+        light = new THREE.PointLight(controls.color, 1, 10000);
+        scene.add(light);
+
+        container = new THREE.Group();
+        scene.add(container);
+        container.rotation.x = Math.PI / 2;
+
+        material = new THREE.MeshPhongMaterial({
+            side: THREE.DoubleSide,
+        });
+
+        window.addEventListener('resize', resize);
+        resize();
+        change();
+        populate();
+        render();
+    };
+
+    function resize() {
+        camera.aspect = window.innerWidth / window.innerHeight;
+        camera.position.z = window.innerHeight / fov;
+        camera.updateProjectionMatrix();
+        renderer.setSize(window.innerWidth, window.innerHeight);
+    }
+
+    function change() {
+        material.side = {
+            'front': THREE.FrontSide,
+            'back': THREE.BackSide,
+            'double': THREE.DoubleSide,
+        }[controls.side];
+
+        ambient.color.set(controls.color);
+        ambient.intensity = controls.ambient;
+
+        light.color.set(controls.color);
+        light.position.z = controls.radius + controls.arcs * controls.gap + 200;
+    }
+
+    function populate() {
+        while (container.children.length) {
+            container.remove(container.children[0]);
+        }
+
+        let r, i, n, p = 0, mesh, geometry, parent = container;
+        for (i = 0; i < controls.arcs; i++) {
+            n = 1 - (i / controls.arcs);
+            r = controls.radius + (controls.arcs - i) * controls.gap;
+            geometry = new THREE.CylinderGeometry(r, r, controls.width, 100 * n, 1, true, 0, PI2 * n);
+            mesh = new THREE.Mesh(geometry, material);
+            mesh.rotation.y = p;
+            mesh.rotation.z = PI2 * Math.random();
+            parent.add(mesh);
+            parent = mesh;
+            p = n;
+        }
+    }
+
+    function render() {
+        requestAnimationFrame(render);
+
+        let i, mesh = container;
+        for (i = 0; i < controls.arcs; i++) {
+            mesh = mesh.children[0];
+            mesh.rotation.z += controls.speed;
+        }
+
+        renderer.render(scene, camera);
+    }
+</script>

codepen/cubes.html

@@ -0,0 +1,139 @@
+<style>
+    body {
+    margin: 0;
+    overflow: hidden;
+}
+canvas {
+    background-color: #000;
+    width: 100vw;
+    height: 100vh;
+}
+</style>
+<script>
+    let canvas = document.createElement('canvas');
+document.body.appendChild(canvas);
+let ctx = canvas.getContext('2d');
+
+let controls = {
+    size: 200,
+    layers: 5,
+    shade: 50,
+    speed: 20,
+    offset: 30,
+};
+let gui = new dat.GUI();
+gui.add(controls, 'size', 10, 1000).step(1);
+gui.add(controls, 'layers', 1, 100).step(1);
+gui.add(controls, 'shade', 1, 100).step(1);
+gui.add(controls, 'speed', 1, 100).step(1);
+gui.add(controls, 'offset', 1, 100).step(1);
+gui.close();
+
+let colorIndex = 0;
+
+function resize() {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+}
+
+window.onresize = resize;
+resize();
+
+function draw() {
+    requestAnimationFrame(draw);
+
+    colorIndex = (colorIndex + controls.speed * 0.0001) % 1;
+    let i, colors = new Array(controls.layers);
+    for (i=0; i<colors.length; i++) {
+        colors[i] = hslToRgb(colorIndex + ((colors.length - i) * controls.offset * 0.001), 1, 0.5);
+    }
+
+    let wide = Math.ceil(canvas.width / controls.size) + 1;
+    let high = Math.ceil(canvas.height / (controls.size / 4 * 3)) + 1;
+
+    let x, y;
+    for (x=0; x<wide; x++) {
+        for (y=0; y<high; y++) {
+            for (i=0; i<controls.layers; i++) {
+                cube(x * controls.size + (y % 2) * controls.size / 2, y * controls.size / 4 * 3, (controls.layers - i) * (controls.size / controls.layers), colors[controls.layers - i - 1]);
+            }
+        }
+    }
+}
+draw();
+
+function cube(x, y, size, color) {
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    ctx.lineTo(x - size / 2, y - size / 4);
+    ctx.lineTo(x, y - size / 2);
+    ctx.lineTo(x + size / 2, y - size / 4);
+    ctx.lineTo(x, y);
+    ctx.fill();
+
+    ctx.fillStyle = shadeColor(color, -controls.shade / 2);
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    ctx.lineTo(x - size / 2, y - size / 4);
+    ctx.lineTo(x - size / 2, y + size / 4);
+    ctx.lineTo(x, y + size / 2);
+    ctx.lineTo(x, y);
+    ctx.fill();
+
+    ctx.fillStyle = shadeColor(color, -controls.shade);
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    ctx.lineTo(x + size / 2, y - size / 4);
+    ctx.lineTo(x + size / 2, y + size / 4);
+    ctx.lineTo(x, y + size / 2);
+    ctx.moveTo(x, y);
+    ctx.fill();
+}
+
+function hslToRgb(h, s, l){
+    var r, g, b;
+
+    if(s == 0){
+        r = g = b = l; // achromatic
+    }else{
+        var hue2rgb = function hue2rgb(p, q, t){
+            if(t < 0) t += 1;
+            if(t > 1) t -= 1;
+            if(t < 1/6) return p + (q - p) * 6 * t;
+            if(t < 1/2) return q;
+            if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+            return p;
+        }
+
+        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        var p = 2 * l - q;
+        r = hue2rgb(p, q, h + 1/3);
+        g = hue2rgb(p, q, h);
+        b = hue2rgb(p, q, h - 1/3);
+    }
+
+    return rgbToHex(Math.round(r * 255), Math.round(g * 255), Math.round(b * 255));
+}
+
+function rgbToHex(r, g, b) {
+    r = r.toString(16);
+    g = g.toString(16);
+    b = b.toString(16);
+
+    return '#'
+        + ((r.length==1)?"0"+r:r)
+        + ((g.length==1)?"0"+g:g)
+        + ((b.length==1)?"0"+b:b);
+}
+
+function shadeColor(color, percent) {
+    let R = parseInt(color.substring(1,3),16);
+    let G = parseInt(color.substring(3,5),16);
+    let B = parseInt(color.substring(5,7),16);
+    R = parseInt(R * (100 + percent) / 100);
+    G = parseInt(G * (100 + percent) / 100);
+    B = parseInt(B * (100 + percent) / 100);
+    return rgbToHex((R<255)?R:255, (G<255)?G:255, (B<255)?B:255);
+}
+</script>