手绘与码绘(一)

你好!本系列文章主要探究:手绘与码绘之间的对比,这篇是该系列的开始。每一篇我都会从创作思路、工具、创作体验、呈现效果、局限性等方面来分析

1.创作思路

我的目的是通过手绘以及码绘画出一辆自行车和一个冰淇淋。二者的思考过程不尽然相同。
对于手绘来讲,我要考虑好画面的布局,然后开始动笔。
而对于码绘来说,确定了画布的大小以后,调用各种函数开始做画。

2.工具

手绘的工具我就不多讲了,码绘我才用的是P5.JS.
p5.js是一个专门为设计师而开发的JavaScript库,优点有很多,比如:它很轻便,web版本直接使用,也可以下载一个几兆的本地版本使用;再比如它很多封装好了的函数,各种形状,曲线,都只需你调用函数就可以呈现

3.创作体验

对于手绘来说这么简单的工作量,可以说是手到擒来,水到渠成,对于手绘水平很渣的我来说也没遇到什么困难。
重点来了,码绘的体验真的不是那么舒服,每一条线、每一个形状,他们的坐标都要反复的纠正,于是这副简单的作品码绘的工作量就是不停的改坐标,看效果,再改坐标、再看效果,这个形状ok了,接着要改下一个形状。总之,意料之外的乏味。

4.呈现效果

废话不多说,下面上图
手绘:
在这里插入图片描述
码绘:
在这里插入图片描述
以下是代码

function setup() {
  // put setup code here
  createCanvas(1440,1024);
}

function draw() {
  fill(255);
  line(110,120,130,100);
  arc(127,120,30,30,HALF_PI,PI);
  line(120,134,200,150);
  line(119,133,199,149);
  line(200,150,215,135);
  ellipse(130,250,80,100);

  line(159,139,119,249);
  line(160,140,120,250);
  line(161,141,121,251);

  line(120,250,105,210);
  line(120,250,170,240);
  line(120,250,150,290);
  line(120,250,115,298);  
  line(120,250,90,270);

  line(145,175,280,140);

  line(250,120,230,220);

  triangle(230,130,270,110,255,100);
  
  ellipse(230,220,30,30);

  rect(280, 130, 50, 20, 7);

  ellipse(300,200,70,80);

  ellipse(300,200,20,20);

  line(225,205,300,190);
  line(230,235,300,210);

  line(290,150,300,200);
  line(320,150,300,200);

  beginShape();
   curveVertex(40,40);
  curveVertex(142,185);
  curveVertex(225,205);
  curveVertex(90,150);
  endShape();


  line(300,200,330,180);
  line(300,200,310,240);
  line(300,200,280,235);
  line(300,200,265,195);
//自行车

  beginShape();
  vertex(480, 100); // first point
  bezierVertex(480, 120, 420, 140, 420, 200);
  endShape();
  beginShape();
  vertex(481, 109); // first point
  bezierVertex(500, 120, 480, 160,460, 170);
  bezierVertex(460, 170, 440, 170,410, 250);
  endShape();
  beginShape();
  vertex(490, 140); // first point
  bezierVertex(520, 170, 480, 210,460, 215);
  bezierVertex(440, 235, 420, 220,400, 300);
  endShape();
  beginShape();
  vertex(500, 180); // first point
  bezierVertex(550, 230, 480, 250,460, 265);
  bezierVertex(460, 265, 420, 275,380, 345);
  endShape(); 
   beginShape();
  vertex(370, 355); // first point
  bezierVertex(370, 375, 390, 420,500, 410);
  bezierVertex(500, 410, 520, 410,570, 395);
  bezierVertex(570, 395, 610, 350,570, 300);
  endShape();

  beginShape();
  vertex(540, 265); // first point
  bezierVertex(600, 310, 520, 350,480, 360);
  bezierVertex(480, 360, 420, 370,370, 355);
  endShape();  
  beginShape();
  vertex(520, 223); // first point
  bezierVertex(580, 290, 480, 300,460, 310);
  bezierVertex(460, 310, 420, 315,380, 355);
  endShape();
var c = color(255, 255, 150); // Define color 'c'
  fill(c);
  triangle(410,400,480,650,550,400);
  
 line(450,400,432,480);
 line(480,400,445,525);
 line(510,400,455,565);
 line(540,400,470,610);

 line(420,440,523,490);
 line(410,400,530,460);
 line(430,480,516,520);
 line(445,520,508,550);
 line(454,560,500,585);
}

在这些代码里基本上只调用了一下简单的函数,因为我们才刚刚开始画的还是特别简单的图案,但是代码已经有点多了,如果说画一个真正的人的话,那还是老老实实的手绘或者数位版吧。

5.局限性

从手绘方面来讲,自己的手随心所欲,想画什么,只要我技巧足够好,那我就可以画出来。但同时,落笔无悔,我画好了什么出来就是什么,我想更改一小部分,那么修改一定会留下痕迹。
从码绘上来讲,我觉得可能没有手绘那么随心所欲吧,知道了画作不足的地方,要修改时还是要转换成代码,而且对于各个坐标真的让人头疼。

6.总结

综上所述,如果是这个任务让我从手绘或者码绘选择一个,妥妥的选择手绘,手绘天下第一:)。

参考链接:
https://p5js.org/zh-Hans/reference/

猜你喜欢

转载自blog.csdn.net/weixin_43578885/article/details/84426868
今日推荐