I have been working with P5 for a while now, but in my current project I'm working with large data sets for the first time. The FPS I'm getting when animating over 2000+ data points is not good, is there a way to improve upon this?

Thanks!

I'm writing some sketches in p5 using instance mode. Some of them are getting pretty big, so I was wondering if there was any way to move some of the functionality into multiple files. My initial attempt was to move all the mouse event functions into another file, then import it into the main sketch file and call a function to register them:

test.js:

import registerFunctions from './mouseHandler.js';
let sketch = function(p5) {

  var a = 5;

  p5.setup = function() {
    ...
    registerFunctions(p5);
  };

  p5.draw = function() {...};
};

let p5Sketch = new p5(sketch , 'canvas-holder');

mouseHandler.js:

function _mousePressed() {
  console.log(a); // Obviously wont work
}

export default function registerInputFunctions(p5) {

    p5.mousePressed = _mousePressed;
}

My obvious issue is that I can't access the inner variables from test.js, so this method wont be very useful. So is there any way I can split the sketch into multiple files and somehow access the variables in the sketch from each of the other files?

Thanks in advance :)>-

Here's my output: https://gyazo.com/318a9f2982f0a52efc735cfdb410caa2

As you can see, I first define 'this.weights' as a new array, with length of 'lines' and yes, both arguments to the function are numbers.

But for some reason, I can log this.weights, and it says it's undefined, and I guess that's because all of the elements are undefined?

But it throws an error at line 85, which is simply console.log(this.weights.length);

