円弧でテセレーション(tessellation arc)

↓六角形充填

↓正方形充填

↓正方形＋菱形充填

↓ペンローズタイル充填

↓三種充填

↓八角形

三角形と四角形regular

三角形と四角形random

はじめに

円弧パターンで埋め尽くす模様をいろいろ試しました。

正方形充填

コードのみで描画可能。画像ファイル不要。

Processing

PImage a, b;

void setup() {
  size(512, 512);
  background(255);
  //a = loadImage("a.png");
  //b = loadImage("b.png");

  noStroke();
  fill(0);
  ellipse(64, 64, 85, 85);
  ellipse(0, 0, 85, 85);
  ellipse(128, 0, 85, 85);
  fill(255);
  ellipse(0, 0, 43, 43);
  ellipse(128, 0, 43, 43);
  ellipse(64, 64, 43, 43);
  a = get(0, 0, 64, 64);
  b = get(64, 0, 64, 64);

  for (int y=0; y<512; y+=64) {
    for (int x=0; x<512; x+=64) {
      if (random(1)<0.5) {
        image(a, x, y);
      } else {
        image(b, x, y);
      }
    }
  }
  frameRate(15);
}

void draw() {
  int x = int(random(8))*64;
  int y = int(random(8))*64;
  if (random(1)<0.5) {
    image(a, x, y);
  } else {
    image(b, x, y);
  }
}

六角形充填

下記、svgファイルが必要。

Processing

PShape a, b;

void setup() {
  size(800, 800);
  background(255);
  a = loadShape("a.svg");
  b = loadShape("b.svg");
  float w=120;
  float h=103.923;

  for (int y=0; y<800; y+=104) {
    for (int x=0; x<800; x+=90) {
      if(random(1)<0.5){
        shape(a, x, (x/90)%2*52 + y, w, h);
      }else{
        shape(b, x, (x/90)%2*52 + y, w, h);
      }
    }
  }
}

void draw() {
}

a.svg

<?xml version="1.0" encoding="UTF-8"?><svg id="_レイヤー_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340.16 294.59"><g id="_レイヤー_1-2"><path d="M198.38,0h56.74l28.36,49.11" style="fill:none; stroke-width:0px;"/><path d="M28.36,196.41L0,147.29l28.36-49.11" style="fill:none; stroke-width:0px;"/><path d="M283.47,245.47l-28.36,49.11h-56.74" style="fill:none; stroke-width:0px;"/><path d="M28.36,196.41c16.95-9.82,28.38-28.15,28.38-49.11s-11.43-39.29-28.38-49.11L0,147.29l28.36,49.11Z" style="fill:#fff; stroke-width:0px;"/><path d="M198.38,294.59h56.74l28.36-49.11c-8.35-4.84-18.03-7.62-28.36-7.62-31.29,0-56.74,25.45-56.74,56.74Z" style="fill:#fff; stroke-width:0px;"/><path d="M198.38,0h0c0,31.29,25.45,56.74,56.74,56.74,10.33,0,20.01-2.79,28.36-7.63L255.12,0h-56.74Z" style="fill:#fff; stroke-width:0px;"/><path d="M255.12,181.25c20.62,0,39.98,5.54,56.66,15.21l28.38-49.16-28.38-49.16c-16.68,9.67-36.03,15.21-56.66,15.21C192.62,113.34,141.78,62.5,141.78,0h0s-56.74,0-56.74,0l-28.38,49.16c33.86,19.62,56.68,56.26,56.68,98.13s-22.82,78.51-56.68,98.13l28.38,49.16h56.74c0-62.5,50.84-113.34,113.34-113.34Z" style="fill:#fff; stroke-width:0px;"/><path d="M56.66,245.43l-28.3-49.02" style="fill:#000; stroke-width:0px;"/><path d="M28.36,98.18l28.3-49.02" style="fill:#000; stroke-width:0px;"/><path d="M113.34,147.29c0-41.87-22.82-78.51-56.68-98.13l-28.3,49.02c16.95,9.82,28.38,28.15,28.38,49.11s-11.43,39.29-28.38,49.11l28.3,49.02c33.86-19.62,56.68-56.26,56.68-98.13Z" style="fill:#000; stroke-width:0px;"/><path d="M311.78,196.45l-28.3,49.02" style="fill:#000; stroke-width:0px;"/><path d="M255.12,237.85c10.33,0,20.01,2.79,28.36,7.62l28.3-49.02c-16.68-9.67-36.03-15.21-56.66-15.21-62.5,0-113.34,50.84-113.34,113.34h56.6c0-31.29,25.45-56.74,56.74-56.74Z" style="fill:#000; stroke-width:0px;"/><path d="M283.47,49.11l28.3,49.02" style="fill:#000; stroke-width:0px;"/><path d="M255.12,113.34c20.62,0,39.98-5.54,56.66-15.21l-28.3-49.02c-8.35,4.84-18.03,7.63-28.36,7.63C223.83,56.74,198.38,31.29,198.38,0h0s-56.6,0-56.6,0h0c0,62.5,50.84,113.34,113.34,113.34Z" style="fill:#000; stroke-width:0px;"/></g></svg>

