型くりこ「Mirroring Text/鏡文字」について

2023年1月5日

型くりこについてはこちらをご覧ください。

「Mirroring Text/鏡文字」について

文字をtext()で描いた際に、反転した文字も重ねることで元の文字からは想像できないような模様を描く技法です。

ちょっとした新しい記号のような模様が作れるので便利に使うことができます。

使い方

text()で文字を描く際scale(-1,1)を使うと文字を左右反転することができます。これを利用して通常の文字と反転した文字を重ねて描きます。

反転する際にはpush()とpop()で状態の保存と復元を行うようにし、その中でtranslate()やscale()を使って文字の位置などを調整します。

void setup() {
  size(720, 720, P2D);
  textSize(72);
  background(0);

  for (int i = 0; i <= 9; i++) {
    push();
    translate(i*72 + 36, 360);
    text(i, -10, 0);
    pop();
    push();
    translate(i * 72 + 36, 360);
    scale(-1, 1);
    text(i, -10, 0);
    pop();
  }
}

function setup() {
  createCanvas(720, 720);
  textSize(72);
  background(0);
  fill(255);
  stroke(255);

  for (var i = 0; i <= 9; i++) {
    push();
    translate(i*72 + 36, 360);
    text(i, -10, 0);
    pop();
    push();
    translate(i * 72 + 36, 360);
    scale(-1, 1);
    text(i, -10, 0);
    pop();
  }
}

追加説明

scale(1,-1)で上下反転になります。同様にscale(-1,-1)で左右上下反転になります。

void setup() {
  size(720, 720, P2D);
  textSize(72);
  background(0);

  for (int i = 0; i <= 9; i++) {
    push();
    translate(i * 72 + 36, 360);
    text(i, -10, 0);
    pop();
    push();
    translate(i * 72 + 36, 360);
    scale(-1, 1);
    text(i, -10, 0);
    pop();
    push();
    translate(i * 72 + 36, 360);
    scale(1, -1);
    text(i, -10, 0);
    pop();
    push();
    translate(i * 72 + 36, 360);
    scale(-1, -1);
    text(i, -10, 0);
    pop();
  }
}

function setup() {
  createCanvas(720, 720);
  textSize(72);
  background(0);
  fill(255);
  stroke(255);

  for (var i = 0; i <= 9; i++) {
    push();
    translate(i * 72 + 36, 360);
    text(i, -10, 0);
    pop();
    push();
    translate(i * 72 + 36, 360);
    scale(-1, 1);
    text(i, -10, 0);
    pop();
    push();
    translate(i * 72 + 36, 360);
    scale(1, -1);
    text(i, -10, 0);
    pop();
    push();
    translate(i * 72 + 36, 360);
    scale(-1, -1);
    text(i, -10, 0);
    pop();
  }
}

ワンポイントや装飾に使えるような記号が出来上がる。
普段見慣れている文字でも、ぱっと見では元の文字を推測するのは難しい。

例

型くりこ「Mirroring Text/鏡文字」を使って、アルファベットを反転させて配置してみた例。

Java版、p5.js版ともそれぞれの方法でrandom()で0～25の数値を生成し、それを文字に変換することでA～Zの文字を描いています。

void setup() {
  size(720, 720, P2D);
  textSize(72);
  background(255, 255, 128);
  fill(128, 128, 64);
  
  translate(width / 2, height / 2);
  rotate(PI / 6);
  translate(-width / 2, -height / 2);
  
  for(int y = -height / 2; y <= height * 1.5; y += 80){
    for (int x = -width ; x <= width * 1.5; x += 80) {
      char c = (char)('A' + int(random(26))); // char型にキャストすればよい
      push();
      translate(x, y);
      text(c, -10, 0);
      pop();
      
      push();
      translate(x, y);
      scale(-1, 1);
      text(c , -10, 0);
      pop();
    }
  }
}

function setup() {
  createCanvas(720, 720);
  textSize(72);
  background(255, 255, 128);
  fill(128, 128, 64);
  stroke(128, 128, 64);

  translate(width / 2, height / 2);
  rotate(PI / 6);
  translate(-width / 2, -height / 2);

  for (var y = -height / 2; y <= height * 1.5; y += 80) {
    for (var x = -width; x <= width * 1.5; x += 80) {
      var c = char(int(unchar('A') + random(26))); //unchar()で数値にしてchar()で文字に戻せばよい
      push();
      translate(x, y);
      text(c, -10, 0);
      pop();

      push();
      translate(x, y);
      scale(-1, 1);
      text(c, -10, 0);
      pop();
    }
  }
}

応用編

数字やアルファベット以外の文字も使用することができます。

型くりこ「Mirroring Text/鏡文字」を使って、日本語を反転して重ねてみた例。

Java版の場合は、日本語対応フォントを作成して適用する必要があります。

void setup() {
  size(720, 720, P2D);
  background(255,128, 128);
  fill(128, 64, 128);
  
  PFont f = createFont("ＭＳ ゴシック", 36); // 日本語対応フォントの生成
  textFont(f);
  
  translate(width / 2, height / 2);
  rotate(-PI / 8);
  translate(-width / 2, -height / 2);
  
  for(int y = -height / 2; y <= height * 1.5; y += 60){
    for (int x = -width ; x <= width * 1.5; x += 60) {
      char c = (char)('あ' + int(random(85)));
      push();
      translate(x, y);
      text(c, -20, 0);
      pop();
      
      push();
      translate(x, y);
      scale(-1, 1);
      text(c , -20, 0);
      pop();
    }
  }
}

