Java - получить альфа-значение от 0 до 255, используя расстояние между двумя объектами - PullRequest
Новая
       43

Java - получить альфа-значение от 0 до 255, используя расстояние между двумя объектами

0 голосов
/ 04 октября 2018

Я работаю над 2D-платформерной игрой.На заднем плане star объектов, и эти звезды движутся вокруг.Я хотел провести черту между ними, и мне удалось сделать это без особых усилий.То, что я сейчас пытаюсь сделать, это добавить значение alpha (прозрачность) к нарисованным линиям.Я пытался написать уравнение, где альфа-значение обратно пропорционально к значению расстояние между двумя объектами, но не удалось.

Как мнематематически выразить следующее правило:

Чем больше расстояние, тем меньшее значение альфа получает

Например, если расстояние равно 400, тогда значение прозрачности должно быть 0 (java.awt.Color использует 0 как 100% -ную прозрачность и 255 как без прозрачности)


вот пример того, чтоЯ пытаюсь достичь: 

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var stars = [], // Array that contains the stars
    FPS = 60, // Frames per second
    x = 40, // Number of stars
    mouse = {
      x: 0,
      y: 0
    };  // mouse location

// Push stars to the array

for (var i = 0; i < x; i++) {
  stars.push({
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    radius: Math.random() * 1 + 1,
    vx: Math.floor(Math.random() * 50) - 25,
    vy: Math.floor(Math.random() * 50) - 25
  });
}

// Draw the scene

function draw() {
  ctx.clearRect(0,0,canvas.width,canvas.height);
  
  ctx.globalCompositeOperation = "lighter";
  
  for (var i = 0, x = stars.length; i < x; i++) {
    var s = stars[i];
  
    ctx.fillStyle = "#fff";
    ctx.beginPath();
    ctx.arc(s.x, s.y, s.radius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillStyle = 'black';
    ctx.stroke();
  }
  
  ctx.beginPath();
  for (var i = 0, x = stars.length; i < x; i++) {
    var starI = stars[i];
    ctx.moveTo(starI.x,starI.y); 
    if(distance(mouse, starI) < 150) ctx.lineTo(mouse.x, mouse.y);
    for (var j = 0, x = stars.length; j < x; j++) {
      var starII = stars[j];
      if(distance(starI, starII) < 150) {
        //ctx.globalAlpha = (1 / 150 * distance(starI, starII).toFixed(1));
        ctx.lineTo(starII.x,starII.y); 
      }
    }
  }
  ctx.lineWidth = 0.05;
  ctx.strokeStyle = 'white';
  ctx.stroke();
}

function distance( point1, point2 ){
  var xs = 0;
  var ys = 0;
 
  xs = point2.x - point1.x;
  xs = xs * xs;
 
  ys = point2.y - point1.y;
  ys = ys * ys;
 
  return Math.sqrt( xs + ys );
}

// Update star locations

function update() {
  for (var i = 0, x = stars.length; i < x; i++) {
    var s = stars[i];
  
    s.x += s.vx / FPS;
    s.y += s.vy / FPS;
    
    if (s.x < 0 || s.x > canvas.width) s.vx = -s.vx;
    if (s.y < 0 || s.y > canvas.height) s.vy = -s.vy;
  }
}

canvas.addEventListener('mousemove', function(e){
  mouse.x = e.clientX;
  mouse.y = e.clientY;
});

// Update and draw

function tick() {
  draw();
  update();
  requestAnimationFrame(tick);
}

tick();
canvas {
  background: #232323;
}
<canvas id="canvas"></canvas>

1 Ответ

0 голосов
/ 04 октября 2018

Вы должны использовать: 

((MAX_DISTANCE - distance) / MAX_DISTANCE) * 255

Объяснение:
(MAX_DISTANCE - distance) гарантирует, что больше расстояние, меньше результат.
Затем, ныряя на MAX_DISTANCE и умножая на 255, масштабирует его от 0-MAX_DISTANCE до 0-255.

...