苹果昨晚发布的东西没有吊起我太多胃口，但是，苹果的发布会宣传画还是一如既往地简约又好看，对，我说的就是下面这种：
还可以用在Presentation中：

用Processing写了一段，大约50行。
嗯，然后把任意logo图片拖进去就能生成类似风格的图片了。
比如~~下面这几个logo，你认出了几个~

不仅是logo可以，处理普通图片也是可以的，比如把这张吉他图片拖进去，就能得到类似风格的图片：

哦，忘了说，处理吉他这张图片时，THRESHOLD后面的参数要调小一些。

代码大体的思路是这样的：
Logo图片导入后，先用滤镜里的THRESHOLD分成黑白两色，视情况看是否需要用INVERT进行反色；然后运用滤镜里的BLUR使得logo的边缘变成渐变的灰色。
在得到的这张图上按照圆角矩形的间距均匀取点，得到各点的颜色，由颜色的亮度值brightness()决定绘制在该点上的圆角矩形的大小，所有圆角矩形的颜色都由所在点的水平位置决定，就是通过map()把横坐标投射到hue()色相带上得到相应的值。
再单独写个圆角矩形的函数供调用，一切OK~

代码如下：
PImage selected;
float hueLv;
int spacing=12;
int sideLen;
void setup() {
selected=loadImage("guita.png");
selected.resize(400, 0);
selected.filter(THRESHOLD, 0.9);
//selected.filter(INVERT);
selected.filter(BLUR, int(spacing*2/3));
size(selected.width, selected.height);
background(255);
noLoop();
}
void draw() {
for (int i=spacing/2;i<selected.width;i+=spacing) {
if (map(i, 0, selected.width-1, 0, 255)-156<0) {
hueLv=map(i, 0, selected.width-1, 0, 255)+100;
}
else {
hueLv=map(i, 0, selected.width-1, 0, 255)-156;
}
println(hueLv);
colorMode(HSB);
fill(hueLv, 150, 220);
for (int j=spacing/2;j<selected.height;j+=spacing) {
sideLen=int(map(brightness(selected.get(i, j)), 0, 255, 0, spacing*7/8));
Rrect(i, j, sideLen);
}
}
}
void Rrect(int x, int y, int side) {
noStroke();
beginShape();
vertex(x-side*3/8, y-side/2);
vertex(x+side*3/8, y-side/2);
arc(x+side*3/8, y-side*3/8, side/4, side/4, -HALF_PI, 0);
vertex(x+side/2, y-side*3/8);
vertex(x+side/2, y+side*3/8);
arc(x+side*3/8, y+side*3/8, side/4, side/4, 0, HALF_PI);
vertex(x+side*3/8, y+side/2);
vertex(x-side*3/8, y+side/2);
arc(x-side*3/8, y+side*3/8, side/4, side/4, HALF_PI, PI);
vertex(x-side/2, y+side*3/8);
vertex(x-side/2, y-side*3/8);
arc(x-side*3/8, y-side*3/8, side/4, side/4, PI, PI+HALF_PI);
endShape();
}

代码+注释如下：
PImage selected;
float hueLv;
//苹果那张图里的颜色变化用的是HSB色彩模式下的色相变化，也就是hue()
int spacing=12;
//相邻圆角矩形中心点之间的距离，可以自己调整，然后看看有啥变化
int sideLen;
//圆角矩形的边长
void setup() {
selected=loadImage("guita.png");
selected.resize(400, 0);
//调整logo图片的尺寸，当resize后面的参数一个为0时表示图片等比例缩放，比如这里表示把图片的宽度调为400，同时图片高度等比例缩放。
selected.filter(THRESHOLD, 0.9);
//图片分成黑白两色
//selected.filter(INVERT);
//有些logo颜色是反的，看情况来uncomment这句
selected.filter(BLUR, int(spacing*2/3));
//模糊滤镜，模糊程度影响后面圆角矩形群的观感，所以这里把模糊程度和间距参数相关联
size(selected.width, selected.height);
//图片大小决定画布窗口大小
background(255);
noLoop();
//让后面的void draw()只执行一次
}
void draw() {
for(int i=spacing/2;i<selected.width;i+=spacing) {
//在图片宽度内，每隔一个“间距”就打个点
if (map(i, 0, selected.width-1, 0, 255)-156<0) {
hueLv=map(i, 0, selected.width-1, 0, 255)+100;
}
else {
hueLv=map(i, 0, selected.width-1, 0, 255)-156;
}
//把该点的横坐标相对于宽度的比例关系投射到色相带上得到相应的hue值
//用了一个if判断是因为在苹果原图里并不是从左到右正好对应着色相的从0到255，
//而是有一个偏移，这里用if检测并纠正。
println(hueLv);
//这行没用，我自己调试色相带偏移程度时用的
colorMode(HSB);
//颜色模式不是默认的RGB而是HSB，这行很关键
fill(hueLv, 150,220);
//算出每一列的颜色了
for (int j=spacing/2;j<selected.height;j+=spacing) {
sideLen=int(map(brightness(selected.get(i, j)), 0, 255, 0,spacing*7/8));
//每一列内，用各点的颜色的亮度值（前面BLUR出来的变化）算出圆角矩形的边长
Rrect(i, j, sideLen);
//画圆角矩形，Rrect这个自己写的函数在后面
}
}
}
void Rrect(int x, int y, int side) {
//每个点上画圆角矩形时都要调用
noStroke();
beginShape();
vertex(x-side*3/8, y-side/2);
vertex(x+side*3/8, y-side/2);
arc(x+side*3/8,y-side*3/8, side/4, side/4, -HALF_PI, 0);
vertex(x+side/2, y-side*3/8);
vertex(x+side/2, y+side*3/8);
arc(x+side*3/8, y+side*3/8, side/4, side/4, 0, HALF_PI);
vertex(x+side*3/8, y+side/2);
vertex(x-side*3/8, y+side/2);
arc(x-side*3/8, y+side*3/8, side/4, side/4, HALF_PI, PI);
vertex(x-side/2, y+side*3/8);
vertex(x-side/2, y-side*3/8);
arc(x-side*3/8, y-side*3/8, side/4, side/4, PI, PI+HALF_PI);
endShape();
//这段没啥说的，四条线段四个弧线在beginShape和endShape间间次顺时针排列
}

拓展思考：既然是画一张静态图片，为什么不扔掉void setup()和void draw()，直接写有用的东西，而是费尽心机地在void setup()里加一句noLoop()让后面的void draw()只运行一遍？
Prezi_暗流 答：在这里例子里，有一个自创的圆角矩形函数Rrect，对于类似包含自己写的函数或者class的sketch，没有void setup()来进行控制的话，会出现很多问题，比如：unexpected token~~
评论：哦，貌似真的是这样耶~~
Prezi_暗流 Re：我自己在这里摔了不少跟头，都是摔出来的血的教训啊~~

结语：
相对于之前的拟物化，苹果现在的扁平化风格用Processing画起来简直太顺手了，画的过程也很有意思，根本停不下来！
欢迎关注我的新浪微博：@Prezi_暗流
本文原创，转载请注明出处

大神，一直接受不了扁平化风格怎么破？好像大脸上画上细眉毛，细眼镜，细嘴唇！就因为这个还停留在ios6

好贴！！

0a2e

顶

LZ，怎么导入图片呢，求详解！！

根本看不懂代码啊！！！

把吉他图片拖进去 运行后 上面说缺少guita。png 如何解决 怎么导入？