我想用paper.js制作反应扩散系统的动画。
这是只生成一张图像的代码:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.2/paper-full.min.js"></script>
<style>
canvas {
width: 400px;
height: 400px;
border: black 3px solid;
}
</style>
</head>
<body>
<script>
function subm_index(M, x){
if (x<0)
return x+M;
if(x >= M)
return x-M;
return x;
}
function update_concentrations(X, L, DA, DB, f, k){
var sum_a, sum_b, x1, y1, t;
var m = X.A.length;
var n = X.A[0].length;
var A = new Array(m);
var B = new Array(m);
for(var i = 0; i < m; i++){
A[i] = new Array(n);
B[i] = new Array(n);
}
for(var x = 0; x < m; x++) {
for(var y = 0; y < n; y++){
sum_a = 0.0;
sum_b = 0.0;
for(var i = -1; i <= 1; i++){
for(var j = -1; j <= 1; j++){
x1 = subm_index(m, x - i);
y1 = subm_index(n, y - j);
sum_a = sum_a + L[i+1][j+1] * X.A[x1][y1];
sum_b = sum_b + L[i+1][j+1] * X.B[x1][y1];
}
}
t = X.A[x][y]*X.B[x][y]*X.B[x][y];
A[x][y] = X.A[x][y] + DA*sum_a - t + f*(1-X.A[x][y]);
B[x][y] = X.B[x][y] + DB*sum_b + t - (k+f)*X.B[x][y];
}
}
return {A: A, B: B};
}
function iterate_Gray_Scott(X, L, DA, DB, f, k, n){
for(var i = 0; i < n; i++){
X = update_concentrations(X, L, DA, DB, f, k);
}
return X;
}
var L = [[0.05, 0.2, 0.05], [0.2, -1, 0.2], [0.05, 0.2, 0.05]];
var DA = 1;
var DB = 0.5;
var f = 0.0545;
var k = 0.062;
</script>
<script type="text/paperscript" canvas="quad">
var pixels = 200;
var gridSize = 2;
var rectSize = 2;
var A = new Array(pixels);
var B = new Array(pixels);
for(var i = 0; i < pixels; i++){
A[i] = new Array(pixels);
B[i] = new Array(pixels);
for(var j = 0; j < pixels; j++){
A[i][j] = 1;
B[i][j] = Math.random() < 0.98 ? 0 : 1;
}
}
var X = {A: A, B: B};
X = iterate_Gray_Scott(X, L, DA, DB, f, k, 1000);
for(var y = 0; y < pixels; y++){
for(var x = 0; x < pixels; x++){
var color = {
hue: X.B[x][y] * 360,
saturation: 1,
brightness: 1
};
var path = new Path.Rectangle(new Point(x, y) * gridSize, new Size(rectSize, rectSize));
path.fillColor = color;
}
}
project.activeLayer.position = view.center;
</script>
<canvas id="quad" resize></canvas>
</body>
</html>现在，这是生成动画的代码:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.2/paper-full.min.js"></script>
<style>
canvas {
width: 400px;
height: 400px;
border: black 3px solid;
}
</style>
</head>
<body>
<script>
function subm_index(M, x){
if (x<0)
return x+M;
if(x >= M)
return x-M;
return x;
}
function update_concentrations(X, L, DA, DB, f, k){
var sum_a, sum_b, x1, y1, t;
var m = X.A.length;
var n = X.A[0].length;
var A = new Array(m);
var B = new Array(m);
for(var i = 0; i < m; i++){
A[i] = new Array(n);
B[i] = new Array(n);
}
for(var x = 0; x < m; x++) {
for(var y = 0; y < n; y++){
sum_a = 0.0;
sum_b = 0.0;
for(var i = -1; i <= 1; i++){
for(var j = -1; j <= 1; j++){
x1 = subm_index(m, x - i);
y1 = subm_index(n, y - j);
sum_a = sum_a + L[i+1][j+1] * X.A[x1][y1];
sum_b = sum_b + L[i+1][j+1] * X.B[x1][y1];
}
}
t = X.A[x][y]*X.B[x][y]*X.B[x][y];
A[x][y] = X.A[x][y] + DA*sum_a - t + f*(1-X.A[x][y]);
B[x][y] = X.B[x][y] + DB*sum_b + t - (k+f)*X.B[x][y];
}
}
return {A: A, B: B};
}
function iterate_Gray_Scott(X, L, DA, DB, f, k, n){
for(var i = 0; i < n; i++){
X = update_concentrations(X, L, DA, DB, f, k);
}
return X;
}
var L = [[0.05, 0.2, 0.05], [0.2, -1, 0.2], [0.05, 0.2, 0.05]];
var DA = 1;
var DB = 0.5;
var f = 0.0545;
var k = 0.062;
</script>
<script type="text/paperscript" canvas="quad">
var pixels = 200;
var gridSize = 2;
var rectSize = 2;
var A = new Array(pixels);
var B = new Array(pixels);
var Paths = new Array(pixels);
for(var i = 0; i < pixels; i++){
A[i] = new Array(pixels);
B[i] = new Array(pixels);
Paths[i] = new Array(pixels);
for(var j = 0; j < pixels; j++){
A[i][j] = 1;
B[i][j] = Math.random() < 0.99 ? 0 : 1;
}
}
var X = {A: A, B: B};
for(var y = 0; y < pixels; y++){
for(var x = 0; x < pixels; x++){
var color = {
hue: X.B[x][y] * 360,
saturation: 1,
brightness: 1
};
Paths[x][y] = new Path.Rectangle(new Point(x, y) * gridSize, new Size(rectSize, rectSize));
Paths[x][y].fillColor = color;
}
}
var nframes = 100;
var XX = new Array(nframes);
XX[0] = X;
for(var frm = 1; frm < nframes; frm++){
XX[frm] = iterate_Gray_Scott(XX[frm-1], L, DA, DB, f, k, frm);
}
project.activeLayer.position = view.center;
function onFrame(event){
console.log(event.count);
if(event.count < nframes){
for(var y = 0; y < pixels; y++){
for(var x = 0; x < pixels; x++){
var color = {
hue: XX[event.count].B[x][y] * 360,
saturation: 1,
brightness: 1
};
Paths[x][y].fillColor = color;
}
}
}
}
</script>
<canvas id="quad" resize></canvas>
</body>
</html>它可以工作，但是动画不够流畅。这是由于
onFrame中的双循环所致，该循环需要一些时间。因此，我首先尝试创建一个包含
nframes Group元素的数组，每个组都包含pixels*pixels Rectangle元素。但这会导致内存不足。因此，我尝试使用
Symbol节省一些内存。代码在下面，但不起作用，没有出现单个图像。<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.2/paper-full.min.js"></script>
<style>
canvas {
width: 400px;
height: 400px;
border: black 3px solid;
}
</style>
</head>
<body>
<script>
function subm_index(M, x){
if (x<0)
return x+M;
if(x >= M)
return x-M;
return x;
}
function update_concentrations(X, L, DA, DB, f, k){
var sum_a, sum_b, x1, y1, t;
var m = X.A.length;
var n = X.A[0].length;
var A = new Array(m);
var B = new Array(m);
for(var i = 0; i < m; i++){
A[i] = new Array(n);
B[i] = new Array(n);
}
for(var x = 0; x < m; x++) {
for(var y = 0; y < n; y++){
sum_a = 0.0;
sum_b = 0.0;
for(var i = -1; i <= 1; i++){
for(var j = -1; j <= 1; j++){
x1 = subm_index(m, x - i);
y1 = subm_index(n, y - j);
sum_a = sum_a + L[i+1][j+1] * X.A[x1][y1];
sum_b = sum_b + L[i+1][j+1] * X.B[x1][y1];
}
}
t = X.A[x][y]*X.B[x][y]*X.B[x][y];
A[x][y] = X.A[x][y] + DA*sum_a - t + f*(1-X.A[x][y]);
B[x][y] = X.B[x][y] + DB*sum_b + t - (k+f)*X.B[x][y];
}
}
return {A: A, B: B};
}
function iterate_Gray_Scott(X, L, DA, DB, f, k, n){
for(var i = 0; i < n; i++){
X = update_concentrations(X, L, DA, DB, f, k);
}
return X;
}
var L = [[0.05, 0.2, 0.05], [0.2, -1, 0.2], [0.05, 0.2, 0.05]];
var DA = 1;
var DB = 0.5;
var f = 0.0545;
var k = 0.062;
</script>
<script type="text/paperscript" canvas="quad">
var pixels = 50;
var gridSize = 2;
var rectSize = 2;
var A = new Array(pixels);
var B = new Array(pixels);
var Paths = new Array(pixels);
for(var i = 0; i < pixels; i++){
A[i] = new Array(pixels);
B[i] = new Array(pixels);
Paths[i] = new Array(pixels);
for(var j = 0; j < pixels; j++){
A[i][j] = 1;
B[i][j] = Math.random() < 0.99 ? 0 : 1;
}
}
var X = {A: A, B: B};
var nframes = 50;
var XX = new Array(nframes);
XX[0] = X;
for(var frm = 1; frm < nframes; frm++){
XX[frm] = iterate_Gray_Scott(XX[frm-1], L, DA, DB, f, k, frm);
}
var Rects = [];
for(var x = 0; x < pixels; x++){
for(var y = 0; y < pixels; y++){
var rect = new Path.Rectangle(new Point(x, y) * gridSize, new Size(rectSize, rectSize));
var color = {
hue: 1,
saturation: 1,
brightness: 1
};
rect.fillColor = color;
rect.visible = false;
Rects.push(rect);
}
}
group = new Group(Rects);
symbolGroup = new Symbol(group);
var Groups = new Array(nframes);
for(var frm = 0; frm < nframes; frm++){
Groups[frm] = symbolGroup.place(view.center);
var k = 0;
for(var x = 0; x < pixels; x++){
for(var y = 0; y < pixels; y++){
Groups[frm].definition.definition.children[k].fillColor = {
hue: XX[frm].B[x][y] * 360,
saturation: 1,
brightness: 1
};
k = k+1;
}
}
XX[frm] = null; // to free some memory
}
project.activeLayer.position = view.center;
function onFrame(event){
if(event.count < nframes){
console.log(event.count);
Groups[event.count].visible = true;
if(event.count > 0){
Groups[event.count-1].visible = false; // to free some memory
}
}
}
</script>
<canvas id="quad" resize></canvas>
</body>
</html>您能帮我解决最后的代码吗？
最佳答案
从语法上讲，我认为这里有一个小问题:
Groups[frm].definition.definition.children[k].fillColor
| | | | ^ changing fill color of Rect
| | | ^ accessing children of group
| | ^ should be item*
| ^ SymbolDefinition
^ array of placed symbols
* [SymbolDefinition.item] http://paperjs.org/reference/symboldefinition/
但是我不会花很多时间尝试使Symbols进行渲染。
阅读有关Symbol的内容，似乎对SymbolDefinition的定义进行更改将更新所有放置的实例，因为它们指向一个公共(public)源。作为一种加快操作速度的技术，我认为这会适得其反。您仍然执行与2D阵列相同数量的填充操作。
另一种方法是使用一种伪双缓冲。对不在屏幕上的一组矩形执行填充操作，然后将该组缓存到位图并显示。每次刷新将避免不必要的绘制操作，并且将作为一个整体发生。缓存为位图也将加快像素渲染。
Paper.js似乎没有给您明显的实现方法，但是您可能可以使用2层来完成它。由于一次一次只有一层是“ Activity 的”，因此您可以在一层上绘制矩形，将其缓存为位图，然后激活。然后在第二层上绘制下一组矩形，将其缓存为位图，然后激活。来回切换可能会为您带来所需的性能增强。
另外，还有一种叫做PaperScope的东西，您可能可以利用它来实现相同的技术。 PaperScope使用第二个canvas元素。您需要以与图层相同的方式手动激活它们。