码绘是一个挺有争议的东西。很多人觉得它很麻烦，难度很大，门槛很高。其实想想，也许只是因为陌生。
与码绘相对应的是手绘，很多人包括之前的我，都觉得用笔画不需要什么基础都可以，笔随心动，不受束缚，而且人人都会几个简笔画。可是在手绘方面，每个人或多或少都是下过功夫的，因为，我们都学过怎么握笔，在一定程度上，做到让笔听自己的话。
所以，我们首先要打破对于码绘的心理恐惧。在上一篇博文中，我也介绍了自己初试码绘绘制静态图片的经理与心得。这次，则是尝试动态图片。

手绘效果：

码绘效果：

设置全局变量：

var diameter = 5;
var diameterStep = 1.5;
var centerX;
var centerY;
var numSlices = 8;
var maxNumSlices = 12;
var numPositions = 25;
var positions = [];

背景设置：（可以适应各种屏幕，降低该程序应用局限性）

function setup() {createCanvas(windowWidth, windowHeight);angleMode(DEGREES);centerX = width/2;centerY = height/2;shuffleNumSlices();fill(255);stroke(0, 0, 0, 0);
}

实现交互，以及动画拖拽粒子散落效果：

function draw() {// 把当前位置返回给arraypositions.unshift({ x: mouseX, y: mouseY });// Only store the latest `numPositions` positionspositions.splice(numPositions, 100);translate(width/2, height/2);background(0);// For each slicefor (var i = 0; i < numSlices; i++) {drawPoints(positions);rotate(360 / numSlices);}
}function drawPoints(xs) {for (var i = xs.length - 1; i >= 0; i--) {var positions = xs[i];var x = positions.x;var y = positions.y;var dia = diameter + diameterStep * (numPositions - i);fill(255, 255, 255, 255 * (1 - i / numPositions));ellipse(x - centerX, y - centerY, dia, dia);}
}

随机分割区域，点的个数由此决定：

function shuffleNumSlices() {numSlices =  Math.ceil(Math.random() * (maxNumSlices - 1)) + 1;
}

下面是手绘****码绘的几个不同之处的新的体会：

技法与工具

    手绘，通过我拙劣的绘画技法和朴素的绘画工具（一张纸一支铅笔），先淡淡的勾勒个框架，再用打圈圈的方式填充，试图用虚实结合来表现拖拽和余韵感（emmm意会意会一下）。码绘，通过p5.js用代码实现鼠标拖拽一个点移动，从而让另外几个点同步运动，利用拖拽留下的余韵轨迹形成有趣的图案，拖拽的时候有点爽哈哈哈，有点解压。

理念

   对于这几只小球来说，我在做手绘的时候，只想着尽力去画出动态的感觉，并没有运用到赤字测量，失去了比例的美感，而码绘时只需要通过预设好的数值就可以形成对称的美感；而且相较于手绘，码绘可以选择随机生成小球个数，添加了鼠标控制，实现了一定的交互性，增加了些许的趣味性，让这幅画的意义得到了衍生。

创作体验

  在手绘的时候，我苦恼于自己画技的拙劣，表达的模糊，掌握不好比例，这就是个黑白涂鸦。而且不断地重复画圈圈，画痕迹，满脑子都在想如果可以复制黏贴该多好，因此画的更仓促了。在码绘的时候，在代码这块比较苦恼，找到了大体框架，自己往里面填代码。当代码运行成功时，快乐翻倍。

呈现效果

 手绘受限于画技呆板无趣；绘讲究比例、明暗的美学，还有交互的趣味性，而且小球个数随机，就看大家运气了。

局限性

    手绘受限于绘画技能和工具；而码绘虽然只要一台电脑就够了，但受限于知识的薄弱和有限。两三岁的小盆友也可以通过手绘来表达自己的部分想法。而没有学习过代码的人，二三十岁可能还没听说过码绘。不过p5.js这个网站很好用，里面有很多范例和较为全面的函数介绍。

