Exercise 39



// global vars

int _num = 10;    
float _angnoise, _radiusnoise;
float _xnoise, _ynoise;
float _angle = -PI/2;
float _radius = 100;
float _strokeCol = 254;
int _strokeChange = -1;

void setup() {
  size(500, 300);
  smooth(); 
  frameRate(30);
  
  clearBackground();
  
  _angnoise = random(10);
  _radiusnoise = random(10);
  _xnoise = random(10);
  _ynoise = random(10);
}

void clearBackground() {
  background(255);
}

void draw() {
  
  _radiusnoise += 0.005;
  _radius = (noise(_radiusnoise) * 550) +1;
  
  _angnoise += 0.005;
  _angle += (noise(_angnoise) * 6) - 3;
  if (_angle > 360) { _angle -= 360; }
  if (_angle < 0) { _angle += 360; }
  
  // wobble centre
  _xnoise += 0.01;
  _ynoise += 0.01;
  float centreX = width/2 + (noise(_xnoise) * 100) - 50;
  float centreY = height/2 + (noise(_ynoise) * 100) - 50;
  
  float rad = radians(_angle);
  float x1 = centreX + (_radius * cos(rad));
  float y1 = centreY + (_radius * sin(rad));
  
  // opposite end of line
  float opprad = rad + PI;
  float x2 = centreX + (_radius * cos(opprad));
  float y2 = centreY + (_radius * sin(opprad)); 
  
  noFill();
  _strokeCol += _strokeChange;
  if (_strokeCol > 254) { _strokeChange *= -1; }
  if (_strokeCol < 0) { _strokeChange *= -1; }
  stroke(_strokeCol, 60);
  strokeWeight(1);
  line(x1, y1, x2, y2);
}

void keyPressed() {
  if (keyCode == s) {
    saveFrame("waveclock-####.tif");
  }
}

void mousePressed() {
  clearBackground();
}

Exercise 38

now we randomize the radius using the noise() function


size(500,300);
background(255);
strokeWeight(0.5);   
smooth();

int centX = 250;
int centY = 150;

float x, y;
for (int i = 0; i<100; i++) {    
  float lastx = -999;
  float lasty = -999;
  float radiusNoise = random(10);
  float radius = 10;
  stroke(random(20), random(50), random(70), 80); 
  int startangle = int(random(360)); 
  int endangle =  1440 + int(random(1440)); 
  int anglestep =  5 + int(random(3)); 
  for (float ang = startangle; ang <= 1440 + random(1440); ang += anglestep) {    
    radiusNoise += 0.05;
    radius += 0.5;
    float thisRadius = radius + (noise(radiusNoise) * 200) - 100;
    float rad = radians(ang);
    x = centX + (thisRadius * cos(rad));
    y = centY + (thisRadius * sin(rad));
    if (lastx > -999) {
      line(x,y,lastx,lasty);
    }
    lastx = x;
    lasty = y;  
  }
}

Exercise 37


size(500,300);
background(255);
strokeWeight(5);
smooth();

float radius = 100;
int centX = 250;
int centY = 150;

stroke(0, 30);
noFill();
ellipse(centX,centY,radius*2,radius*2);

stroke(20, 50, 70);
radius = 10;    
float x, y;
float lastx = -999;
float lasty = -999;
for (float ang = 0; ang <= 1440; ang += 5) {  
  radius += 0.5;
  float rad = radians(ang);
  x = centX + (radius * cos(rad));
  y = centY + (radius * sin(rad));
  if (lastx > -999) {
    line(x,y,lastx,lasty);
  }
  lastx = x;
  lasty = y;  
}

Exercise 36

Now let’s apply the same approach to a circle:


size(500, 300);
background(255);
strokeWeight(5);
smooth();

float radius = 100;
int centX = 250;
int centY = 150;
stroke(0, 30);
noFill();
ellipse(centX, centY, radius*2, radius*2);
stroke(20, 50, 70);
float x, y;
float lastx = -999;
float lasty = -999;

for (float ang = 0; ang <= 360; ang += 5) {
  float rad = radians(ang);
  x = centX + (radius * cos(rad));
  y = centY + (radius * sin(rad));
  point(x, y);
}

Exercise 35

Now let’s add noise instead of randomizing. the new point will have some reference to the point before it.


size(500, 100);
background(255);
strokeWeight(5);
smooth();

stroke(0, 30);
line(20, 50, 480, 50);
stroke(20, 50, 70);
int step = 10;
float lastx = -999;
float lasty = -999;
float ynoise = random(10);
float y;
for (int x=20; x<=480; x+=step) {
  y = 10 + noise(ynoise) * 80;
  if (lastx > -999) {
    line(x, y, lastx, lasty);
  }
  lastx = x;
  lasty = y;
  ynoise += 0.1;
}

Exercise 34

size(500,100);
background(255);
strokeWeight(5);
smooth();

int step = 10;
float lastX = -999;
float lastY = -999;

