有关代码学习的经验分享设计教程

创意编程可以自学吗?据我了解,圈子里真正玩得好的高手,都是从自学开始。自学不仅仅是一种学习形式,其中最关键的,是思维方式的养成。它是可复用,可迭代进化的,并且不仅局限在单一领域。

当初自己为什么选择这种方式呢?不是因为有先见之明,了解自学有这等好处,仅仅是因为没有条件。学校没开设这类课程,身边也没有认识会这个的朋友,也就不得不自学了。

很多人觉得自学的难处之一是,没有氛围,一个人难以坚持。现在有了互联网,情况大不一样了。通过国内外的各种社交媒体,论坛网站,你可以了解到领域里最前沿的人物,他们近期的动向。看过什么,如何思考问题,做了什么练习,产出什么作品,这些信息都可以刺激你。

如果你勤学好问,你甚至可以直接向这些前辈请教。前提是展示你为了获得这个问题做了哪些努力。

所以只要有一台能上网,可翻墙的电脑,你就具备了最基本的自学条件,剩下只是方法的问题。

讲如何学之前,还是先谈谈为什么学。

创意编程。我的个人理解,就是用代码画画。如果你本身就是设计师或插画师。那现在,你仅仅是换了一个图形表达工具而已。

那创意编程能有什么具体的应用价值呢?“有什么用?”,其实不是个好问题。我更喜欢回答,它为什么有趣。

对于一个艺术家来说,一辈子的追求无非就是形成自我风格。你可能穷其一生,最终可以熟练驾驭几种画风。但你却无法做到掌握所有人的绘画风格。

这些都是由于工具的革新所带来的。但人的思维速度再怎么快,也不可能在一秒内创作100张作品。这是人的思维局限,也是传统创作工具的局限。

通过计算机则不一样。你只要了解自己是如何思考,并将这个思考过程用编程语言去描述,计算机就能帮你实现。

要知道,当今最有想象力,最不可思议的事情,都与计算机发生关联。而通过编程,可以将你的想法延伸到更多的地方。

2015年9月,LeonA.Gatys等人基于神经网络的论文就让大家看到了可能性。

当然,还是有人喜欢用画笔去完成这种探索,我更倾向用计算机。在我看来,编程对于图形创作而言,就是个潘多拉魔盒。下面我想讲讲它的打开方式~

自己其实在大学期间就对编程产生过兴趣,也浅尝辄止地了解过一些编程语言,诸如VB,C,后来还包括python,最终都没有坚持下去。

后来总结了一个原因,学习这些编程语言的反馈周期太长了。并且都是从抽象的概念开始讲起,输入输出都是一串数字,相当不直观。

直到我在一年前遇到Processing。发现它简直就是为设计师这种视觉生物所量身定做的。简单的代码,就能写出十分丰富的视觉效果。过往在编程中抽象的概念,这里都会以一种鲜活的视觉形式呈现出来,十分有趣。

之后它一直让我爱不释手。由于反馈直观,每次练习都与画画无疑。所以会持续刺激自己,去用代码进行更多图形上的探索。

Processing的设计理念,是让设计师,艺术家都可以轻松地掌握编程。虽然门槛降低了,不代表它是一门“玩具”语言。毕竟编程语言都许多概念都是相通的,而Processing本身又基于Java,所以此门语言的一些基础编程概念,在其他语言中也一样有。假如以后你想学习一门新语言,你在Processing上打下的基础都能发挥作用。

我自己的所有编程基础的修炼,都是在Processing上完成的。我认为Processing是设计师进入代码世界的首选工具。

值得一提的是,除了上面的链接。Processing自身的范例库做得相当完善,如果本身有代码基础,那几乎只通过范例库,就能学会这门语言了。

除了Processing,里面还提到了另一门创意编程的主流工具叫Openframeworks(简称OF)。它们都是最主流的创意编程工具之一。格式,写法十分相像。OF有它自身强大的地方,比如它是基于C++的,运行效率更高。支持跨平台,代码几乎可以不做任何改动,就能在Windows和MacOS上执行。而且还能开发App。

尽管如此,对于初学者,我还是推荐先从Processing入手,因为它有更丰富的学习资源,更详尽的文档,更友善的社区。这些都是Openframeworks不具备的。

对于外语基础不太好的朋友,Processing最好的一点就是有大量的中文教程,感谢国内这些前辈为推广创意编程所做的努力。

编程和画画一样,是门手艺。光看不练,是学不会的。看教程“看”不是重点,练才是重点。只有通过实打实地敲代码,你的代码能力才可能提高。

以《爱上Processing》一书为例,书中有不少代码示例。但仅仅看上面的实例是不完全不够的,要想真正掌握需要分三步:理解,模仿,重组。

要吃透某个概念,你要首先理解它通过文本所叙述出的概念。接着,再放到程序的语境中去理解它,敲出同样的代码。而要检验自己是否真正理解,你就需要主动去实验。比如修改某个参数,调整某个语句的位置,这代表你有真正去思考,而不是简单地复制命令。

如果你这步已经做到了,不妨对实例进行“默写”,不看示例代码。看自己能否清晰,流畅地将代码写出来,以此检验自己的熟悉程度。

到最后,不要局限于示例本身。你需要重组知识点,这个过程同时是创造的过程。好比你新学了for循环,书中给出的例子都是画线和画圆的。那你应该去思考,如何做些简单的修改,可以做出不同的效果?例如可不可以用arc,triangle,beginShape-endShape这些绘图函数去画。或者利用“i”,给每个图形赋上不同的颜色。

只有走到重组这一步,才会真正成为自己的知识。而无论什么类型的教程,学习无非是这几个过程的循环。

练习也是有技巧的。心理学里面有一个概念叫做“刻意练习”。一万小时理论可能大家都听过。大意是无论做什么,只要坚持一万小时,基本上都可以成为该领域的专家。

有人将刻意练习的内容总结成以下四点:

1.只在“学习区”学习2.把训练内容分成有针对性的小块,对每个小块进行重复练习3.在整个练习过程中,随时能获得有效反馈4.练习时,注意力高度集中

程序本身就能提供即时的反馈。所以第三点并不存在问题。

关键会是第1点,什么是学习区?

要做到有效的练习,就应该在自己所处的学习区进行学习。一旦学会了,就转入下一个难点。

而明白这点,就会减少许多学习上的困惑。

比如你第一天接触编程,刚掌握了print(“Hello,world!”);的写法,这个知识点对你而言就处在学习区,第二天你只要多重复练习,你就会完全熟悉它,它也会从原来的学习区的位置变为舒适区。之后你要做的就不是继续揪着print这类自己完全熟悉的内容,而是去学习新知识。

另一种情形,则是揪着恐慌区的知识不放,这往往是最常见的,也是导致许多人认为编程很难的原因。

如果你能理解,当然最好。但通常下面两种情况会出现得更多。一,里面的代码很多都不认识。二,每句代码都认识,但是不明白彼此之间是如何组织的。

知识的吸收不是一触而就,更不代表你把它完全背下来了,就真正掌握。在我看来,大部分的代码问题都由一个共同原因所导致:基础没打好。当某些函数的用法,代码的组织方式你还没摸索清楚,你这样硬学下来的知识,都是模糊的,碎片化的。

只要明白这点,即使你在程序上遇到一些暂时还无法实现效果,也不会苦恼,不会自惭形秽了。因为随着练习的增多,知识版图的扩大,有很多问题是不言自明的。与其硬啃,在恐慌区揪着那些自己还没法吸收的知识。不如放慢脚步,打好基础。

在“学习区学习”,用过去最通俗的说法,就是“循序渐进”。编程并不难,只要找准自己的学习节奏即可。

知道练习的重要性了,也知道要在学习区练习。那有没有具体的参考指标?

如果以案例作为衡量单位。从零开始的话,把print(“hello,world”)这类也算上。

