使用 p5.js 绘制图形
原文链接:http://blog.ccyg.studio/article/9a1514e6-9c62-49c7-9196-c51902c0974a
简书对 markdown 的支持有限,建议点击原文链接查看。
关于五度圈
从官大为的 好和弦 中我看到了一个视频,讲了五度圈相关的东西。然后官大为发挥了一个程序员应有的主观能动性,自己手动用 javascript 画了一个五度圈。
我看了以下这个页面的原码,其中就有一个很重要的js文件 p5.js,几乎页面上所有能看到的东西都是用这个javascript包画出来的。所以对这个包产生了浓厚的兴趣。
<div class='ui segment'>
<iframe src='http://nicechord.com/circle/' frameborder=0 width="100%" height="825px"></iframe>
</div>
这里是官方提供五度圈的页面 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://cdn.jsdelivr.net/npm/jquery@3.4.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@0.8.0/lib/p5.min.js"></script>
<script>
function setup() {
var width = ('.status').html(width + " " + height);
}
function draw() {
if (mouseIsPressed) {
fill(0);
} else {
fill(255);
}
ellipse(mouseX, mouseY, 80, 80);
}
function windowResized() {
var width = ('.status').html(width + " " + height);
}
</script>
附上相关的代码:
<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://cdn.jsdelivr.net/npm/jquery@3.4.0/dist/jquery.min.js"></script>
<script src="https://cdn.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 的功能要丰富的多,远远不止于此。剩下的等以后慢慢研究吧。