码绘VS手绘（一） 编程与手绘的对比

2023-12-30 02:32
文章标签 编程 vs 对比 手绘 码绘

本文主要是介绍码绘VS手绘（一） 编程与手绘的对比，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

本文主要讲解在静态图方面如何分别通过手绘和码绘两种方式来表现，以及它们之间的差异与联系，谨以此博客记录学习过程。博主新手一枚，这是博主第一次写博文，若有不足之处，还请温柔拍打~~（笔芯~~）

手绘

在绘画之前，我们需要进行准备工作，准备素描纸、彩铅、铅笔；准备工作做好之后，我们需要想好构图，比如图中我先确定每一个图案大致位置，伞放在素描纸的右边，两个轮子在中下位置，且两个轮子大小不同，但是在画画过程中我没有具体确定两个轮子的具体比例，就凭感觉画；字体放在大轮子的左上方，四周散落大小位置都随机的气泡；然后开始设定整幅图的色彩，添上自己喜欢的色彩，在画气泡的时候，为了突出光影效果，给气泡留了高光（但仍然丑得很…）。

码绘

在这里插入图片描述

相比手绘来说，码绘比较客观。

准备工作，准备大小为1000×500的画布。

function setup() {    
createCanvas(1000, 500); 
}

开始画画，用draw函数开始进行画画，draw函数一般会调用多次，每调用一次，画一帧，也就是一幅图，图是实时更新的，默认每秒60次。

