Groving Ivy

Observations

short description

The pattern of growing ivy is a pretty dense one. The leaves are the smallest elements within that pattern. Looking at the boundaries of it you can observe that ivy grows up in lines, each covered with leaves to the left and right side by turn. Through this the pattern has an appearance like an organic, random grid which is extendable in all directions.

longer description

The pattern consists of one basic shape – the shape of the leaves. One leave has an organic figure which could be transformed into a geometric form. This geometric shape exists of three equilateral triangles: the first one is the biggest with the hypotenuse at the bottom. The other two triangles are smaller than the first one. They are half sized and arranged in a diagonal way. Two-thirds of those triangles are inside the bigger triangle. Their top shows one to the left and one to the right side. The leaves have different sizes which are organized randomly. They are arranged along a line, one to the left and one to the right side by turn. Those lines grow in parallel and even sometimes overlapping. Through this the pattern has an appearance like an organic, random grid which is extendable in all directions.

structure of the song

soft, high, fading single tones ->from beginning till 4th seconds
louder, deeper, fading single tones -> from 4th second till 16th seconds
lasting note with higher sequence -> from 16th second
another lasting note with deeper sequence -> from 19th second
changing with higher sequence note by turn every 3rd second -> till 59th second
deep lasting note - instead of changing tones -> from 59th second till 81st second
very deep lasting note -> lasting for 3 seconds with a delay of another 3 seconds, as a loop
two high notes: first = clear and second = bit higher + fading; changing by turn-> from 81st second
unregularly short cut and deep tones -> from 81st second
singing voice of a woman, fading -> from 103rd second
singing voice of a woman, clear and louder -> from 124th second
kind of irregular beat -> from 124th second

in Processing

For Processing I wanted to create a programing code that simulates the natural way how ivy grows. The blinking ball at the beginning of the code reacts according to the music and embodies the origin of the growing plant. When the ball starts to move over the screen with the blurry effect, it stands for the randomly growing boughs, the main structure for the ivy leaves. The leaves itself are drawn when the music gets louder and rougher in its sound. They are drawn with random distances, like they would grow naturally.

PROGRAM

sketches

ivy leave

ivy

void setup() {
  size(500, 500);
  background(255);
  smooth();
  stroke(55);
  strokeWeight(0.25);
  frameRate(15);
}

void draw() {
  background(0);
  for (int i = 0; i < 5; i++) {
    pushMatrix();
    for (int j = 0; j < 5; j++) {
      float colorFactor = calculateColorFactor(random(1.5, 3.5));
      ivyLeave(colorFactor);
      translate(80, 0);
    }
    popMatrix();
    translate(0, 80);
  }
  float timeInSeconds = millis()/1000;
  if (timeInSeconds % 5 == 0) {
    println("five seconds have passed");
  }
}

void ivyLeave(float colorFactor) {
  fill(colorFactor*10, 50);
  noStroke();
  triangle(50, 120, 100, 40, 150, 120);

  pushMatrix();
  rotate(150);
  translate(-62, 20);
  triangle(15, 130, 40, 70, 65, 130);
  popMatrix();

  pushMatrix();
  rotate(-150);
  translate(125, -125);
  triangle(15, 130, 40, 70, 65, 130);
  popMatrix();
}
float calculateColorFactor(float r) {
  float newColor = r*10;
  return newColor;
}

ivy leave 2

ivy

void setup() {
  size(500, 500);
  background(0);
  smooth();
  stroke(55);
  strokeWeight(0.25);
  frameRate(15);
}

void draw() {
  //background(0);
  //fill(0,50);
  //rect(0,0,width,height);
  if (mousePressed == true) {
    variableIvyLeave();
  }
}

void ivyLeave() {
  //noStroke();
  fill(150, 50);
  pushMatrix();
  translate(-50, -120);
  triangle(50, 120, 100, 40, 150, 120);

  pushMatrix();
  rotate(150);
  translate(-62, 20);
  triangle(15, 130, 40, 70, 65, 130);
  popMatrix();

  pushMatrix();
  rotate(-150);
  translate(125, -125);
  triangle(15, 130, 40, 70, 65, 130);
  popMatrix();

  popMatrix();
}

void variableIvyLeave() {
  pushMatrix();
  translate(mouseX, mouseY);
  ivyLeave();
  popMatrix();
}

ivy leave 3

ivy3

float x = 0;
float y = 0;
float speedX;
float speedY;
float velocityX = 1.0;
float velocityY = 1.0;

//--------------------------

void setup(){
  size(500,500);
  background(0);
  smooth();
  frameRate(15);
}

void draw(){
  background(0);
  speedX = random(-3, 5);
  speedY = random(-5, 5);
  variableIvyLeave(x,y);
  float timeInSeconds = millis()/1000;
  
  if (timeInSeconds % 1 == 0) {
    variableIvyLeave(x,y);
  }
  
  if ((x > width) || (x < 0)) {
    speedX = abs(speedX);
    velocityX = -velocityX;
  }
  if ((y > height) || (y < 0)) {
    speedY = abs(speedY);
    velocityY = -velocityY;
  }
  x += speedX * velocityX;
  y += speedY * velocityY;
}

//---------------------------------------

void ivyLeave(){
  stroke(55);
  strokeWeight(0.25);  fill(250,60);
  
  //triangle large
  triangle(50,120, 100,40, 150,120);
  
  //triangle small left
  pushMatrix();
  rotate(150);
  translate(-62,20);
  triangle(15,130, 40,70, 65,130);
  popMatrix();
  
  //triangle small right
  pushMatrix();
  rotate(-150);
  translate(125,-125);
  triangle(15,130, 40,70, 65,130);
  popMatrix();
}

void variableIvyLeave(float x, float y){
  pushMatrix();
  translate(x,y);
  x += random(1,9);
  y += random(1,11);
  ivyLeave();
  popMatrix();
}

ivy leave 4

ivy4

File:Processing einfuehrung julia ivy4.zip

final version

File:Processing einfuehrung julia all.zip