欢迎光临散文网 会员登陆 & 注册

algodoo进阶教程(一)——闪色的设定

2023-07-19 10:15 作者:逆旅谭帝谔  | 我要投稿

你还在为不会制作闪色而烦恼吗?

本文可以让你精通闪色制作原理

目录:

一、取余

二、三角函数

附录:各种闪色的代码(看不懂可以来这里自取)

————————————正文开始————————————

一、取余

取余,顾名思义,就是取余数。符号是%,用法是:

若a÷b=c……d,则:a%b=d,(a,b,c,d∈Z)(取余计算与乘除计算同级)

看一个例子:

postStep=(e)=>{

    scene.my.rainbow = color;

    colorHSVA = [270 * sim.time % 360, 1, 1, 1]

}

这是 @灰安教主 的图中彩虹的代码。(个人不太推荐写在postStep里,后期在使用新规则时可能产生不必要的麻烦)

第一行不用管,咱们直接分析取余部分:

色相为270 * sim.time % 360,那么色相的变化不是完全连续的,从0°到360°均匀变化,每1.5秒完成一次循环。

也就是说,取余只适合某一变量的单向均匀循环变化,其中只有一个参数(270)负责控制闪烁速度。

由此,各种彩虹的制作都可以解决了。



二、三角函数(重点)

高中我们都学过三角函数的复合形式:y=Asin(wx+φ)+B

那么我们应该如何将它利用到闪色制作上来呢?

看一个例子:

postStep=(e)=>{

    scene.my.mono = color;

    colorHSVA = [0, 0, math.sin(sim.time * 6) / 2 + 0.5, 1]

}

(math.sin()是algodoo自带的函数,前面的math.不能省)

这是 @灰安教主 的图中黑白闪的代码。

第一行不用管,咱们直接分析三角函数部分:

对照标准式,咱们可以得到:

A=1/2 ; w=6 ; φ=0 ; x=sim.time ; B=0.5

什么意思呢?

colorHSVA(2)即颜色的亮度参数(范围为0到1)的基准线为0.5,以0.5的振幅来回浮动,且以约1.02秒为一次浮动周期,变量是sim.time(开始拟真后计时)。

也就是说,A决定振幅,w决定闪烁速度,B为基准线,φ无所谓

三角函数适用于变量循环往复,摆动式的变化。

由此,三角函数可以解决绝大多数闪色的问题。

再来一个例子:

如果我想做酸橙-品红闪呢?

已知:酸橙rgb:(0,256,0);品红rgb:(256,0,256)

翻译成algodoo的颜色,则

酸橙:color=【0,1,0,1】;品红:color=【1,0,1,1】

同样,分析三角函数的几个参数。

我们发现,两个颜色的四个参数中有三个都不一样,那么这三个参数都得使用三角函数。

可以看出,三者的基准线都为0.5,振幅都为0.5,闪烁速度分别为x,-x,x(x自定,可正可负)

接下来上代码:

color={

    [-0.5 * math.sin(3 * sim.system.time) + 0.5, 0.5 * math.sin(3 * sim.system.time) + 0.5, -0.5 * math.sin(3 * sim.system.time) + 0.5, 1.0]

}

其中system.time是一打开algodoo就开始计时的。

建议像我这样写在color里,可以腾出postStep与update里的空间以供做其他处理。

最后总结一个任意闪色制作的公式:

颜色1:【a1,b1,c1】;颜色2:【a2,b2,c2】(a1,b1,c1,a2,b2,c2均为该颜色原来的rgb除以256,∈【0,1】)

则:

color={

    [((a1 - a2) / 2) * math.sin(3 * sim.system.time) + (a1 + a2) / 2 , ((b1 - b2) / 2) * math.sin(3 * sim.system.time) + (b1 + b2) / 2 , ((c1 - c2) / 2) * math.sin(3 * sim.system.time) + (c1 + c2) / 2 , 1.0]

}

注意:(1)1和2的前后顺序一定要固定,且三个一致

(2)公式中的3可更改,而且必须3个一起改

附录:部分闪色的代码:(复制时只需复制花括号及其里面的内容至对应变量后即可)

1.彩虹:colorHSVA = {

[270 * sim.time % 360, 1, 1, 1]

}

2.浅彩虹:colorHSVA = {

[270 * sim.time % 360, 0.5, 1, 1]

}

3.深彩虹: colorHSVA = {

[270 * sim.time % 360, 1, 0.5, 1]

}

4.彩虹闪:colorHSVA = {

[270 * sim.time % 360, math.sin(sim.time * 6) * 0.5 + 0.5, math.cos(sim.time * 6) * 0.5 + 0.5, 1]

}(注意这里的明度使用了cos)

5.黑白闪:colorHSVA = {

[0, 0, math.sin(sim.time * 6) / 2 + 0.5, 1]

}

6.红黑闪:colorHSVA = {

[0, 1, math.sin(sim.time * 6) / 2 + 0.5, 1]

}

7.青白闪: colorHSVA = {

[180, math.sin(sim.time * 6) / 2 + 0.5, 1, 1]

}

8.螳螂生:color = {

    [math.sin(sim.system.time * 3) * (22.5 / 256) + (156.5 / 256.0), math.sin(sim.system.time * 3) * (20.5 / 256) + (160.5 / 256), math.sin(sim.system.time * 3) * (78.0 / 256) + (117.0 / 256), 1]

}

9.王瓜生:color = {

    [math.sin(sim.system.time * 3) * (6.0 / 256) + (236 / 256.0), math.sin(sim.system.time * 3) * (77.0 / 256) + (77.0 / 256), math.sin(sim.system.time * 3) * (50.0 / 256) + (68.0 / 256), 1]

}

10.始电:color = {

    [math.sin(sim.system.time * 3) * (16.0 / 256) + (34 / 256.0), math.sin(sim.system.time * 3) * (37.5 / 256) + (75.5 / 256), math.sin(sim.system.time * 3) * (47.5 / 256) + (123.5 / 256), 1]

}

11.仓庚鸣:color = {

    [math.sin(sim.system.time * 3) * (28.0 / 256) + (226 / 256.0), math.sin(sim.system.time * 3) * (99.0 / 2 / 256) + (170.5 / 256), math.sin(sim.system.time * 3) * (36.5 / 256) + (57.5 / 256), 1]

}

12.雨水:color = {

    [math.sin(sim.system.time * 3) * 0.16015625 + 0.8125, math.sin(sim.system.time * 3) * 0.22070313 + 0.60351563, math.sin(sim.system.time * 3) * 0.1875 + 0.69921875, 1]

}

13.渐变红(渐变单色就举这一个例子):update = (e)=>{

    sin(sim.time * 3) / 2 >= 0 ? {

        colorHSVA = [0, 1, 1 - sin(sim.time * 3) / 2, 1]

    } : {

        colorHSVA = [0, 1 + sin(sim.time * 3) / 2, 1, 1]

    }

}

14.随机色:后续教程里讲到随机数时再说

文章到此就结束了。

本文只介绍了一些基础闪色的设定,如有其他颜色可以在评论区里补充。

至于脉冲,后期也会专门提溜出一期来说。

如果对你有用的话请多多转发哦!感谢大家的支持!

algodoo进阶教程(一)——闪色的设定的评论 (共 条)

分享到微博请遵守国家法律