我将如何使用线性插值和链表制作颜色渐变? [英] 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.

这是我目前的代码:

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);

}

一些图片:

这就是我现在拥有的:

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屋！