p5.js绘制创意自画像
本文实例为大家分享了p5.js绘制自画像的具体代码，供大家参考，具体内容如下绘制结果人物头上的呆毛会一直运动，鼠标出现在画面上时左上角会有一个小猫咪头随着鼠标移动，而且人物的眼睛也会一直看向小猫的方向代码介绍整个图全部由贝塞尔曲线，直线和圆组成贝塞尔曲线的代码结构大概...
2022-05-15p5.js绘制旋转的正方形
使用p5.js绘制旋转的正方形，供大家参考，具体内容如下要还原的效果图首先建立画布大小，按照比例应该是5：3function setup() { createCanvas(500, 300);}设定矩形绘制格式，以及边线粗细function setup() { createCanvas(500, 300); rectMode(100); strokeWeight(4);}让我们根据画布坐标先把静态的图形画出来(关于颜色...
2022-05-15使用p5.js临摹动态图片
本文实例为大家分享了p5.js临摹动态图片的具体代码，供大家参考，具体内容如下1、临摹图片2、图像运动规律原图中一共有36个等大的四分之三圆形，按照一定的规律转动，可以等效为圆形不动，每个圆上有以其半径为边长的矩形在绕圆形的原点转动，每四个为一组，其他部分都是在重复这四个的...
2022-05-07思索 p5.js 的最佳实践
思索 p5.js 的最佳实践本文写于 2020 年 12 月 18 日p5.js 是一个 JavaScript 库，用于为艺术家、设计师提供更容易上手的创意编程。它有着完整的一套基于 Canvas 的作画功能，并且你可以把整个浏览器都当成你的“画布”——利用 p5.dom.js 可以很方便地与其他 HTML 元素进行交互；利用 p5.sound.js 可以很简单的...
2020-12-20
js创建对象的5种方式
1、创建简单对象：使用对象字面量{}创建对象。2、用function(函数)模拟class(无参构造函数)。3、使用工厂创建(Object关键字)。4、prototype关键字采用原型对象。5、混合模式(原型和构造函数)。实例function Person(name,age,job){ this.name = name; this.age = age; this.job = job; this.sayname = function(...
2022-06-10p5.js临摹动态图形实现方法详解
使用p5.js临摹一个动态图形并作出拓展，供大家参考，具体内容如下原图形由内向外，白色圆的半径依次增大，黑色圆的半径不变；白色圆在上一个白色圆碰到之前就开始增大半径；图中只能存在一个周期的变化；临摹图形使用P5.js，依照上文的规律进行临摹画12对圆；相邻圆之间半径差为25；白...
2022-05-13
5个js编程风格错误汇总
使你的代码可读和可维护的快速提示。有多少次，你打开一个旧的项目，发现混乱的代码，当你添加一些新的东西时，很容易崩溃？我们都有过这样的经历。为了减少难以读懂的javascript的数量，我提供了以下示例。这些都是我过去所犯过的错误。对具有多个返回值的函数使用数组解构假设我...
2020-09-07
【JS】赏析艺术系同学的p5js作品
一、1号1号的像素风作品非常喜欢。再加上交互背景挪动小人可以在背景板刷上七彩色，非常好看。二、29号人物的表情、动作、配饰做的都很好。整幅图风格鲜明，看起来很有趣。三、58号交互很有意思，很酷。四、15号交互很好，贼有个性。五、42号挺好看的整体。艺术同学虽然大多没有编程...
2020-11-24p5.js实现斐波那契螺旋的示例代码
本篇文章主要介绍了p5.js实现斐波那契螺旋的示例代码，分享给大家，也给自己做个笔记效果如下：主要方法translate()rotate()arc()斐波那契螺旋斐波那契螺旋线也称“黄金螺旋”，是根据斐波那契数列画出来的螺旋曲线，以斐波那契数为边的正方形中画一个90度的扇形，连起来的弧线就是斐波那契...
2022-05-28
【JS】使用p5.js画出动画滑稽碰撞图
使用p5.js做了一个动态碰撞的滑稽笑脸，效果如图首先是定义了一个画滑稽的函数，其中参数分别是滑稽的横纵坐标、大小以及眼珠的朝向，L可取-1和1两个值，-1向右，1向左。脸用了两个填充的圆重叠（也可一个圆加边框）。嘴和眼睛以及眉毛是分别画两个圆弧相重叠而成。function huaji(x,y,size,l){noStrok...
2020-11-24使用p5.js实现动态GIF图片临摹重现
前言根据互动媒体技术老师的实验要求，临摹了一张GIF动态图，使用p5.js进行重现。博客里面会有实现逻辑以及实现代码，在最后还会有一张自己实现的扩展图。原图实现步骤规律总结1、观察图片可以看到，整个图是由两个部分组成的，其中一个是棍状体，一个是螺旋状体。2、棍状体从外到内越...
2022-05-08
js绘制一条直线并旋转45度
本文实例为大家分享了js绘制一条直线并旋转45度的具体代码，供大家参考，具体内容如下绘制一条直线，并旋转45度html 页面<canvas id="canvas" width="300" height="300" style="background-color: orange;"></canvas>js页面<script> var canvas = document.getElementById("canvas"); var cxt = canvas.getContext('2d'); ...
2021-11-02基于p5.js 2D图像接口的扩展（交互实现）
本文为大家分享了基于p5.js 2D图像接口的扩展，供大家参考，具体内容如下一、心跳笔刷组织结构：1.纵坐标取一定范围内的随机值，横坐标按规律递增。基本用法：1、按住鼠标左键画出一条心跳线，松开鼠标左键，随机心跳线确定2、按空格键清除画面let isButtonRight = false;let make = null;let root = nu...
2021-10-27
