小王子星球调色Web版 - the little prince-CSDN博客

本文链接：https://blog.csdn.net/qq_40127397/article/details/85346045

本文记录了一款以小王子为主题的Web版调色器的设计与迭代过程，从最初的扩展面板尝试，到颜料圈混合、曲线调色器，再到拟物化工具台调色，最终形成卡通风的小王子星球调色器。设计参照原著，具有丰富的交互元素，如月相变化显示颜色，星球旋转等。技术上，利用WebComponent实现模块化，结合颜色理论进行颜色混合，并进行了详细的月相计算和颜色转换。作者表达了对作品持续发展的期许。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

the little prince

最初，在信笔闲涂时，总会为调不出心想的那一抹颜色而心情烦躁。
BUT。
现在。
我可以正式的说。
这个问题依旧存在 U.U

但是。
在完全解释缘由，揭示现状之前，容我先回忆一遍最初的历程。

最初的想法

在这里插入图片描述
这是最初的想法，这个想法起源于照片调色，照片调色的核心是光色互补原理，举个例子就像是我想去北极玩，按照正常思维应该先去买许多御寒的衣服，装备上齐全的设备，在物色一位风趣能干的导游，然后…，但其实正确的方法是先挣钱，没钱拿什么去北极（真实）。

所以这个道理同样适用于调色，有首歌唱得好：”你说的黑不是黑，你要的白是什么白“，大抵说的就是这意思吧（鲁迅说过）。

如图，当我想把一个很灰的蓝（五颜六色的黑）变得更蓝，一般而言现有的调色面板支持我们增加RGB中的B（blue）的分量，这会得到偏紫的蓝色，而不是宝蓝色，更不是天蓝色；而在HSB面板中，直接调整Hue和Saturation，按照脑海中的方向前进，会得到一个很漂亮的紫色~~（漂亮个屁）~~ 。

但当我尝试光色混合，确实是可以直接获得想要的颜色，但是调整方法很不直观，特别是这需要C、M、Y、K四个值同时变动，这大大的不是良民。

尝试一：扩展面板

在这里插入图片描述
这就是第一次尝试，就是把CMYK这四个值做进原有的面板里，显然，这大大的不行，首先观感不能，特别是饱和度面板，从左向右饱和度减少的模式非常吃藕chou！

问题：丑、难以使用、老瓶装新醋~

尝试二：颜料圈混合

在这里插入图片描述

获得初始的两个颜色
拖动其中一个颜色向另一个颜色缓缓靠近
当被拖动的色环进入静止色环50%及更少时，混色为“ 静止颜色 * 100% + 移动颜色 * x% ”
当进入超过 r / 2 既超过50%时，混合颜色为“ 移动颜色 * 100% + 静止颜色 * （x - 50）% ”

总而言之，就相当于是把一种颜料缓缓滴入另一种颜料内，当然，整个过程是可回溯的，不会出现什么一块黑颜料掉进一个白颜料什么的惨剧，对，就是惨剧U.U

问题：初次使用难以上手，需要非常大的面板支持，没有使用趣味性

尝试三：曲线调色器

在这里插入图片描述
到这一步，设计就变得非常实用化了，色环中的圆圈显示初始颜色和当前颜色所在的位置，帮助更好掌握颜色的构成。
在启动时，调整曲线在R G B三个位置均有一个控制点，控制点可加可删。
当你拖动以有或者新创建的点，即意味着向调色盘内增加该点所对应的颜色；当你拖动线，既意味着整体饱和度的调整；当你拖动内部的圆环，则意味着亮度的调整。

这是一个设计的转折点！设计思路起源于Pr的LUmetri color界面

因为在这里，“RGB调色”和“HSB调色”被混合使用了，在增减颜料，既我们所说的 “变得更蓝”、“更红一点” 时，我们按照对应颜料量增减来实现颜色变化。但当说到 “ 颜色更亮”、“颜色更透” 就是饱和度（HSB里的S）和亮度（Brighensss）在起作用了。

PS：部分软件内使用HSV（V指代Volum），这里用的还是Brightness，更直观一点的啦！

问题：趣味性不存在的，变成了非常具有 ‘ 插件感 ’ 的生产力工具，当然不是因为编这个太难了，咳咳

尝试四：拟物化 - 工具台调色

在这里插入图片描述
于是乎，经过七天七夜，七七四十九天，我们从毛里求斯的椰子树上找到了灵感（没有）。
最终我们还是决定把这个App做的更加有趣一点，设想一下，当在旅途的你，打开了一个精致的便当盒子，就像这样。

在这里插入图片描述
每一片食物，都像玩具般有趣，恨不得全拨弄一遍，于是乎，抱着靠近那样的趣味感的想法，我们设计出来更新后的第一版设计，就是开始的那张图。

