绘画系统-Processing版

创作了两个版本的绘画系统，MATLAB版请移步https://blog.csdn.net/dont_like_jiemo/article/details/85345407

---------------------------------------------------我是正经分割线--------------------------------------------

引言

什么是绘画呢？我们先来看下面一组图

从上面的几张图片我们不难看出，所谓的绘画有四个基本要点。首先我们得有材料：颜料、画布，画笔等物质要素，其次还得有作画者，人和大象都是作画者，他们有着自己“独特”的创作思想与技法，接着是交互方式：作画者是如何操作材料来完成作画的呢，人可以用画笔，数位板或者直接用鼠标，但是大象却可以用它的鼻子哦。最后是作品：也就是我们最后呈现出来的绘画作品。
基于以上几点，我来谈一下我的这个绘画系统。

作品效果与比较

首先当然得从我的进入界面说起，我的画布就是我的运行界面，一个800*600的白色框架，它就相当于我们传统作画时的一张A4纸，数位板作画时的一个新建页面，给定了我们作画的范围，所以从画布上来说，我的绘画系统与传统的绘画系统是没有什么差别的。
绘画的“画笔”，我使用的是我的鼠标，它和现实生活中的画笔，数位板的笔一样，都是工具，也没有区别。
我的颜色选择是图片左侧的那七种颜色，但由于我在画圆形与矩形的时候使用了random函数，所以很多其他的颜色也会使用到。
RGB的颜色许许多多，我们都可能会用到，不可能说跳脱出既定的框架，去创造另外一套颜色，只会说我们是会用了其中的几种颜色，所以在颜色的使用上，传统与非传统是不会有太大的差异的。
最后就是作画者了，从设置整个框架，到实现所有的功能，我既是这整个绘画系统的创作者，也是这个系统的作画者、使用者。这就与传统的作画不一样了。平时我们只会是使用者，笔是我们造出来的吗？纸是我们发明的吗？颜料是我们调出来的吗？当然不是！自己创作的会更符合自我的使用习惯，也不能说现有的绘画系统不太好，但从亲民和使用便捷性来说，非传统的绘画系统会更受欢迎一点。

