Получить изогнутый результирующий набор, а не угловой в JavaScript (требуется математическая помощь)

У меня есть скрипт, который создает градиент путем затенения ячеек на основе их расстояния от набора координат. То, что я хочу сделать, это сделать градиент круглым, а не ромбовидной, какой он сейчас является. Вы можете увидеть пример здесь: http://jsbin.com/uwivev/9/edit

var row = 5, col = 5, total_rows = 20, total_cols = 20;

$('table td').each(function(index, item) {

    // Current row and column        
    var current_row = $(item).parent().index(), 
        current_col = $(item).index();

    // Percentage based on location, always using positive numbers
    var percentage_row = Math.abs(current_row-row)/total_rows;
    var percentage_col = Math.abs(current_col-col)/total_cols;

    // I'm thinking this is what I need to change to achieve the curve I'm after
    var percentage = (percentage_col+percentage_row)/2;

    $(this).find('div').fadeTo(0,percentage*3);

});

Если бы вы могли дать мне руку с правильной математической функцией, чтобы получить кривую, я после этого было бы здорово! Спасибо!

Даррен

Источник

3 ответа

Решение
// Current row and column        
var current_row = $(item).parent().index(), 
    current_col = $(item).index();

// distance away from the bright pixel
var dist = Math.sqrt(Math.pow(current_row - row, 2) + Math.pow(current_col - col, 2))

// do something with dist, you might change this
var percentage = dist / total_cols;

$(this).find('div').fadeTo(0,percentage*3);
Источник

Вот схема рисования кругов, которую я написал много месяцев назад в Pascal, которую вы можете использовать в качестве псевдокода, чтобы понять, как окрашивать пиксели в радиусе от (X,Y) и как проходить. Несколько сокращающихся кругов должны покрывать всю область тебе нужно. Код также дает формулу для доступа к радиусу.

 PROCEDURE DrawCircle(X,Y,Radius:Integer);
 VAR A,B,Z:LongInt;
 BEGIN
  Z:=Round(Sqrt(Sqr(LongInt(Radius))/2));
  FOR A:=Z TO Radius DO
   FOR B:=0 TO Z DO
     IF Radius=Round(Sqrt(A*A+B*B)) THEN
      BEGIN
       PutPixel(X+A,Y+B,8);
       PutPixel(X+A,Y-B,9);
       PutPixel(X-A,Y+B,10);
       PutPixel(X-A,Y-B,11);
       PutPixel(X+B,Y+A,12);
       PutPixel(X+B,Y-A,13);
       PutPixel(X-B,Y+A,14);
       PutPixel(X-B,Y-A,15);
      END;
 END;

NB: "Longint ()" является типом компилятора для больших числовых вычислений, так что пусть вас это не беспокоит.

Примечание: самые внутренние скобки выполняются первыми.

Источник

Вы можете использовать квадрат формулы расстояния:

((current_row - строка)*(current_row - строка) + (current_col - столбец)*(current_col - столбец))

затем умножьте его на любой масштабный коэффициент, который вам нужен.

Источник
Другие вопросы по тегам