魔笔玩家的博客

我是谁？做什么的?总结一句话：画了很多画，写了很多代码。首先，画了很多画；第一类是水墨，从小就学过基础，更是近年来的主要创作类型：还有一些作品放在下列展厅。链接如下：水墨人物水墨机械水墨机械2水墨生物水墨场景其次，第二类是电脑绘画，特别是在200...

直觉上，提到“重复”，往往联想到枯燥乏味，想到焦躁的重复性劳动。然而，重复却又是制造“美”的重要手段。本节首先赏析了多位不同时期不同风格的绘画大师的作品，从中分析其运用重复的手法，并提炼出一个重复与美感的实践法则。然后，再以程序示例引入循环的语法，并通过循环实现了多种效果。最后，示意了通过循环，以简介的语句绘制出一大群不同表情的懵逼脸。

学艺术的，可以玩的已经很多——油画、水墨、水彩、动画、电脑绘画，编程或许很牛，但困难多多，用途未知，不去碰它，也照样可以丰富多彩、花样百出。但是，搞艺术的，不坚守本门，而去西天学编程，虽有九九八十一难，却可以享有更多的美。

本文介绍目标读者，教程特色和教学大纲，包括每一章的简介和文章链接。

通常而言，编程和绘画可谓风马牛不相及。本文却通过对比一幅简笔画过程和一段代码，将绘画和程序联系起来，并且介绍了编程的一些基本概念。

回顾我们之前的所有示例代码，都是完全的顺序执行的流程。但现实生活中确有大量选择和分支情况。为了实现选择和分支，需要使用分支语句。本节介绍了分支流程的语法。然后，运用分支语法，实现了在画布上不同位置绘制不同的懵逼脸。在实际生活中，经常出现”选择“，例如：如果天气好就出去玩，否则就呆在家里玩游戏。为了表达这种非顺序的流程，过程式编程也提供了相应的语法。这一节就学习JS中表达”选择“的条件判断语句。并且，为了用好选择结构，还需要掌握数据类型、比较运算

相比于手绘，用代码作画明显不是那么“爽”。然而，它也有显著的优越性，即能够制造动态和交互。本节介绍了实现动画效果的基本思路。然后通过获取系统时间，用于持续更新绘制内容的视觉属性，从而实现了动态的懵逼脸。

调用前一节写好的画懵逼脸函数，能够控制的是它的位置。 如果我们希望不仅能在不同位置画懵逼脸，而且画出来的每一个懵逼脸的尺寸比例都有所不同，这样的函数就无法满足需求了。 为了满足这种变化的需求，我们可以对drawConfuseFace进一步改造，让其具有更多的可控性。 下面先看看改造后的效果： 我们先直接看看实现上述效果的完整代码，然后再剖析其采用的改造措施：// 函数setup() : 准备

如果像重复绘制多个相似的内容，而又不希望拷贝代码，有何办法？也就是如何实现功能复用？本节介绍了用函数实现可复用功能的定义。并用它定义了绘制懵逼脸的函数。然后用这一函数来绘制多个不同懵逼脸。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 1

本节实现了让懵逼脸可以随着鼠标而移动。其中，介绍了p5.js的程序框架运行机制；然后引入变量的概念；最后运用p5.js提供的mouseX和mouseY变量，获取程序实时运行时的鼠标为止信息，用于指定绘制内容的位置。

再正式学习前，有必要对我们要用到的几个玩意进行理解和辨析，它们是 Javascript(简称JS), HTML5（简称H5), P5.js (简称P5)这里主要是以类比作画来辨析它们之间的联系和区别：HTML5是用于浏览器中显示信息的超文本语言，相当于显示绘画作品的画框；P5.js是一个JS的库和框架，相当于作画用的画布、颜料和工具；Javascript是一种用于在浏览器中执行程序的脚本语言，相当于绘画的操作技法。

现在开始使用p5.js来画点东西。首先，详细介绍了如何下载p5.js，以及如何用它来编写程序。介绍了如何查看参考文档和示例程序。然后，以一步一步的指引，写出一段简单程序，画出一个懵逼表情。

书法比绘画厉害在哪里？为何国画强调书法入画? 书画同源就表现为画作上的题字吗？编程和绘画有毛关系？看完本文，定能获得清晰的解答。对比分析了大量案例，既讲画理，也谈书法，讨论了诸多有关书法与绘画关系的问题，提出一种“一笔画”的画法，综合了绘画、书法和编程的思想，打通书法与绘画艺术的任督二脉。最后，探讨了一笔画与书法、绘画、科技有关的多个问题，尝试打通科学和艺术思维的任督二脉。愿帮助读者提高审美力...