b.svg

<?xml version="1.0" encoding="UTF-8"?><svg id="_レイヤー_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340.16 294.59"><g id="_レイヤー_1-2"><path d="M141.78,294.59h-56.74l-28.36-49.11" style="fill:none; stroke-width:0px;"/><path d="M311.8,98.18l28.36,49.11-28.36,49.11" style="fill:none; stroke-width:0px;"/><path d="M56.68,49.11L85.04,0h56.74" style="fill:none; stroke-width:0px;"/><path d="M311.8,98.18c-16.95,9.82-28.38,28.15-28.38,49.11s11.43,39.29,28.38,49.11l28.36-49.11-28.36-49.11Z" style="fill:#fff; stroke-width:0px;"/><path d="M141.78,0h-56.74l-28.36,49.11c8.35,4.84,18.03,7.62,28.36,7.62,31.29,0,56.74-25.45,56.74-56.74Z" style="fill:#fff; stroke-width:0px;"/><path d="M141.78,294.59h0c0-31.29-25.45-56.74-56.74-56.74-10.33,0-20.01,2.79-28.36,7.63l28.36,49.11h56.74Z" style="fill:#fff; stroke-width:0px;"/><path d="M85.04,113.34c-20.62,0-39.98-5.54-56.66-15.21L0,147.29l28.38,49.16c16.68-9.67,36.03-15.21,56.66-15.21,62.5,0,113.34,50.84,113.34,113.34h0s56.74,0,56.74,0l28.38-49.16c-33.86-19.62-56.68-56.26-56.68-98.13s22.82-78.51,56.68-98.13L255.12,0h-56.74c0,62.5-50.84,113.34-113.34,113.34Z" style="fill:#fff; stroke-width:0px;"/><path d="M283.5,49.16l28.3,49.02" style="fill:#000; stroke-width:0px;"/><path d="M311.8,196.41l-28.3,49.02" style="fill:#000; stroke-width:0px;"/><path d="M226.82,147.29c0,41.87,22.82,78.51,56.68,98.13l28.3-49.02c-16.95-9.82-28.38-28.15-28.38-49.11s11.43-39.29,28.38-49.11l-28.3-49.02c-33.86,19.62-56.68,56.26-56.68,98.13Z" style="fill:#000; stroke-width:0px;"/><path d="M28.38,98.13l28.3-49.02" style="fill:#000; stroke-width:0px;"/><path d="M85.04,56.74c-10.33,0-20.01-2.79-28.36-7.62l-28.3,49.02c16.68,9.67,36.03,15.21,56.66,15.21,62.5,0,113.34-50.84,113.34-113.34h-56.6c0,31.29-25.45,56.74-56.74,56.74Z" style="fill:#000; stroke-width:0px;"/><path d="M56.68,245.47l-28.3-49.02" style="fill:#000; stroke-width:0px;"/><path d="M85.04,181.25c-20.62,0-39.98,5.54-56.66,15.21l28.3,49.02c8.35-4.84,18.03-7.63,28.36-7.63,31.29,0,56.74,25.45,56.74,56.74h0s56.6,0,56.6,0h0c0-62.5-50.84-113.34-113.34-113.34Z" style="fill:#000; stroke-width:0px;"/></g></svg>

分銅つなぎ

processing

size(1000, 1000);
background(255);
noFill();

for (int y=0; y<=1000; y+=100) {
  for (int x=0; x<=1000; x+=100) {
    arc(x+ 50, y+50, 100, 100,        PI, HALF_PI*3);
    arc(x    , y   , 100, 100, HALF_PI*3, TWO_PI   );
    arc(x+100, y   , 100, 100,   HALF_PI, PI       );
    arc(x+ 50, y+50, 100, 100,         0, HALF_PI  );
  }
}

参考サイト

ペンローズの作図をイラレでしたときに、参考になった。