Millis . How to calculate 80hz in millis%

Hi there…
I have this exemple to learn how to calculate flash per second from hz to millis %.
I know that it is 1/1000 seconds.
What i want is to make the rect flashes 80hz or 80 x per second.

tks

//String[] sentences={"VrtX_@rT"};

float xRed = 62, xGreen = 20, xBlue = 173;
float yRed = 207, yGreen = 1, yBlue = 106;

boolean backwards=false;
int timeLapse=400;
int timeTrack;

PShader blur;
void setup() {
  //background(0);
  size(600, 600);

  timeTrack=millis()+timeLapse;

  blur = loadShader("blur.glsl");
}

void draw() {
  background(0);



  int m = millis();
  fill(m % 125);
  rect(25, 25, 555, 555);


  //Next inverts diretion
  if (millis()>timeTrack) {
    timeTrack=millis()+timeLapse;
    backwards=!backwards;
  }

  float per = (timeTrack-millis())/float(timeLapse);
  if (backwards==true) {
    per = 1-per;
  }


  surface.setTitle(nf(per*100, 3, 2)+"% Flag="+backwards);
  fill(lerpColor(color(xRed, xGreen, xBlue), color(yRed, yGreen, yBlue), per));
  ellipse(width/2, height/2, 300, 300);
}

Hi @vrtx,

Here is how you can simply calculate the time between each flash (in ms) at any frequency in Hertz:

timeBetweenEachFlash = (1s / hertz) * 1000 = (1000ms / hertz)

because x Hertz is x events per second, then you multiply it by 1000 to get it in milliseconds.

Here is a simple sketch that makes the canvas blink at the provided frequency in hertz:

int hertz = 80;
int intervalMillis = int(1000 / (float) hertz);
int time = 0;

void setup() {
  size(500, 500);
  fill(0);
  
  frameRate(hertz);
}

void draw() {
  background(255);
  
  if (millis() - time > intervalMillis) {
    rect(0, 0, width, height);
    time = millis();
  }
}

Notice that I had to explicitly set the frameRate to that value in Hertz so you see it flash. (by default 60fps is not enough to see a 80Hz flash) :yum:

2 Likes

Starting with your statements

  • 1 millisecond is 1/1000 of a second
  • 80Hz is 80 times a second

we get

  • 1 second = 1000 ms
  • 80 Hz is 80 times per 1000 ms

So that is 80 flashes per 1000 ms so you should be able to work out how long one flash is :smile:

Only one other problem Processing refreshes by default refreshes the screen at 60 time a second (i.e. 60Hz) which is slower that the required flashes. You should look up the frameRate() method in the reference to make this fast enough.

Since this is marked as homework this should be enough to get you further on.

4 Likes

Oh @quark got it right on all the points! I should let others do their homework ahah :grinning:

2 Likes

Hello @vrtx,

Is a flash an ON and OFF cycle? What is the duty cycle you want?
You must give that consideration…

References:
https://en.wikipedia.org/wiki/Hertz
https://en.wikipedia.org/wiki/Frequency

Hardware considerations:

Consider something slower like the Wikipedia page animation that you can visualize.

Code that toggles every frame:

// Flashes (ON/OFF) at a frequency of 30 Hz with default frameRate of 60;

boolean toggle = false;

void setup() 
  {
  size(500, 500);
  fill(0);
  
  int fps = 60;
  int freq = fps/2;   // Toggling each frame
  
  println("fps:",  fps);
  println ("freq:", freq, "Hz"); 
  
  frameRate(fps);  // The default is 60 fps
  }

void draw() 
  {
  if (toggle)
    background(255, 0, 0);
  else
    background(255, 255, 0);
  
  toggle = !toggle;
  }

:)

Hi @josephh ,
I did check your code and i change somethings like the midle rect color and shape, ALSO tryed many of numbers (Hz) like 12Hz Alpha brainwaves. I do braniswaves sounds in other software. And i want to match flashs/strobe frequency with the Hz of those sounds.
But in this code you sent (as you said, i think.) its not a “flat” on/off blinks. It get stoped at some poit. See what i did.
Thank you!

int hertz = 12;
int intervalMillis = int(1000 / (float) hertz);
int time = 0;

void setup() {
  size(500, 500);
  fill(0);

  frameRate(hertz);
}

void draw() {
  background(0);

fill(211, 61, 242);

  if (millis() - time > intervalMillis) {
    rect(15,15 , 465, 465,30);
    time = millis();
  }

  //rect(60, 60, 60, 60);
}

1 Like

Hi @glv !
Yes, i am working with brainwaves. I do some noises like Alpha, Beta, Gamma noise in audio. And a know that colors has aswell frequencies as flashs/strobe pre second too. So i am studing how to make these things on processing so i can work on others softwares and to make my art installation interactive…
I made this for now. Ps.: not adjusted freq, colors… Only changing codes to learn. This one i am send here to you has a white noise when mouse pressed and the noise changes is volume a long the work. That wy i am in this post with only a flashing rect. I need to learn make things flash/strobe on the canvas. And so on. I wil be glad in talk to you about my learning projects.
In this is Pink noise sound. the frequency range from 40 to 60 Hz as in the band from 4000 to 6000 Hz. And those are heard as the same interval and distance.
Thank you!!

So, i wanna make flashes/Stroble with diferente/relative colors in my project.
Thanks again!!

import processing.sound.*;
PinkNoise noise;



import ddf.minim.*;  //n



//AudioSample lucid;
int x = 900;  
int y = 700;
int dx = 85;  
int dy = 85;  

float xRed = 62, xGreen = 20, xBlue = 173; // inicio circulo
float yRed = 207, yGreen = 1, yBlue = 106;  //circulo

boolean backwards=false;   // circulo
int timeLapse=400;            // circulo velocity
int timeTrack;               //circulo

PShader blur;
float r = 0;

void setup() {
  background(0);
  size(800, 800, P2D);
  stroke(98, 250, 8);
  rectMode(CENTER);
  smooth();

  blur = loadShader("blur.glsl");

  timeTrack=millis()+timeLapse;    //circulo


  // Create and start the noise generator
    noise = new PinkNoise(this);
}


void draw() {

  
  //center circle
  //Next inverts diretion
  
  if (millis()>timeTrack) {
    timeTrack=millis()+timeLapse;   // center circle
    
    backwards=!backwards;
  }

  float per = (timeTrack-millis())/float(timeLapse);
  if (backwards==true) {
    per = 1-per;
  }
  surface.setTitle(nf(per/300, 3, 2)+"% Flag="+backwards);
  fill(lerpColor(color(xRed, xGreen, xBlue), color(yRed, yGreen, yBlue), per));
  ellipse(width/2, height/2, 180, 180);


  if (mousePressed) {
    noise.play();

    // Map mouseX from -1.0 to 1.0 for left to right
    noise.pan(map(mouseX, 0, width, -1.0, 1.0));

    // Map mouseY from 0.0 to 0.3 for amplitude
    // (the higher the mouse position, the louder the sound)
    noise.amp(map(mouseY, 0, height, 0.5, 0.0));
  }



  if (mousePressed)
  {






    // start of corners rect

    //superior esquerdo; up left
    int m = millis();
    fill(m % 105);
    rect(50, 50, 50, 50, 5);
    textSize(15);
    fill(150);
    text("Techno", 27, 60);


    // inferior direito; lower right
    
    int m3 = millis();
    //stroke(155);
    fill(m3 % 105);
    rect(750, 750, 50, 50, 5);
    textSize(15);
    fill(150);
    text("Techno", 728, 760);

    //superior direito; up right
    
    int m4 = millis();
    //stroke(#153AEA); azul mas muda todos contornos
    fill(m4 % 105);
    rect(750, 50, 50, 50, 5);
    textSize(15);
    fill(150);
    text("Techno", 727, 60);

    //inferior esquerdo; lower left
    
    int m5 = millis();
    //stroke(#153AEA);  idem acima
    fill(m5 % 105);
    rect(50, 750, 50, 50, 5);
    textSize(15);
    fill(150);
    text("Techno", 27, 760);

    //end of corner rects


    //start rotatin interactive rect
    
    

    r = r + 0.05;   //velocidade do giro quadado central


    int m2 = millis();
    //stroke(#153AEA);
    fill(m2 % 245);
    filter(blur);
    translate(mouseX, mouseY);
    rotate(r);
    rect(mouseX/8, mouseY/8, 150, 150);
    ellipse(mouseX/8, mouseY/8, 100, 100);

    filter(blur);
    textSize(50);
    fill(255);
    text("VrtX", 5, 35);

    textSize(50);
    fill(255);
    text("ArT", 10, 75);
    }

    // end rotating interactive rect
  


}

