Как нарисовать овал в массив?

[Skipp]

Голова кипит спасайте кто может)

Вопрос больше не к javascript, а к математики, как заполнить многомерную матрицу (2d) цифрами образуя овал?

Допустим есть матрица 7х5, как реализовать её заполнение такого вида:
0001000
0111110
1111111
0111110
0001000

Или вопрос по другому, есть canvas и я пытаюсь понять как из прямоугольника одного цвета сделать вписаный овал в этот прямоугольник с затуханием альфа канала.

var
	canvas	= document.createElement('canvas'),
	context	= canvas.getContext('2d'),
	image	= context.createImageData(12, 16),
	data		= image.data;
	
	canvas.width	= 12; // Может быть любое значение 
	canvas.height	= 16; // Может быть любое значение 

	
	for(var i = 0; i < data.length; i+=4) {
		data[i]	= 255;
		data[i+1]	= 255;
		data[i+2]	= 255;
		data[i+3]	= ????; // Прозрачность (0-255) как её для каждого пикселя просчитать?
	}
				
	context.putImageData(image, 0, 0);

P.S. Нативные функции рисования мне не подойдут(
P.P.S. Давно с подобным не сталкивался. в голове клин от всяких синусов и косинусов

[Alexandroppolus]

в голове клин от всяких синусов и косинусов

можешь о них забыть )

пусть эллипс с центром в точке (a, b) и радиусами (А, В)
тогда закрашиваются все точки с координатами (х, у), которые удовлетворяют условию

(x - a)**2 / A**2 + (y - b)**2 / B**2 <= 1

здесь "**2" - возведение в квадрат.

для ускорения этого дела, не надо для каждой точки проверять это неравенство, а, например, для каждой горизонтальной линии просто вычислить начальный и конечный Х и всё что между ними заполнить

но это для простого случая, когда эллипс горизонтальный или вертикальный. А если он наклонный, то ещё матрицу преобразований надо будет делать, тут навскидку не помню.

[Skipp]

Огромное спасибо тебе добрый человек, это именно, то что мне нужно!)))

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

Надеюсь кому-нибудь тоже пригодится.

[Skipp]

Что в итоге получилось, может кому пригодится.

var
	width		= 80,
	height	= 100,
	color		= [255, 255, 255],
	depth	= 100; // 1-100
	scale		= 100; // 1-100
	canvas	= document.createElement('canvas'),
	context	= canvas.getContext('2d'),
	image	= context.createImageData(width, height),
	data		= image.data;
	
	canvas.width	= width;
	canvas.height	= height;

	for(var j = 0, row = 0, column = 0; j < data.length; j+=4, column++) {
		if(column >= width) {
			row++;
			column = 0;
		}
			
		data[j]		= color[0];
		data[j+1]	= color[1];
		data[j+2]	= color[2];
		data[j+3]	= 255 * ((scale * 0.02 - (Math.pow(row - height/2, 2) / Math.pow(height/2, 2) + Math.pow(column - width/2, 2) / Math.pow(width/2, 2)))/(depth/100))
	}
				
context.putImageData(image, 0, 0);

P.S. с терминами может напутал scale и depth

[Alexandroppolus]

Skipp,
а почему всё-таки не воспользовался стандартными канвасными примитивами? из-за сглаживания?

[Skipp]

Alexandroppolus,
И не только.
Делаю генерацию частиц так сказать дыма, добавил туда ещё шумов и получилось вполне ничего, особенно в скоплении)