尝试代码绘画

    这篇文章介绍了用代码绘画的意义，我觉得在做一件事之前，先要自己明确自己的目的和初衷，这样才不会在学习的道路中因些许困难而感到迷茫，从而停滞不前。

链接: [link]https://blog.csdn.net/magicbrushlv/article/details/77922119

思路

   通过专业学习，才发现原来编程也可以画画，它是另一种绘画方式，使人们日常生活中很少能接触到的。编程和手绘都要先构思自己要画什么，应该把内容画在画布的什么位置。手绘需要先画轮廓线，将各部位位置大概确定，然后再勾勒描绘细节；而编程则是先执行相关联的，比如分图层或是分区域实现效果。

技术

    手绘出来的会更自然，更协调，任何想要的取现都可以通过手绘轻松画出，而且给人的感觉会更直观一些，但所需材料就比较多，很依赖手边有的绘画工具；编程则是所有的线都是由函数绘制出来的，哪里不对的画就要慢慢的修改参数。编程实现的绘图效果不如手绘灵动，但是比例精准定，每一笔都包含了严谨的态度。

创作体验

    整体来说，还是手绘方便很多，而编程相较之下则显得枯燥无味，而且我预先构思的图不太适合编程绘图，如果是有几何构成的图像应该更适合码绘。但是编程也有其优势，在可以迅速且均匀地给图形上色。而且在做动图时，编程将会大大提高效率，不用1s24帧绘制。

手绘的图片:

      这是我手绘的一个蛙蛙，由于手边没有彩色绘画工具，就只用了铅笔花了简笔画。

第一阶段码绘：

    这是我最初开始画的东西，p5.js里的函数用的不多，除了几个基本几何图形，其他都是靠描点连接曲线完成，并没有感受到码绘的魅力与便捷。

第二阶段码绘：

    最近我又翻了下p5的函数库，又添加了点东西，这个背景的竖条纹用代码写起来很方便，但如果是手绘，想要有白色竖条纹，在涂色时留白是个巨大的工程。

创作偏好

    经过此次试验，我个人觉得如果写实类的画作，色彩线条丰富灵动，那么还是用手绘比较好一些。但如果是绘制几何体、工程图、讲究比例美学时，码绘就能发挥他的价值了，有规律的线条、团的组合，或者是做动图、特效等，这些都需要各种算法、函数的支持。这些情况下，编程所能达到的效果会令人惊艳，带来的创造的惊喜可能是手绘比不上的。

代码

// 背景
var foo = 'bar';
function setup() {// put setup code herecreateCanvas(1037,1037);background(255,248,228);stroke(255);strokeWeight(4);  var b = false;var d = 20;for (var i = d; i <= width; i += d) {if (i < width) {b = true;} else {b = false;}if (b == true) {// 垂直线line(i, d, i, height-d);}if (b == false) {// 水平线line(middle, i - middle + d, width-d, i - middle + d);}}
}

