移植一个Houdini的动画到WebGL中

利用黄金分割在花盘或者花体上铺花子
最初是女儿看到entagma的一个动画(https://www.youtube.com/watch?v=yGwhnt7mZ50)觉得很漂亮,问我能不能做一个
原始动画使用houdini的VEX实现的,了解原理后我觉得这个算法包含了程序之美和自然界的数学之美,用three.js在Web上尝试

移植一个Houdini的动画到WebGL中

 移植一个Houdini的动画到WebGL中

 


flower2d 产生平面花盘 flower3d 产生空间花盘,用抛物线举例
 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script src="./three.js"></script>
		<script>

/// 利用黄金分割在花盘或者花体上铺花子
/// 最初是女儿看到entagma的一个动画(https://www.youtube.com/watch?v=yGwhnt7mZ50)觉得很漂亮,问我能不能做一个
/// 原始动画使用houdini的VEX实现的,了解原理后我觉得这个算法包含了程序之美和自然界的数学之美,用three.js在Web上尝试
/// flower2d 产生平面花盘 flower3d 产生空间花盘,用抛物线举例
/// Created by Joyer Huang 2021
var golden_angle = 137.5, camera, scene, renderer, point_light, empty, mouse = new THREE.Vector2();
var d2r = d => d*(Math.PI/180);;
function flower2d() {
    var N = 100;
    for (var i=0; i<N; i++) {
        var r = Math.sqrt(i);
        var x = Math.sin(d2r(golden_angle * i)) * r;
        var y = Math.cos(d2r(golden_angle * i)) * r;
        emit(x, y, 0, 1);
    }
}
function flower3d() {
    // Y = -X*X + 30
    var Y = 30, Xlast = 0, emit_space = 1, d = 0.01, accumulate_space = 0, golden_angle_i = 0;
    while (Y > 0) {
        X = Math.sqrt(30-Y);
        Xd = X - Xlast;
        df = Math.sqrt(Xd*Xd + d);
        af = Math.PI * X * X * df;
        accumulate_space += af;
        if (accumulate_space > emit_space) {
            accumulate_space -= emit_space;
            var x = Math.sin(d2r(golden_angle * golden_angle_i)) * X;
            var y = Math.cos(d2r(golden_angle * golden_angle_i)) * X;
            var z = Y;
            golden_angle_i++;
            emit(y, z, x, emit_space/5);
        }
        Y -= d;
        Xlast = X;
    }
}
function emit(x, y, z, r) {
    geo = new THREE.SphereGeometry(r);
    mat = new THREE.MeshLambertMaterial({ color: 0xffcb00 });
    mat.reflectivity = 0.2

    mesh = new THREE.Mesh(geo, mat);
    mesh.position.x = x;
    mesh.position.y = y;
    mesh.position.z = z;
    mesh.receiveShadow = true;
    mesh.castShadow = true;
    empty.add(mesh);
}

init();
animate();
document.addEventListener('mousemove', onm ousemove, false)
function onm ousemove(event) {
    event.preventDefault();
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}
function init() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 100; // view distance
    scene.add(camera);

    const sphere = new THREE.SphereGeometry( 0.5, 16, 8 );
    empty = new THREE.Object3D();
    scene.add(empty);

    point_light = new THREE.PointLight( 0xff0040, 5, 50 );
    point_light.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xff0040 } ) ) );
    scene.add( point_light );

    scene.add(new THREE.AmbientLight( 0x040404, 20 )); // base ambient

    flower2d(); // or use flower2d if you want simple projection

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);
}

function animate() {
    requestAnimationFrame(animate);
    render();
}
function render() {
    // basic object animation
    const time = Date.now() * 0.0005;
    point_light.position.x = Math.sin( time * 0.7 * 2 ) * 20;
    point_light.position.y = Math.cos( time * 0.5 * 2) * 25;
    point_light.position.z = Math.cos( time * 0.3 * 2) * 30;
    empty.rotation.y += 0.03;
    empty.position.y = mouse.y * 50;

    renderer.render(scene, camera);
}
                  
		</script>
	</body>
</html>

上一篇:记录一次node单创建的性能问题批量组装sql一次发送


下一篇:图形化开发(五)033-Three.js之光照——实例1-平行光