码绘VS手绘（一）静态绘图

最新推荐文章于 2021-09-30 17:55:47 发布

qq_41802626

最新推荐文章于 2021-09-30 17:55:47 发布

阅读量279

点赞数

文章标签： p5.js

本文链接：https://blog.csdn.net/qq_41802626/article/details/84447972

版权

码绘VS手绘（一）静态绘图

一、实验要求

（一）主题

对比用代码和用手绘创作静态绘画。

（二）内容

尝试用绘图函数画一幅静态作品,尽可能用多种绘图函数和各种参数设置，画出较高复杂性的作品。
用手绘方式来画相近的内容，将绘图的图形基元限定于自己程序中用到的类型。例如,若程序中只用到了“ellipse", 那么手绘时也只画圆圈。
从思路、技术、创作体验、创作偏好等方面来比较二者,讨论异同,写一份实验报告，实验报告题目为”编程与手绘的对比从思路、技术、创作体验、创作偏好等方面来比较二者,讨论异同,写一份实验报告。

二、实验内容

（一）码绘

在这里插入图片描述

（二）手绘

在这里插入图片描述

三、总结——编程与手绘的对比

技术方面

如果是图像基元较少较简单的的图像绘制，那么编程可能更加简单。但如果图像较复杂，图像基元更多，相互之间的联系更加繁杂，那么编程难度会直线上升，但对手绘来说并不是特别困难。就个人而言，我认为编程上手较简单，但进阶比较困难。

创作思路

对于我个人而言，编程与手绘大致相同，都是按照自上而下，从外到里的步骤进行代码编程和手绘。通过注释，编程能够使观看者更加直观的表现作者的创作思路，这是手绘所不具备的。

创作体会

编程的参数处理让人头疼，但完成后更有成就感。手绘虽然过程更轻松，但却没有太多的成就感。最让人难受的是，我尽心尽力手绘的作品，单独欣赏感觉很完美，但与编程比较后就发现“丑陋不堪”。

创作偏好

但这并不能说明编程比手绘更加完美。手绘更有利于个人情感的表达，更有“人情味”，即感性；编程则更加理性，逻辑更加明确，条理更加清晰，只需将自己的想法用代码写出，编辑器就会给出完美的结果。所以在创作偏好方面，编程与手绘各有千秋。

四、完整代码

.html文件

 <!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>p5.js example</title>
    <style> body {padding: 0; margin: 0;} </style>
    <script src="../p5.min.js"></script>
    <script src="../addons/p5.dom.min.js"></script>
    <script src="../addons/p5.sound.min.js"></script>
    <script src="sketch.js"></script>
  </head>
  <body>
  </body>
</html>

.js文件

  function setup() {
    createCanvas(600, 600);
  }
  
  function draw() {
    background(255);
      stroke(0);
      fill(100,149,237);//外脸
      ellipse(300,200,200,200);
      fill(255);//内脸
      ellipse(300,230,160,160);
      
      fill(255);//左眼
      ellipse(275,150,45,58);
      fill(255
              );//右眼
      ellipse(325,150,45,58);
      
      fill(0);//左眼珠
      ellipse(290,155,10,10);
      fill(0);//右眼珠
      ellipse(310,155,10,10);
      
      fill(255,0,20);//鼻子
      ellipse(300,180,26,26);
      stroke(0);
      line(300,193,300,240);
      
      stroke(0);//嘴
      line(300,240,250,218);
      stroke(0);
      line(300,240,350,218);
      
      stroke(0);//左胡须
      line(230,200,275,200);
      stroke(0);//左胡须
      line(235,175,275,195);
      stroke(0);//左胡须
      line(235,220,275,205);
      
      stroke(0);//右胡须
      line(325,200,370,200);
      stroke(0);//右胡须
      line(325,195,365,175);
      stroke(0);//右胡须
      line(325,205,365,220);
      
      stroke(0);//身体
      fill(100,149,237);
      rect(231,274,138,120,5);
      
      stroke(0);//肚皮
      fill(255);
      ellipse(300,310,100,100);
      noStroke();//遮盖
      fill(255);
      rect(231,258,138,12);
      
      fill(250,0,0);//项圈
      rect(230,270,140,7);
      
      stroke(0);//铃铛
      fill(255,255,0);
      ellipse(300,286,27,27);
      
      stroke(0);//左胳膊
      fill(100,149,237);
      quad(232,275,195,320, 200,330, 232,310);
      fill(255);
      ellipse(200,324,25,25);
      
      stroke(0);//右胳膊
      fill(100,149,237);
      quad(370,275,405,320,400,330, 370,310);
      fill(255);
      ellipse(400,324,25,25);
      
      fill(255);//口袋
      stroke(0);
      arc(300, 310, 50, 50,0,PI, CHORD);
      
      fill(0);
      stroke(0);
      line(300,380,300,407);
      line(295,380,305,380);
      line(233,407,366,407);
      fill(255);
      arc(235, 401, 13, 13, PI / 2, 3 * PI / 2, OPEN); 
      arc(365, 401, 13, 13, 3 * PI / 2, PI / 2,  OPEN); 
  }

qq_41802626

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
码绘VS手绘（一）静态绘图

码绘VS手绘（一）静态绘图一、实验要求（一）主题（二）内容二、实验内容（一）码绘（二）手绘三、总结——编程与手绘的对比四、完整代码.html文件.js文件一、实验要求（一）主题对比用代码和用手绘创作静态绘画。（二）内容尝试用绘图函数画一幅静态作品,尽可能用多种绘图函数和各种参数设置，画出较高复杂性的作品。用手绘方式来画相近的内容，将绘图的图形基元限定于自己程序中用到的类型。例如,...
复制链接

扫一扫