Wheel of Colours

Because I still had a little bit of time today, I looked at some of the stuff that Thomas sent us a while ago and found the wheel of colours which I wanted to work with.

I just tried to comment along the code and changed some values to explain to myself how he achieved the result. I didn’t want to work with something completely new, I just wanted to exercise a little bit.


Here is a screenshot of Thomas’ sketch

One thing I wanted to add though was some text. I know now how to set plain text so I googled a little bit. I found nice examples how text was put on a circle and even animated but I couldn’t really understand the code to the full extent so I didn’t want to incorporate it in my sketch.

Then I thought that a typewriter effect should be easy because it is basically just going through a line of text. I found this code example in the processing forum and implemented it in my sketch. Looking at the code, I should have technically be able to figure it out on my own because it doesn’t really use new techniques except for the substring but anyhow…

String spectrumText = "THERE ARE NO \n ENDS ON THE \n SPECTRUM!";
// learnt about line break in a string here 
PFont f;
int count;

void setup() 
{
  size(800, 800);
  background(0);
  smooth(5); // anti-aliased edges
  noStroke();
  rectMode(CORNER); 
  f = createFont("IBMPlexSans-Bold", 200, true); // Create font
  textFont(f, 80);
}

void draw()
{
  if (frameCount % 5 == 0) 
    // Every 5th. frame, the methods are drawn 
    // frameCount divisible by 5 
    // returns the remainder of the division
  {
    fill(frameCount * 3 % 255, frameCount * 5 % 255, frameCount * 7 % 255);
    // returns number between 0 and 254 
    pushMatrix();
    translate(400, 400); // draw at the center of the canvas
    rotate(radians(frameCount * 2  % 360)); // 
    rect(0, 0, 550, 150);
    popMatrix();
  }
  typewriteText();
}

void typewriteText() {
  fill(255);
  if (count < spectrumText.length()) 
  // count as long as smaller than the string 
    count++; // increment count
  text(spectrumText.substring(0, count), 40, 40, 700, 700);
  // substring has a start and end parameter. It starts at 0 and end with the end of the counting 
  // beginIndex, endIndex, x, y, width, height
}

Recap

I think working with text is something I would like to expand and also the way frameRate is used here, we haven’t used before. So far, I just a high frameRate to slow down animations but that’s about it.

Generally I’m more interested in animated images so this is something I would like to further look into like how to make sequences etc.