Processing을 사용하여 그래프를 움직여 보았습니다.

자기소개

여러분, 시작하겠습니다!
V고전생의 서리 흑꿈(시모쿠 쿠로무)이라고 합니다. 평소에는 주로 "Processing"이라는 언어를 사용하여 동영상과 게임을 만들고 있습니다.
앞으로 잘 부탁드립니다. <(_ _)>

처음에

갑작스럽지만 여러분, 그래프라고 그린 적이 있습니까?
아니, 통계학이나 그런 이야기를 하고 있는 것은 아닙니다. 「y=x」같은 수학으로 하는 그래프의 이야기입니다.
중학생 이상이라면 절대 그려져 있을 것입니다.
그린 적이 있죠?
그린 적이 있다고 전제로 이야기를 진행합시다.
그 그래프, 어떻게 움직이면 그런 형태가 될지, 알고 싶다고 생각하지 않습니까?
생각하십니까? (기억
그래서 Processing이라는 프로그래밍 언어를 사용하여 그래프를 움직여 보았습니다!

Processing이란?

이번에 사용하는 Processing에 대해 가벼운 설명을…
Processing은 Java 기반의 전자 아트 및 비주얼 디자인을 위한 프로그래밍 언어와 그 개발 환경의 총칭입니다.
도입이 쉽고, 심플한 코드로 디자인을 그릴 수 있기 때문에, 프로그래밍의 학습 소재로서 뛰어납니다.
또, draw 함수를 이용하는 것으로, 동적인 프로그램을 그릴 수 있기 때문에, 게임을 제작하기 위한 수단으로서도 매우 뛰어납니다.
이번에는이 draw 함수를 사용하여 그래프를 움직여 보았습니다.

코드

이번에 작성한 코드는 이쪽!

sketch_graph.pde

float x, y;     //現在の座標
float bx, by;   //前回の座標

float t = 0;    //媒介変数t
float add = 1;  //媒介変数tの増加数

float mag = 25; //画面の倍率  

void setup()
{
  //初期設定
  size(800, 450);
  stroke(255);
  strokeWeight(3);
  background(0);
  translate(400, 225);

  //x軸，y軸の描画
  line(0, -height, 0, height);
  line(-width, 0, width, 0);

  //1から10までの軸を描画
  for (int i = 0; i < 10; i++)
  {
    line(mag * i, -5, mag * i, 5);
    line(-mag * i, -5, -mag * i, 5);
    line(-5, mag * i, 5, mag * i);
    line(-5, -mag * i, 5, -mag * i);
  }

  //媒介変数tの初期位置
  t = 0;

  bx = dx(t) * mag;
  by = -dy(t) * mag;
}

void draw()
{
  translate(400, 225);

  //媒介変数tに加算
  t += add;

  //媒介変数tに対応するx，y座標を計算
  x = dx(t) * mag;
  y = -dy(t) * mag;

  bx = x;
  by = y;
}

float dx(float t)
{
  //x座標の計算式を入れる
  return t;
}

float dy(float t) 
{
  //y座標の計算式を入れる
  return t;
}

실행 결과는 다음과 같습니다.

해설

이 프로그램에서는 $(0,0)$을 시작점으로 한 "$y=x$"그래프를 그립니다.

처음에는 다음 두 가지 기능에 대해입니다.

float dx(float t)
{
  //x座標の計算式を入れる
  return t;
}

float dy(float t)
{
  //y座標の計算式を入れる
  return t;
}

이 두 함수는 각각 매개 변수 t의 값에 대한 x 좌표와 y 좌표의 값을 계산하는 역할을합니다.
「$y=x$」를 「$x=t$」라고 가정했을 때에, 각각 「$x=t$」, 「$y=t$」라고 하는 등식이 성립하기 때문에, 계산식을 구하는 것이 수 있습니다.

예를 들어 '$y=2x$'를 그리려면 다음과 같이 됩니다.

float dx(float t)
{
  //x座標の計算式を入れる
  return t;
}

float dy(float t)
{
  //y座標の計算式を入れる
  return t * 2;
}

이것은, 「$x=t$」라고 가정했을 때, 「$x=t$」, 「$y=t×2$」라고 하는 등식이 성립하기 때문입니다.

그럼, 「$y=sin(x)$」의 그래프를 그려 보겠습니다.
함수의 내용은 이렇게 됩니다.

float dx(float t)
{
  //x座標の計算式を入れる
  return t;
}

float dy(float t)
{
  //y座標の計算式を入れる
  return sin(t);
}

결과는 다음과 같습니다.

y축 방향의 크기가 알기 어려운 위에 긁어 하고 있는 것을 알 수 있다고 생각합니다.

이번 프로그램에서는, 그 2점을 해결하기 위해서 파라미터로서, 화면의 배율 mag , 매개 변수 t의 증가수 add 를 주고 있습니다. 이 두 값을 다음과 같이 바꾸면 어느 정도 보기 쉬워집니다.

float add = 0.01;  //媒介変数tの増加数

float mag = 50; //画面の倍率  

결과는 다음과 같습니다.

꽤 보기 쉬워졌다고 생각합니다.

이와 같이, 2개의 파라미터를 주는 것에 의해, 다양한 그래프를 보기 쉽게 그릴 수 있게 되어 있습니다.

요약

이번에는 Processing을 이용해 그래프를 움직여 보았습니다만, 어떠셨습니까?
이처럼, 매일의 귀찮은 공부도 프로그램을 얽히는 것으로 즐거워지는 것이 조금이라도 전해지면 다행입니다!

마지막으로 게시물이 지연된 것을 사과드립니다.
정말 죄송합니다<(_ _)>

추기:당 기사에 실수등 있으면, 수고스럽지만 코멘트란보다 지적 받을 수 있으면 다행입니다.