P5 - 使用动画 GIF 固定随机位置

Question

我在使用 GIF 动画的草图时遇到问题。我想设置一个可以通过鼠标按下来修改的随机布局。然后，此布局应通过初始设置在给定坐标上播放动画。问题是这些位置不断被绘制改变，我无法弄清楚如何让随机坐标和这些坐标发挥作用。

如何设置这种随机布局并在设置的坐标上播放 gif？提前谢谢你。

伪代码

• 为布局设置多个随机坐标
• 在初始布局坐标内动画化 GIF
• 按鼠标随机布局

草图

CodeSanBox

代码

import "./styles.css";
import p5 from "p5";

// img = sketch.loadImage(`http://placeimg.com/640/360/people`);

let myp5 = new p5((sketch) => {
  var img;
  var settings;
  var src_x,
    src_y,
    src_width,
    src_height,
    dist_x,
    dist_y,
    dist_width,
    dist_height,
    dist_scale,
    step;

  let count = 25;
  p5.disableFriendlyErrors = true;
  var layout;

  sketch.preload = () => {
    // img = sketch.loadImage("https://source.unsplash.com/random");
    img = sketch.loadImage("../assets/02.gif");
    // img = sketch.createImg("../assets/02.gif");
  };

  sketch.setup = () => {
    sketch.createCanvas(sketch.int(img.width), sketch.int(img.height));
    sketch.angleMode(sketch.DEGREES);
    for (let i = 0; i < count; i++) {
      makeRandomn(img);
    }
    // createLayout(img);
  };

  function makeRandomn(gif) {
    sketch.background(gif);
    for (let i = 0; i < count; i++) {
      src_width = sketch.random(gif.width / 50, gif.width / 5);
      src_height = sketch.random(gif.height / 50, gif.height / 5);

      src_x = sketch.random(0, gif.width - src_width);
      src_y = sketch.random(0, gif.height - src_height);

      step = sketch.random(gif.width / 100, gif.width / 20);

      dist_x = src_x + sketch.random(-step, step);
      dist_y = src_y + sketch.random(-step, step);

      dist_scale = sketch.random(0.5, 1.5);
      dist_width = src_width * dist_scale;
      dist_height = src_height * dist_scale;

      let gif_trim = gif.get(src_x, src_y, src_width, src_height);

      sketch.push();
      sketch.translate(dist_x + dist_width / 2, dist_y + dist_height / 2);
      sketch.rotate(sketch.random(90) * (sketch.random(100) > 50 ? -1 : 1));
      sketch.imageMode(sketch.CENTER);
      sketch.image(gif_trim, 0, 0, dist_width, dist_height);
      sketch.image(gif_trim, 0, 0);
      sketch.pop();
    }

    // sketch.noLoop();
    settings = {
      src_x: src_x,
      src_y: src_y,
      src_width: src_width,
      src_height: src_height,
      dist_x: dist_x,
      dist_y: dist_y,
      dist_width: dist_width,
      dist_height: dist_height
    };
  }

  function createLayout(gif) {
    sketch.background(gif);

    for (let i = 0; i < count; i++) {
      const {
        src_x,
        src_y,
        src_width,
        src_height,
        dist_x,
        dist_y,
        dist_width,
        dist_height
      } = settings;

      let gif_trim = gif.get(src_x, src_y, src_width, src_height);

      sketch.push();
      sketch.translate(dist_x + dist_width / 2, dist_y + dist_height / 2);
      sketch.rotate(sketch.random(90) * (sketch.random(100) > 50 ? -1 : 1));
      sketch.imageMode(sketch.CENTER);
      sketch.image(gif_trim, 0, 0, dist_width, dist_height);
      sketch.image(gif_trim, 0, 0);
      sketch.pop();
    }
    // sketch.noLoop();
  }

  sketch.draw = () => {
    // createLayout(img);
    makeRandomn(img);
  };

  sketch.mousePressed = () => {
    console.log(settings);
  };
});

// let myp5 = new p5(s, "p5sketch");

Answer 1

看起来问题出在draw和mousePressed上。用 makeRandom() 填充绘制；所以每一帧都会选择一个新的随机位置。如果单击并调用设置，则唯一发生的事情就是重新分配坐标。但是 draw 再次运行，鼠标点击基本上被忽略了。您希望在鼠标按下时调用 makeRandom。