我有这个代码示例,用于从github生成此纹理。我希望这些点在流畅的动画中移动,但是我不确定从哪里开始。这是生成纹理的JS代码:
//based on voronoi shaders from: https://thebookofshaders.com/
const Materials = require('Materials');
const R = require('Reactive');
const S = require('Shaders');
const Random = require('Random');
const Patches = require('Patches');
const Animation = require('Animation');
const Time = require('Time');
const Diagnostics = require('Diagnostics');
Diagnostics.log();
let points =[];
let nPoints = 10;
const uv = S.fragmentStage(S.vertexAttribute({'variableName': S.VertexAttribute.TEX_COORDS}));
for(let i=0;i<nPoints; i++){
let x = Random.random();
let y = Random.random();
points[i] = R.pack2(x, y);
}
let m_dist = 1.;
let m_point = R.pack2(0,0);
for (let i = 0; i < nPoints; i++) {
let newPoint = R.pack2( points[i].x, points[i].y);
let dist = R.distance(uv, newPoint);
let cond = R.step(m_dist,dist) ;
m_dist = R.add(R.mul(dist,cond), R.mul(m_dist,R.sub(1,cond)));
m_point = R.add(R.mul(points[i],cond), R.mul(m_point,R.sub(1,cond)));
}
let v = R.mul(m_dist, 3.);
let color = R.pack4(v,v,v,1.);
Materials.get('defaultMaterial0').setTexture(color, {textureSlotName: "diffuseTexture"});
Materials.get('test_mat').setTexture(color, {textureSlotName: "diffuseTexture"});
我将如何为连续的流畅动画中的点设置动画?
这很酷!我可以使用“动画”模块获得点以进行流畅的运动动画。我是通过将每个点变成随机循环的动画来实现的。将脚本顶部的for循环更改为此,它应该可以工作:
//include the Animation module
const Animation = require('Animation');
for(let i=0;i<nPoints; i++){
//create an animation for each point x and y position
///x position animation
let dx = Animation.timeDriver({durationMilliseconds: Random.random()*10000+1000, loopCount:Infinity, mirror:true});
let sx = Animation.samplers.easeInOutSine(Random.random(), Random.random());
let ax = Animation.animate(dx, sx);
///y position animation
let dy = Animation.timeDriver({durationMilliseconds: Random.random()*10000+1000, loopCount:Infinity, mirror:true});
let sy = Animation.samplers.easeInOutSine(Random.random(), Random.random());
let ay = Animation.animate(dy, sy);
//start the animation
dx.start();
dy.start();
//save the points positions into the points array
points[i] = R.pack2(ax, ay);
}