خوارزمية لحل نقاط دوامة توزيعات متكافئة / متساوية؟
-
30-09-2019 - |
سؤال
أولاً ، فقط لإعطاء فكرة مرئية عن ما أنا بعده ، هذه هي أقرب نتيجة (ولكن ليس بالضبط ما أنا بعد) صورة وجدتها:
إليك مرجع الموقع بأكمله: http://www.mathematische-basteleien.de/spiral.htm
لكن هذا لا يحل المشكلة التي أنا بعدها بالضبط. أود تخزين مجموعة من النقاط من خوارزمية حلزونية محددة للغاية.
- يتم توزيع النقاط بالتساوي
- دورات 360 درجة لها فجوة متساوية
إذا لم أكن مخطئًا ، فإن أول نقطتين ستكونان:
- النقطة [0] = نقطة جديدة (0،0) ؛
- النقطة [1] = نقطة جديدة (1،0) ؛
ولكن إلى أين تذهب من هنا؟
الحجج الوحيدة التي أرغب في تقديمها هي:
- كمية النقاط التي أود حلها (طول الصفيف).
- المسافة بين كل نقطة (فجوة بكسل).
- المسافة بين الدورات.
يبدو لي تقريبًا ، عليّ حساب ""دائرة الحلزونية"(إذا كان هناك مثل هذا المصطلح) من أجل رسم النقاط الموزعة بالتساوي على طول دوامة.
يستطيع 2*بي*دائرة نصف قطرها تستخدم بشكل موثوق لهذا الحساب الذي تعتقده؟
إذا تم القيام به من قبل ، فيرجى إظهار بعض مثال الرمز!
المحلول
مشكلة صغيرة ممتعة :)
إذا نظرت إلى الرسم البياني أقرب ، يتم توضيح التسلسل بوضوح:
ربما هناك العديد من الحلول لرسمها ، وربما أكثر أناقة ، ولكن هنا لي:
أنت تعلم أن hypotenuse هو الجذر التربيعي لعدد القطاع الحالي+1 والجانب الآخر من المثلث هو دائمًا 1.
كما تعلمون أن الجيب (Math.sin) للزاوية يساوي الجانب الآخر مقسومًا على نقص الخواص. من Mnenonic Soh القديم (الجيب ، المقابل ، hypotenuse) ،-Cah-Toa.
Math.sin(angle) = opp/hyp
أنت تعرف قيمة الجيب للزاوية ، أنت تعرف الجانبين ، لكنك لا تعرف الزاوية بعد ، ولكن يمكنك استخدام وظيفة ARC Sine (Math.asin) لذلك
angle = Math.asin(opp/hyp)
أنت الآن تعرف الزاوية لكل شريحة ، ولاحظ زيادة مع كل سطر.
الآن بعد أن أصبح لديك زاوية ونصف قطر (hypotenuse) يمكنك استخدامه القطبية إلى الديكارت صيغة لتحويل ذلك زاوية ، دائرة نصف قطرها زوج إلى أ x ، ذ زوج.
x = Math.cos(angle) * radius;
y = Math.sin(angle) * radius;
نظرًا لأنك طلبت حل ActionScript ، فإن فئة Point توفر بالفعل هذه الوظيفة من خلال القطبية () طريقة. أنت تمرر دائرة نصف قطرها وزاوية وإرجاع x و y في كائن نقطة.
إليكم مقتطف صغير يرسم دوامة. يمكنك التحكم في عدد الأجزاء عن طريق تحريك الماوس على محور Y.
var sw:Number = stage.stageWidth,sh:Number = stage.stageHeight;
this.addEventListener(Event.ENTER_FRAME,update);
function update(event:Event):void{
drawTheodorus(144*(mouseY/sh),sw*.5,sh*.5,20);
}
//draw points
function drawTheodorus(segments:int,x:Number,y:Number,scale:Number):void{
graphics.clear();
var points:Array = getTheodorus(segments,scale);
for(var i:int = 0 ; i < segments; i++){
points[i].offset(x,y);
graphics.lineStyle(1,0x990000,1.05-(.05+i/segments));
graphics.moveTo(x,y);//move to centre
graphics.lineTo(points[i].x,points[i].y);//draw hypotenuse
graphics.lineStyle(1+(i*(i/segments)*.05),0,(.05+i/segments));
if(i > 0) graphics.lineTo(points[i-1].x,points[i-1].y);//draw opposite
}
}
//calculate points
function getTheodorus(segments:int = 1,scale:Number = 10):Array{
var result = [];
var radius:Number = 0;
var angle:Number = 0;
for(var i:int = 0 ; i < segments ; i++){
radius = Math.sqrt(i+1);
angle += Math.asin(1/radius);//sin(angle) = opposite/hypothenuse => used asin to get angle
result[i] = Point.polar(radius*scale,angle);//same as new Point(Math.cos(angle)*radius.scale,Math.sin(angle)*radius.scale)
}
return result;
}
كان من الممكن كتابة هذا في خطوط أقل ، لكنني أردت تقسيم هذا إلى وظيفتين: واحدة تتعامل فقط مع حساب الأرقام ، والآخر يتعامل مع رسم الخطوط.
وهنا بعض لقطات الشاشة:
من أجل المتعة ، أضفت نسخة من هذا باستخدام ProcessingJS هنا. يعمل بطيئًا بعض الشيء ، لذلك أوصي بالكروم/الكروم لهذا الغرض.
الآن يمكنك بالفعل تشغيل هذا الرمز هنا (حرك الماوس لأعلى ولأسفل):
var totalSegments = 850,hw = 320,hh = 240,segments;
var len = 10;
points = [];
function setup(){
createCanvas(640,480);
smooth();
colorMode(HSB,255,100,100);
stroke(0);
noFill();
//println("move cursor vertically");
}
function draw(){
background(0);
translate(hw,hh);
segments = floor(totalSegments*(mouseY/height));
points = getTheodorus(segments,len);
for(var i = 0 ; i < segments ; i++){
strokeWeight(1);
stroke(255-((i/segments) * 255),100,100,260-((i/segments) * 255));
line(0,0,points[i].x,points[i].y);
// strokeWeight(1+(i*(i/segments)*.01));
strokeWeight(2);
stroke(0,0,100,(20+i/segments));
if(i > 0) line(points[i].x,points[i].y,points[i-1].x,points[i-1].y);
}
}
function getTheodorus(segments,len){
var result = [];
var radius = 0;
var angle = 0;
for(var i = 0 ; i < segments ; i++){
radius = sqrt(i+1);
angle += asin(1/radius);
result[i] = new p5.Vector(cos(angle) * radius*len,sin(angle) * radius*len);
}
return result;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.4/p5.min.js"></script>
نصائح أخرى
كانت إجابة جورج ممتازة! كنت أبحث عن الحل لفترة طويلة.
إليك نفس الرمز المعدل لـ PHP ، في حال يساعد شخص ما. أستخدم البرنامج النصي لرسم النقاط (= المدن) لخريطة مع إحداثيات x ، y. X يبدأ من اليسار ، وبدأ من أسفل اليسار.
<?
/**
* Initialize variables
**/
// MAXIMUM width & height of canvas (X: 0->400, Y: 0->400)
$width = 400;
// For loop iteration amount, adjust this manually
$segments = 10000;
// Scale for radius
$radiusScale = 2;
// Draw dot (e.g. a city in a game) for every N'th drawn point
$cityForEveryNthDot = 14;
/**
* Private variables
**/
$radius = 0;
$angle = 0;
$centerPoint = $width/2;
/**
* Container print
**/
print("<div style=\"width: ${width}px; height: ${width}px; background: #cdcdcd; z-index: 1; position: absolute; left: 0; top: 0;\"></div>");
/**
* Looper
**/
for($i=0;$i<$segments;$i++) {
// calculate radius and angle
$radius = sqrt($i+1) * $radiusScale;
$angle += asin(1/$radius);
// skip this point, if city won't be created here
if($i % $cityForEveryNthDot != 0) {
continue;
}
// calculate X & Y (from top left) for this point
$x = cos($angle) * $radius;
$y = sin($angle) * $radius;
// print dot
print("<div style=\"width: 1px; height: 1px; background: black; position: absolute; z-index: 2; left: " . round($x+$centerPoint) . "; top: " . round($y+$centerPoint) . ";\"></div>");
// calculate rounded X & Y (from bottom left)
$xNew = round($x+$centerPoint);
$yNew = round($width - ($y+$centerPoint));
// just some internal checks
if($xNew > 1 && $yNew > 1 && $xNew < $width && $yNew < $width) {
/**
* do something (e.g. store to database). Use xNew and yNew
**/
}
}