Recaman序列的可视化

Question

我通过Numberphile看了一个关于雷卡曼序列的视频.如果您不知道算法,可以查看以下链接:https://www.youtube.com/watch？v = FGC5TdIiT9U或者这个:https://blogs.mathworks.com/cleve/2018/07/ 09 /在-OEIS和最recaman序列/

我用Processing和p5.js写了一小段软件来可视化序列.我的算法制作了下一跳定义的步骤,然后我尝试从最后一个点到新点绘制一个半圆.我的问题是半圆在绘制后消失,所以总是只能看到一个半圆.我希望所绘制的半圆都不会消失.

这是CodePen的链接,您可以在其中查看我的代码和输出:https://codepen.io/stefan_coffee/pen/QBBKgp

let S = [];
let count = 0;
let active_num = 0;

function setup() {

}

function draw() {
   createCanvas(600, 400);
   background(50, 50, 50);

   for(i = 0; i < 20; i++) {
      step();
      drawStep();
   }
}  


function drawStep() {
  var x =  (S[S.indexOf(active_num)-1] + active_num ) /2;
  var y = height / 2;
  var w = active_num - S[S.indexOf(active_num)-1];
  var h = w;

  if (count % 2 == 0) {
    stroke(255);
    noFill();
    arc(x, y, w, h, PI, 0)
  } else {
    stroke(255);
    noFill();
    arc(x, y, w, h, 0, PI);
  }
}

function step() {
  count++;
  S.push(active_num);
  console.log('active_num: ' + active_num +'  count: ' + count + '  ' + S);
  if (S.indexOf(active_num - count) > 0) {
    active_num += count;
  } else {
    if (active_num - count <= 0) {
      active_num += count;
    } else {
      active_num -= count;
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>

我希望我的输出看起来像这样:

Answer 1

虽然draw在每个帧中连续setup调用,但在启动时仅调用一次.

仅创建一次画布,并在启动时仅清除背景一次.这将导致半圆连续添加到画布,而不清除前一帧中的半圆:

function setup() {
    createCanvas(600, 400);
    background(50, 50, 50);
}

function draw() {

   for(i = 0; i < 20; i++) {
      step();
      drawStep();
   }
}  

此外,您的算法存在问题.当您搜索索引时active_num,您可能无法active_num在数组中找到S它,因为它尚未添加,但它将在下一个循环中添加.请参阅step,在函数开头active_num添加到哪里S,但稍后增加.

在函数中,drawStep您想要读取数组的最后一个元素,您可以通过以下方式获取:

var prev_num = S[count-1];

下一个相关的值arc是数组的最后一个元素S和active_num.

要解决此问题,您可以更改以下代码:

function drawStep() {
   var prev_num = S[count-1];

   var x = (prev_num + active_num) /2;
   var y = height / 2;
   var w = abs(active_num - prev_num);
   var h = w;

   stroke(255);
   noFill();
   arc(x, y, w, h, (count % 2 == 0) ? 0 : PI, (count % 2 == 0) ? PI : TWO_PI);
}

注意,你可以完全跳过函数中的循环draw,这样你就可以更好地"看到""动画":

function draw() {
   step();
   drawStep();
}

并且您可以通过以下方式手动设置每秒帧数frameRate:

function setup() {
    createCanvas(600, 400);
    background(50, 50, 50);
    frameRate(20);
}

如果要缩放半圆的大小,则结果可能如下所示:

function drawStep() {
   var scale    = 10;
   var prev_num = scale * S[count-1];
   var num      = scale * active_num;

   var x = (prev_num + num) /2;
   var y = height / 2;
   var w = abs(num - prev_num);
   var h = w;

   stroke(255);
   noFill();
   arc(x, y, w, h, (count % 2 == 0) ? 0 : PI, (count % 2 == 0) ? PI : TWO_PI);
}

let S = [];
let count = 0;
let active_num = 0;

function setup() {
    createCanvas(600, 400);
    background(50, 50, 50);
    frameRate(20);
}

function draw() {
   step();
   drawStep();
}  

function drawStep() {
   var scale    = 10;
   var prev_num = scale * S[count-1];
   var num      = scale * active_num;

   var x = (prev_num + num) /2;
   var y = height / 2;
   var w = abs(num - prev_num);
   var h = w;

   stroke(255);
   noFill();
   arc(x, y, w, h, (count % 2 == 0) ? 0 : PI, (count % 2 == 0) ? PI : TWO_PI);
}

function step() {
   count++;
   S.push(active_num);
   console.log('active_num: ' + active_num +'  count: ' + count + '  ' + S);
   if (S.indexOf(active_num - count) > 0) {
      active_num += count;
   } else {
      if (active_num - count <= 0) {
         active_num += count;
      } else {
         active_num -= count;
      }
   }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>