function draw() {   // put drawing code here    back();   Circle(400,400,180,180);   Circle(650,400,150,150);     umbrella();word(); }
functi

在draw函数中，使用调用子函数来画我们图片的每一个部分，我们先画出背景主要是气泡，再画两个轮子，要注意顺序，因为可能有遮挡关系。

function back(){  fill('rgba(111,222,173,0.5)');      ellipse(400, 50, 20,20);fill('rgba(151,100,173,0.5)');       ellipse(300, 60, 40,40);fill('rgba(221,100,133,0.5)');      ellipse(500, 100, 80,80);fill('rgba(100,221,133,0.5)');      ellipse(100, 400, 90,90);fill('rgba(70,221,73,0.5)');      ellipse(160, 350, 30,30);fill('rgba(221,221,73,0.5)');       ellipse(950, 450, 30,30);fill('rgba(221,221,30,0.5)');      ellipse(800, 470, 10,10);}

在画背景时，可以看到，为了能够让气泡处于不同位置，我们需要定义位置进行精确定义，ellipse(800, 470, 10,10);相当于使用圆规定点定尺寸画出一个圆，为了能够让气泡色彩更丰富，使用fill(‘rgba(221,221,73,0.5)’);相当于我们的彩铅，然后就可以画出气泡了。

对于画轮子、伞与字来说，是同样的方法。

function word()
{  
fill('rgba(230,173,162,1.0)'); textSize(20);  textStyle(ITALIC); text('Happy everyday',200 , 300);}

不过在画轮子时，我们只需要轮子大小位置改变，而不需要改变形状，就可以定义函数有关圆心半径的参数，改变大小时，只需要改变参数即可，就比较方便。

 function Circle(x,y,w,h)  {   //外廓   fill('rgba(230,163,162,1.0)');    ellipse(x, y, w, h);   fill('rgba(221,221,173,0.5)');     w1=w-20;    h1=h-20;    ellipse(x, y, w1, h1);fill('rgba(220,173,162,1.0)');    ellipse(x, y, 1/7*w,1/7* h);   fill('rgba(150,173,255,1.0)');   ellipse(x, y, 1/9*w,1/9* h);//   line(x-1/2*w1,y,x+1/2*w1,y);    line(x,y-1/2*h1,x,y+1/2*h1);        line(x-0.707*1/2*w1,y+0.707*1/2*h1,x+0.707*1/2*w1,y-0.707*1/2*h1);    line(x-0.707*1/2*w1,y-0.707*1/2*h1,x+0.707*1/2*w1,y+0.707*1/2*h1);}

画伞时，要注意伞柄与伞帽的绘画顺序。

function umbrella()
{        
translate(-50, 0, 0)   //伞柄
fill(102);   rect(900, 180, 10, 300,5,5,20,20);   fill('rgba(162,173,222,1.0)');   arc(900, 200, 300, 280, PI, TWO_PI);    fill(255);      arc(775, 200, 50, 30, PI, TWO_PI);    arc(825, 200, 50, 30, PI, TWO_PI);    arc(875, 200, 50, 30, PI, TWO_PI);   arc(925, 200, 50, 30, PI, TWO_PI);    arc(975, 200, 50, 30, PI, TWO_PI);    arc(1025, 200, 50, 30, PI, TWO_PI);//point    fill('rgba(142,143,240,0.35)');    ellipse(900, 50, 20,20);}

完整代码：

function setup() {    
createCanvas(1000, 500); 
}
function draw() {   // put drawing code here    back();   Circle(400,400,180,180);   Circle(650,400,150,150);     umbrella();word(); }
function word(){  
fill('rgba(230,173,162,1.0)');  
textSize(20);  
textStyle(ITALIC); text('Happy everyday',200 , 300);}    function Circle(x,y,w,h)  {    
//外廓    fill('rgba(230,163,162,1.0)');   ellipse(x, y, w, h);    fill('rgba(221,221,173,0.5)');     w1=w-20;   h1=h-20;    ellipse(x, y, w1, h1);fill('rgba(220,173,162,1.0)');ellipse(x, y, 1/7*w,1/7* h);ffill('rgba(150,173,255,1.0)');    ellipse(x, y, 1/9*w,1/9* h);line(x-1/2*w1,y,x+1/2*w1,y);    line(x,y-1/2*h1,x,y+1/2*h1);        line(x-0.707*1/2*w1,y+0.707*1/2*h1,x+0.707*1/2*w1,y-0.707*1/2*h1);   line(x-0.707*1/2*w1,y-0.707*1/2*h1,x+0.707*1/2*w1,y+0.707*1/2*h1);}
function umbrella(){       translate(-50, 0, 0)    fill(102);    rect(900, 180, 10, 300,5,5,20,20);    fill('rgba(162,173,222,1.0)');    arc(900, 200, 300, 280, PI, TWO_PI);    fill(255);      arc(775, 200, 50, 30, PI, TWO_PI);    arc(825, 200, 50, 30, PI, TWO_PI);    arc(875, 200, 50, 30, PI, TWO_PI);    arc(925, 200, 50, 30, PI, TWO_PI);    arc(975, 200, 50, 30, PI, TWO_PI);    arc(1025, 200, 50, 30, PI, TWO_PI);//point    fill('rgba(142,143,240,0.35)');    ellipse(900, 50, 20,20);}
function back(){ fill('rgba(111,222,173,0.5)');       ellipse(400, 50, 20,20);fill('rgba(151,100,173,0.5)');       ellipse(300, 60, 40,40);fill('rgba(221,100,133,0.5)');       ellipse(500, 100, 80,80);fill('rgba(100,221,133,0.5)');       ellipse(100, 400, 90,90);fill('rgba(70,221,73,0.5)');       ellipse(160, 350, 30,30);fill('rgba(221,221,73,0.5)');      ellipse(950, 450, 30,30);fill('rgba(221,221,30,0.5)');      ellipse(800, 470, 10,10);}

那到底码绘与手绘两者区别与联系是什么，可以从以下几个方面来考虑：

两者比较

(1）思路

手绘绘图要先准备好画具，然后想好构图，每个图在整张纸的大概位置，然后是具体绘画的物体比例，远近关系，以及绘画的先后顺序，然后开始画线条，最后上色；代码绘图也需要较为连贯的顺序，先创建画布，不过绘画某些物体时，一定要按照先后顺序，否则出来的效果会不同，所以也要确定绘画的物体的先后顺序，且画之前要先上色，绘画时分模块，在子函数画好后，用绘图函数调用，最后显示。

（2）技术

代码绘图，要掌握一些绘图函数，以及其中参数的运用，要能写代码，懂得代码的模块与流程，画一些复杂的图，可能还要自己编写函数；手绘绘图，需要绘画的工具，本次绘画用了圆规、纸、彩铅、橡皮擦、铅笔，这次绘画比较简单的图，也不需要特别好的技巧，能画线条上色就行。

（3）创作偏好

个人比较喜欢手绘绘图，手绘绘图灵活便捷；代码绘图时，如果对某些函数不熟悉，可能会限制创作，不过代码绘图运用方面广，可以运用到某些软件等等。

（4）创作体验

手绘绘图灵活方便，主观影响性较大，一些个人技法的运用不受限制，小灵感来了，也能及时记录下来，受众广泛，不过要想画出好看的图，还是需要一些时间来训练技巧；用p5.js代码绘图简单，入门快，比较客观，可以直接调用现成的函数，画一些简单的图，还是比较容易掌握，函数的熟练运用比较难，特别是一些自己算法的编写，还有代码调整比较麻烦，有时候会出现与自己预料不一样的结果。

以上，就是此次作画过程中，我个人的体验了~

参考资料：

  1. 《用代码画画》：(https://blog.csdn.net/magicbrushlv/article/details/77922119)
  2. 开始第一幅码绘—以编程作画的基本方法：[https://blog.csdn.net/magicbrushlv/article/details/77840565]
  3. 以编程的思想来理解绘画—— （一）用”一笔画“表现“过程美”
    https://blog.csdn.net/magicbrushlv/article/details/82634189

这篇关于码绘VS手绘（一） 编程与手绘的对比的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/551430。

相关文章

C#多线程编程中导致死锁的常见陷阱和避免方法

C#多线程编程中导致死锁的常见陷阱和避免方法

《C#多线程编程中导致死锁的常见陷阱和避免方法》在C#多线程编程中,死锁（Deadlock）是一种常见的、令人头疼的错误,死锁通常发生在多个线程试图获取多个资源的锁时,导致相互等待对方释放资源,最终形... 目录引言1. 什么是死锁？死锁的典型条件：2. 导致死锁的常见原因2.1 锁的顺序问题错误示例：不同
阅读更多...
PyCharm接入DeepSeek实现AI编程的操作流程

PyCharm接入DeepSeek实现AI编程的操作流程

《PyCharm接入DeepSeek实现AI编程的操作流程》DeepSeek是一家专注于人工智能技术研发的公司,致力于开发高性能、低成本的AI模型,接下来,我们把DeepSeek接入到PyCharm中... 目录引言效果演示创建API key在PyCharm中下载Continue插件配置Continue引言
阅读更多...
锐捷和腾达哪个好? 两个品牌路由器对比分析

锐捷和腾达哪个好? 两个品牌路由器对比分析

《锐捷和腾达哪个好?两个品牌路由器对比分析》在选择路由器时，Tenda和锐捷都是备受关注的品牌，各自有独特的产品特点和市场定位，选择哪个品牌的路由器更合适，实际上取决于你的具体需求和使用场景，我们从... 在选购路由器时，锐捷和腾达都是市场上备受关注的品牌，但它们的定位和特点却有所不同。锐捷更偏向企业级和专
阅读更多...
什么是 Ubuntu LTS？Ubuntu LTS和普通版本区别对比

什么是 Ubuntu LTS？Ubuntu LTS和普通版本区别对比

《什么是UbuntuLTS？UbuntuLTS和普通版本区别对比》UbuntuLTS是Ubuntu操作系统的一个特殊版本，旨在提供更长时间的支持和稳定性，与常规的Ubuntu版本相比，LTS版... 如果你正打算安装 Ubuntu 系统，可能会被「LTS 版本」和「普通版本」给搞得一头雾水吧？尤其是对于刚入
阅读更多...
TP-LINK/水星和hasivo交换机怎么选? 三款网管交换机系统功能对比

TP-LINK/水星和hasivo交换机怎么选? 三款网管交换机系统功能对比

《TP-LINK/水星和hasivo交换机怎么选?三款网管交换机系统功能对比》今天选了三款都是”8+1″的2.5G网管交换机，分别是TP-LINK水星和hasivo交换机，该怎么选呢？这些交换机功... TP-LINK、水星和hasivo这三台交换机都是”8+1″的2.5G网管交换机，我手里的China编程has
阅读更多...
C#反射编程之GetConstructor()方法解读

C#反射编程之GetConstructor()方法解读

《C#反射编程之GetConstructor()方法解读》C#中Type类的GetConstructor()方法用于获取指定类型的构造函数,该方法有多个重载版本,可以根据不同的参数获取不同特性的构造函... 目录C# GetConstructor()方法有4个重载以GetConstructor(Type[]
阅读更多...
Linux 网络编程 --- 应用层

Linux 网络编程 --- 应用层

一、自定义协议和序列化反序列化 代码： 序列化反序列化实现网络版本计算器 二、HTTP协议 1、谈两个简单的预备知识 https://www.baidu.com/ --- 域名 --- 域名解析 --- IP地址 http的端口号为80端口，https的端口号为443 url为统一资源定位符。CSDNhttps://mp.csdn.net/mp_blog/creation/editor
阅读更多...
【Python编程】Linux创建虚拟环境并配置与notebook相连接

【Python编程】Linux创建虚拟环境并配置与notebook相连接

1.创建 使用 venv 创建虚拟环境。例如，在当前目录下创建一个名为 myenv 的虚拟环境： python3 -m venv myenv 2.激活 激活虚拟环境使其成为当前终端会话的活动环境。运行： source myenv/bin/activate 3.与notebook连接 在虚拟环境中，使用 pip 安装 Jupyter 和 ipykernel： pip instal
阅读更多...
Android平台播放RTSP流的几种方案探究（VLC VS ExoPlayer VS SmartPlayer）

Android平台播放RTSP流的几种方案探究（VLC VS ExoPlayer VS SmartPlayer）

技术背景 好多开发者需要遴选Android平台RTSP直播播放器的时候，不知道如何选的好，本文针对常用的方案，做个大概的说明： 1. 使用VLC for Android VLC Media Player（VLC多媒体播放器），最初命名为VideoLAN客户端，是VideoLAN品牌产品，是VideoLAN计划的多媒体播放器。它支持众多音频与视频解码器及文件格式，并支持DVD影音光盘，VCD影
阅读更多...
【编程底层思考】垃圾收集机制，GC算法，垃圾收集器类型概述

【编程底层思考】垃圾收集机制，GC算法，垃圾收集器类型概述

Java的垃圾收集（Garbage Collection，GC）机制是Java语言的一大特色，它负责自动管理内存的回收，释放不再使用的对象所占用的内存。以下是对Java垃圾收集机制的详细介绍： 一、垃圾收集机制概述： 对象存活判断：垃圾收集器定期检查堆内存中的对象，判断哪些对象是“垃圾”，即不再被任何引用链直接或间接引用的对象。内存回收：将判断为垃圾的对象占用的内存进行回收，以便重新使用。
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2