KaleidoPen

※PC専用です。画面をドラッグすることで、万華鏡のような形を描くことができます。

動作例

仕組みの概説

オブジェクト

自由な点A

点Aをy軸について対称移動した点（A'）

A' = Reflect[A, y軸]

数値オブジェクトoffX = 0, offY = 0

点Aおよび点A'を、原点を中心に12°刻みで回転移動させたリスト（list1）

list1 = Flatten[{Sequence[Rotate[A, (k 12)°], k, 1, 30], Sequence[Rotate[A', (k 12)°], k, 1, 30]}]

描画

list1の残像によって描画する。

制御

JavaScript を用いて、以下のように制御する。

getOffset 関数：グラフィックスビューにおいて、pointermove イベントが発生したときに、ポインタの座標情報（pointermove.offsetX, pointermove.offsetY）を取得して、点Aを同座標に移動させる。

startDraw 関数：グラフィックスビューにおいて、pointerdown イベントが発生したときに、list1の表示および残像描画をオンにする。

endDraw 関数：pointerup イベントが発生したときに、list1の表示および残像描画をオフにする。

「グローバルJavaスクリプト」に記述したコードは、以下の通りである。

function ggbOnInit() {
  var canvas = document.getElementsByTagName('canvas')[0];
  canvas.addEventListener('pointermove', getOffset);
  canvas.addEventListener('pointerdown', startDraw);
  canvas.addEventListener('pointerup', endDraw);
  ggbApplet.setVisible('list1', false);
  ggbApplet.setTrace('list1', false);
}

function getOffset(e){
  var offX = e.offsetX;
  var offY = e.offsetY;
  ggbApplet.setValue('offX', offX);
  ggbApplet.setValue('offY', offY);
  ggbApplet.evalCommand('SetValue[A,PixelPoint[offX, offY]]');
}

function startDraw(){
  ggbApplet.setVisible('list1', true);
  ggbApplet.setTrace('list1', true);
}

function endDraw(){
  ggbApplet.setVisible('list1', false);
  ggbApplet.setTrace('list1', false);
}

バージョン情報

以下のバージョンで動作確認済みです。

Version: 6.0.509.0-w (04 November 2018)