Hello @vrtx,

The reference for draw() states:

All Processing programs update the screen at the end of draw(), never earlier.

Your updates will be synced to end of draw() frames regardless of millis() timing.

So… that limits you to your monitor refresh rate… in my case 60 Hz and using the default frameRate of 60 fps.

If every 5th frame is flashed then that is 12 Hz!
You can also have 1/5, 2/5, 3/5 and 4/5 frames flash for each 5 frames (12Hz).

If you flash every other frame that is 30 Hz.

Consider connecting an Arduino to Processing and let it manage the strobing with control of the timing.

:)

1 Like

Hi @glv
there it goes…
Very good what you told me, thank you! I was even, out of curiosity, looking at some arduino codes. I, years ago (3000 years) used to program PIC microcontrollers. But I’m coming back with Processing. It’s been a great adventure and fun. The ends will be useful for my works.
I’m looking for “all” ways to control the blinks/flashes/strob by seconds.
Now on top of that I need to make two or more objects blink separately and THE COLORS! lol when I’m using Millis (which I’m identifying with more, and seems to be more accurate).
So i’ve got a feedback that I’m doing great. So I made some changes.
See below the sketch:
Canva + 3 rects.
1 - Why does it only flash in black and white?
2 - How to change color individually;
3 - Change the flash speed of each one separately.
Ps.: I know I made a book* with this post.

// How to make diferents objects like (rect) flash in other velocity and how can
// i change the color of each one?

float xRed = 62, xGreen = 20, xBlue = 173;
float yRed = 207, yGreen = 1, yBlue = 106;

boolean backwards=false;
int timeLapse=900;
int timeTrack;

PShader blur;
void setup() {
  //background(0);
  size(600, 600);

  timeTrack=millis()+timeLapse;

  blur = loadShader("blur.glsl");
}

void draw() {
  background(0);
  
  
 




  int m = millis();
  fill(m % 125);
  rect(25, 25, 555, 555, 30);


  int m1 = millis();
  fill(m1 % 425);
  fill(211, 61, 242);    // purple
  rect(100, 100, 455, 455, 30);


  int m2 = millis();
  fill(m2 % 225);
 // fill(61, 123, 242);    // blue - this is off, its wy flash.I i take // off just stay blue
  rect(110, 110, 400, 400, 30);




  //Next inverts diretion
   if (millis()>timeTrack) {
   timeTrack=millis()+timeLapse;
   backwards=!backwards;
   }
   

 float per = (timeTrack-millis())/float(timeLapse);
  if (backwards==true) {
    per = 1-per;
  }


  surface.setTitle(nf(per*100, 3, 2)+"% Flag="+backwards);
  fill(lerpColor(color(xRed, xGreen, xBlue), color(yRed, yGreen, yBlue), per));
  ellipse(width/2, height/2, 300, 300);
}










Hello,

Simplify and understand each element of your code.
Scrutinize your code and make use of println() statements.

Example that I used to explore your code:

