p5.js 연습 009. $n$을 법으로 하는 곱셈 테이블

자연수 $2\le n\le 150$에 대하여 $n$을 법으로 하는 곱셈 테이블이 아래에 주어져 있다. 테이블의 $(i,j)$-칸의 값은 $ij(\mathrm{mod}n)$이며, 시각적 효과를 더하기 위해서 곱셈의 결과가 $0$에 가까울수록 노란색, $n-1$에 가까울 수록 파란색을 나타내도록 하였다. 단, 테이블에서 $0$이 곱해지는 첫번째 행과 첫번째 열은 제외하였다.

오른쪽 아래의 슬라이더를 움직이면 $n$의 값을 늘리거나 줄일 수 있다.

p5.js 코드 보기

function setup() {
  createCanvas(600, 620);
  modslider = createSlider(2, 120, 9, 1);
  modslider.position(430, 590);
}

function draw() {
  translate(20, 20);
  background(255);
  mod = modslider.value();
  size = 560 / (mod-1);
  from = color(255, 153, 0);
  to = color(0, 102, 255);
  noStroke();
  for (var i = 1; i < mod; i++) {
    for (var j = 1; j < mod; j++) {
      now = (i*j) % mod;
      fill(lerpColor(from, to, now/(mod-1)));
      rect((i-1)*size, (j-1)*size, size, size);
      if (mod < 40) {
        fill(0);
        textSize(size/2);
        textAlign(CENTER, CENTER);
        text(now, (i-1)*size + size/2, (j-1)*size + size/2);
      }
    }
  }
  stroke(0);
  for (var i = 0; i < mod; i++) {
    line(0, i*size, 560, i*size);
    line(i*size, 0, i*size, 560);
  }
}