左侧的三大支颜料，对应简易R G B调色，中心色块的大小会显示颜料的多少
右侧的颜料环，表示高级补色调色环，原理同前所述的照片调色
桌面上的各种工具，各有其用。比如圆规，我可以将圆规拿起，调整它的开合角度，从而控制在 “ 草稿纸 ” 工具上试色时的画笔大小，诸如此类，尽量还原一种杂而不乱的工具台的风格。

问题：其实这一版已经完成了几乎所有的编程和大多数的设计绘制工作，但在最后的体验中，发现没有办法体现出那种随意放置的感觉，毕竟时鼠标操控，特别是右侧补色调色台，颜料的放置过于拘谨，影响整体设计风格

在几天的讨论后，我们最终还是决定放弃先前代码的50%和设计工作的90%，推翻重来，这也导致了后期工期较赶的问题，诶，哇啦啦啦啦啦啦 U.U

尝试五（最终版）：卡通风 - 小王子星球调色器

设计参照

在这里插入图片描述
这是原著的小王子。最后的设计很多参考自原著，所以味道还是比较正的~ 嘿嘿

这是一幅同人作品。

第一版

在这里插入图片描述
第一版主要是试试效果，整个界面还是很粗糙的（因为是我画的，或者PS扣的），不过就氛围而言还是有点意思的，所以决定继续加工。

第二版

在这里插入图片描述
第二版主要是尝试动效，比如月亮的阴晴圆缺，星球的转动，星光闪烁的效果以及背景星空的周期运行。
测试效果尚可，这才决定继续细化。

第三版

在这里插入图片描述
第三版，也就是现在的版本。来简单介绍一下功能吧。

月球：当前颜色显示器，月相的变化对应色相（0 ~ 360°），当颜色改变时，月相也会随之改变，以一种动画的方式。
星星：亮度调节器，点击星星，星光会由明至暗，这回直接调整当前颜料颜色的亮度，并反应在月球上

在这里插入图片描述

画板：点击画板可以进入试色界面，颜色会随之慢慢变淡
星球与小王子：点击小王子，星球会随之转动，同时小王子的跑动特效开始播放，背景的星空也开始移动。星球内部有可用颜色的颜料，点击有动画，同时，内部的时钟指针表示当前颜色的所属范围，体验即可知哦~

以上就是软件的简单说明，在设计之初还有非常多的奇思妙想，但时间原因无法一一实现，只能待日后有空闲时（真的有么？）再继续加工完成。
其中一点就是关于星星，要是整个页面使用游戏引擎来做，那是这个星星可以是真的悬挂在一根线上，真的可以用鼠标托起来，让星星蹦蹦跳跳的（橡皮筋么这？？），或者是用支持虚拟现实的Aframe开发，等等。

技术总结

总结所用技术，以月球的实现为主

按照文档的要求来，首先是关于代码行数，小组总共三人，制作成品两个。

项目一：CopyBoard

这个是最初的制作，因为被毙了（咳咳），但是关于调色的问题是从这里发源的，也算是大家劳动的结晶吧。
制作三周（虽然中间有断档啦，因为有些其他事情）

Github：里面有些需求分析啥的，不过不是重点

在这里插入图片描述

项目二：the little prince

就是之前这么多说的，项目依旧三人完成，历时1 + 1.5周，因为中间重新设计停滞了三天

Github：有可执行文件，readme还没有写，懒了

下面简述一下月亮的实现方案

class Moon extends HTMLElement {
   
  // @ts-ignore
  static get observedAttributes() {
   
    return ['phase', 'color'];
  }
}

这里定义了月亮的属性，“ 颜色 ” 和 “ 月相 ”，这样日后这个月亮可以被使用在任何地方，整体使用了WebComponent实现模块化，非常的简洁。

在这里插入图片描述

  calcMoonMuskXFromPhase(phase) {
   
    const normalizedPhase = phase <= 50 ? phase : 100 - phase;
    const diameterOfMoon = 2 * radiusOfMoon;

    return diameterOfMoon - (2 * diameterOfMoon / 100) * normalizedPhase;
  }

  calcMoonMuskReverseFromPhase(phase) {
   
    return phase <= 50 ? -1 : 1;
  }

  updateMuskReverseState(isReverse) {
   
    if (isReverse !== this.isMuskReversed) {
   
      this.isMuskReversed = isReverse;

      this.updateStyle();
    }
  }
  
  getMoonMuskFromX(x) {
   
    const centerPointXOfMusk = (xOfMoon ** 2 + radiusOfMoon ** 2 - x ** 2) / (2 * xOfMoon - 2 * x);