// 背景
function draw() {strokeJoin(ROUND);stroke(121,85,67);strokeWeight(10);fill(2,0,3);beginShape();vertex(276,339);vertex(277,372);vertex(263,380);vertex(267,401);vertex(249,410);vertex(251,419);vertex(334,419);vertex(340,409);vertex(321,398);vertex(327,387);vertex(313,370);vertex(347,359);endShape(CLOSE);beginShape();vertex(240,842.5);vertex(240,842.5);vertex(226,835);vertex(218,835);vertex(204,850);vertex(215,860);vertex(244,861);vertex(262,860);vertex(263,842.5);vertex(240,842.5);vertex(240,842.5);endShape(CLOSE);beginShape();vertex(373,843);vertex(373,843);vertex(374,858);vertex(432,858);vertex(435,845);vertex(422,837);vertex(407,842);vertex(373,843);vertex(373,843);endShape(CLOSE);fill(217,232,139);beginShape();curveVertex(249,426);curveVertex(249,426);curveVertex(249,410);curveVertex(206,393);curveVertex(178,421);curveVertex(177,444);curveVertex(153,454);curveVertex(129,481);curveVertex(122,521);curveVertex(132,548);curveVertex(141,558);curveVertex(161,573);curveVertex(201,581);curveVertex(242,582);curveVertex(286,579);curveVertex(337,576);curveVertex(379,567);curveVertex(437,548);curveVertex(436,495);curveVertex(424,432);curveVertex(413,407);curveVertex(375,389); curveVertex(340,409);curveVertex(334,425);curveVertex(293,421);curveVertex(249,426);curveVertex(249,426);endShape(CLOSE);fill(255,222,230);beginShape();curveVertex(247,465);curveVertex(247,465);curveVertex(231,470);curveVertex(223,484);curveVertex(225,506);curveVertex(231,513);curveVertex(251,524);curveVertex(263,528);curveVertex(303,529);curveVertex(326,527);curveVertex(354,515);curveVertex(368,502);curveVertex(376,479);curveVertex(367,464);curveVertex(351,458);curveVertex(330,462);curveVertex(311,468);curveVertex(283,471);curveVertex(292,472);curveVertex(266,470);curveVertex(245,466);curveVertex(245,466);endShape(CLOSE);fill(126,88,77);noStroke();ellipse(212, 420, 15, 20);ellipse(375, 413, 15, 20);ellipse(284, 438, 10, 10);ellipse(304, 437, 10, 10);fill(255,227,222);noStroke();ellipse(211, 416, 4, 5);ellipse(374, 409, 5, 5);stroke(121,85,67);strokeWeight(10);fill(237,140,89);beginShape();curveVertex(161,573);curveVertex(161,573);curveVertex(201,581);curveVertex(242,582);curveVertex(286,579);curveVertex(337,576);curveVertex(379,567);curveVertex(437,548);curveVertex(467,566);curveVertex(495,594);curveVertex(515,629);curveVertex(529,683);curveVertex(520,746);curveVertex(485,786);curveVertex(440,807);curveVertex(389,817);curveVertex(367,818);curveVertex(253,819);curveVertex(231,818);curveVertex(169,801);curveVertex(125,772);curveVertex(96,711);curveVertex(96,682);curveVertex(115,628);curveVertex(144,587);curveVertex(161,573);curveVertex(161,573);endShape(CLOSE);fill(217,232,139);beginShape();curveVertex(115,628);curveVertex(115,628);curveVertex(78,603);curveVertex(76,583);curveVertex(101,578);curveVertex(123,590);curveVertex(144,587);curveVertex(126,610);curveVertex(115,628);curveVertex(115,628);endShape(CLOSE);fill(217,232,139);beginShape();curveVertex(467,566);curveVertex(467,566);curveVertex(482,577);curveVertex(495,594);curveVertex(506,570);curveVertex(507,547);curveVertex(494,525);curveVertex(480,532);curveVertex(476,551);curveVertex(467,566);curveVertex(467,566);endShape(CLOSE);fill(255,216,141);beginShape();curveVertex(199,691);curveVertex(199,691);curveVertex(185,711);curveVertex(190,734);curveVertex(205,750);curveVertex(243,768);curveVertex(286,775);curveVertex(329,777);curveVertex(380,770);curveVertex(420,756);curveVertex(450,727);curveVertex(449,699);curveVertex(423,685);curveVertex(403,685);curveVertex(346,697);curveVertex(284,701);curveVertex(229,697);curveVertex(205,691);curveVertex(205,691);endShape(CLOSE);ellipse(228, 640, 30, 30);ellipse(404, 637, 30, 30);stroke(121,85,67);strokeWeight(10);fill(255,255,255);triangle(229, 697, 259, 729, 284, 701);triangle(284, 701, 316, 728, 346, 697);triangle(346, 697, 379, 721, 403, 685);triangle(286, 775, 308, 751, 329, 777);triangle(329, 777, 351, 748, 380, 770);fill(209,234,135);beginShape();rect(244,820,20,25);                rect(379,820,18,23);              fill(222,184,135);strokeWeight(20.0);//strokeCap(ROUND);line(282, 656, 348, 654);push();strokeWeight(3);fill(255,230,0);translate(width*0.52, height*0.5);star(0, 0, 30, 70, 5); translate(width*0.8, height*0.2);star(0, 0, 40, 60, 5); pop();}
function star(x, y, radius1, radius2, npoints) {var angle = TWO_PI / npoints;var halfAngle = angle/2.0;beginShape();for (var a = 0; a < TWO_PI; a += angle) {var sx = x + cos(a) * radius2;var sy = y + sin(a) * radius2;vertex(sx, sy);sx = x + cos(a+halfAngle) * radius1;sy = y + sin(a+halfAngle) * radius1;vertex(sx, sy);}endShape(CLOSE);
}

手绘vs码绘初次体验相关推荐

手绘vs码绘1——Q版小人
手绘与码绘静态对比前言在互动媒体的课程上,我了解了P5.js这项技术,并且学会了运用它进行简单的网页绘图.可能有很多人认为,绘画是一种艺术形式,必须要拿起画笔才能产生好的作品,而代码听起来和绘画毫 ...
手绘vs码绘动态对比
用手绘和码绘两种方式创作"运动"主题的作品,并作出对比手绘图: 码绘图: 比较技法:不考虑美观的话手绘比较方便,可以怎么想怎么做,而码绘却比较复杂,需要转换为代码. 工具:手绘 ...
手绘与码绘的比较---模拟风吹树动
手绘与码绘的比较-模拟风吹树动一.内容介绍本文主要介绍用手绘和码绘两种方式模仿一种自然现象–风吹树动的过程,以及在实现过程对这两种方式的比较和思考.之所以选择风吹树动,是因为每次速写画一些场景时( ...
手绘VS码绘——动态篇（视觉错觉）
前言在介绍这次的实验前,先让我们看看一组图片: 相信大家看完这组图片已经有点难受的想点一下右上角的X了,其实不止你们,我在写这篇文章的时候也想关掉它-- 接下来我就按照正常的介绍流程告诉大家,这些图 ...
手绘与码绘对比（一）
最近在老师的带领深入学习研究了手绘与码绘啊. 话不多说,直接上图. enmmm.....我知道这图不怎么样,有点沙地奥,但我们的主要目的是感受手绘与码绘的不同创作体验啊! 码绘我这次用的是p5.js ...
手绘与码绘的比较——实战之梵高《星空》
手绘与码绘的比较--实战之梵高<星空> 版权声明:本文为博主原创文章,未经博主允许不得转载. 最近博主的老师在交互媒体设计课上布置了一个作业,是关于"运动"主题的作品创 ...
手绘vs码绘2——动态弓箭
手绘与码绘动态对比前言在上一次博客中,我们已经成功用代码重现了手绘的Q版小人,对手绘和码绘进行了几个方面的对比分析.不得不承认,码绘由于形状和编写时间的限制,在绘制静态图像的方面和手绘还是有很大差 ...
手绘和码绘的对比（2）——动态比较
码绘手绘代码实现过程 var numBalls = 30; var spring = 0.05; var gravity = 0.01; var friction = -0.9; var ball ...
“运动”主题创作——手绘与码绘的比较
"运动"主题创作--手绘与码绘的比较本次主题是运动,在此便以最基本的运动形式--跑步来展现两者的区别. 手绘手绘是静态的图片,为了展示"运动",可以把跑者的 ...
手绘与码绘————趣味交互式绘画系统的实现
简介上一篇博文我主要写了用向量来实现笛卡尔之心的形态变化.这一次我们以此为基础,把这种向量变化作为"颜料"来制作一个非常有趣的交互式绘画系统. 另外,这次我还使用了一种新的充满艺 ...

手绘vs码绘初次体验

尝试代码绘画

思路

技术

创作体验

创作偏好

代码

手绘vs码绘初次体验相关推荐

最新文章

热门文章

手绘vs码绘 初次体验

尝试代码绘画

思路

技术

创作体验

创作偏好

代码

手绘vs码绘 初次体验相关推荐

最新文章

热门文章

手绘vs码绘初次体验

手绘vs码绘初次体验相关推荐