void setup() 
  {
  size(600, 200);
  }

void draw() 
  {
  background(0);
  
  int m = millis();
  fill(m % 125);
  println(m%125);  // This is your color!
  circle(100, 100, 100);
  int m1 = millis();
  
  fill(m1 % 425);        // This will not be applied because a fill() follows it!
  fill(211, 61, 242);    // purple This is the fill() applied to the circle.
  circle(300, 100, 100);

  int m2 = millis();
  fill(m2 % 225);
  //fill(61, 123, 242);    // blue - this is off, its wy flash.I i take // off just stay blue
  circle(500, 100, 100);
  
  //println(millis());
  }

It is working exactly as you programmed it.

Check out the resources here:

You should always look at each reference for functions you use in your code.
Read the tutorial on color and how fill works.

Keep at it!

:)

2 Likes

Hi @glv ,
I played with the code you sent. Made some changes and researches.
I think you will anderstand what i need.
How to convert the framerate/ blinks per second i will see after i get this point.
Thanks a lot!!




void setup()
{
  size(600, 400);
}

void draw()
{
  background(0);



  //big
  int m = millis();
  fill(m % 125);
  println(m%125);  // This is your color!
  circle(300, 200, 300);


  // center
  int m2 = millis();
  fill(m2 % 225);   // here i change the velocity. The frequency.

  println(m%125);  // This is your color! ** i got it. **
  // white and black colors blink on/off because the velocity/frequency.
  //i'd like blink green and blue.
  // i am searching all the web to do it.

  // fill(61, 123, 242);    // blue - this is off, its wy flash.I i take // off just stay blue
  circle(300, 200, 200);



  // small purple   ** illusion its blink but its not

  int m1 = millis();
  fill(m1 % 425);        // This will not be applied because a fill() follows it! ** i got it.

  println(m%125);        //

  fill(211, 61, 242);    // purple This is the fill() applied to the circle. ** ok, understand.
  circle(300, 200, 60);



  println(millis());
}

1 Like

Interesting problem. Though you can try to set the Processing frameRate() to say 120hz; at 80hz you wouldn’t see it flash. That’s why frame rates of 30 or 60 or more are used in video games and videos. I have tried what you’re trying with LEDs and could not see the flash until I went below 16hz. Of course, that perception would vary depending on the individual. Lot’s of could code above. Good luck

2 Likes