If I take that line out, then for (var j = 0; j < this.weights[i].length; j++){ throws an error, how can I fix this?

<p id="dz"> Dropzone </p>

and in my sketch.js I have this:

function setup() {
  noCanvas();

  var dzPtr=select("#dz");
  dzPtr.dragOver(highlight);
  dzPtr.dragLeave(unhighlight);
}

function highlight(){
  this.style('background-color','#ccc');
}

function unhighlight(){
  this.style('background-color','#fff');
}

Question: Instead of having two function to work on the paragraph element, could I use one with parameters? How to implement something like this? I understand I will need a closure. Could somebody provide me an example?

Kf

I didn't succeed in creating a class in which a button from the DOM can call a local function with local variable. For example, with this script...

function setup() {
  myObject = new Test();
}


function Test() {

  this.something = 12345;
  this.button = createButton('Hello');

  this.test = function() {
    println(this.something);

  }

  this.button.mousePressed(this.test);
}

... println says that the argument is undefined

If I put println("123456"); in the test function, it works. But how can I do to use local variable ?

Thank you.

(I've tried with the "prototype way" without success.)

Could someone explain how to transform an array full of different objects, that it can be saved to a .txt or .json-file? To be more specific: I got an array that looks like the following

[
  {
    "x": 517,
    "y": 206,
    "r": 20,
    "name": "Plant a Name",
    "countScaleRounds": 13,
    "maxScaleRounds": 100,
    "scaleFactor": 0.12
  },
  {
    "x": 387,
    "y": 261,
    "r": 20,
    "name": "Plant a Name",
    "countScaleRounds": 100,
    "maxScaleRounds": 100,
    "scaleFactor": 0.99
  },
  {
    "x": 256,
    "y": 360,
    "r": 20,
    "name": "Plant a Name",
    "countScaleRounds": 85,
    "maxScaleRounds": 100,
    "scaleFactor": 0.84
  },
  {
    "x": 226,
    "y": 433,
    "r": 20,
    "name": "Plant a Name",
    "countScaleRounds": 73,
    "maxScaleRounds": 100,
    "scaleFactor": 0.72
  }
]

and when save() is used, the result is a textfile with [object Object],[object Object],... but not the data from the array. Now I'm hopping that some of the advanced programmasters can explain me what I'm missing out. Thx in advance.

the saving part in my script look like this:

  function keyTyped() {
     if (key === 's' || key === 'S') {
     saveStrings(plants,"plants.txt");
     println(plants.txt);
     }
}

I'm trying to create an anthills program with some interactions between ants but I've already got some bad issues with this project. I've just done something to create anthills and to make ants move but... it's just creating one anthill and ants are motionless... Thank you !

Arnaud

var fourmisParColonie,nombreDeFourmiliere;
var antsSystem = [];

function setup()
{   
    createCanvas(windowWidth,windowHeight);
    background(0);
    fourmisParColonie = 20;
    nombreDeFourmiliere = 4;

    for(i = 0; i < nombreDeFourmiliere; i++)
    {
        antsSystem[i] = new Anthill(fourmisParColonie);
    }
}

function draw()
{
    for(i = 0; i < nombreDeFourmiliere; i++)
    {
        antsSystem[i].displayAnthill();
    }
}

function Anthill(_fourmisParColonie)
{
    this.fourmisPC = _fourmisParColonie;
    this.antTab = [];
    this.fourmiliere = createVector(random(windowWidth),random(windowHeight));
    this.color = createVector(random(255),random(255),random(255));

    for(i = 0; i < this.fourmisPC; i++)
    {
        this.antTab[i] = new Ant(this.fourmiliere);//création de chaque fourmi avec indication de la position de sa fourmilière
    }
}

Anthill.prototype.displayAnthill = function()
{
    background(0);

    for(i = 0; i < this.fourmisPC; i++)
    {
        this.antTab[i].displayAnt(this.color);
    }
}

function Ant(_fourmiliere)
{
    this.lafourmilieredecetteAnt = createVector(_fourmiliere.x,_fourmiliere.y);
    this.positionAnt = createVector(this.lafourmilieredecetteAnt.x + random(-30,30),this.lafourmilieredecetteAnt.y + random(-30,30));//spawn fourmi autour de sa fourmilière
    this.destinationAnt = createVector(0,0);
    this.deltaDestinationAnt = createVector(0,0);
    this.timer1 = setInterval(this.definelookFor,random(200,5000));
    this.timer2 = setInterval(this.lookFor,20);
}

Ant.prototype.definelookFor = function() //nouvel objectif
{
    this.destinationAnt.x = random(-50,50);
    this.destinationAnt.y = random(-50,50);
    clearInterval(this.timer1);
    this.timer1 = setInterval(this.definelookFor,random(200,5000));
}

Ant.prototype.lookFor = function() //aller vers cet objectif
{
    this.vitesse = random(20);
    this.deltaDestinationAnt.x = this.destinationAnt.x*this.vitesse/2000;
    this.deltaDestinationAnt.y = this.destinationAnt.y*this.vitesse/2000;
    this.position.add(this.deltaDestinationAnt);
    clearInterval(this.timer2);
    this.timer2 = setInterval(this.lookFor,20);
}

Ant.prototype.displayAnt = function(_color)
{
    this.colorAnt = createVector(_color.x,_color.y,_color.z);
    fill(this.colorAnt.x,this.colorAnt.y,this.colorAnt.z);
    ellipse(this.positionAnt.x,this.positionAnt.y,10,10);
}

I am trying to modulate my code into objects, but I am having a problem with the this scope. Inside the constructor of my BackgroungTools class I define some class' members, as shown below:

BackgroundTools = function() {
        this.isBackgroundToolsOn = false

        this.backgroundButton = createButton('Background')
        this.backgroundButton.position(20,20)
        this.backgroundButton.mouseClicked(this.toggleBackgroundTools)

        this.backgroundSliderRed = createSlider(0,255)
        this.backgroundSliderRed.position(20,50)
        this.backgroundSliderRed.hide()
        console.log(this)
}

BackgroundTools.prototype.toggleBackgroundTools = function() {
    console.log(this)
    if (this.isBackgroundToolsOn) {
            this.backgroundSliderRed.hide()
            this.isBackgroundToolsOn = false
    } else {
            this.backgroundSliderRed.show()
            this.isBackgroundToolsOn = true
    }
}

Later, I then instantiate this class inside the setup function of p5:

function setup() {
    canvas = createCanvas(800,600)
    background(0)
    backgroundTools = new BackgroundTools()
}

function draw() {
}

When this is printed in the Constructor we get what is expected (a pointer to the current object). But when I click in the button and the method toggleBackgroundTools is called, the this inside it isn't what we expect to be: it isn't a pointer to the current object, but it's something that prints in the console this: [top: Window[0], window: Window[0], location: Location, external: Object, chrome: Object…]

I think that the method mouseClicked from p5.Element sort of change the scope of this. But I want to access the class' members in toggleBackgroundTools method.

Someone has went through this before? Any ideas on how can I deal with this?

Thanks!