手绘与码绘(二)

编程与手绘的对比

上一篇文章我们简单的进行了编程与手绘的对比，但是仅仅停止在静态的画上，这次我将使用p5.js程序让画动起来！

运行环境

JavaScript+p5.js

 

手绘

手绘如图：

 

使用P5.js进行绘制

 

详情见上一篇文章：https://blog.csdn.net/qq_38972566/article/details/84201062

使用P5.js动态化

主要代码：

function drawCat(ac) {

    if (ac.eyeOffsetX < -10) {

        dx = 1;

    } else if (ac.eyeOffsetX > 0) {

        dx = -1;

    }

    if (ac.eyeOffsetY < -50) {

        dy = 1;

    } else if (ac.eyeOffsetY > 0) {

        dy = -1;

    }

    ac.eyeOffsetX += dx * 1;

    ac.eyeOffsetY += dy * 1;

    ac.huziOffsetX += dx * 0.2;

    ac.huziOffsetY += dy * 0.2;

    strokeWeight(4)

    fill(30, 144, 255);

    ellipse(400, 300, 400, 400); //头

    fill(255);

    ellipse(400, 350, 300, 300); //脸

    ellipse(366, 220, 65, 100); //眼眶

    ellipse(434, 220, 65, 100);



    fill(255, 0, 0); //鼻子

    ellipse(400, 267, 30, 30);





    //胡子

    line(430, 295, 490 + ac.huziOffsetX, 280 + ac.huziOffsetY);

    line(430, 315, 500, 312);

    line(430, 335, 487, 340);



    line(370, 295, 310 - ac.huziOffsetX, 280 + ac.huziOffsetY);

    line(370, 315, 300, 312);

    line(370, 335, 313, 340);



    fill(0);

    ellipse(371 + ac.eyeOffsetX, 248 + ac.eyeOffsetY, 25, 25); //眼睛

    ellipse(429 - ac.eyeOffsetX, 248 + ac.eyeOffsetY, 25, 25);



    noFill();

    line(400, 282, 400, 388);

    arc(400, 240, 300, 300, QUARTER_PI, HALF_PI + QUARTER_PI);

}



function animateConfig() {

    this.eyeOffsetX = 0;

    this.eyeOffsetY = 0;

    this.huziOffsetX = 0;

    this.huziOffsetY = 0;

    this.dirx = Math.random();

    this.diry = Math.random();

}





var acs = [];

for (var i = 0; i < 50; i++) {

    acs.push(new animateConfig());

}

var dx = 1;

var dy = -1;

var ac=new animateConfig();

function draw() {

    drawCat(ac);

}

效果：

 

更多的效果：

代码：

var r=0;
var v=1;
function draw() {
    background(255);
    scale(0.3, 0.3);
    for (var i = 0; i < acs.length; i++) {
        push();
        translate(800, 600);
        translate(p5.Vector.fromAngle(millis() / (1000/v) + i, r));
        drawCat(acs[i]);
        pop();
    }
}
var ct=setInterval(function(){
    if(r>400){
        clearInterval(ct);
    }
    r+=1;
},10)
window.onload=function(){
    var buttons=document.getElementsByClassName("r");
    for(var i=0;i<buttons.length;i++){
        buttons[i].onclick=function(){
            if(this.innerText=="+"){
                r+=10;
            }else{
                r-=10;
            }
        }
    }
    var buttons2=document.getElementsByClassName("v");
    for(var i=0;i<buttons2.length;i++){
        buttons2[i].onclick=function(){
            if(this.innerText=="+"){
                v+=0.1;
            }else{
                v-=0.1;
            }
        }
    }
}

并且可以通过html的按钮控制旋转半径和速度。

总结

    关于动态画，手绘的表现明显有不足，单一的手绘体现不出动态的效果，只能使用多张画来体现，而这种体现就类似于动画的关键帧。相反，使用编程进行动态画的绘制则要简单许多，通过不同时间不同参数的变化，就能让图画动起来。而且编程的随机性和周期性可以让动画具有意料之外的效果。另一方面，在进行创作的过程中，编程需要严谨的逻辑，按照编程的语法进行创作，而手绘只是按照心思绘制就行了。但是手绘的优点是它更能表达绘画者的情感，在绘制过程中绘画者会投入更多的情感。