赏析村长《艺术字系列:冰封的 EasyX》实现原理
[編輯] [转简体] (简体译文)概要
在村长的基础上将文字进行边缘点筛选,获得不一样的效果
正文
这篇文章是我在学校机房写的,时间仓促,简单写一下。
首先放出村长的博客链接《艺术字系列:冰封的 EasyX》:https://codebus.cn/yangw/word-art-freeze
这个艺术字的原理其实很简单:
首先绘制一段 "EasyX" 字符串到 IMAGE 中,接着收集 IMAGE 中所有有颜色的点,统计这些点的数量,然后将这些坐标存入数组。
接下来还需要生成相同长度的一个 POINT 类型的数组,为这个数组初始化以完全随机的坐标,坐标的范围在目标输出图像的大小范围内(640x480)。
讲到这里大家应该就明白了,之所以要生成一个随机数数组,就是为了将每个有色值的点和随机点进行连线,这样就可以获得文字向外发光的效果,这段“连线”的代码就是 main 函数中的那个 for 循环。
值得注意的是,村长的这段连线是以 x+=2 作为坐标位移的,这样可以突出光的密集和松散的区域,发光效果会更好;但如果直接 i++,就会导致“光线”太密集,无法突出文字主体;而如果 i+=3,则会导致文字整体太松散,不过由于在 main 函数中调用了 Blur 函数渲染了模糊效果,所以他们的最终效果差别并不会很大。
由于单纯的连线是十分生硬的,并且没有颜色强弱的变化,所以 Blur 函数在光感的渲染上起到了很重要的作用。
我觉得这个发光艺术字的实现方式很不错,之前我都觉得要以文字点为中心来向外发散“光芒”,而随机生成点再和文字主体连线的方式让我豁然开朗。
关于模糊效果的原理和实现,可以参考:
https://codebus.cn/yangw/free-dots
https://codebus.cn/zhaoh/blur-filter
新增边缘点筛选的代码(dev-cpp 编写):
#include <graphics.h> #include <conio.h> #include <time.h> // 定义全局变量 POINT *g_pDst; // 点集(目标) POINT *g_pSrc; // 点集(源) int g_nWidth; // 文字的宽度 int g_nHeight; // 文字的高度 int g_nCount; // 点集包含的点的数量 // 是否为边缘点 bool isEdgePoint(int x, int y) { POINT t[4] = { {0,1}, {0,-1}, {1,0}, {-1,0} }; //POINT t[4] = { {0,2}, {0,-2}, {2,0}, {-2,0} }; if (getpixel(x, y) != WHITE) { return false; } for (int i=0; i<4; i++) { if (getpixel(x+t[i].x, y+t[i].y) != WHITE) { return true; } } return false; } // 获取目标点集 void GetDstPoints() { // 设置临时绘图对象 IMAGE img; SetWorkingImage(&img); // 定义目标字符串 TCHAR s[] = _T("EasyX"); // 计算目标字符串的宽高,并调整临时绘图对象的尺寸 setcolor(WHITE); setfont(100, 0, _T("Arial")); g_nWidth = textwidth(s); g_nHeight = textheight(s); Resize(&img, g_nWidth, g_nHeight); // 输出目标字符串至 img 对象 outtextxy(0, 0, s); // 计算构成目标字符串的点的数量 int x, y; g_nCount = 0; for(x = 0; x < g_nWidth; x++) for(y = 0; y < g_nHeight; y++) if (isEdgePoint(x, y)) g_nCount++; // 计算目标数据 g_pDst = new POINT[g_nCount]; int i = 0; for(x = 0; x < g_nWidth; x++) for(y = 0; y < g_nHeight; y++) if (isEdgePoint(x, y)) { g_pDst[i].x = x + (640 - g_nWidth) / 2; g_pDst[i].y = y + (480 - g_nHeight) / 2; i++; } // 恢复对屏幕的绘图操作 SetWorkingImage(NULL); } // 获取源点集 void GetSrcPoints() { // 设置随机种子 srand((unsigned int)time(NULL)); // 设置随机的源数据 g_pSrc = new POINT[g_nCount]; for(int i = 0; i < g_nCount; i++) { g_pSrc[i].x = rand() % 640; g_pSrc[i].y = rand() % 480; } } // 全屏模糊处理(忽略屏幕第一行和最后一行) void Blur(DWORD* pMem) { for(int i = 640; i < 640 * 479; i++) { pMem[i] = RGB( (GetRValue(pMem[i]) + GetRValue(pMem[i - 640]) + GetRValue(pMem[i - 1]) + GetRValue(pMem[i + 1]) + GetRValue(pMem[i + 640])) / 5, (GetGValue(pMem[i]) + GetGValue(pMem[i - 640]) + GetGValue(pMem[i - 1]) + GetGValue(pMem[i + 1]) + GetGValue(pMem[i + 640])) / 5, (GetBValue(pMem[i]) + GetBValue(pMem[i - 640]) + GetBValue(pMem[i - 1]) + GetBValue(pMem[i + 1]) + GetBValue(pMem[i + 640])) / 5); } } // 主函数 int main() { // 初始化 initgraph(640, 480); // 创建绘图窗口看 DWORD* pBuf = GetImageBuffer(); // 获取显示缓冲区指针 GetDstPoints(); // 获取目标点集 GetSrcPoints(); // 获取源点集 // 运算 int x, y; for (int i = 2; i <= 256; i += 2) { COLORREF c = RGB(i-1, i-1, i-1); Blur(pBuf); // 全屏模糊处理 for (int d = 0; d < g_nCount; d++) { x = g_pSrc[d].x + (g_pDst[d].x - g_pSrc[d].x) * i / 256; y = g_pSrc[d].y + (g_pDst[d].y - g_pSrc[d].y) * i / 256; pBuf[y * 640 + x] = c; // 直接操作显示缓冲区画点 //putpixel(g_pDst[d].x, g_pDst[d].y, WHITE); } Sleep(10); // 延时 } // 清理内存 delete g_pDst; delete g_pSrc; // 按任意键退出 getch(); closegraph(); }
注:改变 isEdgePoint 函数中的筛选网格,可以获取不一样的效果,很好玩的。比如:
POINT t[4] = { {0,1}, {0,0}, {2,0}, {0,0} };
这样可以有 3D 文字效果~