HarryStevens/.block

## .block
license: gpl-3.0

## index.html
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
    }
  </style>
</head>
<body>
  <canvas></canvas>
  <script>
  const vecmath = {
    // Add vector w to vector v
    add: (v, w) => {
      let out = [];
      for (let i = 0; i < v.length; i++){
        out[i] = v[i] + w[i];
      }
      return out;
    },
    // Translate position of vector v by an angle in radians and a distance in pixels
    trans: (v, ang, dist) => [v[0] + dist * Math.cos(ang), v[1] + dist * Math.sin(ang)]
  };

  // The Pendulum class
  class Pendulum {
    constructor(){
      this._acceleration = 0;
      this._angle = Math.PI / 4;
      this._damping = 1.0;
      this._gravity = 0.4;
      this._length = 200;
      this._origin = [innerWidth / 2, 0];
      this._velocity = 0;
      this._position = vecmath.trans(this._origin, this._angle, this._length);

      return this;
    }

    acceleration(num){
      return num ? (this._acceleration = num, this) : this._acceleration;
    }

    angle(num){
      return num ? (this._angle = num, this) : this._angle;
    }

    damping(num){
      return num ? (this._damping = num, this) : this._damping;
    }

    gravity(num){
      return num ? (this._gravity = num, this) : this._gravity;
    }

    length(num){
      return num ? (this._length = num, this) : this._length;
    }

    origin(arr){
      return arr ? (this._origin = arr, this) : this._origin;
    }

    position(arr){
      return arr ? (this._position = arr, this) : this._position;
    }

    velocity(num){
      return num ? (this._velocity = num, this) : this._velocity;
    }

    tick(){
      return this
        .acceleration((-1 * this.gravity() / this.length()) * Math.sin(this.angle()))
        .velocity((this.velocity() + this.acceleration()) * this.damping())
        .angle(this.angle() + this.velocity())
        .position(
          vecmath.add(
            [this.length() * Math.sin(this.angle()), this.length() * Math.cos(this.angle())],
            this.origin()
          )
        );
    }
  }

  // Create the pendula
  const pendula = [];
  const rows = 8;
  const cols = 10;
  let i = 1;
  for (let row = 0; row < rows; row++){
    const evenRow = row % 2 === 0;

    for (let col = 0; col < cols; col++){

      if (evenRow && col === cols - 1) continue;

      const px = innerWidth / cols;
      const x = px / 2 + col * px + (evenRow ? px / 2 : 0);
      const y = 10 + row * innerHeight / rows;

      pendula.push(
        new Pendulum()
          .gravity(.15)
          .length(-10 + px / 2)
          .origin([x, y])
          .angle(Math.PI / 2 * (i % 2 === 0 ? 1 : -1))
      );

      i++;
    }
  }

  // Draw to Canvas
  const canvas = document.querySelector("canvas");
  canvas.width = innerWidth;
  canvas.height = innerHeight;
  const ctx = canvas.getContext("2d");
  ctx.strokeStyle = "#aaa";

  function tick(){
    requestAnimationFrame(tick);

    ctx.clearRect(0, 0, innerWidth, innerHeight);

    pendula.forEach((p, i, e) => {
      draw(p, `rgb(200, 40, ${(i + 1) / e.length * 255})`);
    });
  }

  tick();

  function draw(p, fill){
    p.tick();

    ctx.fillStyle = fill;

    ctx.beginPath();
    ctx.moveTo(...p.origin());
    ctx.lineTo(...p.position());
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(...p.origin(), 3, 0, Math.PI * 2)
    ctx.fill();

    ctx.beginPath();
    ctx.arc(...p.position(), 10, 0, Math.PI * 2)
    ctx.fill();
  }
  </script>

</body>
</html>

## preview.png

      
    Raw
  

              preview.png
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	body {
	margin: 0;
	}
	</style>
	</head>
	<body>
	<canvas></canvas>
	<script>
	const vecmath = {
	// Add vector w to vector v
	add: (v, w) => {
	let out = [];
	for (let i = 0; i < v.length; i++){
	out[i] = v[i] + w[i];
	}
	return out;
	},
	// Translate position of vector v by an angle in radians and a distance in pixels
	trans: (v, ang, dist) => [v[0] + dist * Math.cos(ang), v[1] + dist * Math.sin(ang)]
	};

	// The Pendulum class
	class Pendulum {
	constructor(){
	this._acceleration = 0;
	this._angle = Math.PI / 4;
	this._damping = 1.0;
	this._gravity = 0.4;
	this._length = 200;
	this._origin = [innerWidth / 2, 0];
	this._velocity = 0;
	this._position = vecmath.trans(this._origin, this._angle, this._length);

	return this;
	}

	acceleration(num){
	return num ? (this._acceleration = num, this) : this._acceleration;
	}

	angle(num){
	return num ? (this._angle = num, this) : this._angle;
	}

	damping(num){
	return num ? (this._damping = num, this) : this._damping;
	}

	gravity(num){
	return num ? (this._gravity = num, this) : this._gravity;
	}

	length(num){
	return num ? (this._length = num, this) : this._length;
	}

	origin(arr){
	return arr ? (this._origin = arr, this) : this._origin;
	}

	position(arr){
	return arr ? (this._position = arr, this) : this._position;
	}

	velocity(num){
	return num ? (this._velocity = num, this) : this._velocity;
	}

	tick(){
	return this
	.acceleration((-1 * this.gravity() / this.length()) * Math.sin(this.angle()))
	.velocity((this.velocity() + this.acceleration()) * this.damping())
	.angle(this.angle() + this.velocity())
	.position(
	vecmath.add(
	[this.length() * Math.sin(this.angle()), this.length() * Math.cos(this.angle())],
	this.origin()
	)
	);
	}
	}

	// Create the pendula
	const pendula = [];
	const rows = 8;
	const cols = 10;
	let i = 1;
	for (let row = 0; row < rows; row++){
	const evenRow = row % 2 === 0;

	for (let col = 0; col < cols; col++){

	if (evenRow && col === cols - 1) continue;

	const px = innerWidth / cols;
	const x = px / 2 + col * px + (evenRow ? px / 2 : 0);
	const y = 10 + row * innerHeight / rows;

	pendula.push(
	new Pendulum()
	.gravity(.15)
	.length(-10 + px / 2)
	.origin([x, y])
	.angle(Math.PI / 2 * (i % 2 === 0 ? 1 : -1))
	);

	i++;
	}
	}

	// Draw to Canvas
	const canvas = document.querySelector("canvas");
	canvas.width = innerWidth;
	canvas.height = innerHeight;
	const ctx = canvas.getContext("2d");
	ctx.strokeStyle = "#aaa";

	function tick(){
	requestAnimationFrame(tick);

	ctx.clearRect(0, 0, innerWidth, innerHeight);

	pendula.forEach((p, i, e) => {
	draw(p, `rgb(200, 40, ${(i + 1) / e.length * 255})`);
	});
	}

	tick();

	function draw(p, fill){
	p.tick();

	ctx.fillStyle = fill;

	ctx.beginPath();
	ctx.moveTo(...p.origin());
	ctx.lineTo(...p.position());
	ctx.stroke();

	ctx.beginPath();
	ctx.arc(...p.origin(), 3, 0, Math.PI * 2)
	ctx.fill();

	ctx.beginPath();
	ctx.arc(...p.position(), 10, 0, Math.PI * 2)
	ctx.fill();
	}
	</script>

	</body>
	</html>