【Sample】正多角形の図形の頂点を計算式で生成

正多角形の図形を計算式で生成するサンプルを作ってみた。

http://www2.itc.kansai-u.ac.jp/~k544790/Polygon/index.html

自分の研究で使っただけなんで他に使い道ないかもだけどね。

作成したい図形の「頂点数」「座標の数」「角度」「大きさ」を

マウスクリックかドラッグで変更できます。

ソースコードは今あんまり時間ないので解説しないけど、作り方のメモだけ。
■ 頂点の座標は、図形の外接円の一点をそれぞれ角度から計算した
　　頂点の角度 = 傾き + ( 360 ÷ 頂点数 ) × 頂点番号;
　　頂点座標 = 中心点 + cos( 角度 ) × 図形の大きさ;

■ 頂点間の座標は、各頂点座標間の線形補間によって計算

■ キャンバスは使わず　●　のimgをいっぱい使ってる

■ Numeric StepperのUIはjQuery

こんな感じ。

【Tips】Processingのmap()関数をJavaScriptで

Processingのmap()関数が便利なので、JavaScriptで同じ動作をする関数を作りました。

map(変換したい変数, 数字の最小値, ~最大値, 欲しい最小値, ~最大値);

ex )

map(10, 0, 100, 0, 200);

変換前
10

変換後
20

JavaScript

function map(value, start1, end1, start2, end2) {
  return start2 + (end2 - start2) * ((value - start1) / (end1 - start1));
}

【参考URL】
map()\ Language (API) \ Processing 2+　https://www.processing.org/reference/map_.html
c/c++でmap()　http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1375788868

【Tips】線形補間【JavaScript】【Processing】

二点間を指定数分、線形補間し、指定した点を返す
JavaScript

function createInterpolatedPosition (id, numDivision, start, end) {
  return {
    x : start.x + id * (end.x - start.x) / numDivision,
    y : start.y + id * (end.y - start.y) / numDivision
  };
}

Processing

Point createInterpolatedPosition (int id, int numDivision, Point start, Point end) {
  return new Point(
    start.x + id * (end.x - start.x) / numDivision,
    start.y + id * (end.y - start.y) / numDivision
  );
}

【Example】
JavaScript

var point1, point2, num;

point1 = {
  x : 0, y : 0
};

point2 = {
  x : 50, y : 50
};

num = 2;

for (var i = 0, length_i = num; i < length_i; i++) {
  var point = createInterpolatedPosition(i, num, point1, point2);
  console.log(point)
}

function createInterpolatedPosition (id, numDivision, start, end) {
  return {
    x : start.x + id * (end.x - start.x) / numDivision,
    y : start.y + id * (end.y - start.y) / numDivision
  };
}

Processing

Point point1, point2;
int num = 2;

void setup() {
  point1 = new Point(0.0, 0.0);
  point2 = new Point(50.0, 50.0);

  for (int i = 0, length_i = num; i <= length_i; ++i) {
    Point point = createInterpolatedPosition(i, num, point1, point2);
    println(point.x + ", " + point.y);
  }
}

void draw() {
}

Point createInterpolatedPosition (int id, int numDivision, Point start, Point end) {
  return new Point(
    start.x + id * (end.x - start.x) / numDivision,
    start.y + id * (end.y - start.y) / numDivision
  );
}

class Point {
  float x = 0.0;
  float y = 0.0;

  Point (float _x, float _y) {
    x = _x;
    y = _y;
  }
}

【参考URL】
http://ja.wikipedia.org/wiki/%E7%B7%9A%E5%BD%A2%E8%A3%9C%E9%96%93

【Tips】角度計算【JavaScript】

Radian ⇔ Degree Angle

function toDegreeAngle (radian) {
  return radian*180/Math.PI;
}

function toRadianAngle (degree) {
  return degree*Math.PI/180;
}

相対角度の計算

function relativeRotation (position) {
  return Math.atan2(position.x, position.z);
}

【参考URL】
(wikipedia) ラジアン　http://ja.wikipedia.org/wiki/%E3%83%A9%E3%82%B8%E3%82%A2%E3%83%B3
角度とラジアン　http://flashrave.org/relate/angle/

ブログ開始

はじめまして。ぽちと申します。

このブログはものづくりのメモ用に使っていきたいと思います。

たぶん、以下の内容についての調べごとが主になるかと思います。

• Web言語(HTML, JavaScript, CSS, PHP)
• C#/WPF
• Processing / Arduino / PureData
• 電子工作
• 気になった技術や作品

はてなは初めてですがよろしくお願いします。