Processing实现Google新图标

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/pdcxs007/article/details/48420569

看到新的Google图标，感觉很好玩，使用Processing实现了一下。先看一下Google的图标：

以下是实现的代码：

PGraphics path;
float vec;
float x, y;
float radius;
float dotRad;
float cx, cy;
float bottom, top;

void setup() {
    size(700, 200);
    background(255);
    smooth();
    path = createGraphics(width, height);
    radius = 0.4 * height;
    dotRad = 4;
    x = 0;
    cx = width / 2;
    cy = height / 2;
    bottom = cy + radius;
    top = cy - radius;
    y = getY(x);
    vec = 1;
}

void draw() {
    x += vec;
    if (x >= width || x <= 0)
        vec *= -1;
    float calx, caly;
    calx = getX(x);
    caly = getY(x);
    background(255);
    text("Click mouse to clear the path.", 5, 12);
    ellipse(cx, cy, 2*radius, 2*radius);
    line(0, bottom, width, bottom);
    stroke(255, 0, 0);
    line(x, top, width / 2, bottom);
    line(x, top, x, bottom);
    line(x, caly, calx, caly);
    stroke(0);
    drawDot(width / 2, bottom);
    drawDot(x, bottom);
    drawDot(x, top);
    drawDot(calx, caly);
    drawDot(x, caly);
  
    path.beginDraw();
    path.stroke(0,0,255);
    path.smooth();
    path.strokeJoin(ROUND);
    path.strokeCap(ROUND);
    path.strokeWeight(2);
    path.line(x-vec, y, x, caly);
    path.endDraw();
    image(path, 0, 0);
    y = caly;
}

float getY(float x) {
    return cy + cos(2*atan2(2*radius, x - cx))*radius;
}

float getX(float x) {
    return cx + sin(2*atan2(2*radius, x - cx))*radius;
}

void drawDot(float x, float y) {
    fill(0);
    ellipse(x, y, 2*dotRad, 2*dotRad);
    noFill();
}

void mousePressed() {
    path.clear();
}

实现的效果为：