float y = 50;
int borderX = 20;
int borderY = 20;
for( int x = borderX; x <=width-borderX; x +=step) {
  y = borderY + random(height - 2 * borderY);
  if (lastX > -999) {
    line(x, y, lastX, lastY);
  }
  lastX = x;
  lastY = y;
}

Exercise 33

Now let’s animate the circles to move independently.


int _num = 10;
Circle[] _circleArr = {
};
void setup() {
  size(800, 800);
  background(255);
  smooth();
  strokeWeight(1);
  fill(150, 50);
  drawCircles();
}
void draw() {
  background(255);
  for (int i=0; i<_circleArr.length; i++) {
    Circle thisCirc = _circleArr[i];
    thisCirc.updateMe();
  }
}
void mouseReleased() {
  drawCircles();
}
void drawCircles() {
  for (int i=0; i<_num; i++) {
    Circle thisCirc = new Circle();
    thisCirc.drawMe();
    _circleArr = (Circle[])append(_circleArr, thisCirc);
  }
} 

//================================= objects
class Circle {
  float x, y;
  float radius;
  color linecol, fillcol;
  float alph;
  float xmove, ymove;
  Circle () {
    x = random(width);
    y = random(height);
    radius = random(100) + 10;
    linecol = color(random(255), random(255), random(255));
    fillcol = color(random(255), random(255), random(255));
    alph = random(255);
    xmove = random(10) - 5;
    ymove = random(10) - 5;
  }
  void drawMe() {
    noStroke();
    fill(fillcol, alph);
    ellipse(x, y, radius*2, radius*2);
    stroke(linecol, 150);
    noFill();
    ellipse(x, y, 10, 10);
  }
  void updateMe() {
    x += xmove;
    y += ymove;
    if (x > (width+radius)) { 
      x = 0 - radius;
    }
    if (x < (0-radius)) { 
      x = width+radius;
    }
    if (y > (height+radius)) { 
      y = 0 - radius;
    }
    if (y < (0-radius)) { 
      y = height+radius;
    }
    drawMe();
  }
}

Classes & Instances of Dogs

To illustrate the difference between a class and an instance let’s take a look at applying the concept to dogs.

Class
A class is a definition for a collection of objects. For example, if we define a class for Dogs it would include all the characteristics common to all dogs.
The class is a template: it defines only the parameters these objects share, functions they can perform, and logic for how an object can be constructed. A class becomes an object only when you make an instance of it.

Let’s try to make a Dog Class

All Dogs have:

  • name
  • breed
  • hair
  • legs (usually 4)
  • head
  • tail (most of them)

All Dogs can:

  • bark
  • run
  • eat

Now let’s make a few instances of dogs
Instance 1: Pluto

  • name = Pluto
  • breed = Bloodhound
  • hair = short and light brown
  • legs = 4
  • head = large
  • tail = yes
  • bark = a lot
  • run = fast
  • eat = cheeseburgers

Exercise 32

Instead of just telling Processing to draw a circle, let’s instead create a circle object. The circle object will encapsulate everything there is to know about itself, which at the moment isn’t much more than the x,y of its center point, and its radius.


class Circle {
  float x, y;
  float radius;
  color linecol, fillcol;
  float alph;
  Circle () {
    x = random(width);
    y = random(height);
    radius = random(100) + 10;
    linecol = color(random(255), random(255), random(255));
    fillcol = color(random(255), random(255), random(255));
    alph = random(255);
  }
}

Then we need to change our drawCircles function to this:


void drawCircles() {
  for (int i=0; i<_num; i++) {
    Circle thisCirc = new Circle();
  }
}

Still no circles been draw because we haven't put the draw function into the circle class:



class Circle {
  float x, y;
  float radius;
  color linecol, fillcol;
  float alph;

  Circle () {
    x = random(width);
    y = random(height);
    radius = random(100) + 10;
    linecol = color(random(255), random(255), random(255));
    fillcol = color(random(255), random(255), random(255));
    alph = random(255);
  }
  void drawMe() {
    noStroke();
    fill(fillcol, alph);
    ellipse(x, y, radius*2, radius*2);
    stroke(linecol, 150);
    noFill();
    ellipse(x, y, 10, 10);
  }
}

And finally we must update the drawCircles() function


void drawCircles() {
  for (int i=0; i<_num; i++) {
    Circle thisCirc = new Circle();
    thisCirc.drawMe();
  }
}

Exercise 31

Let’s start simple. The following listing creates a script that draws a handful of randomly placed circles every time the mouse is clicked.


int _num = 10;
void setup() {
  size(500, 300);
  background(255);
  smooth();
  strokeWeight(1);
  fill(150, 50);
  drawCircles();
}
void draw() {
}
void mouseReleased() {
  drawCircles();
}
void drawCircles() {
  for (int i=0; i<_num; i++) {
    float x = random(width);
    float y = random(height);
    float radius = random(100) + 10;
    noStroke();
    ellipse(x, y, radius*2, radius*2);
    stroke(0, 150);
    ellipse(x, y, 10, 10);
  }
}