Chapter 49

スキャン

miku
miku
2021.11.21に更新

スキャン

let angle, x, layer0, layer1;

function setup() {
  createCanvas(windowWidth, windowHeight);
  noStroke();
  fill(240);

  angle = 0;
  x = 0;

  layer0 = createGraphics(width, height);
  layer1 = createGraphics(width, height);
}

function draw() {
  if (x >= width / 2) {
    return;
  }
  clear();

  for (let y = 0; y < height; y++) {
    layer0.set(x + width / 2, y, layer1.get(x, y));
  }
  layer0.updatePixels();
  image(layer0, 0, 0);

  layer1.clear();
  layer1.rectMode(CENTER);
  layer1.translate(width / 4, height / 2);
  layer1.rotate(angle);
  layer1.rect(0, 0, 100, 100);
  layer1.resetMatrix();

  angle += 0.01;
  x++;

  image(layer1, 0, 0);

  rect(x, 0, 1, height);
}

画面の左半分では矩形が回転しており、縦線が左から右へ移動にする。縦線と矩形が重なるとその重なった部分だけを右半分に描画する。

スキャン その2

let angle, x, layer0, layer1;

function setup() {
  createCanvas(windowWidth, windowHeight);
  noStroke();
  fill(240);

  angle = 0;
  x = 0;

  layer0 = createGraphics(width, height);
  layer1 = createGraphics(width, height);
}

function draw() {
  if (x >= width / 2) {
    return;
  }
  clear();

  for (let y = 0; y < height; y++) {
    layer0.set(x + width / 2, y, layer1.get(x, y));
  }
  layer0.updatePixels();
  image(layer0, 0, 0);

  layer1.clear();
  layer1.rectMode(CENTER);
  layer1.noFill();
  layer1.stroke(240);
  layer1.strokeWeight(20);
  for (let i = 0; i < 10; i++) {
    layer1.translate(width / 4, height / 2);
    layer1.rotate(angle);
    layer1.line(-width / 4, 0, width / 4, 0);
    layer1.resetMatrix();
  }

  angle += 0.04;
  x++;

  image(layer1, 0, 0);

  rect(x, 0, 1, height);
}

回転する線をスキャンする作例。

スキャン その3

let angle, x, layer0, layer1;

function setup() {
  createCanvas(windowWidth, windowHeight);
  noStroke();
  fill(240);

  angle = 0;
  x = 0;

  layer0 = createGraphics(width, height);
  layer1 = createGraphics(width, height);
}

function draw() {
  if (x >= width / 2) {
    return;
  }
  clear();

  for (let y = 0; y < height; y++) {
    layer0.set(x + width / 2, y, layer1.get(x, y));
  }
  layer0.updatePixels();
  image(layer0, 0, 0);

  layer1.clear();
  layer1.stroke(240);
  layer1.noFill();
  for (let i = 0; i < 10; i++) {
    layer1.translate(width / 4 - sin(frameCount / 100) * 100, height / 2 - sin(frameCount / 100) * 100);
    layer1.rotate(angle);
    layer1.circle(0, 0, 200);
    layer1.resetMatrix();
  }

  angle += 0.03;
  x++;

  image(layer1, 0, 0);

  rect(x, 0, 1, height);
}

移動している円をスキャンする作例。

スキャン その4

let angle, x, layer0, layer1, img;

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

function setup() {
  createCanvas(windowWidth, windowHeight);
  noStroke();
  fill(240);

  angle = 0;
  x = 0;

  layer0 = createGraphics(width, height);
  layer1 = createGraphics(width, height);
}

function draw() {
  if (x >= width / 2) {
    return;
  }
  clear();

  for (let y = 0; y < height; y++) {
    layer0.set(x + width / 2, y, layer1.get(x, y));
  }
  layer0.updatePixels();
  image(layer0, 0, 0);

  layer1.clear();
  layer1.imageMode(CENTER);
  for (let i = 0; i < 10; i++) {
    layer1.translate(width / 4, height / 2);
    layer1.rotate(angle);
    layer1.image(img, 0, 0);
    layer1.resetMatrix();
  }

  angle += 0.01;
  x++;

  image(layer1, 0, 0);

  rect(x, 0, 1, height);
}

回転している画像をスキャンする作例。