Randomness and Beautiful Shapes

One of the great joys of making art with computers is that you let the machine surprise you with things you weren’t quite expecting.

Randomness is one easy way of making this happen.

What is randomness? Toss a coin in the air and you never no which way it going to land. That is randomness. If we had a 100 tickets in a bucket labelled one to 100 and we drew out a ticket – the number printed on the ticket is random.

Computers can do a pretty good job at picking pretty random numbers and we can use that to make fascinating drawings that often surprise us.

Using the sketch below you can use the shapes you’ve just learnt and randomness to create beautiful little animations on your OLED device.

Instead of putting numbers in our draw code we are going to replace them with code like this;

 (int)random(64)

(for the x axis) or

(int)random(64)

(for the y axis).

a random rectangle would look something like this;

display.drawRect((int)random(128),(int)random(64),(int)random(50),(int)random(50),1);

the last example used this very code to draw random circles each time it looped.

Now have a look at the code below. Try substituting the various shapes that you’ve learnt to draw in for the circle. See if you can work out what I’ve done here to draw white and them black. Lets read through the code carefully together;

#include <Wire.h>
#include <Adafruit_GFX.h>
#include <SPI.h>
#include <Adafruit_SSD1306.h>

#define OLED_RESET 4

Adafruit_SSD1306 display(OLED_RESET);

void setup() {

  // tell the little screen that we are 128 x 64 pixels
  display.begin(SSD1306_SWITCHCAPVCC, 0x3C);  // dont worry about this line- it is used to set up our display
  // set text size
  display.setTextSize(1);
  // set the text color - we only have a choice of black or white for this display
  display.setTextColor(WHITE);
  //set the way the text behaves when it gets to the end of the line
  display.setTextWrap(1);
  display.clearDisplay();
}

int x;        // this is the old variable x we've used throughout all our sketches
              // its a countainer just for integers (whole numbers) called X
int col= 1;  // here is another variable - I'm using it swith between the colour 1 (white) and the colour 0 (black)

void loop() {  
  x++;      //remember this? add one to x each time we loop
  display.drawCircle( (int)random(128), (int)random(64),(int)random(20),col); //draw a random circle over and over again to the memory of the display 
  // try all the different shapes youve learnt taking out drawCircle and trying drawRect, drawLine, drawTriangle and drawPixel.
  display.display(); // draw the memory of the display to the screen
  if (x == 500 && col == 1){ // here we get a little tricky - if x gets all the way to 500 check to see if the colour is set to white
    col = 0; // if we've drawn 500 shapes the screen will be very white so lets change the colour to black instead.
    x=0;      // and start counting from zero again - now we will be drawing black shapes over the 500 white ones
  } else if (x == 500){  // if we've reach 500 and the colour isn't set to white - then it must be black
 
   col=1; // if we've drawn 500 black shapes the screen will be pretty black - lets switch colos back to white.
    x=0; // and start counting from 0 again
  }

}

For a Millennium Falcon light speed edition try changing 500 to 50 and substituting  the drawCircles line with;

display.drawLine( 128/2, 64/2,(int)random(128),(int)random(128),col);

What other beautiful sketches can you make using combinations of random and non-random (chosen) values?

Challenge:

Can you add use a button to change the colours or even the shapes?