基本写够500个实例左右,可以算入门了。此时你基本能了解变量,函数,类等等概念。

但如果要达到相对运用自如的程度,就要做到1000+。

这个练习还得处于学习区。就像你写1000个“Hello,world”,编程是不会有进步的(开始的两三个可能会)。但如果你本身善于思考,做东西懂得举一反三。实际练习的数量也会比这个少。所以以数量并不是绝对的指标。

但无论如何,只有足够量的积累,才能做到游刃有余,顺手拈来。如果你脑中的任何想法,都能迅速实现,做到无障碍的表达,后面就能玩得很痛快了,可以更专注于创意本身。

练习不是枯燥的代名词。练习的方向可以很自由。知识点是固定的,但你可以决定如何组织。许多练习只要多想一步,稍加变化,就能成为有趣的作品。

之前看书一般很少做后面的练习题,而是习惯自己给自己出思考题。比如我对“画东西”比较感兴趣,我会思考怎样将学到的新概念往这个方向上靠拢,以此做点不一样的东西。

除此之外,你还可以从自己喜欢的作品去学习。Gif狂人DaveWhyte的很多动图估计大多人都见过,他的作品常常给我带来很多灵感。我们也可以用同样的形式来练习,甚至是模仿。

受他影响,个人有一种记录练习的方式,就是做Gif。只要略微有看点的练习,我都会保存成图片或是导出Gif。这样方便回顾的同时,还可以驱动自己去持续练习。自己从初学到现在,已经积累了100多的动图,从中可以看到自己的学习轨迹。

Test0

Test1

Test32

Test41

Test56

Test106

Test107

对于练习,建议将它们都按类别功能用文件夹归好类,这样练习库也会成为你创作时的素材库。写代码不像绘画,创作一幅作品,你可能每次都必须从白纸开始。Coding则不一样,练习是可复用的。

复用还是一种编程思维,你甚至可以写一些类或者插件,将自己最常用的东西打包起来,以此提高创作效率。

无论是Processing还是Openframeworks,我最先想解决的问题,就是如何更快地制作Gif,毕竟这个功能对自己而言是最常用。虽然有现成的一些插件,但使用起来总要敲很多代码,十分不便。为此我就设计一些方法去简化这个流程,这样就无需重复劳动。(Processing快速制作Gif)

(针对OF,自己也基于ofxGifEncoder重写了一个类,之后会一并开源出来)

刚开始接触CreativeCoding的时候,我产生了一个问题。如果我想写一个函数,如何能从指定坐标A,变化到指定坐标B?这在Flash或是AE之类的软件中很容易实现,但在程序中却需要思考一番。

当时刚学会PVector向量,就想用它去承载坐标点的数据。当验证了想法可行,我就将完成后的代码放在animation的文件夹中,这算完成了一个练习。

直到某天,产生了一个算法的灵感,能够结合之前的代码,制作一个图片转换效果?想到的思路是将前后两张图片的所有像素的灰度进行排序,再进行点对点的映射。没费很大的功夫,就跑出下面的效果了。

Test27

当时实验成功后会很兴奋。一是你通过主动的思考做出了不一样的东西,二是其中的原理居然出乎意料地简单,我觉得这都是代码的魅力所在。后面基于点对点的变换,还延伸出许多练习,其实都基于先前一段最不起眼的代码。

Test97

Test99

另一个相近的例子,是较早前做了一个录制绘画轨迹的练习。直到后来看到这个系列图片。

于是有了将绘制轨迹进行对称的想法。

也催生了一个图形生成器。

所以不要忽视任何的练习,这些练习距离创作并没有那么遥远,稍微打磨下,都可以成为作品。

更多练习

前面用了很多篇幅去强调练习的重要性,但无论你练习的次数多么多,总会遇到你个人无法解决的问题。这时有两种途径,一是向google发问,二是向前辈发问。