应用

    手绘更能表现一些细腻的东西，写实、抽象等手绘都可以表现。在某种程度上，判断一个画好不好看，会用到一个形容词：生动。而码绘的优势在于，我们在码绘画作品中看到的每种元素都是可以动起来的，它从某种程度来说，一开始就站在了一定的高度上。但是如果想要被欣赏，就有点困难了。因为单一的线条的变化并不会让大家感受到作品传达的情感，无法引起共鸣，可能一开始觉得有趣，但还是不如优秀手绘作品来的耐看。在应用方面，墙绘，雕塑绘画，纸画等，还是很受欢迎的。但现在大家都很依赖电子产品，码绘的用途正在以乘号的方式不断拓展。

相关资料：
链接: [link]https://blog.csdn.net/magicbrushlv/article/details/77857319
鼠标交互：https://p5js.org/zh-Hans/reference/#/p5/mouseX
条件变量：链接: [link]https://blog.csdn.net/magicbrushlv/article/details/77900505
滑鼠:链接: [link]https://p5js.org/zh-Hans/reference/#/p5/mouseX

p5.js 动态的表达与趣味相关推荐

p5.js动态图形临摹以及拓展
p5.js动态图形临摹以及拓展动态图形原图原图分析代码分析与公式推导分析推导成果展示临摹拓展作品拓展1 拓展2 动态图形原图本次选择临摹图形为该图原图分析可以看出,图形底层由六 ...
老慜的A5作业——p5.js 动态、周期、随机、面向对象
A5 "运动"主题的创意编程习作终于到了这学期最后一个编程习作了,来看看最后这学期都憋出来什么玩意吧! A4pluse,上次作业中对蝴蝶的飞舞动作进行了优化,并且增加了一些环境细 ...
P5.js动态图形描摹以及拓展
创意编程作业主题:从参考资料中的"动态图形艺术"中选取不少于1幅作品,用编程方式临摹,并进行拓展从中选取的图片为: 每一个都是四个圆构成的一个框架,中间是一个正方形分成四个扇形 ...
p5.js动态自画像
自画像展示由于本人喜欢看国产动画片<大耳朵图图>,里面图图有一个特异功能就是可以动耳朵,所以本次自画像在本人形象的基础上加入交互元素--耳朵可以跟随鼠标光标的移动而移动. 以下为静态形象 ...
p5.js 实现动态互动画板
目标编写一个"绘画系统",提供一系列绘画材料(例如画笔/颜料/滤镜)给用户操作,以创作出动态/交互的绘画作品.这个绘画系统是对"绘画"的概念的扩展,但仍然体现 ...
P5.js:改进创意动态绘板
在互动媒体课上接触到p5.js这个东西后,我就一直在质疑它的实用性,p5.js用来画图并不是那么的好用,但其和unity差不多的性质为动态绘图提供了条件(p5.js使用setup()函数初始化,每秒调 ...
用P5 JS绘制动态绚丽烟花——动态篇
上一节我们探究了绘制静态图像手绘与码绘的差异,但是万事万物,变化万千,有很多东西仅仅用静态是无法描述的. 正如恩格斯所言:"整个自然界,从最小的东西到最大的东西,从沙粒到太阳,从原生生物到人 ...
P5.js 实现交互式动态绘画
p5.js 实现交互式动态绘画 1.关于交互式绘画的思考 2.选定题目 3.内容展示 4.代码分析 (1).按钮的实现 (2).笔刷(画笔) (3).动作 5.总结 6.参考文献 1.关于交互式绘画的 ...
P5.JS绘制动态图形
P5.JS绘制动态图形一.平台第一次使用p5.js进行码绘,此次直接使用P5.JS官网的在线编辑器进行编写,完成后点击file->download即可保存到本地. 在正式绘制之前,我经过小小 ...

p5.js 动态的表达与趣味

技法与工具

理念

创作体验

呈现效果

局限性

应用

p5.js 动态的表达与趣味相关推荐

最新文章

热门文章