星空绘画系统

一、开发环境

Chrome浏览器、window 10、vs code

二、应用框架

h5 canvas、jquery框架

三、开发背景

码绘和手绘是不同的艺术形式。如今，和计算机的交互方式越来越多元化，除了鼠标键盘操作以外，数位板、leap motion动作捕捉装置、VR头盔等等新型交互设备也逐渐兴起。在追求传统绘画的同时，也需要顺应技术发展，将传统的绘画加工后以更加新颖的方式呈现。

四、内容综述

实现了绘画系统中的常见操作，增加了几种笔刷。

五、实现过程

笔刷一：实现了基本的铅笔操作

function draw_pencil() {
    canvas.onmousedown = (e) => {
        let ctx = canvas.getContext('2d');
        let ele = windowToCanvas(canvas, e.clientX, e.clientY);
        x = ele.x;
        y = ele.y;
        ctx.beginPath();
        ctx.moveTo(ele.x, ele.y);
        isAllowDraw = true;
        canvas.onmousemove = (e) => {
            if (isAllowDraw) {
                let ele = windowToCanvas(canvas, e.clientX, e.clientY);
                ctx.strokeStyle = color.value;
                ctx.lineTo(ele.x, ele.y);
                ctx.stroke();
            }
        };
        canvas.onmouseup = (e) => {
            isAllowDraw = false;
        };
    };
}

笔刷二：实现了同心圆操作（起点和滑动点距离为半径，起点为圆心）

function draw_cicle1() {
    canvas.onmousedown = (e) => {
        let ctx = canvas.getContext('2d');
        let ele = windowToCanvas(canvas, e.clientX, e.clientY);
        x = ele.x;
        y = ele.y;
        isAllowDraw = true;
        canvas.onmousemove = (e) => {
            if (isAllowDraw) {
                let ele = windowToCanvas(canvas, e.clientX, e.clientY);
                ctx.strokeStyle = color.value;
                ctx.beginPath();
                ctx.arc(x, y, Math.sqrt(Math.pow(ele.x - x, 2) + Math.pow(ele.y - y, 2)), 0, Math.PI * 2);
                ctx.stroke();
            }
        };
        canvas.onmouseup = (e) => {
            isAllowDraw = false;
        };
    };
}

笔刷三：实现了扩散圆操作（起点和滑动点距离为半径，滑动点为圆心）

function draw_cicle2() {
    canvas.onmousedown = (e) => {
        let ctx = canvas.getContext('2d');
        let ele = windowToCanvas(canvas, e.clientX, e.clientY);
        x = ele.x;
        y = ele.y;
        isAllowDraw = true;
        canvas.onmousemove = (e) => {
            if (isAllowDraw) {
                let ele = windowToCanvas(canvas, e.clientX, e.clientY);
                ctx.strokeStyle = color.value;
                ctx.beginPath();
                ctx.arc(ele.x, ele.y, Math.sqrt(Math.pow(ele.x - x, 2) + Math.pow(ele.y - y, 2)), 0, Math.PI * 2);
                ctx.stroke();
            }
        };
        canvas.onmouseup = (e) => {
            isAllowDraw = false;
        };
    };
}

笔刷四：实现了时间圆操作（圆的半径随时间增大而增大）

function draw_cicle3() {
    canvas.onmousedown = (e) => {
        let ctx = canvas.getContext('2d');
        let timeOut = 0; let time = 0;
        isAllowDraw = true;
        canvas.onmousemove = (e) => {
            if (isAllowDraw) {
                let ele = windowToCanvas(canvas, e.clientX, e.clientY);
                timeOut = window.setInterval(() => {
                    time += 0.1;
                }, 1);
                ctx.beginPath();
                ctx.fillStyle = color.value;
                ctx.arc(ele.x, ele.y, time / 100, 0, Math.PI * 2);
                ctx.stroke();
            }
        };
        canvas.onmouseup = (e) => {
            isAllowDraw = false;
            window.clearInterval(timeOut);
        };
    };
}

