[MX] Западло curveTo()

[[subway]design]

Вот функция:

function circle(obj, x, y, r) {
//
with (obj) {
//
moveTo(x-r, y);
beginFill(0x003366);
curveTo(x-r, y-r, x, y-r);
curveTo(x+r, y-r, x+r, y);
curveTo(x+r, y+r, x, y+r);
curveTo(x-r, y+r, x-r, y);
endFill();
//
}
//
}



Рисует синий кружочек в нужном муве (obj) с заданными координатами и радиусом. Что из этого получается - смотрите на скриншот.

Судя по всему, кривые реализованы как-то неправильно, поэтому я ввел поправочный коэффициент для координат углов квадрата (в него вписана окружность), так, что эти углы "убираются" внутрь него и поправляют контур круга:


function circle(obj, x, y, r,k) {
//
with (obj) {
//
moveTo(x-r, y);
beginFill(0x003366);
curveTo(x-r*k, y-r*k, x, y-r);
curveTo(x+r*k, y-r*k, x+r, y);
curveTo(x+r*k, y+r*k, x, y+r);
curveTo(x-r*k, y+r*k, x-r, y);
endFill();
//
}
//
}


Вот таблица для экспериментальных радиусов:

радиус (px) | k
______________|_______
|
10 | 0.9
50 | 0.96
100 | 0.97
|



Но при изменении k заметны углы на стыках кривых. Так как же быть?

[Хрюндик]

хех, ты глянь в мокромедийный исходник в хелпе, у них тоже скругленный квалрат рисуется :)))))....
имхо я рисовал пикселями через синусы и косинусы... правда с заливкой траблы :((((....

зы: наверное программеры из мокрой писали эту фичу в пьяном угаре(там среди них два русских :)))) ))))...

[Дениска]

способ 1:
рисование окружностей 2-мя ПРЯМЫМИ линиями :)

function drawCircle(x, y, radius, cWidth) {
mc = _root.createEmptyMovieClip("circle"+cnt, ++cnt);
mc.lineStyle(radius, 0x000000, 100);
mc.moveTo(x, y);
mc.lineTo(x, y+.15);
mc.lineStyle(radius-cWidth, 0xffffff, 100);
mc.moveTo(x, y);
mc.lineTo(x, y+.15);
}
function redraw() {
cnt = 0;
for (i=0; i<100; i++) {
drawCircle(random(750), random(430), 10+random(150), 1+random(10));
}
}
redraw();
stop();


способ2:

function drawCircle(x, y, radius, startAngle, endAngle) {
segm = (endAngle-startAngle)/5;
this.moveTo(x+radius*Math.cos(startAngle*Math.rad), y+radius*Math.sin(startAngle*Math.rad));
for (var s = startAngle+segm; s<=endAngle+1; s += segm) {
var c_x = radius*Math.cos(s*Math.rad);
var c_y = radius*Math.sin(s*Math.rad);
var a_x = c_x+radius*Math.tan(segm/2*Math.rad)*Math.cos((s-90)*Math.rad);
var a_y = c_y+radius*Math.tan(segm/2*Math.rad)*Math.sin((s-90)*Math.rad);
this.curveTo(a_x+x, a_y+y, c_x+x, c_y+y);
}
}

_root.drawCircle(100, 100, 50, 0, 360);

[Хрюндик]

beep, Дениска, а можно поподробнее, плз...

[[subway]design]

2 Дениска:

Способ №1 - все гениальное воистину просто!

только прозрачную дырку не нарисуешь ;-)

[Дениска]

Оригинал написал(а) Хрюндик
beep, Дениска, а можно поподробнее, плз...

в каком месте непонятно?

[Хрюндик]

Если честно, то не понял как двумя ПРЯМЫМИ можно нарисовать окружность????!!!!....
как оно вообще работает(строки прокомментируй просто )

[Aib]

