让代码“动”起来

最新推荐文章于 2021-09-29 17:23:57 发布

小夕由

最新推荐文章于 2021-09-29 17:23:57 发布

阅读量942

点赞数

CC 4.0 BY-SA版权

分类专栏： P5.js 文章标签： p5.js 艺术创作码绘

本文链接：https://blog.youkuaiyun.com/qq_40974751/article/details/84310641

P5.js 专栏收录该内容

3 篇文章

订阅专栏

本文探讨了静态图与动态图的区别，强调动态图在展现运动规律方面的优势。通过使用p5.js，作者展示了如何通过代码让图像动起来，利用循环、坐标轴变换等技巧创造动态效果。动态创作结合数学知识，使作品更富趣味性和多样性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、、数学 + 一、、代码

在这里插入图片描述
上篇文章中简单比较了手绘和码绘不同与效果手绘vs码绘

在这篇文章中我们将继续讨论手绘和码绘的差异，手绘是可以随心所欲地画，但是却缺乏动感，我们只能通过脑部画面来体会画家所要表达的动感，但是码绘不同，我们可以直接将动态表现出来， GO ! ! !

首先，先哲学一波，谈谈运动

事物的运动是有规律的哲学观点是世界上万事万物的运动中概括出来的结论，在哲学上一般把世界上的万事万物分为自然界、人类社会和人的思维三个方面。

（1）自然界的运动是有规律的。无论是无机物，还是有机物，无论是生物，还是非生物其运动都是有规律的。如万有引力规律、遗传与变异规律等。

（2）人类社会的运动是有规律的。在生产关系一定要适应生产力状况规律的支配下，人类社会由低级阶段向高级阶段发展。

（3）人类认识的发展是有规律的。实践、认识、再实践、再认识这种形式循环往复以至无穷的发展，就是人类认识发展的道路和规律。

由以上的分析可以看出，一切事物的运动都是有规律的。
所以说我们所表现的图片也应该让它动起来，掌握运动规律，这样才更加有意思！

比较静态和动态的效果

首先来看张手绘的八卦图

是不是特别单调，我们加个背景
在这里插入图片描述
还是不好，缺乏灵动性，我们让八卦动起来吧

码绘：

加了点星星，更有动感
在这里插入图片描述

我们还可以调个参数在这里插入图片描述
不行，看着有点晕，还是上一个好

代码如下：
首先设置画布

var img;
 function preload() {
   img = loadImage('/js/1.jpg');
 }

function setup() {
    createCanvas(windowWidth, windowHeight - 4);
    diam = height / 2;
    noStroke();
    
}

我们看一下具体的画八卦代码 draw()

    var c = get(windowWidth/2, 90);
    push();
    translate(width / 2, height / 2);
    rotate(theta);
    fill(0);
    arc(0, 0, diam, diam, PI / 2, PI + PI / 2);
    fill(255);
    arc(0, 0, diam, diam, PI + PI / 2, TWO_PI + PI / 2);

    fill(0);
    ellipse(0, -diam /4, diam / 2, diam / 2);
    fill(255);
    ellipse(0, diam / 4, diam / 2, diam / 2);

    fill(255);
    ellipse(0, -diam / 4, diam / 8, diam / 8);
    fill(0);
    ellipse(0, diam / 4, diam / 8, diam / 8);
 
    pop();
    translate(width / 2, height / 2);
    stroke(0);
    strokeWeight(12.0);
    strokeCap(SQUARE);
    
    line(-diam /5,-diam/9*6 , diam / 5, -diam/9*6 );
    line(-diam /5,-diam/9*5 , diam / 5, -diam/9*5 );
    line(-diam /5,-diam/9*7 , diam / 5, -diam/9*7 );

    for(var i=0;i<7;i++)
    {
    rotate(PI/4);
    
    line(-diam /5,-diam/9*6 , diam / 5, -diam/9*6 );
    line(-diam /5,-diam/9*5 , diam / 5, -diam/9*5 );
    line(-diam /5,-diam/9*7 , diam / 5, -diam/9*7 );
    }
    stroke(c);
    line(-diam /20,-diam/9*5 , diam / 20, -diam/9*5 );
    rotate(PI/4*2);
    line(-diam /20,-diam/9*5 , diam / 20, -diam/9*5 );
    rotate(PI/4*3);
    line(-diam /20,-diam/9*5 , diam / 20, -diam/9*5 );
    rotate(PI/4);
    line(-diam /20,-diam/9*5 , diam / 20, -diam/9*5 );
    line(-diam /20,-diam/9*6 , diam / 20, -diam/9*6 );
    rotate(PI/4);
    line(-diam /20,-diam/9*6 , diam / 20, -diam/9*6 );
    rotate(PI/4*2);
    line(-diam /20,-diam/9*6 , diam / 20, -diam/9*6 );
    rotate(PI/4);
    line(-diam /20,-diam/9*6 , diam / 20, -diam/9*6 );
    line(-diam /20,-diam/9*7 , diam / 20, -diam/9*7 );
    rotate(PI/4);
    line(-diam /20,-diam/9*7 , diam / 20, -diam/9*7 );
    rotate(PI/4*2);
    line(-diam /20,-diam/9*7 , diam / 20, -diam/9*7 );
    rotate(PI/4*2);
    line(-diam /20,-diam/9*7 , diam / 20, -diam/9*7 );

    noStroke();
    theta += TWO_PI / frames;

我们再来看一幅图
在这里插入图片描述
让它动起来应该很好玩，我们来实现一下还有忽明忽暗的感觉

更改参数，形成环状

还可以在代码中更改颜色

在这里插入图片描述

静态图vs动态图

从上面的对比中我们可以明显地感觉到差异

从时间上讲：简单的静态图让人眼停留的时间最多只有一秒，而动态图我们会一直盯着它的变化，还会不自觉寻找它的运动规律
从用途上讲：动态图运用的场景更加多，有的还可以达到催眠的效果
从绘画技巧上：静态图我们只需要勾勒具体的轮廓结构，而动态图我们要明确它的运动规律更加的复杂
从效果上：静态图较之动态图效果差

总结

本次的分享中主要用到for循环来实现重复的事件。

在push（）pop（）中进行translate()，rotate()，scale()变换(坐标轴变换)来达到动态的效果。
让静态变动态是不是更加富有趣味，只要小小地改动一下参数，就可以有多种变化，呈现方式丰富多彩。
动态的创作得先观察运动的规律，这个就需要用到数学的知识，通过循环重复的方式呈现出来。
在生活中重复一件事情我们会感到乏味，但是在代码编程方面，一个循环实现重复事件，给我们带来了许许多多的便利。
我们有时候对自己画的画可能会觉得无聊，但是若是画中人会眨眼睛或者微笑是不是会好玩很多，P5.js工具、Processing、CSS可以让画动起来，与其说是画，不如说是代码！

看代码在跳舞！！

参考资料：

事物运动是有规律的 https://www.cnblogs.com/feng9exe/p/7358985.html
《开始第一幅“码绘”——掌握大杀器”循环“，一招搞定百千万个懵逼脸》 magicbrushlv
https://blog.youkuaiyun.com/magicbrushlv/article/details/77917540
《开始第一幅“码绘”——用时间控制变量，让懵逼脸动起来》magicbrushlv
https://blog.youkuaiyun.com/magicbrushlv/article/details/77895290
用p5.js做的绘画编辑器(这是在学习时看到的，很有意思)
一个好玩的东西
《Getting Started with p5.js 》pdf版
Daniel Shiffman 的教学视频，丹叔很有热情的看丹叔

分享就到这里啦 ~