js整体缩小网页_P5.js 实现菱形画图器V1

前言

前端时间在B站看到了一个小哥在给人家的商品设置Logo的时候，使用了扁扁的菱形的风格的文字变形Logo，最终效果又简洁又大气。他当时是用的PS之类的软件手动做的，我觉得如果用编程的方法做会不会也能出很好的效果呢？于是趁着过年没事的时间，把这个想法初步实现了一下。

实现用到了Javascript的编程环境，以及 p5.js 和 p5.collide2d.js 这两个包，最终实现了下面的效果：

菱形画图器V1https://www.zhihu.com/video/1203379557077762048

简单地说，就是用鼠标点击一个菱形，就能让他变黑，在点就又变白了。还能按“g”键选择“打开或者关闭参照网格”，按“c”键进行“清屏”（清屏速度有点慢）。

实现方法

在程序开始的时候，手动设置好每个菱形的各个定点坐标并将他们存储起来，然后在每次鼠标点击的时候，检测鼠标点击到了哪个位置上，然后将该位置对应的菱形给变个色。

具体的点击检测方法，我使用了一个比较笨拙的方法（用collide2d.js的点与多边形的重叠检测功能，在每一次鼠标点击时候，检测每一个菱形是否被鼠标点击了），导致了程序整体运行较慢。

程序的另外一个难点是，菱形们摞在一起的布局并不像矩形们一样规整，导致各个环节的处理都比较难办。后续作者可能会对该程序做出进一步的优化（根据文章收到的反馈以及作者本身的时间安排）。

项目源码与在线体验

请直接前往这个网页（网速不好的同学可能是因为需要翻qiang）：

Grid Painter_v0 - OpenProcessing​www.openprocessing.org