使用 p5.js 绘制图形

使用 p5.js 绘制图形

原文链接：http://blog.ccyg.studio/article/9a1514e6-9c62-49c7-9196-c51902c0974a

---

对 markdown 的支持有限，建议点击原文链接查看。

关于五度圈

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

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

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

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

p5.js

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

这里是画布尺寸信息：

附上相关的代码：

    

    

        这里是画布尺寸信息：
        
    

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 的功能要丰富的多，远远不止于此。剩下的等以后慢慢研究吧。

参考资料

• https://www.youtube.com/watch?v=EyF7EBnmdEs
• http://nicechord.com/circle/
• http://p5js.org/