sugi2000/.block

## .block
license: cc-by-nc-sa-4.0
height: 800

## README.md

      
    Raw
  

              README.md
            
          
    Tokyo 2020 Pattern Generator

To change the resolution, hover or touch on the pattern.
Original Design:

Asao Tokolo

Coding:

@sugi2000

Built with:

p5.js

References:

tokyo2020/round_lattice/round_lattice01/ by @masakick
東京パラリンピック(2020年)のエンブレム拡張 by @tatt61880


## index.html
<html>
<head>
  <meta charset="UTF-8">
  <title>Tokyo 2020 Pattern Generator</title>
  <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.24/p5.min.js"></script>
  <script language="javascript" type="text/javascript" src="sketch.js"></script>
  <style> body {padding: 0; margin: 0;} </style>
</head>

<body>
</body>
</html>

## preview.png

      
    Raw
  

              preview.png
            
          
## sketch.js
function setup() {
  createCanvas(800, 800);
  noStroke();
  fill(0, 0, 80);
}

function draw() {
  var size = width;
  var division = 12;
  var distance = dist(touchX, touchY, width * 0.5, height * 0.5);

  if (distance < size * 0.5) {
    division = int(map(distance, 0, size, 2, 90)) * 2; // [4 .. 180]
  }

  background(255);

  drawPattern(width * 0.5, height * 0.5, size, division, true);
  drawPattern(width * 0.5, height * 0.5, size, division, false);
}

function drawPattern(x, y, size, div, isDrawLargeArea) {
  var rotation = PI / div;
  var rectTypeNum = div / 2 - 1;
  var rects = [];

  var vertices = [];
  for (var i = 0; i < div; i++) {
    var angle = i * TWO_PI / div;
    vertices[i] = new p5.Vector(cos(angle), sin(angle));
  }

  // totalWidth is approx.
  var totalWidth = 0;
  for (var i = 0; i < rectTypeNum; i++) {
    rects[i] = new RectPart(
      p5.Vector.dist(vertices[0], vertices[div / 2 - (i + 1)]),
      p5.Vector.dist(vertices[0], vertices[i + 1]));

    totalWidth += rects[i].w;
  }
  totalWidth *= 2;
  totalWidth += rects[0].w;

  // set origin and scale
  push();
  translate(x, y);
  rotate(frameCount * 0.001);
  scale(size / totalWidth);

  // offset
  if (!isDrawLargeArea) {
    var offsetY = rects[0].h * 0.5;
    if (rectTypeNum % 2 == 0) {
      offsetY += 1.0;
    } else {
      offsetY += rects[0].w * 0.5;
    }
    for (var i = 0; i < rectTypeNum; i++) {
      if (i % 2 == rectTypeNum % 2) {
        offsetY += sin(HALF_PI - rotation) * rects[i].w;
      } else {
        offsetY += rects[i].w;
      }
    }
    translate(0, offsetY);
  }

  for (var i = 0; i < div; i++) {
    push();
    for (var j = 0; j < rects.length; j++) {
      var rect = rects[j];

      if (j == 0) {
        translate(rect.w * 0.5, rect.h * -0.5);
      }

      if (i > div / 2 && i < div - j) {
        if (!isDrawLargeArea) {
          rect.draw();
        }
      } else if (i > 0 && i < div / 2 - j) {
      } else {
        if (isDrawLargeArea) {
        rect.draw();
        }
      }

      translate(rect.w, rect.h);
      rotate(rotation);
    }
    pop();
    rotate(rotation * 2);
  }
  pop();
}

var RectPart = function(pw, ph) {
  this.w = pw;
  this.h = ph;
}

RectPart.prototype.draw = function() {
  rect(0, 0, this.w, this.h);
}

// var frameEl = window.frameElement;
// if (frameEl) {
//   frameEl.style.height = "800px";
// }

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Tokyo 2020 Pattern Generator</title>
	<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.24/p5.min.js"></script>
	<script language="javascript" type="text/javascript" src="sketch.js"></script>
	<style> body {padding: 0; margin: 0;} </style>
	</head>

	<body>
	</body>
	</html>
	function setup() {
	createCanvas(800, 800);
	noStroke();
	fill(0, 0, 80);
	}

	function draw() {
	var size = width;
	var division = 12;
	var distance = dist(touchX, touchY, width * 0.5, height * 0.5);

	if (distance < size * 0.5) {
	division = int(map(distance, 0, size, 2, 90)) * 2; // [4 .. 180]
	}

	background(255);

	drawPattern(width * 0.5, height * 0.5, size, division, true);
	drawPattern(width * 0.5, height * 0.5, size, division, false);
	}

	function drawPattern(x, y, size, div, isDrawLargeArea) {
	var rotation = PI / div;
	var rectTypeNum = div / 2 - 1;
	var rects = [];

	var vertices = [];
	for (var i = 0; i < div; i++) {
	var angle = i * TWO_PI / div;
	vertices[i] = new p5.Vector(cos(angle), sin(angle));
	}

	// totalWidth is approx.
	var totalWidth = 0;
	for (var i = 0; i < rectTypeNum; i++) {
	rects[i] = new RectPart(
	p5.Vector.dist(vertices[0], vertices[div / 2 - (i + 1)]),
	p5.Vector.dist(vertices[0], vertices[i + 1]));

	totalWidth += rects[i].w;
	}
	totalWidth *= 2;
	totalWidth += rects[0].w;

	// set origin and scale
	push();
	translate(x, y);
	rotate(frameCount * 0.001);
	scale(size / totalWidth);

	// offset
	if (!isDrawLargeArea) {
	var offsetY = rects[0].h * 0.5;
	if (rectTypeNum % 2 == 0) {
	offsetY += 1.0;
	} else {
	offsetY += rects[0].w * 0.5;
	}
	for (var i = 0; i < rectTypeNum; i++) {
	if (i % 2 == rectTypeNum % 2) {
	offsetY += sin(HALF_PI - rotation) * rects[i].w;
	} else {
	offsetY += rects[i].w;
	}
	}
	translate(0, offsetY);
	}

	for (var i = 0; i < div; i++) {
	push();
	for (var j = 0; j < rects.length; j++) {
	var rect = rects[j];

	if (j == 0) {
	translate(rect.w * 0.5, rect.h * -0.5);
	}

	if (i > div / 2 && i < div - j) {
	if (!isDrawLargeArea) {
	rect.draw();
	}
	} else if (i > 0 && i < div / 2 - j) {
	} else {
	if (isDrawLargeArea) {
	rect.draw();
	}
	}

	translate(rect.w, rect.h);
	rotate(rotation);
	}
	pop();
	rotate(rotation * 2);
	}
	pop();
	}

	var RectPart = function(pw, ph) {
	this.w = pw;
	this.h = ph;
	}

	RectPart.prototype.draw = function() {
	rect(0, 0, this.w, this.h);
	}

	// var frameEl = window.frameElement;
	// if (frameEl) {
	// frameEl.style.height = "800px";
	// }