p5.js trouble mapping the alpha channel

Question

I'm using the p5.js library. When the mousePressed is called I want to create a black ellipse, two seconds later I want to draw another a white ellipse directly on top. I would like to 'animate' the alpha channel on this second white ellipse to give the illusion that the black ellipse is fading out.

I can't seem to wrap my head around how to approach this. How can I create a timer as such that maps the alpha channel and stops when a = 255?

 var a;
 var x;
 var y;

function setup() {
    var canvas = createCanvas(windowWidth, windowHeight;

    ellipseMode(RADIUS);
    imageMode(CENTER);
    noStroke();
    background('white');
}

function mousePressed() {
    x = mouseX;
    y = mouseY;

    fill('black');
    ellipse(x, y, 45, 45);
    setTimeout(function() {
         //animate a 

      fill(255, 255, 255, a);
      ellipse(x, y, 45, 45);
    }, 2000)
}

score 1 · Answer 1 · answered Aug 04 '17 at 00:24

1

See my answer to this question: Capture photos from video after specific time in p5.js

Basically, you do not want to use the setTimeout() function in P5.js code. Instead, use the draw() function which is called 60 times per second. If you need to check how much time has passed, then use the frameCount variable or the millis() function. More info on all of that can be found in the reference.

Here is an example program that draws a darker and darker color:

var bgColor = 255;

function setup() { 
  createCanvas(200, 200);
} 

function draw() { 
 background(bgColor);
 if(bgColor > 0){
   bgColor--;
 }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>

answered Aug 04 '17 at 00:24

Kevin Workman

41,537
9
68
107

Thank you for the swift reply, I have tried to use the draw function, but I only want to draw once when and where the mouse is clicked, not wherever the mouse is, if that makes sense? Essentially, mousePressed draws a black ellipse, two seconds later, directly above a white ellipse is drawn (this has been achieved with the code), which happens repeatedly only when the mouse is pressed. The problem I'm having is someway of mapping the alpha channel to the frameRate you mentioned. I want to give the illusion that the black ellipse is fading after two seconds have elapsed. – CalAlt Aug 04 '17 at 00:50
@CalAlt You don't have to draw something every time the `draw()` function is called. You can use `if` statements and the `frameCount` variable or the `millis()` function to, for example, wait 2 seconds to do something. I'd start by searching for those functions here, as I know there have been related questions in the past. – Kevin Workman Aug 04 '17 at 01:18
Apologies, i'm new p5 and programming in general. I'm now going down the route of a constructor function. However i'm getting the error ' Cannot read property 'display' of undefined' [this](http://jsbin.com/paneqohico/edit?html,js,output) is my jsbin – CalAlt Aug 04 '17 at 02:08
@CalAlt If you have follow-up questions, please post them in their own question post with an updated MCVE. – Kevin Workman Aug 04 '17 at 02:12

p5.js trouble mapping the alpha channel

1 Answers1