# .render() PRoBleM

**URL:** https://discourse.processing.org/t/render-problem/21255
**Category:** Libraries
**Created:** [May 24, 2020, 4:50pm UTC](https://discourse.processing.org/t/render-problem/21255 "2020-05-24T16:50:08Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![pinchme](https://avatars.discourse-cdn.com/v4/letter/p/9f8e36/32.png) [@pinchme](https://discourse.processing.org/u/pinchme)
#### Post date: [May 24, 2020, 4:50pm UTC](https://discourse.processing.org/t/render-problem/21255/1 "2020-05-24T16:50:08Z")

</div>

I am very new to this but like to jump in at the deep end and learn that way. I’m making a fork of an existing processing prog. and wishing to use sound rather than mouse to interact with it. I’ve probably done lots of things wrong but currently stuck on a ‘for’ statement. Can somebody look at code and see how and can fix and move on. The original prog can be found on [https://www.openprocessing.org/sketch/386707](https://www.openprocessing.org/sketch/386707). Its rather fab… Here is my attempt to convert so far. Thank you in advance for any help offered

```auto
let input;
let mic;
let analyzer;
let spectrum = [];
let thold = 5;
let spifac = 1.05;
var outnum;
let drag = 0.01;
var big = 500;
let bodies = [];
let mX;
let mY;

function setup() {
  createCanvas(900, 450);
  strokeWeight(1);
  fill(255, 255, 255);
  stroke(255, 255, 255, 5);
  background(0, 0, 0);
  smooth();
  mic = new p5.AudioIn();
  mic.start();
  fft = new p5.FFT();
  fft.setInput(mic);
  X = random(screen.width);
  Y = random(screen.height);
  w = random(1 / thold, thold);

  for (s = 0; s < spectrum.length; s++)
    for (var i = 0; i < big; i++) {
      bodies[i] = new ball(big);
    }
}

function draw() {
  let volume = mic.getLevel();
  let spectrum = fft.analyze();
  let threshold = 0.1;
  if (volume > threshold) {
    saveFrame("Focus " + outnum);
    outnum++;
  }
  if (volume > threshold) {
    background(0, 0, 0);

    mX += 0.3 * (volume ^ 2 - mX);
    mY += 0.3 * (volume ^ 2 - mY);
  }
  mX += 0.3 * (volume ^ 2 - mX);
  mY += 0.3 * (volume ^ 2 - mY);
  for (var i = 0; i < big; i++) {
    bodies[i].render();
  }
}

class ball {
  constructor(X, Y, Xv, Yv, pX, pY) {
    this.X = X;
    this.Y = Y;
    this.Xv = Xv;
    this.Yv = Yv;
    this.pX = pX;
    this.pY = pY;
  }
}
let w;
new ball(); {

}

function render() {
  if (volume > threshold) {
    Xv /= spifac;
    Yv /= spifac;
  }
  Xv += drag * (mX - X) * w;
  Yv += drag * (mY - Y) * w;
  X += Xv;
  Y += Yv;

}

```

---

<div class="post-metadata">

### Author: ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [May 24, 2020, 7:56pm UTC](https://discourse.processing.org/t/render-problem/21255/2 "2020-05-24T19:56:43Z")

</div>

Hi,

Welcome to the community!

Please format your code by using the `</>` button in the message editor on the forum 🙂

You can read the guidelines here : [https://discourse.processing.org/faq#format-your-code](https://discourse.processing.org/faq#format-your-code)

---

<div class="post-metadata">

### Author: ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)
#### Post date: [May 24, 2020, 8:07pm UTC](https://discourse.processing.org/t/render-problem/21255/3 "2020-05-24T20:07:24Z")

</div>

not sure what your question is …  
but I suggest starting in the shallow end.

> **[The Coding Train](https://www.youtube.com/user/shiffman)**
>
> All aboard! The Coding Train is on its way with creative coding video tutorials on subjects ranging from the basics of programming languages like JavaScript to algorithmic art, machine learning, simulation, generative poetry, and more. Choo choo!

---

<div class="post-metadata">

### Author: ![pinchme](https://avatars.discourse-cdn.com/v4/letter/p/9f8e36/32.png) [@pinchme](https://discourse.processing.org/u/pinchme)
#### Post date: [May 24, 2020, 9:22pm UTC](https://discourse.processing.org/t/render-problem/21255/4 "2020-05-24T21:22:24Z")

</div>

Yes well, I’m also covering the basics…with as much ground speed as can be mustered…, thanks for the link …much appreciated X

---

<div class="post-metadata">

### Author: ![pinchme](https://avatars.discourse-cdn.com/v4/letter/p/9f8e36/32.png) [@pinchme](https://discourse.processing.org/u/pinchme)
#### Post date: [May 24, 2020, 9:23pm UTC](https://discourse.processing.org/t/render-problem/21255/5 "2020-05-24T21:23:19Z")

</div>

Thanks for advice …will do…()

---

<div class="post-metadata">

### Author: ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)
#### Post date: [May 24, 2020, 10:20pm UTC](https://discourse.processing.org/t/render-problem/21255/6 "2020-05-24T22:20:26Z")

</div>

A quick look …

your `Ball` class does not contain the method, `render()`.

---

<div class="post-metadata">

### Author: ![pinchme](https://avatars.discourse-cdn.com/v4/letter/p/9f8e36/32.png) [@pinchme](https://discourse.processing.org/u/pinchme)
#### Post date: [May 24, 2020, 10:22pm UTC](https://discourse.processing.org/t/render-problem/21255/7 "2020-05-24T22:22:52Z")

</div>

Thank you …beyond me …will keep going )
