本文主要是介绍码绘与手绘比较——静态篇,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
码绘图
p5.js绘制
手绘图
代码实现过程
以下仅代表性留下了码绘作画流程的部分代码,省略掉了很多取点线的代码。其实使用的东西都很简单,主要就是通过取点连线画规则图形和填色。
function setup() {createCanvas(400, 710);
}
function draw() {background(139,26,26,200); fill(0);beginShape();vertex(21,634);vertex(47, 609);vertex(74, 589);vertex(103, 570);vertex(85, 505);vertex(50, 517);vertex(44, 526);vertex(45, 515);vertex(49, 509);vertex(80, 482);vertex(65, 417);vertex(42, 363);endShape();strokeWeight(4);line(50,517,60,561);line(60,561,71,597);line(100,559,41,574);line(41,574,53,608););strokeWeight(8);line(341,576,388,601);line(381,562,342,632);strokeWeight(6);line(385,618,370,665);line(368,625,392,635);noStroke();fill(255,165,0,255);ellipse(206,552,64,93);fill(0,0,0,255);rect(149,587,124,50);strokeWeight(5);stroke(0) ;line(65,360,80,400);line(55,387,93,376);strokeWeight(4);line(302,510,338,511);line(256,516,256,436);line(276,476,236,476);line(133,528,133,428);line(153,488,113,488);noStroke();fill( 139, 137 ,137,45);
beginShape();vertex(33,248);vertex(0,251);endShape();beginShape();vertex(373,364);vertex(400,377);endShape();beginShape();vertex(400,99);vertex(400,0);endShape();}
手绘与码绘异同比较
绘画思路
同:都要思考下笔的先后次序,要考虑画面的覆盖问题
异:码绘是通过规则图形和取的点线构成边界后填色完成的,但手绘是流畅的充满质感的,即使填色也可能是不均匀有笔触的。
技术方面
同:都需要进行画面的构思,在创意阶段基本是一样的。
异:码绘用代码实现画面,需要对编程语言的熟练使用,它更多的是数学与图形的结合。手绘则使用笔纸,对灵感和经验要求更高,它不一定能像码绘一样精准,但是相对更自由。
创作体验
同:能够完成直观的画面还是很开心的。
异:手绘带来的质感更让人有创作感,码绘相对来说比起创作更像是制作。
创作偏好
手绘。码绘在有的方面的确能够产生很多灵动有玄妙的效果,但是我永远喜欢手绘的质感,握笔的感觉是用鼠标和键盘无法替代的。(而且这种不规则图形用打点的方法码绘真的又没有效率又没有效果!!!!!)
参考文献
开始第一幅“码绘”——以编程作画的基本方法
https://blog.csdn.net/magicbrushlv/article/details/77840565
p5.js简介&基本形状绘制
https://blog.csdn.net/qq_27534999/article/details/75151515
这篇关于码绘与手绘比较——静态篇的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!