Class error in code help needed

p5.js Coding Questions
1 
let numWalkers = 50;
let walkers = [];
let dotCanvas;
let pixelColor;
// let walkerX = [];
// let walkerY = [];
// let speed = [];
// let size = [];
let people = [];
let name = [];
let numero = 0;

function preload() {
  people[0] = loadImage('george.jpg');
  people[1] = loadImage('breonna.jpg');
  people[2] = loadImage('ahmaud.jpg');
  people[3] = loadImage('trayvon.jpg');
  people[4] = loadImage('tony.jpg');
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(255);
  noStroke();
  textAlign(CENTER, CENTER);
  imageMode(CENTER);
  textSize(32);
  dotCanvas = createGraphics(windowWidth, windowHeight);
  // for (let i = 0; i < numWalkers; i++) {
  //   walkerX.push(random(width));
  //   walkerY.push(random(height));
  //   speed.push(random(8, 12));
  //   size.push(random(12, 20));
  // }

  for (i = 0; i < numWalkers; i++) {
    // pixelColor = people[person].get(this.x, this.y);
    // dotCanvas.fill(pixelColor);
    // dotCanvas.noStroke();
    // dotCanvas.ellipse(walkerX[i], walkerY[i], size[i], size[i]);
    // walkerX[i] += random(-speed[i], speed[i]);
    // walkerY[i] += random(-speed[i], speed[i]);
    // if (walkerX[i] > width) walkerX[i] = 0;
    // if (walkerX[i] < 0) walkerX[i] = width / 2;
    // if (walkerY[i] > height) walkerY[i] = 0;
    // if (walkerY[i] < 0) walkerY[i] = height / 2;
    let x = random(width);
    let y = random(height);
    let r = random(12, 20);
    let s = random(8, 12);
    let index = numero;
    
    walkers[i] = new walker(x, y, r, s, index);
    
  }
  name[0] = 'GEORGE FLOYD';
  name[1] = 'BREONNA TAYLOR';
  name[2] = 'AHMAUD ARBERY';
  name[3] = 'TRAYVON MARTIN';
  name[4] = 'TONY MCDADE';

}

function keyPressed() {
  clear();
  dotCanvas.clear();
  numero = numero + 1
  if (numero == people.length) {
    numero = 0
  }
}

function draw() {

  image(people[numero], width / 2, height / 2);

  drawText(numero);



    walker.move();
    walker.show();


  image(dotCanvas, width / 2, height / 2);

  if (mouseIsPressed) {
    // // dotCanvas.translate(mouseX, mouseY);
    // let pixelColo = people[numero].get(mouseX, mouseY);
    // dotCanvas.fill(pixelColo);
    // dotCanvas.noStroke();
    // dotCanvas.ellipse(mouseX, mouseY, 30);
    dotCanvas.erase();
    dotCanvas.ellipse(mouseX, mouseY, 35);
    dotCanvas.noErase();
  }



}

class walker {

  constructor(x, y, r, s, index) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.s = s;
    this.index = index;
  }

  move() {
    this.x += random(-this.s, this.s);
    this.y += random(-this.s, this.s);
    if (this.x > width) this.x = 0;
    if (this.x < 0) this.x = width / 2;
    if (this.y > height) this.y = 0;
    if (this.y < 0) this.y = height / 2;
  }

  show() {
    pixelColor = people[index].get(this.x, this.y);
    dotCanvas.fill(pixelColor);
    dotCanvas.noStroke();
    dotCanvas.ellipse(this.x, this.y, this.r);
  }


}

// function runWalker(person) {
//   for (i = 0; i < walkerX.length; i++) {
//     let pixelColor = people[person].get(walkerX[i], walkerY[i]);
//     dotCanvas.fill(pixelColor);
//     dotCanvas.noStroke();
//     dotCanvas.ellipse(walkerX[i], walkerY[i], size[i], size[i]);
//     walkerX[i] += random(-speed[i], speed[i]);
//     walkerY[i] += random(-speed[i], speed[i]);
//     if (walkerX[i] > width) walkerX[i] = 0;
//     if (walkerX[i] < 0) walkerX[i] = width / 2;
//     if (walkerY[i] > height) walkerY[i] = 0;
//     if (walkerY[i] < 0) walkerY[i] = height / 2;
//   }
// }

function drawText(person) {
  fill(255);
  textFont('Work Sans', width / 17);
  text(name[person], width / 2, height - height / 7.5);
}

Hi can anyone tell me why I am getting a walker.move is not a function error?

1 Like
2

walker is the name of your sketch’s class:

In order to invoke class methods we need to instantiate the class 1st w/ the operator new.

You’ve already done that here:

You’ve got walker instances in the array walkers[].

So you need to call methods from that array:

for (const w of walkers)  {
  w.move();
  w.show();
}

BtW, JavaScript (also Java) conventions dictate that we should use “UpperCamelCaseNames” for classes & constructor functions.

So you’re better off renaming your class walker to Walker instead:
class Walker {

2 Likes
3

Thank you so much! It worked like a charm. I have another problem though, if you don’t mind. I’m trying to have it so that the walkers will erase and not be drawn over again when the mouse is dragged over them.

https://editor.p5js.org/maiat/sketches/TVM_kpXck

4

I can’t picture exactly the effect you want, but you may try out createGraphics():
p5js.org/reference/#/p5/createGraphics

Whatever you draw (or erase) on a p5.Graphics doesn’t affect others nor the main canvas.

5

I’ve used that, it’s just that when I erase the canvas the walkers draw over the area I have erased

6

Can you describe better the effect you want?
Do you want the erase parts to be permanent?
Or do you wanna make your walkers reveal a picture gradually?

7

Yes I want the parts I erase with the mouse to be permanent, and then reset when a key is pressed.

8

But if you intend to erase it using the mouse, what do walkers have to do w/ that? :thinking:

9

I want the erasure to be permanent but as the sketch continues to run the area I have erased is drawn over again by the walkers

10

Are your walkers quadratic or circular?

You’re gonna need customized functions for circular shape eraser & redrawing.

11

They are circular, I’ll try and see if I can do that

12

As a starting point, I’ve got this old Java Mode sketch about circular image cropping:

2 Likes
13

something like this? I generated p5.Graphics inside a walker
https://editor.p5js.org/micuat/sketches/ra3DyHA1c

1 Like