processing sketch : transparent circles


I made this using processing. Ok, this isn't really processing per se, but it is processing.js. Both use the same coding just that processing.js is a lighter and more efficient way to display your processing sketches on a web page. In this simple sketch circles of varying opacity are drawn on the screen and the position of the circles are determined by the position of your mouse. The colour and the opacity are random. To clear the screen and to start again, press the key 'C'.

The code is given below. I have explained some lines of code so you understand what I have created.

void setup() //method to initialize the sketch. Only runs 1 time.
  size(600, 600); //determines size of sketch
  background(255); //background colour
  smooth(); //smoothens everything out
void draw() //method to draw on sketch. Runs every time till program is stopped.
  noStroke(); //circles don't have an outline
  float x = random(20, 60); // random size with limits from 20 to 60
  ellipse(mouseX, mouseY, x, x); // circles with position determined by mouse
  fill(random(200), random(200), random(255), random(100)); // random colour and opacity
  if (keyPressed) //detects if a key is pressed
    if (key=='c'||key=='C') //now looks for key 'c'
      background(255); //clears screen

You Might Also Like


what do you think?