码绘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。

相关文章

揭秘Python Socket网络编程的7种硬核用法

揭秘Python Socket网络编程的7种硬核用法

《揭秘PythonSocket网络编程的7种硬核用法》Socket不仅能做聊天室,还能干一大堆硬核操作,这篇文章就带大家看看Python网络编程的7种超实用玩法,感兴趣的小伙伴可以跟随小编一起... 目录1.端口扫描器：探测开放端口2.简易 HTTP 服务器：10 秒搭个网页3.局域网游戏：多人联机对战4.
阅读更多...
Java并发编程必备之Synchronized关键字深入解析

Java并发编程必备之Synchronized关键字深入解析

《Java并发编程必备之Synchronized关键字深入解析》本文我们深入探索了Java中的Synchronized关键字,包括其互斥性和可重入性的特性,文章详细介绍了Synchronized的三种... 目录一、前言二、Synchronized关键字2.1 Synchronized的特性1. 互斥2.
阅读更多...
Python实现Microsoft Office自动化的几种方式及对比详解

Python实现Microsoft Office自动化的几种方式及对比详解

《Python实现MicrosoftOffice自动化的几种方式及对比详解》办公自动化是指利用现代化设备和技术,代替办公人员的部分手动或重复性业务活动,优质而高效地处理办公事务,实现对信息的高效利用... 目录一、基于COM接口的自动化（pywin32）二、独立文件操作库1. Word处理（python-d
阅读更多...
Java常用注解扩展对比举例详解

Java常用注解扩展对比举例详解

《Java常用注解扩展对比举例详解》：本文主要介绍Java常用注解扩展对比的相关资料,提供了丰富的代码示例,并总结了最佳实践建议,帮助开发者更好地理解和应用这些注解,需要的朋友可以参考下... 目录一、@Controller 与 @RestController 对比二、使用 @Data 与 不使用 @Dat
阅读更多...
python中字符串拼接的几种方法及优缺点对比详解

python中字符串拼接的几种方法及优缺点对比详解

《python中字符串拼接的几种方法及优缺点对比详解》在Python中,字符串拼接是常见的操作,Python提供了多种方法来拼接字符串,每种方法有其优缺点和适用场景,以下是几种常见的字符串拼接方法,需... 目录1. 使用 + 运算符示例：优缺点：2. 使用&nbsjsp;join() 方法示例：优缺点：3
阅读更多...
Python异步编程中asyncio.gather的并发控制详解

Python异步编程中asyncio.gather的并发控制详解

《Python异步编程中asyncio.gather的并发控制详解》在Python异步编程生态中,asyncio.gather是并发任务调度的核心工具,本文将通过实际场景和代码示例,展示如何结合信号量... 目录一、asyncio.gather的原始行为解析二、信号量控制法：给并发装上"节流阀"三、进阶控制
阅读更多...
C++ 各种map特点对比分析

C++ 各种map特点对比分析

《C++各种map特点对比分析》文章比较了C++中不同类型的map（如std::map,std::unordered_map,std::multimap,std::unordered_multima... 目录特点比较C++ 示例代码 ​​​​​​代码解释特点比较1. std::map底层实现：基于红黑
阅读更多...
Golang中拼接字符串的6种方式性能对比

Golang中拼接字符串的6种方式性能对比

《Golang中拼接字符串的6种方式性能对比》golang的string类型是不可修改的,对于拼接字符串来说,本质上还是创建一个新的对象将数据放进去,主要有6种拼接方式,下面小编就来为大家详细讲讲吧... 目录拼接方式介绍性能对比测试代码测试结果源码分析golang的string类型是不可修改的，对于拼接字
阅读更多...
MySQL表锁、页面锁和行锁的作用及其优缺点对比分析

MySQL表锁、页面锁和行锁的作用及其优缺点对比分析

《MySQL表锁、页面锁和行锁的作用及其优缺点对比分析》MySQL中的表锁、页面锁和行锁各有特点,适用于不同的场景,表锁锁定整个表,适用于批量操作和MyISAM存储引擎,页面锁锁定数据页,适用于旧版本... 目录1. 表锁（Table Lock）2. 页面锁（Page Lock）3. 行锁（Row Lock
阅读更多...
Python使用Pandas对比两列数据取最大值的五种方法

Python使用Pandas对比两列数据取最大值的五种方法

《Python使用Pandas对比两列数据取最大值的五种方法》本文主要介绍使用Pandas对比两列数据取最大值的五种方法,包括使用max方法、apply方法结合lambda函数、函数、clip方法、w... 目录引言一、使用max方法二、使用apply方法结合lambda函数三、使用np.maximum函数
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2