%建立画布基本框架
void setup()
{background(255);size(800,600);smooth();colorMode(RGB);rectMode(CENTER);pts = new ArrayList<Particle>();f = createFont("Calibri", 24, true);noStroke();fill(255,245,238);fill(227, 23, 13); //redrect(45, 30, 60, 60); fill(255, 97, 0);//orangerect(45, 110, 60, 60);fill(255,215,0);//yellowrect(45, 190, 60, 60); fill(50,205,50); //greenrect(45, 270, 60, 60);fill(64,224,208); //bluerect(45, 350, 60, 60);fill(65,105,225); //indigorect(45, 430, 60, 60);fill(218,112,214);//purplerect(45, 510, 60, 60);
}%设定屏幕左侧的七种颜色
void draw()
{if(mouseX>45 && mouseX<105 && mouseY>30  && mouseY<90) { couleur = color(227, 23, 13);  //}if(mouseX>45 && mouseX<105 && mouseY>110 && mouseY<170) {couleur = color(255, 97, 0);     //}if(mouseX>45 && mouseX<105 && mouseY>190 && mouseY<250) {couleur = color(255,215,0);  //}if(mouseX>45 && mouseX<105 && mouseY>270 && mouseY<330) {couleur = color(50,205,50); //}if(mouseX>45 && mouseX<105 && mouseY>350 && mouseY<410) {couleur = color(64,224,208); //}if(mouseX>45 && mouseX<105 && mouseY>430 && mouseY<490) {couleur = color(65,105,225);}if(mouseX>45 && mouseX<105 && mouseY>510 && mouseY<560) {couleur = color(218,112,214);}

一幅作品

这里我来谈一下设置的交互方式：按住键盘a键可以随机画出根据鼠标移动速度而改变直径，颜色随机的圆，同理按住键盘A键可以随机画出根据鼠标移动速度而改变直径，颜色随机、透明度随机的圆。按住键盘d键可以画出颜色随机的正方形，按住键盘D键可以画出颜色随机、透明度随机的正方形。按住键盘w键，可以从左侧的七个颜色中选择颜色绘制五角星。按住键盘s键，可以从左侧的七个颜色中选择颜色绘制连续的直线。按住键盘c键，可以清除图像。
在系统里我改变了以往的按压然后拖动绘画的传统模式，使用键盘按压与鼠标拖动的相互配合，画出多种图形，根据鼠标移动速度的变化可以画出大小不同的圆形，颜色、透明度可以随机，也可以选取左边的颜色。
传统绘画模式都是画笔按压然后拖动，这种绘画方式已经深入人心、约定俗成，只要人们拿到一个用于传统绘画的物品，他们都知道该怎么作画。所以冒冒然然的更改交互作画的方式很有可能不容易被大众接受。

%设定交互方式if (onPressed){for (int i=0;i<10;i++){Particle newP = new Particle(mouseX, mouseY, i+pts.size(), i+pts.size());pts.add(newP);}}for (int i=pts.size()-1; i>-1; i--){Particle p = pts.get(i);if (p.dead){pts.remove(i);}else{p.update();p.display();}}
}
void mousePressed()
{onPressed = true;if (showInstruction){background(255);showInstruction = false;}
}void mouseReleased()
{onPressed = false;
}void keyPressed()
{if (key == 'c'){for (int i=pts.size()-1; i>-1; i--){Particle p = pts.get(i);pts.remove(i);}background(255);}if(key == 'a'){if(mouseX>120){if(appui==0){fill( random(255), random(255), random(255));noStroke();variableEllipse(mouseX,mouseY,pmouseX,pmouseY);}}}if(key == 'A'){ if(mouseX>120){if(appui==0){fill( random(255), random(255), random(255),random(255));noStroke();variableEllipse(mouseX,mouseY,pmouseX,pmouseY);}}}if(key == 'd'){ if(mouseX>105){if(appui==0){fill( random(255), random(255), random(255));noStroke();rect(mouseX,mouseY,20,20);}}}if(key == 'D'){ if(mouseX>105){if(appui==0){fill( random(255), random(255), random(255),random(255));noStroke();rect(mouseX,mouseY,20,20);}}}if(key=='s'){if(mouseX>105){if(appui==0){stroke(couleur);strokeWeight(rayon);line(pmouseX,pmouseY,mouseX,mouseY);}}}if(key=='w'){noStroke();fill(couleur);beginShape();vertex(mouseX,mouseY+30);vertex(mouseX-15,mouseY-17);vertex(mouseX+25,mouseY+10);vertex(mouseX-25,mouseY+10);vertex(mouseX+15,mouseY-17);endShape(CLOSE);}}void variableEllipse(int x, int y, int px, int py)
{noStroke();float speed = abs(x-px) + abs(y-py);//stroke(speed);ellipse(x, y, speed, speed);
}

最终作品

在上面的效果上又增加了鼠标点击的效果，画出动态的粒子效果，传统的作画都是静止的，除非是在电脑上画gif才会出现一些动态的效果。动态的效果增加画面的趣味性，给人们一种更加直接，更具有冲击力的效果，而它的随机不确定性更能体现处创作的乐趣。

class Particle
{PVector loc, vel, acc;int lifeSpan, passedLife;boolean dead;float alpha, weight, weightRange, decay, xOfst, yOfst;color c;Particle(float x, float y, float xOfst, float yOfst){loc = new PVector(x, y);float randDegrees = random(360);vel = new PVector(cos(radians(randDegrees)), sin(radians(randDegrees)));vel.mult(random(5));acc = new PVector(0,0);lifeSpan = int(random(30, 90));decay = random(0.75, 0.9);c = color(random(255),random(255),255);weightRange = random(3,50);this.xOfst = xOfst;this.yOfst = yOfst;}void update(){if(passedLife>=lifeSpan){dead = true;}else{passedLife++;}alpha = float(lifeSpan-passedLife)/lifeSpan * 70+50;weight = float(lifeSpan-passedLife)/lifeSpan * weightRange;acc.set(0,0);float rn = (noise((loc.x+frameCount+xOfst)*.01, (loc.y+frameCount+yOfst)*.01)-.5)*TWO_PI*4;float mag = noise((loc.y-frameCount)*.01, (loc.x-frameCount)*.01);PVector dir = new PVector(cos(rn),sin(rn));acc.add(dir);acc.mult(mag);float randRn = random(TWO_PI);PVector randV = new PVector(cos(randRn), sin(randRn));randV.mult(.25);acc.add(randV);vel.add(acc);vel.mult(decay);vel.limit(3);loc.add(vel);}void display(){strokeWeight(weight+1.5);stroke(0, alpha);point(loc.x, loc.y);strokeWeight(weight);stroke(c);point(loc.x, loc.y);}
}

总结

创作工具与载体
传统绘画工具种类繁多，传统的画笔，数位板的笔，鼠标，甚至是大象的鼻子，树枝等等都可以用来作画。传统绘画的载体从传统的层面上来说主要有画纸、器皿、布料等等，后期衍生出了数位板板绘，在电脑上鼠绘等。
非传统的绘画系统的工具是我们的鼠标、键盘的交互方式，按压，点击，拖动都可以成为一种方式，它载体从字面上来说就是各种各样的编程软件的运行界面。
创作体验与技法
传统绘画与非传统绘画的创作体验不能够说哪种更好，两者各有千秋。
这个学期的速写课使我有机会接触到画画这一块内容，在绘画的过程中我真的很开心，可以去画我想画的东西，但由于我本身的技法水平不高，出来的最终作品可能有些欠缺，但我的体验感还是很满足的，这是我自己的作品。
非传统的绘画对于人们的技法水平的要求会不是那么高，就比如我的这个绘画系统，我本身已经设定好了很多的选项，只需要你去按照我的这个指南去用，就可以出来很好看，动态直观的效果了。创作的体验感是很不错的。
呈现效果与局限性
传统作画有二维也有三维的，软件种类繁多。什么效果都可以有，主要还是静态为主。但是各种软件，各种画画的专有名词，国画，水彩画，印象派，我画个画都要给我推进一个门派的类别里，真的有点心累，可能只有我这么觉得。
非传统绘画，反正已经非传统，管它什么风格，好看就行了，就是这么直白，抓住大众的眼球，生动有趣，但往往可能会接受度参差不齐。

参考连接

[1]Openprocessing：https://www.openprocessing.org/
[2]Processing 教程(2) - 鼠标、键盘事件、条件选择、屏幕宽高：https://blog.csdn.net/Losacii/article/details/48162797
[3]利用processing模拟粒子系统：https://blog.csdn.net/ant_look/article/details/50866807
[4]https://www.processing.org/
[5]Processing编程艺术：http://iprocessing.cn/