Из параболы окружность не сделаешь, только приблизительно.
Ловите метод, риует эллипс (или его часть) под заданным углом. Точность - 927/1000.

function Ellipse(CenterX, CenterY, ARadius, BRadius, ARadAngle){
if (arguments.length == 7){
if (arguments[6] >= arguments[5]){
var StartAngle = arguments[5];
var EndAngle = arguments[6];
} else {
var StartAngle = arguments[6];
var EndAngle = arguments[5];

};
var div = Math.ceil((EndAngle-StartAngle)/30)
var delta = (EndAngle-StartAngle)/div;
} else {
var StartAngle = 0;
var div = 12;
var delta = 30;
};
with (Math){
var ABRadius = ARadius/cos(PI*delta/360);
var BBRadius = BRadius/cos(PI*delta/360);
var te = round(ARadius*cos(PI*StartAngle/180)*10)/10;
var Y1 = round(BRadius*sin(PI*StartAngle/180)*10)/10;
var X1 = CenterX+te*cos(PI*ARadAngle/180)-Y1*sin(PI*ARadAngle/180);
Y1 = CenterY-te*sin(PI*ARadAngle/180)-Y1*cos(PI*ARadAngle/180);
var X2;
var Y2;
this.moveTo (X1, Y1);
for (var i = 1; i<=div; i++){
te = round(ABRadius*cos(PI*(StartAngle+delta*(i-0.5))/180)*10)/10;
Y1 = round(BBRadius*sin(PI*(StartAngle+delta*(i-0.5))/180)*10)/10;
X1 = CenterX+te*cos(PI*ARadAngle/180)-Y1*sin(PI*ARadAngle/180);
Y1 = CenterY-te*sin(PI*ARadAngle/180)-Y1*cos(PI*ARadAngle/180);
te = round(ARadius*cos(PI*(StartAngle+delta*i)/180)*10)/10;
Y2 = round(BRadius*sin(PI*(StartAngle+delta*i)/180)*10)/10;
X2 = CenterX+te*cos(PI*ARadAngle/180)-Y2*sin(PI*ARadAngle/180);
Y2 = CenterY-te*sin(PI*ARadAngle/180)-Y2*cos(PI*ARadAngle/180);
this.curveTo (X1, Y1, X2, Y2);
};
};
return this;
}
Object.prototype.ellipseTo = Ellipse;

[Aib]

Да, про аргументы:
CenterX - координата X центра пересечения радиусов
CenterY - координата Y центра пересечения радиусов
ARadius - радиус А
BRadius - радиус B
ARadAngle - угол наклона радиуса А
StartAngle - начальный угол сегмента
EndAngle - конечный угол сегмента.

Последние два параметра можно не задавать. Тогда нарисуется эллипс целиком.

2Хрюндик. Никакого пьяного угара. Обычный NURBS

[Хрюндик]

beep, офигеть! Жаль что мы еще эту чушь не проходили в школе :)

[Aib]

:D Четыре года занятия 3D-MAX'ом не прошли даром :D
Если админы опубликуют мой урок по этой теме, то проходить что-то в "школе" и не потребуется.

[[subway]design]

2 Хрюндик:

Ты обращал внимание, что линии рисуются с округлыми окончаниями?

[Nox Noctis]

2Дениска
сам придумал ?
пять баллов :D :D :D

жалко только таким способом можно нарисовать круг, но никак не нарисовать окружность.....

[[subway]design]

Только еще один минус есть:

mc.onPress()=function (){...}

не будет срабатывать при нажатии на линию.
А идея сама - суперская!

[Nox Noctis]

2[subway]design
либо я тебя не понял, либо онПресс работает :)
делаю клип, внем рисую этим способом кружок, вешаю онПресс - и все в порядке.....

[[subway]design]

Упс, у меня взаимодействия с линиями не работали раньше (может это в пятерке только), только с заливками. Поэтому неглядя послал. Простите.

А, вообще, это к лучшему :)