function setup() {
  createCanvas(720, 720);
  textSize(36);
  background(255, 128, 128);
  fill(128, 64, 128);
  stroke(128, 64, 128);

  translate(width / 2, height / 2);
  rotate(-PI / 8);
  translate(-width / 2, -height / 2);

  for (var y = -height / 2; y <= height * 1.5; y += 60) {
    for (var x = -width; x <= width * 1.5; x += 60) {
      var c = char(int(unchar('あ') + random(85)));
      push();
      translate(x, y);
      text(c, -20, 0);
      pop();

      push();
      translate(x, y);
      scale(-1, 1);
      text(c, -20, 0);
      pop();
    }
  }
}

その他作品

型くりこ「Mirroring Text/鏡文字」の考え方を使った作品をいくつか紹介いたします。

#つぶやきProcessing になってしまっているので、コードは圧縮されている箇所が多いですが、基本的な考え方は本記事に記載した内容と同等です。

float r,f=1;
size(720,720);
clear();
textSize(20);
for(int d=10;d<720;d+=15){
for(r=0;r<TAU;r+=TAU/d){
push();
translate(cos(r)*d+360,sin(r)*d+360);
rotate(r+PI/2);
scale(f*=-1,1);
text(char(48+d/15%10),d,0);
pop();
}
}#つぶやきProcessing #dailycodingchallenge 数字 https://t.co/kOfKxFnBGq pic.twitter.com/PAKDryHHJd
— はぅ君 (@Hau_kun) April 13, 2020

float r,D;
size(1920,1080);
clear();
for(r=9;r<TAU*45;r+=.05-r*.00016){
textSize(r/9+5);
resetMatrix();
translate(cos(r)*(D=r*(6+sin(r*6)))+960,sin(r)*D+540);
rotate(r+PI/2);
text(int(r*r)%10,-r/25,0);
scale(-1,1);
text(int(r*r)%10,-r/25,0);
}#pchj03 #つぶやきProcessing pic.twitter.com/39UKBFyNuH
— はぅ君 (@Hau_kun) August 22, 2020

t=0
draw=_=>{t||createCanvas(W=720,W)
t+=.05
background(F=G=1,9)
fill(W)
textSize(60)
for(y=0;y<W+!(G=-G);y+=60)for(x=0;x<800;x+=60)push()+translate(x,y)+scale(F=-F,G)+rotate(1)+text(char(noise(int((T=t+PI/2)/PI))*255%128),tan(t),2*tan(T))+pop()}#minacoding #つぶやきProcessing pic.twitter.com/fKKzRv7DF5
— はぅ君 (@Hau_kun) June 30, 2022

t=0
draw=_=>{t||createCanvas(W=720,W)
t+=.01
background(W)
textSize(40)
for(y=0;y<W;y+=90)for(x=0;x<W;x+=90){
resetMatrix()+translate(x,y)
for(i=0;i<8;i++)rotate(PI/4)+text(String.fromCodePoint(12353+0|(noise(x%4,y%4,0|(t/PI))*190%95)),0,tan(t-PI/2)**2*30)}}#つぶやきProcessing pic.twitter.com/cG2k9bOQpO
— はぅ君 (@Hau_kun) September 4, 2022

float r,d,i;
size(720,720);
textSize(24);
clear();
for(d=90;d<500;d+=50)
for(r=0;r<TAU;r+=.4-d/1500)
for(i=0;i<4;i++){
resetMatrix();
translate(cos(r)*d+360,sin(r)*d+360);
rotate(r-PI/2);
scale(i%2*2-1,int(i/2)*2-1);
text(char('A'+int(random(52))),0,3);
}#つぶやきProcessing pic.twitter.com/HtjOtDBeng
— はぅ君 (@Hau_kun) October 7, 2020

t=0
draw=_=>{t||createCanvas(W=720,W)
t+=.01
background(0)
fill(W)
textSize(50)
for(y=0;y<W;y+=70)for(x=0;x<W;x+=55){resetMatrix()
translate(x,y)
for(i=0;i<4;i++)scale(i%2*2-1,i?-1:1)+text(String.fromCodePoint(int(noise(2-x%4,0|t)*W)%99+32),-9,0)}}#つぶやきProcessing pic.twitter.com/9lnr97SaEV
— はぅ君 (@Hau_kun) August 31, 2022

t=0
draw=_=>{t||createCanvas(W=720,W)
t+=.01
N=noise
colorMode(HSB)
background(F=1,.1)
textSize(A=200)
fill(noise(T=0|t)*W%360,50,W)
for(r=0;r<6;r+=PI/8)push()+translate(360,360)+rotate(r)+scale(1,F=-F),text(N(T)*99,N(T,3)*A-99,N(T,9)*A-99)+pop()}#minacoding #つぶやきProcessing pic.twitter.com/SV46flkBat
— はぅ君 (@Hau_kun) June 22, 2022

コメントするコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

型くりこ「Mirroring Text/鏡文字」について

「Mirroring Text/鏡文字」について

使い方

追加説明

例

応用編

その他作品

関連

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル