草庐IT

javascript - Recaman 序列的可视化

coder 2024-07-15 原文

我看过 Numberphile 制作的关于 Recaman 序列的视频。如果您不知道该算法，可以查看此链接:https://www.youtube.com/watch?v=FGC5TdIiT9U或者这个:https://blogs.mathworks.com/cleve/2018/07/09/the-oeis-and-the-recaman-sequence/

我用 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>

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

最佳答案

虽然 draw 在每一帧中都被连续调用，但是 setup 只在启动时调用一次。

只创建一次 Canvas ，只在启动时清除一次背景。这将导致半圆不断地添加到 Canvas 上，而不会从之前的帧中清除半圆:

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

function draw() {

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

此外，您的算法存在问题。当你搜索active_num的索引时，你可能在数组S中找不到active_num，因为它还没有被添加，但是它会被添加到下一个循环中。请参阅 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>

关于javascript - Recaman 序列的可视化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51694034/

javascriptRecamancodeactive_numactivealgorithmprocessingp5.js

有关javascript - Recaman 序列的可视化的更多相关文章

  1. ruby - Ruby 中的波形可视化 - 2

    我即将开始一个将录制和编辑音频文件的项目，我正在寻找一个好的库(最好是Ruby，但会考虑Java或.NET以外的任何库)以进行实时可视化波形。有人知道我应该从哪里开始搜索吗？ 最佳答案 要流入浏览器的数据量很大。Flash或Flex图表可能是唯一能提高内存效率的解决方案。Javascript图表往往会因大型数据集而崩溃。 关于ruby-Ruby中的波形可视化，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.c

  2. ruby - 是否有用于序列化和反序列化各种格式的对象层次结构的模式？ - 2

    给定一个复杂的对象层次结构，幸运的是它不包含循环引用，我如何实现支持各种格式的序列化？我不是来讨论实际实现的。相反，我正在寻找可能会派上用场的设计模式提示。更准确地说:我正在使用Ruby，我想解析XML和JSON数据以构建复杂的对象层次结构。此外，应该可以将该层次结构序列化为JSON、XML和可能的HTML。我可以为此使用Builder模式吗？在任何提到的情况下，我都有某种结构化数据-无论是在内存中还是文本中-我想用它来构建其他东西。我认为将序列化逻辑与实际业务逻辑分开会很好，这样我以后就可以轻松支持多种XML格式。 最佳答案 我最

  3. ruby - 在 Ruby 中比较序列 - 2

    假设我必须(小型到中型)阵列:tokens=["aaa","ccc","xxx","bbb","ccc","yyy","zzz"]template=["aaa","bbb","ccc"]如何确定tokens是否以相同的顺序包含template的所有条目？(请注意，在上面的示例中，应忽略第一个“ccc”，从而由于最后一个“ccc”而导致匹配。) 最佳答案 这适用于您的示例数据。tokens=["aaa","ccc","xxx","bbb","ccc","yyy","zzz"]template=["aaa","bbb","ccc"]po

  4. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. ruby-on-rails - carrierwave:在序列化动态属性上安装 uploader - 2

    首先，我使用的是rails3.1.3和来自master的carrierwavegithub仓库的分支。我使用after_init钩子(Hook)来确定基于属性的字段页面模型实例并为这些字段定义属性访问器将值存储在序列化哈希中(希望它清楚我是什么谈论)。这是我正在做的事情的精简版:classPage省略mount_uploader命令让我可以访问我想要的属性。但是当我安装uploader时出现错误消息说“nil类的未定义新方法”我在源代码中读到有方法read_uploader和扩展模块中的write_uploader。我如何必须覆盖这些来制作mount_uploader命令使用我的“虚拟

  6. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  7. 机器学习——时间序列ARIMA模型(四)：自相关函数ACF和偏自相关函数PACF用于判断ARIMA模型中p、q参数取值 - 2

    文章目录1、自相关函数ACF2、偏自相关函数PACF3、ARIMA(p,d,q)的阶数判断4、代码实现1、引入所需依赖2、数据读取与处理3、一阶差分与绘图4、ACF5、PACF1、自相关函数ACF自相关函数反映了同一序列在不同时序的取值之间的相关性。公式：ACF(k)=ρk=Cov(yt,yt−k)Var(yt)ACF(k)=\rho_{k}=\frac{Cov(y_{t},y_{t-k})}{Var(y_{t})}ACF(k)=ρk​=Var(yt​)Cov(yt​,yt−k​)​其中分子用于求协方差矩阵，分母用于计算样本方差。求出的ACF值为[-1,1]。但对于一个平稳的AR模型，求出其滞

  8. ruby-on-rails - Rails 编辑序列化的 JSON 数据 - 2

    我有一个存储JSON数据的列。当它处于编辑状态时，我不知道如何显示它。serialize:value,JSON=f.fields_for:valuedo|ff|.form-group=ff.label:short=ff.text_field:short,class:'form-control'.form-group=ff.label:long=ff.text_field:long,class:'form-control' 最佳答案 代替=f.fields_for:valuedo|ff|请使用以下代码:=f.fields_for:va

  9. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  10. ruby-on-rails - 序列化时无法将空数组保存到数据库 - 2

    在RubyonRails中，如果数组为空，则具有序列化数组字段的模型将不会在.save()上更新，而它之前有数据。我正在使用:ruby2.2.1rails4.2.1sqlite31.3.10我创建了一个字段设置为文本的新模型:railsgmodel用户名:stringexample:text在我添加的User.rb文件中:serialize:example,Array我实例化了User类的一个新实例:test=User.new然后我保存用户以确保它正确保存:test.save()(0.1ms)begintransactionSQL(0.4ms)INSERTINTO"users"("cr

随机推荐