p5.js：绘图工具随机移动

Question

我编写了这个绘图工具：

var a = 0;

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(0, 0, 255);
}

function draw() {
  fill(0, 255, 255, random(255));
  translate(mouseX, mouseY);
  rotate(a);
  textSize(120);
  textAlign(CENTER, CENTER);
  text('*', 0, 0);
  rotate(a);
  a = a + 0.08;
}

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

现在我想要移动，而不是用光标来移动。我想过这样的事情：

var a;

function centerCanvas() {
  var x = (windowWidth - width) / 2;
  var y = (windowHeight - height) / 2;
  a.position(x, y);
}

function setup() {
  a = createCanvas(windowHeight, windowHeight);
  centerCanvas();
}

function draw() {
  fill(0, 255, 255, random(255));
  var x =
    windowHeight / 2 +
    sin(frameCount * 0.01) * cos(frameCount * 0.04) * windowHeight / 3;
  var y =
    windowHeight / 2 +
    cos(frameCount * 0.01) * sin(frameCount * 0.04) * windowHeight / 3;
  rotate(a);
  textSize(120);
  textAlign(CENTER, CENTER);
  text('*', 0, 0);
  rotate(a);
  a = a + 0.08;
}

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

不幸的是，它不起作用。如果 canvas 内的运动是随机的，那也很酷。有人知道怎么做吗？

Answer 1

这个怎么样？

var a = 0;
var x = 0;
var y = 0;
var delta = 1;

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(0, 0, 255);
}

function draw() {
  fill(0, 255, 255, random(255));
  x = x + 2 + Math.random();
  y = y + 0.5 + Math.random();
  x = x * delta;
  y = y * delta;
  if (x < 0) delta = -1;
  translate((x) % windowWidth,(y) % windowHeight);
  rotate(a);
  textSize(120);
  textAlign(CENTER, CENTER);
  text('*', 0, 0);
  rotate(a);
  a = a + 0.08;
}

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

Answer 2

这（几乎）对我有用：

let wander;

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(0, 0, 0);
  
  wander = new Vehicle(0, 0);
  
}

function draw() {
  
  wander.wander();
  wander.update();
  wander.edges();
  wander.show();
  
}


class Vehicle {
  constructor(x, y) {
    this.pos = createVector(x, y);
    this.vel = createVector(1, 0);
    this.acc = createVector(0, 0);
    this.maxSpeed = 4;
    this.maxForce = 0.2;
    this.r = 16;

    this.wanderTheta = PI / 2;
    this.xoff = 0;
  }

  wander() {
    let angle = noise(this.xoff) * TWO_PI * 2;
    let steer = p5.Vector.fromAngle(angle);
    steer.setMag(this.maxForce);
    this.applyForce(steer);
    this.xoff += 0.01;
  }

  applyForce(force) {
    this.acc.add(force);
  }

  update() {
    this.vel.add(this.acc);
    this.vel.limit(this.maxSpeed);
    this.pos.add(this.vel);
    this.acc.set(0, 0);
  }

  show() {
    stroke(255);
    strokeWeight(2);
    fill(255);
    push();
    translate(this.pos.x, this.pos.y);
    rotate(this.vel.heading());
    textAlign(CENTER, CENTER);
    textSize(120);
    fill(0, 255, 255, random(255));
    text("*", 0, 0);
    pop();
  }

  edges() {
    let hitEdge = false;
    if (this.pos.x > width + this.r) {
      this.pos.x = -this.r;
      hitEdge = true;
    } else if (this.pos.x < -this.r) {
      this.pos.x = width + this.r;
      hitEdge = true;
    }
    if (this.pos.y > height + this.r) {
      this.pos.y = -this.r;
      hitEdge = true;
    } else if (this.pos.y < -this.r) {
      this.pos.y = height + this.r;
      hitEdge = true;
    }
  }
}

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

使用 P5.js 的 noise 函数是一种非常准确的表示流浪的方法。稍加修改就可以得到你想要的效果。

编辑

这是您的（已调试）代码：

let a;
let r;

function centerCanvas() {
  var x = (windowWidth - width) / 2;
  var y = (windowHeight - height) / 2;
  a.position(x, y);
}

function setup() {
  a = createCanvas(windowHeight, windowHeight);
  centerCanvas();
}

function draw() {
  fill(0, 255, 255, random(255));
  const x = windowHeight / 2 +
    sin(frameCount * 0.01) * cos(frameCount * 0.04) * windowHeight / 3;
  const y = windowHeight / 2 +
    cos(frameCount * 0.01) * sin(frameCount * 0.04) * windowHeight / 3;
  translate(x, y);
  rotate(a * 0.08);
  textSize(50);
  textAlign(CENTER, CENTER);
  text('*', 0, 0);
  a += 1;
}

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

p5.js：绘图工具随机移动

p5.js: Random movement of drawing tool

p5.js