Meta ball调试动画（球体融合部位的原理剖析图）

使用paperscript编写的metaball调试工具，展示球体相交部分切线曲率。

h5, canvas, ball

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 4488
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<script type="text/paperscript" canvas="meta-ball">
// Ported from original Metaball script by SATO Hiroyuki
// https://park12.wakwak.com/~shp/lc/et/en_aics_script.html
project.currentStyle = {
	fillColor: '#2e2f30'
};

var ballPositions = [[255, 220]];

var handle_len_rate = 2.4;
var circlePaths = [];

var circlePath = new Path.Circle({
  center: ballPositions[0],
  radius: 200,
});
circlePaths.push(circlePath);

circlePaths[0].selected = true;
circlePaths[0].selectedColor = '#ff485e';

var largeCircle = new Path.Circle({
	center: [535, 120],
	radius: 80
});
circlePaths.push(largeCircle);

function onMouseMove(event) {
	largeCircle.position = event.point;
	generateConnections(circlePaths);
}

generateConnections(circlePaths);

// ---------------------------------------------
function metaball(ball1, ball2, v, handle_len_rate, maxDistance, debug) {
	var center1 = ball1.position;
	var center2 = ball2.position;
	var radius1 = ball1.bounds.width / 2;
	var radius2 = ball2.bounds.width / 2;
	var pi2 = Math.PI / 2;
	var d = center1.getDistance(center2);
	var u1, u2;

if (radius1 == 0 || radius2 == 0)
		return;

if (d > maxDistance || d <= Math.abs(radius1 - radius2)) {
		return;
	} else if (d < radius1 + radius2) { // case circles are overlapping
		u1 = Math.acos((radius1 * radius1 + d * d - radius2 * radius2) /
				(2 * radius1 * d));
		u2 = Math.acos((radius2 * radius2 + d * d - radius1 * radius1) /
				(2 * radius2 * d));
	} else {
		u1 = 0;
		u2 = 0;
	}

var angle1 = (center2 - center1).getAngleInRadians();
	var angle2 = Math.acos((radius1 - radius2) / d);
	var angle1a = angle1 + u1 + (angle2 - u1) * v;
	var angle1b = angle1 - u1 - (angle2 - u1) * v;
	var angle2a = angle1 + Math.PI - u2 - (Math.PI - u2 - angle2) * v;
	var angle2b = angle1 - Math.PI + u2 + (Math.PI - u2 - angle2) * v;
	var p1a = center1 + getVector(angle1a, radius1);
	var p1b = center1 + getVector(angle1b, radius1);
	var p2a = center2 + getVector(angle2a, radius2);
	var p2b = center2 + getVector(angle2b, radius2);

// define handle length by the distance between
	// both ends of the curve to draw
	var totalRadius = (radius1 + radius2);
	var d2 = Math.min(v * handle_len_rate, (p1a - p2a).length / totalRadius);

// case circles are overlapping:
	d2 *= Math.min(1, d * 2 / (radius1 + radius2));

radius1 *= d2;
	radius2 *= d2;

var path = new Path({
		segments: [p1a, p2a, p2b, p1b],
		style: ball1.style,
		closed: true
	});
  	
  if (debug) { path.fullySelected = true; }
  
	var segments = path.segments;
	segments[0].handleOut = getVector(angle1a - pi2, radius1);
	segments[1].handleIn = getVector(angle2a + pi2, radius2);
	segments[2].handleOut = getVector(angle2b - pi2, radius2);
	segments[3].handleIn = getVector(angle1b + pi2, radius1);
	return path;
}

// ------------------------------------------------
function getVector(radians, length) {
	return new Point({
		// Convert radians to degrees:
		angle: radians * 180 / Math.PI,
		length: length
	});
}
</script>

使用paperscript编写的metaball调试工具，展示球体相交部分切线曲率。

h5, canvas, ball

编辑器支持Emmet

快捷键

使用paperscript编写的metaball调试工具，展示球体相交部分切线曲率。

h5, canvas, ball

gsap和svg filter实现乱流（turbulence）加载动画

P5.js+Matter.js实现的卡通袋泡茶（糖精）和橡皮筋动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：