Processing: map関数を使おう

https://gyazo.com/add4df51dc0c448c80c17000919b6a0d

はじめに

特に数学が苦手な人が使うといいかも

目次

map()とは？

使ってみよう

1. プログレスバーを作ってみよう

2. 正弦波を描画

3. 円を直線上に動かす

作品例

多角形上に円を動かす

map()とは？

map(a, b, c, d, e)

五等分の例

https://gyazo.com/b37c9edd39a762781ae7e1f0940f4063

五等分された水色の直線と緑色の直線

valueが少数でも構わない

0から5までの範囲でのvalueの値が、9.3から21.6の範囲に変換したときにどの値と同じになるかを導いてくれる

使ってみよう

いくつか例題を用意

map()を使って解決してみよう

1. プログレスバーを作ってみよう

目標

https://gyazo.com/39bda1629f1f5c695cd20ddc28478487

100x50の画面でプログレスバーを作る

ヒント

正解例

code:progress.pde

void setup() {

size(100, 50);

}

void draw() {

background(-1);//背景白

float progress = map(frameCount%360, 0, 360, 0, 100);//進行状況を0～100の範囲に

fill(0, 255, 0);

rect(0, 0, progress, 50);//プログレスバー

}

2. 正弦波を描画

目標

500x500の画面に目いっぱい映るようにしたい

https://gyazo.com/d428b2666bf69df8e479cdf671a73ffd

悪い例

code:sin.pde

size(500, 500);

background(-1);

for (int i = 0; i < 360; i++){

point(i, sin(radians(i)));

}

悪い例の出力結果

https://gyazo.com/04ac04eb420356869db5df20e0eb1d13

ヒント

上のような出力結果に原因

目標の図を作るには

つまり

https://gyazo.com/ef9253411e3627141788c3a65c6e68e3

正解例

code:sin_map.pde

size(500, 500);

background(-1);

for (int i = 0; i < 360; i++) {

float x = map(i, 0, 360, 0, width);

float y = map(sin(radians(i)), -1, 1, 0, height);

point(x, y);

}

3. 円を直線上に動かす

目標

https://gyazo.com/da826377d03b5066ddf9fbc277a96ad5

500x500の対角線（青い線）の上に円を動かせる

frameCountが0のときに左下からはじまって、frameCountが360のときに円の位置が右上になる

ヒント

五等分の場合、こうなります

https://gyazo.com/808d844dca9990ebbb18a672565f52ac

正解例

code:moveOnLine.pde

void setup() {

size(500, 500);

}

void draw() {

background(100);

float x = map(frameCount%360, 0, 360, 0, width);

float y = map(frameCount%360, 0, 360, height, 0);

stroke(0, 0, 255);

strokeWeight(10);

line(0, height, width, 0);

stroke(255, 255, 0);

fill(255, 255, 0);

ellipse(x, y, 10, 10);

}

作品例

多角形上に円を動かす

出力結果

https://gyazo.com/add4df51dc0c448c80c17000919b6a0d

コード

code:RunningOnPolygon.pde

int out_r = 50;

int ball_r = 5;

void setup() {

size(600, 600);

colorMode(HSB, 8, 100, 100);

}

void draw() {

background(-1);

for (int i = 0; i < 3; i++) {

for (int j = 0; j < 3; j++) {

color c = color(i+j*3, 100, 85);

polygonRunning(200*i+100, 200*j+100, i+j*3+3, c);

}

}

}

void polygonRunning(int pos_x, int pos_y, int n, color c) {

pushStyle();

pushMatrix();

translate(pos_x, pos_y);

if (n == 3)rotate(-PI/2);

else if (n == 4) rotate(-PI/4);

else rotate(-PI/2*n);

beginShape();

stroke(c);

fill(-1);

for (int i = 0; i<=n; i++) {

float x = out_r * cos(i*TWO_PI/n);

float y = out_r * sin(i*TWO_PI/n);

vertex(x, y);

}

endShape();

float angle1 = floor(frameCount/30) * TWO_PI/n;

float angle2 = (floor(frameCount/30) + 1) * TWO_PI/n;

float ball_x = map(frameCount%30, 0, 30, out_r*cos(angle1), out_r*cos(angle2));

float ball_y = map(frameCount%30, 0, 30, out_r*sin(angle1), out_r*sin(angle2));

fill(c);

ellipse(ball_x, ball_y, 2*ball_r, 2*ball_r);

popMatrix();

popStyle();

}