时间戳

首页 > 解决方案 > p5.j​​s - 如何旋转与路线相关的图像

javascript - p5.j​​s - 如何旋转与路线相关的图像

问题描述

我已经从两点创建了一条路线，设置了一个遵循它们之间的线条动画的图像。我想为每条路线以正确的角度旋转图像。不幸的是，它似乎遵循 Y 轴。我应该如何传递正确的参数？可以动态调整角度，与线相关吗？

let Xz                     = 400;
let Yz                     = 400;

let img_nave;
let img_nave_width;
let img_nave_height;
let sfondo_canvas;

let longitudine_partenza_nave     = 404.2;
let latitudine_partenza_nave      = 296.4;
let longitudine_destinazione_nave = 275.8;
let latitudine_destinazione_nave  = 179.6;

let longitudine_attuale_nave = longitudine_partenza_nave;
let latitudine_attuale_nave  = latitudine_partenza_nave;

let timer = 3600;
let canvas;
let t              = 0;
let etichetta_nave = null;

function preload() {

    img_nave      = loadImage('https://i.imgur.com/ZX2AA5X.png');
    sfondo_canvas = loadImage('https://i.imgur.com/z31o9jV.jpg');

}

function setup() {

    canvas = createCanvas(800, 800);
    frameRate(30);

    etichetta_nave = createButton('Perla nera');

}

function draw() {

    if(etichetta_nave) etichetta_nave.remove();

    let d = int(dist(longitudine_partenza_nave, latitudine_partenza_nave, longitudine_destinazione_nave, latitudine_destinazione_nave));

    background(sfondo_canvas);
    noFill();
    stroke(0);
    strokeWeight(10);
    point(longitudine_partenza_nave, latitudine_partenza_nave);
    stroke(0,0,0);
    point(longitudine_destinazione_nave, latitudine_destinazione_nave);
    stroke(255,0,0);

    if(longitudine_attuale_nave != longitudine_destinazione_nave) {

        if(longitudine_destinazione_nave > longitudine_partenza_nave) longitudine_attuale_nave = longitudine_attuale_nave + (d / timer);
        else longitudine_attuale_nave = longitudine_attuale_nave - (d / timer);

    } else longitudine_attuale_nave = longitudine_destinazione_nave;

    if(latitudine_attuale_nave != latitudine_destinazione_nave) {

        if(latitudine_destinazione_nave > latitudine_partenza_nave) latitudine_attuale_nave = latitudine_attuale_nave + (d / timer);
        else latitudine_attuale_nave = latitudine_attuale_nave - (d / timer);

    } else latitudine_attuale_nave = latitudine_destinazione_nave;

    if(longitudine_attuale_nave != longitudine_destinazione_nave ||
        latitudine_attuale_nave != latitudine_destinazione_nave) {

        line(longitudine_partenza_nave, latitudine_partenza_nave, longitudine_attuale_nave, latitudine_attuale_nave);

    }

    img_nave_width  = 95.75;
    img_nave_height = 57;
    push();
    translate(Xz / 2, Yz / 2);
    rotate(PI / 180 * 45);
    imageMode(CENTER);

    // visualizzo la nave
    image(img_nave, (longitudine_attuale_nave - (img_nave_width / 2)), (latitudine_attuale_nave - (img_nave_height / 2)), img_nave_width, img_nave_height);
    pop();


    etichetta_nave.position((longitudine_attuale_nave + 20), (latitudine_attuale_nave - 10));

    t++;

    if(t >= timer) noLoop();

}
<script src="https://cdn.jsdelivr.net/npm/p5@1.3.0/lib/p5.js"></script>

标签： javascriptcanvasp5.js

解决方案

该代码难以阅读，那些长变量名无济于事......

在旋转时，您不计算角度，您需要这样做，公式很简单，Math.atan2(一旦您知道您可以在正确的方向上旋转。

同样在您的逻辑中，我看不到您朝正确的方向移动，那里有条件，但是您应该使用Math.sin&Math.cos朝角度方向移动。

下面是一个工作示例：

let img_nave;
let attuale = {x: 50,  y: 50};
let partenza = {x: 50,  y: 50};
let destinazione = {x: 500,  y: 100};
let angle = Math.atan2(destinazione.y- attuale.y, destinazione.x - attuale.x)

function preload() {
  img_nave = loadImage('https://i.imgur.com/ZX2AA5X.png');
}

function setup() {
  let canvas = createCanvas(600, 180);
  frameRate(30);
}

function draw() {
  background(255)
  strokeWeight(8);
  point(partenza.x, partenza.y);
  stroke(0, 0, 0);
  point(destinazione.x, destinazione.y);
  stroke(255, 0, 0);

  if (dist(destinazione.x, destinazione.y, attuale.x, attuale.y) > 5) {    
    attuale.x += Math.cos(angle)
    attuale.y += Math.sin(angle)
  }
  line(partenza.x, partenza.y, attuale.x, attuale.y);

  push();
  translate(attuale.x, attuale.y);
  rotate(angle + Math.PI);
  imageMode(CENTER);
  image(img_nave, 0, 0, 90, 50);
  pop();
}
<script src="https://cdn.jsdelivr.net/npm/p5@1.3.0/lib/p5.js"></script>

如果您有任何问题，请告诉我

您还询问是否可以动态调整角度......当然可以，这是一个例子

let img_nave;
let attuale = {x: 50,  y: 50};
let angle = 0

var slider = document.getElementById("slider");
slider.oninput = function() {
  angle = this.value/100;
}

function preload() {
  img_nave = loadImage('https://i.imgur.com/ZX2AA5X.png');
}

function setup() {
  let canvas = createCanvas(600, 180);
  frameRate(30);
}

function draw() {
  background(255)
  strokeWeight(8);

  attuale.x += Math.cos(angle)
  attuale.y += Math.sin(angle)

  push();
  translate(attuale.x, attuale.y);
  rotate(angle + Math.PI);
  imageMode(CENTER);
  image(img_nave, 0, 0, 90, 50);
  pop();
}
<script src="https://cdn.jsdelivr.net/npm/p5@1.3.0/lib/p5.js"></script>
<input type="range" min="-314" max="314" value="0" id="slider">

推荐阅读