Chapter 53

シンメトリー

miku
miku
2021.11.16に更新

この章では対称になるように描画を行うシンメトリーについて扱う。

シンメトリーのお絵かき

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  if (mouseIsPressed) {
    circle(mouseX, mouseY, 100);
    circle(width - 1 - mouseX, mouseY, 100);
  }
}

マウスボタンを押している間だけマウス座標に円を描くが、(width - 1 - mouseX, mouseY) にも描くと左右対称の描画になる。これは width - 1 が画面右端のピクセルを表し、更にそこから mouseX を引くと右側から数えた mouseX の座標になるからだ。

シンメトリーのお絵かき その2

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  if (mouseIsPressed) {
   // 通常の描画
    circle(mouseX, mouseY, 100);
    // 左右対称
    circle(width - mouseX, mouseY, 100);
    // 上下対称
    circle(mouseX, height - mouseY, 100);
    // 左右上下対称
    circle(width - mouseX, height - mouseY, 100);
  }
}

左右上下対称にした作例。

画像のシンメトリー

let img;

function preload() {
  img = loadImage("0.png");
}

function setup() {
  createCanvas(windowWidth, windowHeight);

 // 左半分を描画
  const hw = img.width / 2;
  copy(img, 0, 0, hw, img.height, width / 2 - hw, 0, hw, img.height);

  // 左半分を反転して描画
  translate(width / 2, 0);
  scale(-1, 1);
  copy(img, 0, 0, hw, img.height, -hw, 0, hw, img.height);
}

画面をシンメトリーにするには、左右対称なら、画像の左半分と左半分を反転したものをくっつくればいい。