mousePressed create objects from an array

wjsandbe

I'm trying to create mousePressed ellipses from and array in P5, but I'm having trouble defining my objects. I've just transitioned from processing to P5 and I'm a little lost. Here is my code:

var Shape;
var value = 0;
var value2 = 0;
var x;
var y;


function setup() {
    colorMode(HSB, width, height, 100);
createCanvas(500, 500);
Shape = new ball();


}

function mousePressed(){
 //If mouse is pressed outside sliding bar, add a shape. 
  if (mouseY > (height/2 + 40)  || ( mouseY < ( height/2 - 20))){
  for(var i = 0; i < 1; i++){
    balls.add(new Shape(mouseX, mouseY));  

    if (balls > 8) {
    balls.remove(0);
println(balls());
  }
}}
}

function draw() {
  background(51);

for (var i = Shape -1; i >= 0; i--) {
   // ball[i].move();
    ball[i].display();


    if(balls[i].isOffScreen()){
      balls.remove[i];

    }
}
}

function ball() {
  //An array for all the shapes
  this.balls = []; //initialize the array
this.x = x;
this.y = y;
this.display = function() {
 // stroke (255);
    fill(200, 252, 70);
    ellipse(this.x, this.y, 50, 50);
  }
}

KevinWorkman

A lot of your syntax doesn't make any sense.

First of all, why does your Ball class need a balls array? Shouldn't an instance of Ball be a single ball? Get rid of that.

Secondly, your Ball constructor doesn't take any arguments, but you're using x and y arguments. If you want to use them, you have to pass them into the constructor.

Third, what are you doing with your sketch-level variables at the top? What are x and y meant for? Why do you only have one shape? Don't you want your balls array to be up here?

Fourth, you're using ball array outside the Ball object, and you're calling a balls.add() which isn't a function. Maybe you want the append() function?

Here's a little example that puts it all together:

var balls = [];

function draw() {
  for (var i = 0; i < balls.length; i++) {
    balls[i].display();
  }
}

function mousePressed() {
  append(balls, new Ball(mouseX, mouseY));
}

function Ball(x, y) {

  this.x = x;
  this.y = y;

  this.display = function() {
    ellipse(this.x, this.y, 10, 10);
  }
}

On a more general note, you've got a ton of syntax and logic problems. This is usually caused by trying to write the entire program at one time. Instead, try to break your problem down into smaller steps: can you write a little example program that shows a single ball? Get that working first, that way you know your syntax and constructor work okay. Then can you create a separate example program that draws an array of PVector instances? Get that working so you know your array syntax works okay. Then you can work your way up and get more complicated, use an array of your own objects, etc. Trying to write your entire project at one time will just give you headaches.

wjsandbe

Thanks Kevin, I thought I had simplified it to a small chunk. So now I have an add on question though. I want to remove balls. So if balls > 8 I want to remove the oldest ball and add a new ball. I can't find an equivalent to remove, I'm trying shorten, but it doesn't do. I'm wondering perhaps its my if statement?

var balls = [];

function draw() {
  for (var i = 0; i < balls.length; i++) {
    balls[i].display();
  }
}

function mousePressed() {
  append(balls, new Ball(mouseX, mouseY));
  if (balls > 8) {
  shorten(balls)
}}

function Ball(x, y) {

  this.x = x;
  this.y = y;

  this.display = function() {
    ellipse(this.x, this.y, 10, 10);
  }
}

KevinWorkman

For questions like these, you should always consult the reference. That will show you that the syntax is actually this:

var newArray = shorten(myArray);

In other words, the shorten() function returns a different array that contains one less element than the input array. It doesn't change the input array.

So if you wanted to remove one from an array, you'd have to set the variable to the new array returned by the shorten() function:

balls = shorten(balls);

Also note that this removes the last index of the array. With your code, that will be the Ball you just added, which is the opposite of what you want. You either need to rearrange your array so the oldest ball is at the end of the array (the splice() function might help with this), or you need to remove the Ball from the front of the array (the subset() function might help with this).

As always, your best friend is always the reference. Check out the Array Functions section in particular.

wjsandbe

thanks Kevin, but the references section of P5 is vague and doesn't explain much I need code examples.

KevinWorkman

All of the pages in the reference contain code examples.

If you have a specific question, feel free to post an MCVE, and we'll go from there.

wjsandbe

Alright I'm trying the subset here in mousePressed I thought it matches the reference, but it doesn't do anything.

var balls = [];

function setup() {

}

function draw() {
  for (var i = 0; i < balls.length; i++) {
    balls[i].display();

  }
}

function mousePressed() {
  append(balls, new Ball(mouseX, mouseY));
  if (balls.length > 8) {
    subset(balls, 0, 1);  
  }
}


function Ball(x, y) {

  this.x = x;
  this.y = y;


  this.display = function() {
    ellipse(this.x, this.y, 10, 10);
  }
}

GoToLoop

http://p5js.SketchPad.cc/sp/pad/view/ro.CxS6E9WWAMC$EO/latest

<script async src=http://p5js.org/js/p5.min.js></script>
<script defer src=MousePressedBalls.js></script>

/**
 * MousePressed Balls (v2.1)
 * by  wjsandbe (2016-Sep-21)
 * mod GoToLoop
 *
 * forum.Processing.org/two/discussion/18231/
 * mousepressed-create-objects-from-an-array
 *
 * p5js.SketchPad.cc/sp/pad/view/ro.CxS6E9WWAMC$EO/latest
 */

"use strict";

const MAX_BALLS = 8, balls = [];
let bg;

function setup() {
  pixelDensity(displayDensity());
  createCanvas(500, 500).mousePressed(createBall);
  frameElement && (frameElement.width = width, frameElement.height = height);

  ellipseMode(CENTER).noLoop();
  strokeWeight(2.5).stroke(0xff).fill(200, 252, 70);

  bg = color(0x40);
}

function draw() {
  background(bg);
  for (let b of balls)  b.display();
}

function createBall() {
  const b = balls.length == MAX_BALLS && balls.shift() || new Ball;
  balls.push(b.setXY(mouseX, mouseY));
  redraw();
}

class Ball {
  static get DIAM() { return 50; }

  constructor(x, y) { this.setXY(x, y); }

  setXY(x, y) {
    this.x = x, this.y = y;
    return this;
  }

  display() { ellipse(this.x, this.y, Ball.DIAM, Ball.DIAM); }
}

wjsandbe

Thank you kindly