P5 -带有动画GIF的固定随机位置

Question

我在使用动画GIF的草图上遇到了麻烦。我想要设置一个随机布局，可以通过鼠标按下修改。然后，这个布局应该通过初始设置在给定的坐标上播放动画。问题是，这些位置不断被抽签改变，我不知道如何有随机坐标和给出这些。

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

伪码

• 设置布局的多个随机坐标
• 在inial布局坐标内动画GIF
• 按鼠标将布局随机化

Sketch

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

看起来问题就在绘图和mousePressed上。绘图中填充了makeRandom( )；因此，每帧都会选择一个新的随机位置。如果您单击并调用设置，则唯一发生的事情是重新分配坐标。但是，画图将再次运行，鼠标单击基本上会被传递。相反，您希望在鼠标按下时调用makeRandom。