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