[Aib]

2Дениска. И ещё эффект прозрачности в первом методе не проходит, а вообще, если нужно много маленьких цветных кружков, то лучше не придумаешь :D

[Дениска]

и еще радиус больше 270 не работает :)
но если очень надо то можно маленькие скалить :)

вообще я это так, просто идею проверял. :) но вдруг кому пригодиться :)

[Aib]

Но всё равно, классно!!!

[Endryk]

Мужики вот вы такие умные выложили бы примерчик какой - нибудь, где это все используется.
Заранее спасибо. :)

[Хрюндик]

2subway. Замечал :)... но все равно, плиз прокомментируйте строчки поочередно :)... особенно lineStyle() я думаю что в нем и есть вся суть...

[[subway]design]

2 Хрюндик:

help (F1) -> lineStyle() :-)))


function drawCircle(x, y, radius, cWidth) {

// создаем пустой клип:
mc = _root.createEmptyMovieClip("circle"+cnt, ++cnt);

// Указываем, что рисовать надо линией толщиной radius, черным цветом и 100% непрозрачностью.
mc.lineStyle(radius, 0x000000, 100);

// Перемещаем "курсор" в указанные точки - центр окружности.
mc.moveTo(x, y);

// Рисуем линию минимально возможной длины, чтобы она нарисовалась и в тоже время была минимальной длины.
mc.lineTo(x, y+.15);

// Рисуем вторую:
// Радиус уменьшаем на указанную толщину линии - cWidth.
mc.lineStyle(radius-cWidth, 0xffffff, 100);

// Опять двигаем в х,у
mc.moveTo(x, y);

// Опять рисуем минимальной длины. Если будет длина=0, то нифига не будет :-)
mc.lineTo(x, y+.15);
}



Теперь понятно?

[[subway]design]

Только, конечно radius влияет на толщину линии, а следовательно является диаметром окружности, а не радиусом :-) Дениска может запутать :-)

[Useless]

А ты уверен, что это NURBS? По моим расчётам - это Безье второго порядка. Насколько мне известно - это не одно и то же. Я ошибаюсь?

Обидно, что нету Безье третьего порядка... :(

[[subway]design]

Первый раз про порядки слышу... Если не влом, можно по-подробнее?

[Useless]

Можно. Здесь. (http://astronomy.swin.edu.au/pbourke/curves/bezier/)

[[subway]design]

Спасибо.

[Useless]

Не за что. Там ещё много полезного. И про NURBS'ы те же, и про RGB->HSB, и т.д., и т.п.

[Хрюндик]

а... ясно :)... thanx огромныЙ! оказалось все таким элементарным...

[Хрюндик]

прив еще раз... раз уж заговорили, кто нить скажет мне, дураку, что такое фракталы? а то помню еще по смольновской книжке... там был фрайтальный папоротник...
заранее большой сэнькс.
зы: сорри, за оффтопик...

//--------------исправления--------------------//
сорри, уже нашел на той ссылке... месагу не стер, потому что говорят неприлично :)...
//--------------конец исправлений----------//

[Aib]

2 Useless
Проверял аппроксимацией. Но дело в том, что парабола получается как из NURBS, так и из Безье. Просто по построению это ближе к NURBS (контрольная точка - пересечение векторов, а не место их начала). Степень и впрямь вторая, и к третьей аппроксимируется ой как долго - лучше даже не трогать.

2Хрюндик
Фракталы - фигуры (тела), полученные многократным преобразованием комплексной плоскости (n-мерного комплексного пространства). Раскраска производиться в соответствии со скоплением точек в той или иной области.

[Хрюндик]

