# Class error in code help needed

**URL:** <https://discourse.processing.org/t/class-error-in-code-help-needed/21620>\
**Category:** Coding Questions\
**Created:** [June 6, 2020, 12:31pm UTC](https://discourse.processing.org/t/class-error-in-code-help-needed/21620 "2020-06-06T12:31:46Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![maiat](https://avatars.discourse-cdn.com/v4/letter/m/9de053/32.png) [@maiat](https://discourse.processing.org/u/maiat)\
**Post date:** [June 6, 2020, 12:31pm UTC](https://discourse.processing.org/t/class-error-in-code-help-needed/21620/1 "2020-06-06T12:31:46Z")

</div>

```auto
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?

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 6, 2020, 12:47pm UTC](https://discourse.processing.org/t/class-error-in-code-help-needed/21620/2 "2020-06-06T12:47:16Z")

</div>

> [@maiat](#):
>
> ```auto
> walker.move();
> walker.show();
> 
> ```

walker is the name of your sketch’s `class`:

> [@maiat](#):
>
> `class walker {`

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

You’ve already done that here:

> [@maiat](#):
>
> `walkers[i] = new walker(x, y, r, s, index);`

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

So you need to call methods from that array:

```auto
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 {`

---

<div class="post-metadata">

**Author:** ![maiat](https://avatars.discourse-cdn.com/v4/letter/m/9de053/32.png) [@maiat](https://discourse.processing.org/u/maiat)\
**Post date:** [June 6, 2020, 12:56pm UTC](https://discourse.processing.org/t/class-error-in-code-help-needed/21620/3 "2020-06-06T12:56:11Z")

</div>

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](https://editor.p5js.org/maiat/sketches/TVM_kpXck)

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 6, 2020, 1:04pm UTC](https://discourse.processing.org/t/class-error-in-code-help-needed/21620/4 "2020-06-06T13:04:01Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![maiat](https://avatars.discourse-cdn.com/v4/letter/m/9de053/32.png) [@maiat](https://discourse.processing.org/u/maiat)\
**Post date:** [June 6, 2020, 1:09pm UTC](https://discourse.processing.org/t/class-error-in-code-help-needed/21620/5 "2020-06-06T13:09:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 6, 2020, 1:14pm UTC](https://discourse.processing.org/t/class-error-in-code-help-needed/21620/6 "2020-06-06T13:14:35Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![maiat](https://avatars.discourse-cdn.com/v4/letter/m/9de053/32.png) [@maiat](https://discourse.processing.org/u/maiat)\
**Post date:** [June 6, 2020, 1:16pm UTC](https://discourse.processing.org/t/class-error-in-code-help-needed/21620/7 "2020-06-06T13:16:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 6, 2020, 1:18pm UTC](https://discourse.processing.org/t/class-error-in-code-help-needed/21620/8 "2020-06-06T13:18:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![maiat](https://avatars.discourse-cdn.com/v4/letter/m/9de053/32.png) [@maiat](https://discourse.processing.org/u/maiat)\
**Post date:** [June 6, 2020, 1:19pm UTC](https://discourse.processing.org/t/class-error-in-code-help-needed/21620/9 "2020-06-06T13:19:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 6, 2020, 1:24pm UTC](https://discourse.processing.org/t/class-error-in-code-help-needed/21620/10 "2020-06-06T13:24:31Z")

</div>

Are your walkers quadratic or circular?

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

---

<div class="post-metadata">

**Author:** ![maiat](https://avatars.discourse-cdn.com/v4/letter/m/9de053/32.png) [@maiat](https://discourse.processing.org/u/maiat)\
**Post date:** [June 6, 2020, 1:25pm UTC](https://discourse.processing.org/t/class-error-in-code-help-needed/21620/11 "2020-06-06T13:25:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 6, 2020, 1:30pm UTC](https://discourse.processing.org/t/class-error-in-code-help-needed/21620/12 "2020-06-06T13:30:06Z")

</div>

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

- [Forum.Processing.org/two/discussion/5618/crop-image#Item\_26](http://Forum.Processing.org/two/discussion/5618/crop-image#Item_26)

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [June 6, 2020, 8:14pm UTC](https://discourse.processing.org/t/class-error-in-code-help-needed/21620/13 "2020-06-06T20:14:16Z")

</div>

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