有趣的绘画系统

最新推荐文章于 2018-12-30 22:55:35 发布

qq_38972566

最新推荐文章于 2018-12-30 22:55:35 发布

阅读量245

点赞数

本文链接：https://blog.csdn.net/qq_38972566/article/details/85331476

版权

简介

本次我继续用码绘的思想来编写了一个绘画系统，此绘画系统将着重于动态和交互，希望呈现与众不同的效果。

编程环境

使用html+js+p5.js编写，所以通过浏览器即可以打开。

功能介绍

UI界面：

基础笔：不添加任何效果，通过touchStarted和touchMoved并且根据鼠标位置创建基础物体圆item

创建item并存储进地图中，便于以后使用，此处的效果和传统的手绘基本一样，这里的item就相当于手绘的颜料单位一样。显示效果如下：

添加阴影和动态大小变化后的效果如下：

从这里开始，我们就发现通过码绘能达到手绘无法达到的动态效果。

点击随机震动复选框可以达到一种震动效果，并且可以与上述功能叠加。

点击弹跳运动，可以产生一种弹跳效果，可以与上述功能叠加。

渐进笔：越先画出的点会越小，效果如图：

工具笔：圆周运动，选择圆周运动单选框，点击画布上某一点，会绘制一个圆，该圆周围的点会绕其旋转

效果如图：

引力运动：选择引力运动单选框，点击画布上某一点，各点会运动向该点，反复运动

效果如图：

中心对称：将画布分成规定的几个部分，然后在一个部分绘制图像时，其它部分绘画出中心对称的图像，可以点击随机颜色产生更加色彩丰富的效果：

另外除了上述功能外，还有诸多改变颜色，大小，截图，保存之类的基础功能，这里不在介绍。

实现简述：

基础物体类，绘制的单位圆

function items(x, y, size, color, velocity = 1) {

    this.x = x; //x坐标
    this.y = y; //y坐标
    this.size = size; //大小
    this.start_size = size;
    this.color = color; //颜色
    this.velocity = velocity; //速度
    this.direction = createVector(Math.random() * 2 - 1, Math.random() * 2 - 1); //方向-1到1
    this.target = null; //目标点
    //做表更新函数，同时更新item_map
    this.updatePos = function (x, y) {
        if (item_map) {
            item_map.refresh(this, x, y);
        }
        this.x = x;
        this.y = y;
    }
}

动画管理类Animator，动画类Animation，存储物体的地图ItemMap类。

通过变量pen的改变切换不同的模式。在window.onload中为html中各个ui组件绑定事件。

Setup()中初始化了画布

draw() 进行每一帧的绘制

touchMoved()和touchStarted()中添加item。

各类和函数详见源代码。