使用 p5.js 绘制图形

创建时间 2019-04-18
更新时间 2022-05-31
分类
计算机技术
标签
Javascript

关于五度圈

从官大为的 好和弦 中我看到了一个视频，讲了五度圈相关的东西。然后官大为发挥了一个程序员应有的主观能动性，自己手动用 javascript 画了一个五度圈。

我看了以下这个页面的原码，其中就有一个很重要的js文件 p5.js，几乎页面上所有能看到的东西都是用这个javascript包画出来的。所以对这个包产生了浓厚的兴趣。

这里是官方提供五度圈的页面 http://nicechord.com/circle/，也就是上面嵌入的页面。这里是官大为 github 上五度圈的仓库地址 https://github.com/wiwikuan/wiwi-circleOfFifths

特别感谢 官大为，从他的好和弦频道，我学到了好多关于作曲和编曲的干活知识。

p5.js

下面时官方的例子，我在窗口改变时改变了画布的大小，使得画布能够适应屏幕。

这里是画布尺寸信息：

附上相关的代码：

<div class="ui segments">
    <div class="ui segment" id="sketch-holder"></div>
    <div class='ui segment'>
        <span>这里是画布尺寸信息：</span>
        <span class="status"></span>
    </div>
</div>

<script src="https://fastly.jsdelivr.net/npm/jquery@3.4.0/dist/jquery.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/p5@0.8.0/lib/p5.min.js"></script>

function setup() {
    var width = $("#sketch-holder"). width();
    var height = parseInt(width / 1.77);
    canvas = createCanvas(width, height);
    canvas.parent('sketch-holder');
    $('.status').html(width + " " + height);
}

function draw() {
    if (mouseIsPressed) {
        fill(0);
    } else {
        fill(255);
    }
    ellipse(mouseX, mouseY, 80, 80);
}

function windowResized() {
  var width = $("#sketch-holder").width();
  var height = parseInt(width / 1.77);
  resizeCanvas(width, height);
  $('.status').html(width + " " + height);
}

后来我用它实现了，一些排序算法的演示：

http://blog.ccyg.studio/article/e518ad71-a442-4e97-b2a1-72a9c422b483

当然， p5.js 的功能要丰富的多，远远不止于此。剩下的等以后慢慢研究吧。

参考资料