How to integrate funtion into populateOptions in p5.JS

Question

I just needed some help on how I can integrate the strokeWeight function of this code into the populateOptions, I am struggling quite a lot. some direction or help will be appreciated:

function FreehandTool(){
    //set an icon and a name for the object
    this.icon = "assets/freehand.jpg";
    this.name = "freehand";
    this.line = line
    

    var previousMouseX = -1;
    var previousMouseY = -1;
    
    var optionPlacing = select("#strokeControl");
    
    var self = this;
    
    
    //controls the function for stroke weight
    var lineWeight = createInput("");
    lineWeight.parent(optionPlacing);
    lineWeight.input(function(){
        self.line = this.value();
    });
    
   

   


    this.draw = function(){
        
        strokeWeight(this.line);
        //will save the last pixels
        updatePixels();
        
       
        
        //if the mouse is pressed
        if(mouseIsPressed){
            //check if they previousX and Y are -1. set them to the current
            //mouse X and Y if they are.
            if (previousMouseX == -1){
                previousMouseX = mouseX;
                previousMouseY = mouseY;
            }
            //if we already have values for previousX and Y we can draw a line from 
            //there to the current mouse location
            else{
                line(previousMouseX, previousMouseY, mouseX, mouseY);
                previousMouseX = mouseX;
                previousMouseY = mouseY;
            }
        }
        
        else{
            previousMouseX = -1;
            previousMouseY = -1;
        }
        
        //will save the current drawing
        loadPixels();
    };
    
    this.unselectTool = function() {
        updatePixels();
        //clear options
        select(".options").html("");
    };
    
    this.populateOptions = function() {
        select(".options").html();

    };

}

so as you can see, I'm trying to figure out a way to integrate the stroke weight bit in the HTML brackets of the code but its not working

Ethan Hermsey · Answer 1 · 2020-07-10T21:10:49.590

This issue is about accessing the correct 'this' in a callback function. How to access the correct `this` inside a callback?

var self = this;

should be just this;

self = this;

You want to assign this to window.self (or just self in short), not create a variable ( named self ). I do believe it's a 'one time use' thing. ( You cant have other objects claiming self at the same time ).

You could also ditch the self thing and use an arrow function;

var lineWeight = createInput("");
lineWeight.parent(optionPlacing);
lineWeight.input(()=>{
    this.line = lineWeight.value();
});

Ps. you can also do this, and make it a numeric input;

var lineWeight = createInput( '', 'number');

How to integrate funtion into populateOptions in p5.JS

1 Answers1