除了google之外,如果你在学校有导师。那就不要放过机会,用大量的好问题逼出他的干货。但如果你没有,身边又没有了解这个的朋友,那就需要虚心地向圈内的前辈请教问题,通过各种社交媒体或是论坛网站。另外,向人提问是有技巧的,不要让人觉得你是不愿动脑的伸手党。这篇“提问的智慧”值得一读,不仅局限在编程领域。

除了纸质教程之外。openProcessing对初学者学习来说是首选。代码都是开源的。里面有足够丰富的资源,可以让你去学习。

Coding是这样的,你了解越多,越能挖掘更多的乐趣。如果你是自己自学,而不是有学校课程去驱使你,那坚持的唯一理由,只能靠动力本身了。

动力足够强烈的人,是不会意识到自己需要坚持的,因为整个过程他都乐在其中。但往往是少数,多数人可能会面临动力不足的问题。

学习最忌两种心态。一是妄自菲薄,二是骄傲自大。它们都是阻止你不断进步的因素。不要觉得编程太难,怎么学也赶不上别人。也不要认为自己什么都会了,而放弃持续学习。

学什么工具不重要,用工具创造了什么才重要。正如编出Photoshop的工程师,没有人会比他们更熟悉Ps的各项功能了。但很显然,不代表他们就能用这个工具创作出好作品。

同理,CreativeCoding最终要比拼的不是Code,而是Creative的想法。否则每个Coder都会是CreativeCoding的高手了。设计师学编程的优势,是他自身已经有创作者的思维,并且视觉表达能力不错,再稍微了解代码,就可以做出很不一样的作品。

前面之所以强调代码,是不希望设计师空有想法,而没有落地能力。学习编程除了实现想法之外,可以多一个角度去理解事物更底层的规则,它是能反过来丰富你的想法,而不纯粹是门工具。

所以想法才是最大的驱动力。更鼓励大家围绕一两个具体的想法,用它来串联所学的知识。

自己学习创意编程的动力,源于两个感兴趣的方向,一是从数的角度去剖析图形,用代码用法则去探索图形的更多可能性(万物皆数)。二,是希望用程序,去测量人的思维,以此开发一些训练工具(量化绘画)。

这些想法用传统的软件都是无法做到的,但学习创意编程让我有机会亲自去实现它。

“取乎其上,得乎其中;取乎其中,得乎其下;取乎其下,则无所得矣”。如果你对创作有更高的目标,那绝对是件好事,他会驱使你走得更远。

如果Coding是种武功,那算法就是“内功”。不要疲于学习各种插件,虽然能很快的出一些很炫的效果,这些都是最表面,也最容易学会的。加深自己对算法的理解,学会对图形进行规则的抽象和重设计,这十分重要。

另外,技术并不是创作的最主要瓶颈。我们不要将精力放在学习各样五花八门的技术上。做个比喻,要成为“武林高手”,不是说刀枪剑棍你什么都需要会。你将一种武功练到极致,也同样能打遍天下。代码的创造相当自由,你完全可以将一些常人认为最简单,最普通不过的规则摸透,并且将它玩到极致,这样同样可以走出自己的风格。

技术怎么学都没有尽头的,所以学一点,就尽量做点东西把它运用起来。其实简单的技术,也能做出精彩的作品。就像对有创造力的画家而言,给它一支铅笔就足够了。

相信你现在有足够的信息可以去开始自学了。编程水平的高低,与你在什么学校,学什么专业,跟随哪位老师,看哪本教材没有必然的联系。如果这个能力可以量化,前面的因素充其量决定开头的第一个数字,而自我修炼,则决定这个数字后面跟多少个“0”。

创意编程有它自身独有的魅力。正如当初我去学习它,不是因为它能为我直接带来什么好处,仅仅是觉得有趣而已。希望将来有更多人,能发自内心地喜欢创意编程,用它来创造不一样的东西。

