lorinc/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <main>
    </main>
    <script src="sketch.js"></script>
  </body>
</html>

## sketch.js
var img_zoom = 1.08;

var canvas_size = 840;

var rotation = 0;
var rotation_boundary = 18; // 180/x degree
var rotation_speed = 0.003;

var position = 0;
var position_size = 15;
var position_speed = 0.007;

var repo = 'https://raw.githubusercontent.com/lorinc/moire/main/'
var pattern = 'cross_ripple_fine.png'

function setup() {
  createCanvas(canvas_size , canvas_size);
  img = loadImage(repo + pattern);
}

function draw() {

  background(255)
  imageMode(CENTER);
  translate(width / 2, height / 2);

  //drawing the bottom pattern
  image(img, 0, 0, img.height * img_zoom, img.height * img_zoom);

  // rotating the top layer
  var angle = PI / rotation_boundary * sin(rotation);
  rotate(angle);

  // moving the top layer in a 8-shape
  var x = position_size * cos(position);
  var y = position_size * sin(position) * cos(position);

  // drawing the moving pattern
  image(img, x, y);

  // updating loop cursors
  rotation = rotation + rotation_speed;
  position = position + position_speed;

}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
	<meta charset="utf-8" />

	</head>
	<body>
	<main>
	</main>
	<script src="sketch.js"></script>
	</body>
	</html>
	var img_zoom = 1.08;

	var canvas_size = 840;

	var rotation = 0;
	var rotation_boundary = 18; // 180/x degree
	var rotation_speed = 0.003;

	var position = 0;
	var position_size = 15;
	var position_speed = 0.007;

	var repo = 'https://raw.githubusercontent.com/lorinc/moire/main/'
	var pattern = 'cross_ripple_fine.png'

	function setup() {
	createCanvas(canvas_size , canvas_size);
	img = loadImage(repo + pattern);
	}

	function draw() {

	background(255)
	imageMode(CENTER);
	translate(width / 2, height / 2);

	//drawing the bottom pattern
	image(img, 0, 0, img.height * img_zoom, img.height * img_zoom);

	// rotating the top layer
	var angle = PI / rotation_boundary * sin(rotation);
	rotate(angle);

	// moving the top layer in a 8-shape
	var x = position_size * cos(position);
	var y = position_size * sin(position) * cos(position);

	// drawing the moving pattern
	image(img, x, y);

	// updating loop cursors
	rotation = rotation + rotation_speed;
	position = position + position_speed;

	}