当用计算机思维进行Logo设计时? | D2Learn开源社区

最近在github上创建了一个d2learn社区, 于是就想着怎么也得搞个Logo吧, 于是结合社区背景设计了如下Logo

这个logo初看, 可能看不出什么。但是如果给一个提示: 二进制。那么我相信很多有一些计算机背景的同学, 肯定就能猜到这个logo的设计思路了 —— 二进制 + ASCII码。下面就来详细的介绍一下D2Learn Logo和其动画的创作过程

Logo想法的诞生过程

由于d2learn是一个关于技术知识分享、学习、交流的开源社区。所以logo设计的时候希望体现一定的技术背景并且一定程度的能表达d2learn, 这样就有了大体框架

• 用二进制做技术背景表达
• 把d2learn含义直接或间接的融入Logo

从文字到图案 - 二进制和ASCII码

这样我们就能很容易把 d2learn或其中的几个字母通过ASCII转成对应的二进制

d2learn
01100100 00110010 01101100 01100101 01100001 01110010 01101110

或许可以换个排序方式?

01100100 // d
00110010 // 2
01101100 // l
01100101 // e
01100001 // a
01110010 // r
01101110 // n

似乎有点"图案"的感觉了

起初也差点就想把0和1的颜色调一下就当做社区logo的, 但想了想是不是有点太直白了点?

同时也想到了0和1与颜色中黑与白似乎是对应的, 这样就可以把0用黑色表示, 1用白色表示就能自然的形成一个图案了

这样看起来就感觉有点哪个意思了, 但还是单调了点。或许可以把白色换成天蓝色(青-CYAN)似乎更有科技感一点?

到这 基本这里 图案也有了、含义也有了、但似乎还是缺少了一点“艺术性”?

融入色彩艺术

由于一个字节由8个bit位组成, 但是ACSII码的最高位都是0, 并且d2learn也是7个字母。这就导致Logo的实际大小是7x7。在这种情况下如果要突出8这个数字或者显式一点8bit的含义就是把7x7扩展到8x8。

为了不破坏图案, 或许可以给已经形成的图案加一个底座, 并且底座必须要8bit都要点亮才符合我们的期望, 这里的难点就变成了底座的颜色选择了

如果采用一种颜色会不会感觉太单调? 如果采用多色那又选择哪些颜色呢?

能不能把“所有颜色”都融入这个logo里呢? 这个时联想到先前的白色、色散、光谱色(彩虹色)。这样就恰到好处 [红、橙、黄、绿、青、蓝、紫] + 白 正好是8种颜色。这样我们logo底盘的8个bit位就可以用这些颜色点亮了, 也就形成了最开始的logo图案

并且黑色也作为背景色没有缺席

Logo动画生成

使用8x8的像素面板, 然后从上到下依次控制像素的显示

• bit为1的像素: 执行FadeIn动画
• bit为0的像素: 执行FadeOut动画

最后形成的效果就有点Terminal控制终端闪烁的输入提示符一样, 一个一个的输入像素的感觉...

动画生成代码

#include <vector>

#include "hanim.h"


using namespace hanim;

const static int THICKNESS_240P = 1;
const static int THICKNESS_480P = 2;
const static int THICKNESS_1080P = 4;

const static int THICKNESS = THICKNESS_480P; // THICKNESS_1080P;

static std::vector<std::vector<bool>> d2learnLogoMap {
    {0,1,1,0,0,1,0,0}, // d
    {0,0,1,1,0,0,1,0}, // 2
    {0,1,1,0,1,1,0,0}, // l
    {0,1,1,0,0,1,0,1}, // e
    {0,1,1,0,0,0,0,1}, // a
    {0,1,1,1,0,0,1,0}, // r
    {0,1,1,0,1,1,1,0}  // n
};

struct D2LearnLogo : public Scene {
    virtual void timeline() override {
        auto logo = PixelPanel();
        logo.stroke_color(HColor::BLACK);
        logo.scale(2);
        //play(Create(logo));
        for (int i = 0; i < 7; i++) {
            for (int j = 0; j < 8; j++) {
                if (d2learnLogoMap[i][j]) {
                    play(FillColor(logo[i][j], HColor::CYAN), 5);
                } else {
                    play(FadeOut(logo[i][j]), 5);
                }
            }
        }
        play(FillColor(logo[7][0], HColor::RED), 10);
        play(FillColor(logo[7][1], HColor::ORANGE), 10);
        play(FillColor(logo[7][2], HColor::YELLOW), 10);
        play(FillColor(logo[7][3], HColor::GREEN), 10);
        play(FillColor(logo[7][4], HColor::CYAN), 10);
        play(FillColor(logo[7][5], HColor::BLUE), 10);
        play(FillColor(logo[7][6], HColor::PURPLE), 10);
        play(FillColor(logo[7][7], HColor::WHITE), 10);
    }
};

int main() {
    hanim::HEngine::default_config1();
    //hanim::HEngine::set_window_size(320, 240);
    //hanim::HEngine::default_config2();
    hanim::HEngine::recorder_file_name("d2learn-logo");
    hanim::HEngine::render(D2LearnLogo());
    hanim::HEngine::save_frame_to_img("d2learn-logo.png");
    return 0;
}

动画视频

https://github.com/user-attachments/assets/03999462-5902-4e03-82e8-47289cabbe4b

Other

Logo生成和动画完整代码

d2learn开源社区