THE END
1.即时设计最全面的使用教程来啦还不会用即时设计?看这篇即时设计使用教程准没错,从注册账号到工具使用,从下载素材到安装插件,手把手教学,让你快速掌握即时设计的优质功能。它作为国内的一款在线 UI 设计工具,对比其他设计软件,它真的功能更加全面且人性化,完美符合国内设计师们的工作需求,最重要的是它不仅可以在线设计,还能在线获取免费的素材模板https://js.design/special/article/js-design-tutorials.html
2.国产UI设计工具,更简单更好用与其它在线协作工具相比,即时设计具有更强的项目团队合作功能,也更容易实现上手操作。它可以帮助企业或团队从0到1的创建、测试和交付的设计项目。在即时设计的帮助下,团队可以不用再担心文件同步和导出,而在使用过程中,设计师将感受到即时设计以下几个优点:1.文件云端存储,多平台兼容 在即时设计中创建的所有文件https://baijiahao.baidu.com/s?id=1771035829359437101&wfr=spider&for=pc
3.即时设计基础教程!全面专业的UI设计在线工具入门指南免费使用即时设计,请点击右侧链接即时设计 获取海量免费设计资源,请访问资源广场 获取课程课件及演示案例源文件,请访问教程文件 一、即时设计介绍 即时设计是一款全平台覆盖、可云端编辑的专业级 UI 设计工具,为中国设计师量身打造,是 Windows 也能用的「协作版 Sketch」,它设计功能强大,能一站完成设计师https://uiiiuiii.com/knowledge/1212277849.html
4.最全面评测!这款完成度超高的神器如何征服一个设计团队?2. 文档和教程 在教程方面,除了官方的工具文档,即时设计还为设计师整合了国内设计师的图文知识、视频教程等内容,一方面帮助设计师了解即时设计,提高工具使用的效率,一方面实现自身设计能力的提升。 即时教程:https://js.design/courses 3. 开放的迁移服务 https://www.uisdc.com/jishi-design-5
5.稿定设计app如何进行使用呢软件的使用教程介绍小编:工具书稿定设计app如何进行使用呢?相信很多用户都是听别人说的,才去下载这款软件的是不是,因为这款软件的操作方法非常的简单,而且里面还有丰富的设计素材随便使用。但是对于刚下载的用户却不知道怎么去使用这款软件了,只知道这款软件好,以下就是给新手用户们所带来的软件的使用方法介绍,让我们一起去看看如何进https://www.shubang.net/news/3834.html
6.小鹅通图片在线设计工具创客贴使用教程创客贴提供大量素材和模板搭配简易的操作流程辅助商家进行设计,商家可根据自己不同的需求生成符合自己需求的图片。 二、使用目的 小鹅通商家后台提供图片在线设计工具通过辅助商家快速、高质量完成课程封面、直播海报、电商主图、宣传二维码、分享海报等设计,达到商家期望的宣传效果或目的。 https://www.youbixuanjiaoyu.com/NewsDetail/3785072.html
7.找到6个近期爆火的AI图像生成工具,附使用教程!Pixso是一款基于云端的在线协作矢量编辑工具,在其原本强大的白板、原型、设计、交付、管理功能的基础上,新增加AI设计探索能力。Pixso AI的双钻模型覆盖了探索、定义、构思、实施等各个环节,带来了9大AI能力的应用探索和规划,帮助设计团队提高生产效能。点击免费使用Pixso AI。 https://pixso.cn/designskills/ai-image-generation-tool/
8.SolidWorks百叶窗工具的定制和使用教程SolidWorks软件目前被越来越多的非标设计师所使用,尤其是SolidWorks的钣金模块,拥有强大的钣金参数设置,折弯、放样、冲压工具等命令,让我们的钣金设计得心应手,今天就给大家分享的是SolidWorks的百叶窗冲压工具的定制和使用教程,为什么说是定制呢?因为SolidWorks自带的百叶窗的尺寸有可能不是我们需要的尺寸,毕竟设计当然要符https://xifengboke.com/post/902.html
9.3DMax如何使用间隔工具操作讲解教程溜溜自学专注室内设计,平面设计,视频剪辑,建筑动画和软件入门基础教程,新手实现快速入门与成长?去看一下 >> 文章作者:小溜文章分类:室内设计发布时间:2022-08-12 10:14浏览量:3010 3DMax中的间隔工具可以使物体沿指定的复杂路径进行等距复制,比如随手绘制的曲线路径,也是一个非常便利的工具,那么如何使用间隔工具呢?https://zixue.3d66.com/article/details_92180.html
10.做设计的我觉得有用的网站1.设计有关: 1.设计的视屏/教程,里面还有好多有用的网址导航——优阁网:http://www.uigreat.com/;优设网;学ui网,站酷网,花瓣网,ui中国,哇呸网https://www.jianshu.com/p/300df52d01b4
11.LVGLGUIGUIder使用教程LVGL GUI GUIder使用教程 本篇以按钮为例进行介绍 前言: GUI Guider是NXP为LVGL开发了一个上位机GUI设计工具,可以通过拖放控件的方式设计LVGL GUI页面,加速GUI的设计。当前最新版本是1.4.1.设计完成的GUI页面可以在PC上仿真运行,确认设计完毕之后可以生成C代码,再整合下载MCU项目中。使用GUI Guider不需要任何编程知识https://developer.aliyun.com/article/1205206
12.raptor使用教程Raptor是一款流程图设计工具,可以用来设计算法和程序流程图。以下是使用Raptor的简单教程: 下载并安装Raptor 首先,你需要从Raptor的官方网站上下载并安装Raptor。安装完成后,你可以打开软件并开始使用。 创建一个新的流程图 在Raptor中,你可以通过点击“File”菜单中的“New”选项来创建一个新的流程图。你也可以使用快https://wenku.csdn.net/answer/6penairf7a
13.第3版emWin教程第34章emWin6.x的AppWizard界面开发工具使用本期教程跟大家讲解emWin6.x新版GUIBuilder工具AppWizard。掌握AppWizard比较容易,大家很快就可以上手,仅需注意使用上的一些坑即可。 34.1 初学者重要提示 34.2 AppWizard介绍 34.3 AppWizard创建界面 34.4 AppWizard生成的VS工程使用VS2019运行方法 34.5 AppWizard创建的界面添加到工程 https://cloud.tencent.com/developer/article/1874881
14.MindManager思维导图使用:常用设计工具介绍小编此前在完美下载站上已经过介绍不少MindManager思维导图使用教程,MindManager简单却又很有效,是一种实用性的思维工具,今天就教大家MindManager中几个常用设计工具。 在MindManager中,完成导图的基本制作后,接下来就是设计导图,让其整体更和谐、更直观,菜单栏中,打开“设计”界面就可以看到很多可用的设计工具了。 https://tech.wmzhe.com/article/10001.html
15.入门:AI混合工具怎么使用?Illustrator教程平面设计2、选择工具箱中的混合工具,先点击正圆,再点击五角星,我们可以发现它是形状与颜色的混合。 3、同样地,我们双击混合工具,也可以打开混合选项,来调整它的颜色、步数和距离。 以上就是AI混合工具怎么使用方法介绍,大家看明白了吗?操作很简单的,希望这篇教程能对大家有所帮助!https://www.jb51.net/Illustrator/397430.html
16.相对于Scratch,这款被各大编程赛事青睐的工具,你还没听说过吗?!编辑器界面完全采用卡通的形式,无论是卡通形象“猫老祖”还是UI设计,都会让小朋友在初次接触时就感到满满的童趣。 输入网址体验:kitten.codemao.cn 当然,与传统编程工具不同的是,Kitten将代码换成了积木。 通过移动积木的位置,设置参数,直观地感受画面的变化,并逐渐理解画面交互与编程代码直接的关系。除了容易使用外,https://www.azmcode.com/1040.html
17.SDK开发中用到的工具Android开发教程Android设计规范收集整理Android开发所需的Android SDK、开发中用到的工具、Android开发教程、Android设计规范,免费的设计素材等。 - inferjay/AndroidDevToolshttps://github.com/inferjay/AndroidDevTools