ужас, вы все такие умные тут :).... я даже таких слов то не знаю :(...

[znick]

Что то здесь много текста, нет времени читать.
Но неужели народ пытается программно рисовать во flash.
Разве это возможно. Неужели нарыли недокументированные возможности, может это уже для flash выше 5 версии?. Дайте, пожалуйста посмотреть, хотя бы один примитивный исходник. Заранее благодарен.

[Aib]

2Хрюндик
Слова умные, как-никак фракталы - один из сложнейших разделов соврменной математики. Впрочем, не всё там так уж сложно. Если нужно, могу кое-что рассказать. ТОлько это тема не этого топика ;)

[Nox Noctis]

вот здесь в общих чертах (http://www.codenet.ru/progr/fract/fractr0.php) есть сведения на русском о фрактальной геометрии.

вот здесь (http://astronomy.swin.edu.au/~pbourke/fractals/) информации гораздо больше (и с кусками кода :) ), но все на английском

[Nox Noctis]

зацените :)
полный (абсолютный) маразм :D
кривая бабочки (http://xentarknight.narod.ru/butterfly.html)
замыкается за 6*2пи
(там счетчик есть, чтобы знать когда период заканчивается)

исходник там же - если вместо html приставить fla

[sts]

крутой маразм!

[Aib]

Весело! А вот у меня нет своего сайта, а здесь исходники на MX пока не берут :( :( :(

[Nox Noctis]

ну, и у меня нет... я просто пользуюсь тем, что мне на народе вместе с почтой досталось для того чтобы всякие фишки выкладывать :)

сегодня ждите новых геометрических извратов :D

(зы: а бабочку я перекрасил =))) так прикольнее)

[Nox Noctis]

поднадоели эти приколы... вот еще парочка, напоследок :)
первый (http://xentarknight.narod.ru/goodmorning.html)
второй (http://xentarknight.narod.ru/pattern.html)

[[subway]design]

прикольно :)

[Aib]

2Nox Noctis
Аппроксиматор, блин :) :) :)
Ты формулы сам высчитываешь?

[Nox Noctis]

а кто ж их за меня высчитает :)
ну, правда бабочку я и правда нашел не сам... посмотрел в одном умном месте :D

а вообще -
берешь полярную систему координат, угол (параметр) прогоняещь в каком-то интервале (у меня везде через единицу от нуля до 3-6 периодов)
и экспериментируешь с разными хитрыми комбинациями синусов-косинусов-экспонент - просто меняешь параметры и смотришь что получится :D
хороший высоко научный метод :D

[Nox Noctis]

а с чего все эти эксперименты начались-то ? :D :D
с кружочков :)

после этой темы про кружочки я для начала стал рисовать кружочки:
clip.onEnterFrame = function () {
a++;
x = centerX + Math.cos(a*Math.PI/180);
y = centerY + Math.sin(a*Math.PI/180);
this.lineTo(x, y);
}
полюбовался на результат... а потом пошло-поехало :D

[Aib]

Да знаю Я, как это делается. Ты же по-любому код приложил :D
А по поводу умной книжки - это Демидович! Там этого добра больше, чем топиков на форуме по AS! Ты со мной согласен, а, Nox Noctis?

[Nox Noctis]

2Aib
извини мне мою серость и убогость - но я не знаю кто такой Демидович :)

[mefisto]

Чё то так сложно слишком, хоть и круто. Проще было линиями, а не так. То же самое, но скрипт поменшьше, правда рисовать больше.

[mefisto]

:)
Экскьюз соощение не в тему. Nox вот именно такой способ хотел предложить - надо было мне посмотреть вторую страницу. Бывает. :)

[Aib]

2mefisto
Проще то проще, да только медленнее. Я уже свой эллипс модифицировал, чтоб чуток быстрее работал.
2Nox Noctis
Это задачник такой, с кучей всяких функций. Самые крутые, конечно же, параметрические :) :) :)

[Sveta]

