程序化图像生成中如何基于q向量模长混入第三种颜色？

核心逻辑 #

你原有的两色渐变已经实现了基础的线性插值（lerp），混入第三色只需要在此基础上多做一次线性插值即可，整体流程和查到的实现思路完全对应：

• 第一步：保留原有逻辑，通过0~1范围的f值插值color1和color2，得到基础渐变底色
• 第二步：计算二维向量q的模长，将模长映射到0~1区间，作为第三色的混合权重
• 第三步：用得到的权重，在基础底色和color3之间做线性插值，得到最终像素颜色

权重计算说明 #

已知q的x、y分量取值范围均为0~100，因此向量模长的理论最大值为sqrt(100² + 100²) ≈ 141.42，归一化时需要除以对应最大值才能保证权重落在0~1区间，避免颜色溢出。你可以根据想要的视觉效果选择归一化规则：

• 规则1：除以141.42，模长取到理论最大值时权重为1，完全显示color3
• 规则2：先将模长截断到0~100范围，再除以100，模长达到100时权重即为1

完整实现伪代码 #

// 建议计算时统一将颜色转成0~1范围的浮点值，最终输出前再转回0~255整数，减少计算误差
color1 = (7/255.0, 46/255.0, 76/255.0)
color2 = (119/255.0, 230/255.0, 161/255.0)
color3 = (148/255.0, 129/255.0, 134/255.0)

for every x, y in image {
    // 原有逻辑：计算得到0~1范围的f值
    float f = (output of crazy calculation)

    // 插值得到color1到color2的基础底色
    float base_r = color1.r + (color2.r - color1.r) * f;
    float base_g = color1.g + (color2.g - color1.g) * f;
    float base_b = color1.b + (color2.b - color1.b) * f;

    // 计算q向量模长
    float q_len = sqrt(q.x*q.x + q.y*q.y);
    
    // 归一化得到0~1的混合权重w，二选一即可
    // 选项1：模长到理论最大值141.42时完全显示color3
    float w = q_len / 141.421356;
    // 选项2：模长到100时完全显示color3，超过100的部分按1计算
    // float w = clamp(q_len, 0.0, 100.0) / 100.0;

    // 可选：调整权重曲线优化视觉效果
    // w = pow(w, 1.8); // 指数大于1时，低模长区域第三色更淡，高模长区域显色更快
    // w = smoothstep(0.0, 1.0, w); // 平滑权重两端的过渡，避免硬边界

    // 按权重混合基础色和color3：w=0时完全显示基础色，w=1时完全显示color3
    float final_r = base_r + (color3.r - base_r) * w;
    float final_g = base_g + (color3.g - base_g) * w;
    float final_b = base_b + (color3.b - base_b) * w;

    // 最终输出前将0~1的浮点色值乘255，转成0~255范围的整数色值即可
}

调参参考 #

• 如果觉得第三色过于抢眼，可以给权重设置上限，比如w = min(w, 0.5)，即第三色最多占50%混合比例，保留原有两色渐变的层次
• 如果希望第三色只出现在高模长区域，可以给权重加阈值，比如w小于0.2时直接设为0，低模长区域完全不混入第三色
• 如果输出出现色带断层，可以给w值叠加1%以内的随机噪点，过渡会更自然

内容的提问来源于stack exchange，提问作者Rylan Yancey