用P5 JS绘制二维动画场景——静态篇

最新推荐文章于 2024-08-09 21:00:00 发布

amazing_coding

最新推荐文章于 2024-08-09 21:00:00 发布

阅读量1.3k

点赞数 2

本文链接：https://blog.csdn.net/qq_40427180/article/details/84388690

版权

绘画

根据wiki百科的定义，绘画是在技术层面上，是一个以表面作为支撑面，再在其之上加上颜色的行为，那些表面可以是纸张、油画布、木材、玻璃、漆器或混凝土等，加颜色的工具可以是画笔、也可以是刀、海绵或是油漆喷雾器等。在艺术用语的层面上，绘画的意义亦包含利用此艺术行为再加上图形、构图及其他美学方法去达到表现出从事者希望表达的概念及意思。

简单地说：绘画作为人类表达思维的手段，作为思维结论的承载体与思想信息传播的媒介，是最原始、最基础也最通用的方式。

“绘画”所承担的使命是经过人类文明的发展逐步进入“表达意义与思想”那样的高度与深度，而它最早所承担的责任，主要就是“记录”。甚至发展到了文艺复兴前后，“绘画”这种手段仍然负担了人类社会中绝大部分的记录任务。因此如何把绘画“图像”画得“像真的一样”，成为许多艺术家（尤其西方画家）的毕生追求。在此阶段，“绘画”的主要表现形式从单纯的“记录”发展到“再现”（当然，也可以称之为“呈现”）——尽可能逼真的再现人们眼中所看到的世界。这个现象充分体现在绘画科学原理的发展历程中。

比如：

乔治·秀拉 (1859–91)的《马戏团杂耍》
在这里插入图片描述
中国明朝陈洪绶绘制的《玉堂柱石图》

除了手绘以外，近年来，在计算机技术发展的过程中，出现了以计算机为主的艺术创作载体。计算机绘画（简称码绘）作为一种独特的绘画形式，它区别在于一般的纸上绘画，它是用计算机的技术手段和技巧进行创作完成的，美观程度也堪比传统绘画。它不仅能产生有特艺术风味的绘画作品，还在一些实用领域得到应用。如在电视广告、电影动画、飞行模拟器、建筑、纺织器、美术装璜、图案设计等方面都有应用。码绘是用代码和逻辑以及图形学算法来实现图像的呈现，它可以实现一些手绘无法达到的效果。

比如：交互式的梵高《星空》：
在这里插入图片描述

绘画的表现方式和绘画手法千差万别，那么手绘和码绘两者之间到底有什么异同之处呢？这就是我们接下来将要探究的问题。

基于课程作业，手绘使用的是铅笔绘制，而码绘使用的是p5.js来绘制图像。

我们先来看看最终的实现的效果图

码绘作品 在这里插入图片描述

代码的实现比较简单，使用的p5.js中的几何绘图函数，这里贴出绘制场景的函数和主函数供大家参考。对p5.js或者processing有兴趣的朋友可以参考西河某人的博客p5.js入门教程(1) p5.js简介&基本形状绘制

主函数设置好绘图面板的属性参数以及自己编写的绘图函数的调用

function setup() {
    createCanvas(400, 400);
    }
    function draw() {
    background(220);
    stroke(255,128,128); //线条颜色
    strokeWeight(2); //线条粗细
    fill(255,255,0); // 填充颜色
    stroke(0);
    noStroke(); //不画线条
    fill(50,10,50);
    rect(0, 403, 800, 20); 
    translate(0,56,0);
    man();
    circle();
    }

场景绘制函数


    function scene()
    {
    stroke(0,0,0); 
    strokeWeight(10); 
    fill(255,0,0); 
    line(60,30,60,400);
    strokeWeight(15);
    ellipse(30,180,150,150);
    strokeWeight(6);
    line(150,130,150,400);
    noStroke();
    ellipse(60,10,70,70);
    fill(0,0,0);
    ellipse(150,110,45,45);
    stroke(0,0,0); 
    strokeWeight(18); 
    fill(255,255,255);
    ellipse(460,250,165,166); 
    strokeWeight(4);
    line(500,180,500,-100);
    line(450,-100,450,80);
    noStroke();
    fill(255,255,255);
    ellipse(450,80,30,30);
    }

手绘作品（忽视拙劣的画技）
在这里插入图片描述

基于上述两幅画，我们可以从以下几个方面来谈谈手绘与码绘的异同

（1）创作技法

手绘的技巧是日积月累的，在每一次的重复的过程中，绘画的技能得到提升，而码绘需要对算法的理解和钻研，尤其是对数学的理解，将数学知识理解透彻之后，绘制作品时，在代码的逻辑方面会更加清晰。

（2）创作理念

创作是一个严谨的设计过程，创作理念其实和很多艺术创作根源是一样,它蕴含了你在绘画时想表达思想内容，想给欣赏者传递什么信息并在意识上交汇产生共鸣，在确定这些以后用什么的绘画风格来表现绘画主题内容。这是创作前期都要进行一系列的准备，不论是手绘还是码绘，这都是你绘画之前的一个重要的环节。此次静态图形绘制的理念是“如何用简单的几何图形来展现画面感”。

（3）创作体验

在创作过程中，你的主体精神应该蕴含在作品中，艺术创作中所体现出来的艺术特色和鲜明的创作个性，是情感的积累和体现，是创作者在实践中逐渐形成的相对稳定的艺术风貌。在表达你的创作理念时，会发现手绘和码绘在创作方式上还是有很大区别的，手绘是用你的画笔和你的创作灵感来展现你的想法，给人的感觉更随性，在绘图过程中，想要修改图形，一般来说比编程修改图形更为简单，在编程过程中，牵一发而动全身，一旦某个地方发生了改变，那么其他很多参数也要相应发生改变，更加复杂和繁琐。而码绘是通过代码和其中的逻辑结构来实现创作，更具有过程性，编程绘画给人体现的是一个过程性的东西，而手绘虽然也有过程，但是人们往往看到的是一个最终的结果。

（4）呈现效果

在最终的呈现上，实现的用点、线、圆而构成的一个二维场景，有点像简单的二维小游戏的追逐画面，总的来说，码绘的画面还是勉强能看的，（手绘因为没有水彩所以比较粗糙）。手绘时，你可以随意的挥洒你的笔墨水彩来体现你的创作灵感，这也是数千年历史积淀在书法家心灵中的高能反映，体现在线条中的微妙之处，给人以无限的遐思。码绘比较公式化，但是打开你的思维空间，实现有趣的算法，绘制的图像会有不一样的惊喜。