笔刷五：实现了三角圆操作（圆的半径和位置有关r=sin(x*x+y*y)）

function draw_cicle4() {
    canvas.onmousedown = (e) => {
        let ctx = canvas.getContext('2d');
        let ele = windowToCanvas(canvas, e.clientX, e.clientY);
        x = ele.x;
        y = ele.y;
        isAllowDraw = true;
        canvas.onmousemove = (e) => {
            if (isAllowDraw) {
                let ele = windowToCanvas(canvas, e.clientX, e.clientY);
                ctx.strokeStyle = color.value;
                ctx.beginPath();
                ctx.arc(ele.x, ele.y, 20 * Math.sin(Math.pow(ele.x - x, 2) + Math.pow(ele.y - y, 2)), 0, Math.PI * 2);
                ctx.stroke();
            }
        };
        canvas.onmouseup = (e) => {
            isAllowDraw = false;
        };
    };
}

笔刷六：实现了扩散线的操作

function draw_line1() {
    canvas.onmousedown = (e) => {
        let ctx = canvas.getContext('2d');
        let ele = windowToCanvas(canvas, e.clientX, e.clientY);
        x = ele.x;
        y = ele.y;
        isAllowDraw = true;
        canvas.onmousemove = (e) => {
            if (isAllowDraw) {
                ele = windowToCanvas(canvas, e.clientX, e.clientY);
                ctx.beginPath();
                ctx.moveTo(x, y);
                ctx.fillStyle = color.value;
                ctx.lineTo(ele.x, ele.y);
                ctx.stroke();
            }
        };
        canvas.onmouseup = (e) => {
            isAllowDraw = false;
        }
    };
}

笔刷七：实现了不确定线操作

function draw_line2() {
    canvas.onmousedown = (e) => {
        let ctx = canvas.getContext('2d');
        let ele = windowToCanvas(canvas, e.clientX, e.clientY);
        let x1 = ele.x;
        let y1 = ele.y;
        let x2, y2;
        let timeOut = 0;
        isAllowDraw = true;
        canvas.onmousemove = (e) => {
            timeOut = setInterval(function () {
                if (timeOut % 10 == 0) {
                    x1 = ele.x;
                    y1 = ele.y;
                } else {
                    x2 = ele.x;
                    y2 = ele.y;
                }
            }, 100);
            if (isAllowDraw) {
                ele = windowToCanvas(canvas, e.clientX, e.clientY);
                ctx.beginPath();
                ctx.moveTo(x1, y1);
                ctx.fillStyle = color.value;
                ctx.lineTo(x2, y2);
                ctx.stroke();
            }
        };
        canvas.onmouseup = (e) => {
            isAllowDraw = false;
            clearInterval(timeOut);
        }
    };
}

以上就是所有笔刷操作。都有一个共同点：重复。

六、创作思路及对比思考

灵感来源于“重复”。计算机与人类相比，其最大的优势在于可以毫不懈怠的重复一项简单的工作——计算，所有简单而重复的工作几乎都能利用计算机代替完成。手绘也是如此，重复使用大量线条刻画一个形体，或者一个场景其实也是一个重复的过程，即使线条之间的关系有区别，但仍旧可以找到相似的规律。例如，速写画的轨迹会比较不确定，线条之间的疏松感较强，则可以根据这一特点刻画“不确定线”。人物形体可以抽象为一个个圆柱体形，进一步抽象到曲面，可以看作一个个不同半径的小圆组成，由此可以用“时间圆”刻画体型。

 

以上是一张宇宙星空图。使用了一个笔刷“同心圆笔刷”。对比手绘星空图，码绘的星空图，星球会比较分散，但是呈现出一定的规律，以中心为圆心，向周围辐射的同心圆，而事实上这张星空图也正是这样画出的。而手绘呈现更多的无规律性。如下图：

参考：

1.图元模型：

https://github.com/magicbrush/DrawingByCodingTutorialDemos

2.什么是绘画？——以抽象思维理解绘画

https://blog.csdn.net/magicbrushlv/article/details/83858469