Hi @markcosmic
At first, i am child in processing, rsrs… I am mixing lots of exemple and researchs about. Also have a book called :exploding_head:
“Processing:
a programming
handbook for
visual designers
and artists
Casey Reas
Ben Fry” [740 pgs]
So, its all about brainwaves (in this very moment…i am moving on), mixup Hz, form audio (BPM and Hz), range (Hz wich arrive in our eyes)of colors e FLASHS/Strobe of lights per second… We do not work with the same Hz in flash light as we do in sound, theyer ranges are very diferent (1# becaue our body "ready"it diferently) but there is a way to mach them… …
In binaural audio we use ex.: 200 Hz left and 120Hz right ear, our brain will work in 80 Hz. It can be done in differentes beats of the music. (its another world, lol… i love it)
Some exemples :
https:[OSA Festival 2020 - spot on Vimeo]
(OSA Festival 2020 - spot on Vimeo)//vimeo.com/218769844
https://vimeo.com/218769844

The main stream in this post is How to Make things Flash/strob per second.

The result of what i’v done until now (I AM OPEN TO NEWS, PLEASE!) in this project is this:

import processing.sound.*;

SoundFile sample;
SoundFile sample1;
Amplitude rms;


float smoothingFactor = 0.25;

// Used for storing the smoothed amplitude value
float sum;

float xRed = 62, xGreen = 20, xBlue = 173;
float yRed = 207, yGreen = 1, yBlue = 106;

boolean backwards=false;
int timeLapse=400;
int timeTrack;

PImage img;

PShader blur;

int a = 100;  // Create a global variable "a"

PFont f;
float angleRotate = 0.0;

void setup() {
  size(640, 360);

  f = createFont("AgencyFB-Bold-48.vlw", 27);
  textFont(f);


  timeTrack=millis()+timeLapse;

  blur = loadShader("blur.glsl");


  //Load and play a soundfile and loop it
  sample = new SoundFile(this, "At.mp3");
  sample.loop();


  // Create and patch the rms tracker
  rms = new Amplitude(this);
  rms.input(sample);

  img = loadImage("et.png");
  imageMode(CENTER);
}

void draw() {
  background(0);


  noStroke();
  //noLoop();
  // fill(255, 0, 150);


  //image(img, mouseX, mouseY);

  int m = millis();
  fill(m % 120);
  rect(20, 20, 600, 320, 30);

  tint(255, 120);
  image(img, width/2, height/2);

  pushMatrix();
  float angle1 = radians(90);
  translate(35, 120);
  rotate(angle1);
  fill(31, 255, 96, 90);
  text("VrtX_@rT", 0, 0);
  //line(20, 20, 150, 0);
  popMatrix();

  //Next inverts diretion
  if (millis()>timeTrack) {
    timeTrack=millis()+timeLapse;
    backwards=!backwards;
  }

  float per = (timeTrack-millis())/float(timeLapse);
  if (backwards==true) {
    per = 1-per;
  }

  // surface.setTitle(nf(per*100, 3, 2)+"% Flag="+backwards);

  fill(lerpColor(color(xRed, xGreen, xBlue, 200), color(yRed, yGreen, yBlue, 90), per));



  //ellipse(width/2, height/2, 300, 300);




  // Draw a line using the global variable "a"
  line(a, 0, a, height);

  // Create a new variable "a" local to the for() statement
  for (int a = 35; a < 150; a += 2) {
    line(a, 0, a, height);
  }
  for (int a = 95; a < 250; a += 8) {
    stroke(#FF1FBC);
    line(a, 0, a, height);
  }

  for (int a = 15; a < 200; a += 9) {
    stroke(#B161F7);
    line(a, 0, a, height);
  }

  // Create a new variable "a" local to the draw() function
  int a = 300;
  // Draw a line using the new local variable "a"
  stroke(#1FFF6B);
  line(a, 0, a, height);


  // Make a call to the custom function drawAnotherLine()
  drawAnotherLine();


  // Make a call to the custom function setYetAnotherLine()
  drawYetAnotherLine();
}

void drawAnotherLine() {
  // Create a new variable "a" local to this method
  int a = 320;
  // Draw a line using the local variable "a"
  stroke(#1FFF6B);
  line(a, 0, a, height);
}

void drawYetAnotherLine() {
  // Because no new local variable "a" is set,
  // this line draws using the original global
  // variable "a", which is set to the value 80.
  line(a+2, 0, a+2, height);




  // smooth the rms data by smoothing factor
  sum += (rms.analyze() - sum) * smoothingFactor;
  //sum += (rms.analyze() - sum) * smoothingFactor;
  // rms.analyze() return a value between 0 and 1. It's
  // scaled to height/2 and then multiplied by a fixed scale factor
  float rms_scaled = sum * (height/2) * 2;
  //float rms_scaled1 = sum * (height/2) *3;
  // We draw a circle whose size is coupled to the audio analysis
  ellipse(width/1.26, height/1.65, rms_scaled, rms_scaled);
  //eliipse(width/1, height/1, rms_scaled1, rms_scaled1);
}

So, I would use the Minim library for sound. Processing 4 does not
support the current default sound library.
Check out the Minim website: https://code.compartmental.net/minim/
To smooth your sound input, I’d use the perlinNoise() function.
And if your converting sound to color I’d use colorMode(HSB) and the
map() function.
Also, the lerpColor() function (which I see you’re using).
I’m still not clear on what you are trying to accomplish. But these are
my thoughts with the information I have.