кривые Лиссажу на холсте

Question

Слушайте, ребята, мне нужно написать код в js, чтобы переместить изображение на холсте в кривых Лиссажу.С небольшой помощью мне удалось написать код, который перемещает маленькую точку на этих кривых, но на самом деле не знаю, как заменить его на изображение (любое изображение).Вот мой код:

function start() {
  var ctx, WIDTH, HEIGHT, x, y, dx, dy, angle, timeout;

  function init(data) {
    var canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    WIDTH = 500;
    HEIGHT = 300;
    x = WIDTH / 2;
    y = HEIGHT / 2;
    dx = x * Math.sin(0);
    dy = x * Math.sin(0);
    angle = 0;
    draw((m1 = 1), (m2 = 2), (speed = 0.009));
  }

  function line(x, y, dx, dy, r) {
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(dx, dy);
    ctx.lineWidth = 5; // adding here to make it more visible
    ctx.stroke();
  }
  function clear() {
    ctx.clearRect(0, 0, WIDTH, HEIGHT);
  }

  function draw() {
    timeout = setTimeout(draw, 1);
    clear();
    nx = (x - 5) * Math.sin(angle * m1);
    ny = (y - 5) * Math.sin(angle * m2);
    line(x + dx, y + dy, x + nx, y + ny);
    dx = nx;
    dy = ny;
    angle += speed;
  }
  init();
}
start();

<canvas id="canvas" width="500" height="300"></canvas>

Очень ценю любую помощь, потому что я застрял прямо сейчас.Я абсолютно новичок в этом и нужно это для школы.Спасибо !!!

Answer 1

Можете ли вы использовать THREE.js ?Это супер здорово для такого рода вещей.Я думаю, вы найдете его гораздо более расширяемым в долгосрочной перспективе.

Вот скрипка Я сделал для того, о чем ты говоришь.JsFiddle не разрешает запросы из разных источников, поэтому я не могу загрузить изображение для вас, просто замените «путь / к / изображение» везде, где находится ваш URL-адрес изображения.

function start() {
  var renderer, scene, camera, mesh;
  var width = window.innerWidth;
  var height = window.innerHeight;
  var m1 = 1;
  var m2 = 2;
  var speed = 0.009;
  var angle = 0;
  var x = width/2;
  var y = height/2;

  function init(data) {
    var canvas = document.getElementById("canvas");
    renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true});
    renderer.setSize( window.innerWidth, window.innerHeight );
    scene = new THREE.Scene();
    camera = new THREE.OrthographicCamera(width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );
    camera.position.set(x, y, 50);

    var g = new THREE.PlaneBufferGeometry(30, 30);
    var mat = new THREE.MeshBasicMaterial({color: "pink"});
    mesh = new THREE.Mesh(g, mat)
    mesh.position.set(x, y, 0);
    scene.add(mesh);

    var loader = new THREE.TextureLoader();
    loader.load("path/to/image", function(img) {
      mat.map = img;
      mat.needsUpdate = true;
    });
  }

  function update() {
    var nx = (x - 5) * Math.sin(angle * m1);
    var ny = (y - 5) * Math.sin(angle * m2);

    mesh.position.set(x + nx, y + ny, 0);
    angle += speed;

    renderer.render(scene, camera);
    requestAnimationFrame(update);
  }

  init();
  update();
}
start();

Answer 2

Посмотрите на CanvasRenderingContext2D.drawImage().

Я добавляю пример кода здесь, с некоторой частью вашего кода, чтобы вы могли видеть изменения:)

function start() {
  var ctx, WIDTH, HEIGHT, x, y, dx, dy, angle, phaseAngle, timeout;
  var image = document.getElementById("img");

  function init(data) {
    var canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    //WIDTH = 500;
    //HEIGHT = 300;
    WIDTH = canvas.width;
    HEIGHT = canvas.height;
    PI = 3.14159265;
    x = WIDTH / 2;
    y = HEIGHT / 2;
    angle = 0;
    phaseAngle = PI/2;
    //dx = x * Math.sin(0);
    //dy = x * Math.sin(0);
    dx = (x - 50) * Math.sin(angle);
    dy = (y - 50) * Math.sin(angle+phaseAngle);
    //angle = 0;
    draw((m1 = 1), (m2 = 2), (speed = 0.009));
  }

  function line(x, y, dx, dy, r) {
    ctx.drawImage(image, x, y);
    // ctx.beginPath();
    // ctx.moveTo(x, y);
    // ctx.lineTo(dx, dy);
    // ctx.lineWidth = 5; // adding here to make it more visible
    // ctx.stroke();
  }
  function clear() {
    ctx.clearRect(0, 0, WIDTH, HEIGHT);
  }

  function draw() {
    timeout = setTimeout(draw, 1);
    clear();
    //nx = (x - 5) * Math.sin(angle * m1);
    //ny = (y - 5) * Math.sin(angle * m2);
    nx = (x - 50) * Math.sin(angle * m1);
    ny = (y - 50) * Math.sin(angle * m2 + phaseAngle);
    line(x + dx, y + dy, x + nx, y + ny);
    dx = nx;
    dy = ny;
    angle += speed;
  }
  init();
}
start();

<canvas id="canvas" width="500" height="300"></canvas>
<img id="img" src="https://i.stack.imgur.com/cRMrk.png" hidden> <!-- hide image, we need it only inside canvas -->

Редактировать : изменена формула для кривой.Добавленный фазовый угол заставляет кривую проходить под углом 90 градусов (угол в 270 градусов создаст ту же кривую).

Фигура Лиссажу, также называемая КРИВАЯ ПОТОКА, рисунок, получаемый при пересечении двух синусоидальныхкривые, оси которых находятся под прямым углом друг к другу.См .: https://www.britannica.com/science/Lissajous-figure