如何使用线性插值和链接列表创建颜色渐变？ [英] How would I make a color Gradient with linear interpolation along with Linked list?

问题描述

我正在尝试制作跟随鼠标的彩虹路径。我使用Linkedlist绘制鼠标的点，以便跟踪。小径本身看起来很完美，只有小路上看起来不正确的颜色。我希望他们互相褪色。有人告诉我使用线性插值并在查看它一段时间后似乎它可以工作我只是不知道如何实现它。

I am currently trying to make a rainbow trail that follows your mouse. i used Linkedlist to plot the points of my mouse so the trail follows along. The trail itself looks perfect its only the colors in the trail that don't look right. I'm wanting them to fade into each other. Someone told me to use linear interpolation and after looking into it for awhile it seems like it would work i just don't know how to implement it.

这是代码我到目前为止：

this is the code i have so far:

import impsoft.bots.ColorBot;
import impsoft.scripting.ibot.interfaces.AutoPaint;
import impsoft.scripting.types.ColorScript;

import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.util.Deque;
import java.util.LinkedList;

import impsoft.scripting.ibot.structs.XY;
import impsoft.scripting.types.ColorSkeltonScriptable;
import impsoft.scripting.types.parallel.scriptjobs.ScriptJob;


public class MouseTrail extends ColorScript implements AutoPaint {
     public MouseTrail(ColorBot c) {
      super(c);

     }
    public void script() throws InterruptedException {
     while(true) {
         mt.setSize(500);
         mt.exec();

      sleep(100);
     }
    }

    public static String name = "Mouse trail test";
    public static String author = "Llaver";
    public static String description = "test for mouse trail";
    public static double version = 1.00;


public class MouseTrail2 extends ScriptJob implements AutoPaint {


    private int size;
    private final ColorSkeltonScriptable cs;
    private final Deque<XY> trail = new LinkedList<XY>();
    private final Color[] rainbow = new Color[]{
            Color.RED, Color.YELLOW, Color.GREEN, Color.CYAN, Color.BLUE, Color.magenta
        };

    public MouseTrail2(ColorSkeltonScriptable cs) {
        super(cs);
        this.cs = cs;
    }

    public void setSize(int s) {
        size = s;
        s = 200;
    }

    public void runV() {
        try {
            while (true) {

                synchronized (trail) {
                    if (trail.size() >= size) {
                        trail.pop();
                    }
                    trail.offer(cs.getCurrentMouseXY());
                }
                sleep(1);
            }

        } catch (InterruptedException e) {
        }
    }

    @Override
    public void paint(Graphics g) {
        final Graphics2D g2d = (Graphics2D) g;
        g2d.setStroke(new BasicStroke(3, BasicStroke.CAP_BUTT, BasicStroke.JOIN_ROUND));
        g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
        synchronized (trail) {
                float perc;
                int idx;
                for(int i = 1 ; i < trail.size() - 1 ; i++){
        XY current = ((LinkedList<XY>) trail).get(i);
        XY next = ((LinkedList<XY>) trail).get(i - 1);
        perc = ((float)i / trail.size()) * 100f;
       idx = Math.round((perc * (float)rainbow.length) / 100f);
       if(idx >= rainbow.length)idx -= 1;       
       g2d.setColor(rainbow[idx]);
        g.drawLine(current.x, current.y, next.x, next.y);
    }
            }
        }

    }


@Override
public void paint(Graphics arg0) {  
}
private MouseTrail2 mt = new MouseTrail2(this);

}

一些照片：

这就是我现在所拥有的：

this is what i have right now:

http://img11.imageshack.us/img11/3031/mousetrailhavenow.png

这就是我想要的获取：

http：// img594.imageshack.us/img594/7381/mousetrailtryingtoget.png

这可能会让这一点更加清晰吗？

does that possibly make this a little more clear?

推荐答案

为了获得你想要的效果，你可能需要创建一个跨越 hue alpha 的范围另一方面的透明度。作为相关示例，此 KineticModel 使用 RadialGradientPaint 创建一个 GradientImage 个实例。在每个图像中，alpha从中心的 0xff （1.0）径向变化到外围的 0x3f （0.25） 。

To get the effect you want, you are probably going to have to create a custom gradient paint that spans the gamut of hue along one axis and the range of alpha transparency along the other. As a related example, this KineticModel uses a RadialGradientPaint to create an array of GradientImage instances. In each image, the alpha varies radially from 0xff (1.0) at the center to 0x3f (0.25) at the periphery.

附录：基于您的图片，只需将图形上下文的 Stroke 设置为合适的宽度，将颜色设置为颜色查找表中的下一个色调（ clut ）和 drawLine（）。您可以改变色调，保持饱和度和亮度不变。

Addendum: Based on your picture, just set the graphics context's Stroke to a suitable width, set the paint to the next hue from your color lookup table (clut), and drawLine(). You can vary the hue, keeping the the saturation and brightness constant.

float N = 360;
Queue<Color> clut = new LinkedList<Color>();
for (int i = 0; i < N; i++) {
    clut.add(Color.getHSBColor(i / N, 1, 1));
}

您必须根据空间或时间决定何时更改颜色。对于后者， javax.swing.Timer 是一个不错的选择。

You'll have to decide when to change colors based on space or time. For the latter, javax.swing.Timer is a good choice.

这篇关于如何使用线性插值和链接列表创建颜色渐变？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！