То, что я напишу ниже касается тех людей, в том числе и меня,которым синусы и косинусы как опасные звери.
Они их избегали, прятались от них, но вот в шестерке они встали перед лицом и надо или убегать или приручить их.
А прочитав вышеописанные некоторые примеры некоторые из этих людей могут отчаяться и потерять
смысл жизни, отчаянно вставляя синусы и косинусы куда попало, потеряв систему и надежду выпутаться
из этого порочного круга. Эти люди могут стесняться попросить Дениску или даже Noctisa c его более на взгляд простым, но также запутанным примером проиллюстрировать рисование круга.
Вот этим РИСУНКОМ (http://www.neo-club.net/flash/sveta/circle2.swf) я хочу взбодрить их, и соответственно этим немного переиначенным мною кодом
Noctisa внести пояснение.

-------------code------------------
createEmptyMovieClip("clip",1)
radius=100
shag=10
rad=Math.PI/180
clip.lineStyle(0)
centr_x=centr_y=20
clip.onEnterFrame=function(){
clip.moveTo(centr_x+radius*Math.sin(a*rad),centr_y-radius*Math.cos(a*rad))
//1)если а=0, то sin0=0 а cos0=1, поэтому вначале мы смещаемся только y на величину радиуса.
//в пределах от 0 до 90 sin растет до 1-цы, поэтому у нас x увеличивается, cos уменьшается
//до нуля, и на 90 градусах y=centr_y
//2)в пределах от 90 до 180 sin уменьшается от 1 до 0, поэтому x при 180 градусах=centr_x,
//а cos уменьшается до -1, и y соответственно увеличивается на величину радиуса при 180 градусах.
//аналогично от 180 до 270 синус уменьшается до -1,косинус возрастает до нуля
//и наконец от 270 до 360 синус увеличивается до нуля, и косинус увеличивается до единицы.
//Круг замкнулся.
a+=shag
x=centr_x+radius*Math.sin(a*rad)
y=centr_y-radius*Math.cos(a*rad)
this.lineTo(x,y)
if(a>=360){
this.onEnterFrame=null
trace("finish")}}
-------------------------
Если я в чем то ошиблась, просьба меня поправить, а также, надеюсь,что Дениска здесь выложит графическую ретрансляцию своего второго метода (или кто-то другой:)) Жду:)
Если это произойдет, то приступим тогда к эллипсу Aiba, он не просто выдрессировал косинусы, он говорит с ними на одном языке.
Поэтому лично его я попросила бы не спешить тут сразу выкладывать графическую интерпретацию своего эллипса,
потому что это окончательно, и даже, не побоюсь этого слова - бесповоротно , может запутать все дело.

[Nox Noctis]

вот схемка :) (http://xentarknight.narod.ru/arc.html) задача по геометрии, седьмой класс :p

формула не такая как у Дениски, но вариантов может быть очень много :)

[Nox Noctis]

алгоритм:
-- даны углы:
strt - начальный угол дуги
end - конечный угол дуги
-- дан радиус 'r '
-- дано положение центра окружности (cx, cy)

ставим начальное положение:
moveTo(cx+r*Math.cos(strt*rad), cy+r*Math.sin(strt*rad));
где rad = Math.PI/180; (перевод в радианы)

конечное положение аналогично:
{x:cx+r*Math.cos(end*rad), y:cy+r*Math.sin(end*rad))}

положение управляющей точки:
l = r/Math.cos((end-strt)/2*rad);
длина отрезка между центром окружности и контрольной точкой

controlPoint.x = cx + l*cos((strt+end)/2*rad);
controlPoint.y = cy + l*sin((strt+end)/2*rad);

все :)
поставили moveTo в начальное положение
и сделали curveTo(controlPoint.x, controlPoint.y, конечное.x, конечное.y)

[Entropy]

Угу, только алгоритм Aib работает процентов на 40 быстрее.

[Nox Noctis]

2Entropy
просили объяснить Денискин способ #2 рисования окружности...
...и причем тут алгоритм рисования эллипса Aib'а ? :)

[Aib]

Разбор эллипса во второй части урока по кривым будет, вместе с другими примитивами.