p5.js 리사주 도형

16463 단어 processingp5.js
수학 소녀의 비밀 노트 의 제23회, 제24회에서 리사주 도형이 나옵니다.
  • 제23회 가거나 오거나의 길을 잃는 길(전편)
  • 제24회 가거나 오는 길의 길(후편)

    • 리사주 도형을 p5.js 으로 작성해 보았습니다.

    여기에서 시도할 수 있습니다.
    x = r * cos(a * t)
y = r * sin(b * t + delta)

    위의 수식에서 a , b , delta

  • up, down 버튼으로 a , b 의 값을 변경합니다.
  • 슬라이더를 움직이면 delta의 값을 변경합니다.

    • 프로그램



    lissajous-curve.js
    '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);
    noFill();

    buttonIncA = createButton("up");
    buttonIncA.position(width - 50, height - 80);
    buttonIncA.mousePressed(function() { a++; });

    buttonDecA = createButton("down");
    buttonDecA.position(width - 10, height - 80);
    buttonDecA.mousePressed(function() { a = Math.max(1, a-1); });

    buttonIncB = createButton("up");
    buttonIncB.position(width - 50, height - 50);
    buttonIncB.mousePressed(function() { b++; });

    buttonDecB = createButton("down");
    buttonDecB.position(width - 10, height - 50);
    buttonDecB.mousePressed(function() { b = Math.max(1, b-1); });

    slider = createSlider(0, 360);
    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 * cos(a * t),
            -r * sin(b * t + radians(delta)),
            10,
            10);              

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

        var x2 = r * cos(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);
}

    HTML


    <html>
<head>
  <meta charset="UTF-8">
  <script language="javascript" type="text/javascript" src="p5-release/p5.js"></script>
  <script language="javascript" src="p5-release/addons/p5.dom.js"></script>
  <script language="javascript" type="text/javascript" src="lissajous-curve.js"></script>
  <style> body {padding: 0; margin: 0;} </style>
</head>
<body>
</body>
</html>

    링크



  • 수학 소녀의 비밀 노트
  • 제23회 가거나 오거나의 길을 잃는 길(전편)
  • 제24회 가거나 오는 길의 길(후편)

    • 자바 스크립트로 음성 및 조명 조작
    p5.js가 WebGL&3D 대응. 가볍게 만져 보겠습니다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage