リサジュー図形描画

その他

2021.10.082022.03.05

リサジュー図形描画

二つの正弦波をオシロスコープの水平軸と垂直軸に別々に加える。
両者の周波数の比を整数比にすれば、両周波数比と位相差に応じた特有の図形が描かれる。
このような図形をリサジュー図形と呼ぶ。

操作動画

実際の動作ページはこちら↓
https://memo-labo.com/ri.php

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.min.js"></script>

<script>
'use strict';

// x = r * cos(a * t)
// y = r * sin(b * t + delta)

var a = 1; // パラメータ a
var b = 1; // パラメータ b
var buttonIncA, buttonDecA; // パラメータ a を変更するボタン
var buttonIncB, buttonDecB; // パラメータ b を変更するボタン
var slider; // パラメータ delta を変更するスライダー

function setup() {
//createCanvas(400, 400);

let canvas = createCanvas(400, 400);
canvas.parent('canvas');
noFill();

buttonIncA = createButton("A UP");
buttonIncA.parent('button');
//buttonIncA.position(width - 50, height - 80);
buttonIncA.mousePressed(function() { a++; });

buttonDecA = createButton("A DOWN");
buttonDecA.parent('button');
//buttonDecA.position(width - 10, height - 80);
buttonDecA.mousePressed(function() { a = Math.max(1, a-1); });

buttonIncB = createButton("B UP");
buttonIncB.parent('button');
//buttonIncB.position(width - 50, height - 50);
buttonIncB.mousePressed(function() { b++; });

buttonDecB = createButton("B DOWN");
buttonDecB.parent('button');
//buttonDecB.position(width - 10, height - 50);
buttonDecB.mousePressed(function() { b = Math.max(1, b-1); });

slider = createSlider(0, 360);
slider.parent('button');

//slider.position(width - 50, height - 20);

}

function draw() {    
background(255);
translate(width/2, height/2);

// XY 軸
stroke(188, 188, 188);
line(-width, 0, width, 0);
line(0, -height, 0, height);

// 曲線上を移動する円
var delta = slider.value();
var t = frameCount * 0.03;
var r = 100;
stroke(0);
ellipse( r * sin(a * t),
        -r * sin(b * t + radians(delta)),
        10,
        10);              

// 曲線
for (var i = 0; i < 360; i++) {
    var x1 = r * sin(a * radians(i));
    var y1 = r * sin(b * radians(i) + radians(delta));

    var x2 = r * sin(a * radians(i+1));
    var y2 = r * sin(b * radians(i+1) + radians(delta));
    line(x1, -y1, x2, -y2);
}

text("a: " + a, width/2 - 90, height/2 - 65);
text("b: " + b, width/2 - 90, height/2 - 35);
text("delta: " + delta, width/2 - 120, height/2 - 5);
}
</script>

<div id="canvas"></div>
<div id="button"></div>