Using processing.js to make a rotating ball effect .

This tutorial show us how to make a rotating ball effect. You can see the background is not black and the reason is the background is set just into setup function. Another part of this effect is the rect function from draw. This rect will clean the ball. The ball is a ecllipse function with a size a 10. The pushMatrix function pushes the current transformation matrix onto the matrix stack.

float angle;
int dist_ball = 100;

void setup() {
  size(800, 600);
  background(0);
}

void draw() {
  fill(20,20);

  noStroke();
  rect(0,0,width, height);
  fill(255);

  translate(width/2, height/2);

  rotate(angle);

  pushMatrix();
   rotate(angle);
   translate(dist_ball,0);
   ellipse(0, 0, 10, 10);
  popMatrix();
 
  angle += 0.1;
}

The result is this effect:

Chrome - fix WebGL issue.

This error can be show you with Chrome browser.

To fix this you need to try this ways :
First, You need to open into browser settings into new tab: chrome://settings .
See if the Use hardware acceleration when available under Advance is set to True, if not then set this to True .
Take a look at chrome://gpu into new tab and see if is something with red color.
This may be a problem and try to see what is this error. Also check the chrome://flags and wee the WebGL options you have it.
For example: I fix my WebGL by enabling the WebGL Draft Extensions even the webgl CheckerImaging: Disabled is show with the red color on tab chrome://gpu.
This can be enable under chrome://flags.
The WebGL Draft Extensions Mac, Windows, Linux, Chrome OS, Android allow us:
Enabling this option allows web applications to access the WebGL Extensions that are still in draft status.