> 因本学期接触了《互动媒体》这门课程，了解到了“码绘”的神奇，所以总结两篇文章，记录自己码绘路上的辛酸喜乐。《那个站在科学与艺术路口撸码绘的女同学（一）》主要为静态码绘，而（二）主要为动态码绘分享，若有错误请指出，欢迎下方留言区评论交流。
码绘是啥？
码绘是啥？你看这个是吗？
这就是颗大白菜上画了几条向量，是个啥码绘啊？！博主你不要逗我。
那你再看这个，又是啥？
这就是刚刚那颗大白菜啊，舞动的大白菜，现在算码绘了吧？
这颗大白菜其实是圆心出发每一个弧度上半径都不一样的一个圆，然后嵌套另外一个圆，用迭代的方法生成不同的弧度然后根据弧度生成不同的半径，然后再利用sin正弦波+时间，让半径动起来，于是就是一颗跳舞的大白菜。
//作者：叶师傅
//链接：用Processing写一颗跳舞的大白菜是什么感受？
//来源：知乎
//著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
void setup() {
size(1280, 720, OPENGL);
}
void draw() {
background(0);
strokeWeight(2);
stroke(255);
noFill();
//迭代生成带半径不停变化的圆
for (int i = 0; i < 300; i=i+40) {
int vertexCount = int(map(i, 0, 299, 3, 100));
//圆上点的个数随着半径不同而不同
mPolygon(width/2, height/2, vertexCount, i, i/10);
}
}
void mPolygon(int x, int y, int numOfVertx, int br, int rOff) {
beginShape();
for (int i=0; i<numOfVertx; i++) {
//正玄波结合时间给一个周而复始的时间区间
float pingPong = sin(radians(millis()/10.0+100*i));
//圆的半径在时间区间内循环往复
float r = br+map(pingPong, -1, 1, -rOff, rOff);
//根据圆心位置和半径计算圆上的点
vertex(x+cos(radians(i*360/numOfVertx))*r,
y+sin(radians(i*360/numOfVertx))*r);
}
endShape(CLOSE);
}
```
所以啥是码绘呢？简而言之就是“用代码绘画”。
我的码绘之旅
（答应我，看我第一幅码绘别说“chiou”！！）
了解了什么是码绘，我就兴致勃勃的开始尝试第一幅码绘，我的工具是P5.js。（(p5.js Web Editor)有自己的在线编辑器，使用js语言在VsCode中编辑也十分方便，(p5.js | reference)也可以直接翻译成中文，方便阅读。）
本次实验，我先构思好要画的图，把他们分解成每一个基础的单一图形，比如点、线、圆形、矩形等等，然后确定每个图形的坐标和大小，最后用P5.js来编写代码，实现静态图片的绘制。而用手绘的方法，我就是照猫画虎，对照着代码画出来的图画，只考虑了图形图案的大致位置，而没有像编程一样，要精确的计算每一个元素图案的准确位置。
这个看似丑陋并且简单的图画，当时却画了很久来调整大小、位置。完整P5.js代码如下：
let sun_y=0;
function setup() {
createCanvas(1000, 500);
// noStroke();
}
function draw() {
background(237,222,139);
strokeWeight(20);
sun_y += 1
if(sun_y==200){
sun_y=1
}
background(204);
// 绘制一个太阳
fill(255,0,0)
stroke(255, 255, 0)
strokeWeight(6)
ellipse(360, sun_y, 100, 100)
// 开始绘制山的图形
// 设置颜色为灰色
fill(45,45,45)
stroke(0, 0, 0)
strokeWeight(1)
quad(10,200,280,40,300,350,0,350);
quad(200,160,500,100,500,350,280,350);
quad(650,220,800,170,1000,350,680,350);
quad(450,200,600,50,700,350,400,350);
// 结束绘制图形
ellipse(350, 400, 90, 90); // 车轮
ellipse(650, 400, 90, 90);
fill(0, 0, 160); // Red color
quad(450,180,550,180,750,400,250,400);//顶
fill(255, 0, 160); // Red color
quad(250,300,750,300,750,400,250,400);//车厢
fill(96,13,159);
fill(0,255,0);//树
triangle(100,200,170,300,30,300);
triangle(100,280,170,380,30,380);
fill(155,74,18);
quad(95,380,105,380,105,480,95,480);
fill(0,255,0);
triangle(900,200,970,300,830,300);//树
triangle(900,280,970,380,830,380);
fill(155,74,18);
quad(895,380,905,380,905,480,895,480);
}
使用P5.js作画的困难在于，需要先确定好要怎么做，做什么样，精确的计算坐标、大小，不能出现一点错误，不然会影响全局。而手绘可以边画边想，并且修改容易，局部对整体的影响没有代码的大，可以画的图形可选性也大。
码绘不是都像我这么low的，下面我用大佬的码绘作品证明给你看。
码绘能有多性感？
先前，Kyle McCormick 在 StackExchange 上发起了一个叫做Tweetable Mathematical Art 的比赛，参赛者需要用三条推这么长的代码来生成一张图片。具体地说，参赛者需要用 C++ 语言编写 RD 、 GR 、 BL 三个函数，每个函数都不能超过 140 个字符。每个函数都会接到 i 和 j 两个整型参数（0 ≤ i, j ≤ 1023），然后需要返回一个 0 到 255 之间的整数，表示位于 (i, j) 的像素点的颜色值。举个例子，如果 RD(0, 0) 和 GR(0, 0) 返回的都是 0 ，但 BL(0, 0) 返回的是 255 ，那么图像的最左上角那个像素就是蓝色。参赛者编写的代码会被插进下面这段程序当中（我做了一些细微的改动），最终会生成一个大小为 1024×1024 的图片。
这是网站上暂时排名第一的作品，它的代码是：
unsigned char RD(int i,int j){
float s=3./(j+99);
float y=(j+sin((i*i+_sq(j-700)*5)/100./DIM)*35)*s;
return (int((i+DIM)*s+y)%2+int((DIM*2-i)*s+y)%2)*127;
}
unsigned char GR(int i,int j){
float s=3./(j+99);
float y=(j+sin((i*i+_sq(j-700)*5)/100./DIM)*35)*s;
return (int(5*((i+DIM)*s+y))%2+int(5*((DIM*2-i)*s+y))%2)*127;
}
unsigned char BL(int i,int j){
float s=3./(j+99);
float y=(j+sin((i*i+_sq(j-700)*5)/100./DIM)*35)*s;
return (int(29*((i+DIM)*s+y))%2+int(29*((DIM*2-i)*s+y))%2)*127;
}
还有其他一些优秀作品和代码，可以进入链接查看[用三段 140 字符以内的代码生成一张 1024×1024 的图片](用三段 140 字符以内的代码生成一张 1024×1024 的图片)
> 以上内容来自知乎——烧茄子，原文 by Matrix67
以上就是来自刚接触码绘并且被大佬码绘震惊吸引的小白——珠珠同学。下篇博客中我将继续分享动态码绘的相关知识。欢迎各位大佬点赞、留言评论，带小白我一起飞。
本篇首发于CSDN，引用请注明出处。
那个站在科学与艺术路口撸码绘的女同学（一） - weixin_41662865的博客 - CSDN博客
那个站在科学与艺术路口撸码绘的女同学（二） - weixin_41662865的博客 - CSDN博客
知乎：Karmy - 知乎
也欢迎微信联系交流：DDA-zhu-
网友评论