Medien Wiki - User contributions [en]

Category:Katrin Caspar

2011-12-19T16:27:17Z

Ktrin: Created page with "* [http://www.katrincaspar.net website]"

* [http://www.katrincaspar.net website]

GMU:Einführung ins Programmieren mit Processing/final/Soundvirus

2011-12-19T16:22:02Z

Ktrin: Created page with "= Soundvirus = The soundvirus is a three dimensional sound visualization. It consists of four levels of branches, rising out of a common origin. Each branch has several children..."

= Soundvirus =

The soundvirus is a three dimensional sound visualization. It consists of four levels of branches, rising out of a common origin. Each branch has several children decreasing in quantity with higher branch levels. The whole system moves in time, while the 360 branches in total access 90 randomly generated variables based on their position in the field to calculate their movement in the three dimensions. This means that for most branches there are three other branches following the same movement, producing a mix of random arrangement and a subliminal pattern. The speed of the system's evolution, as well as its color are based on the stero mix level of the sound input.

For the soundvirus_mic version, the microphone input is used. The microphone's sensivity can be changed by adjusting the "volumeadjust" variable in the first line. A smaller number increases the microphone's sensivity.
The soundvirus sketch uses the provided sound file to obtain the mix level.

== PROGRAM ==

[[Image:Processing_einfuehrung_final_tristan.jpg]] 
[[File:Processing_einfuehrung_tristan.zip|Download SketchFolder]]

 

= various sketches =

== dimension clock ==
The Dimensionclock is a three dimensional way to display time. Hours, minutes and seconds are displayed as lines arranged in a circle on three different plains in the room. They are pointing away from the center and change in quanity and length as time goes by. The time is still shown in its numeric value to prevent confusion. By moving the mouse you can change the angle of view, a click zooms in on the clock. After a few seconds without any user input, the sketch falls into a "screen saver mode", where the camera floats around.

[[Image:Processing_einfuehrung_final_tristan_dimensionclock.jpg]]

[[File:Processing_einfuehrung_tristan_dimensionclock.zip|Download SketchFolder]]

== colorpattern ==
This sketch visualizes sine waves in different ways, based on time. There are two sine waves which are combined to produce a moving pattern by altering the vertex shapes. The colors of these shapes vary by the value of two sine waves with different frequencies. Altogether this sketch succeeds in creating an effect which can be compared to an optical illusion, while being based just on waves.

[[Image:Processing_einfuehrung_final_tristan_colorpattern.jpg]]

<syntaxhighlight lang="cpp">
int col = 0;
int patternsize = 20;
void setup() {
size(800, 600);
background(255);
frameRate(30);
}

void draw() {
background(255);
smooth();
col++;
for (int ex = 0; ex <= width; ex=ex+patternsize) {
for (int yp = 0; yp <= height; yp=yp+patternsize) {
float movex = ex;
float movey = yp;
noStroke();
fill(((sin(((movex/10)+col)/12))*100)+150, (sin(((movey/12)+col)/12)*100)+150, 100);
beginShape();
float wob=col;
vertex( 2+movex, 2+movey);
vertex( 7+movex, (3*sin((20*wob+movey-movex)/100))+6+movey);
vertex(13+movex, (3*sin((20*wob+movey-movex)/100))+6+movey);
vertex(18+movex, 2+movey);
vertex(18+movex, 18+movey);
vertex(13+movex, (-3*sin((20*wob+movey+movex)/100))+14+movey);
vertex( 7+movex, (-3*sin((20*wob+movey+movex)/100))+14+movey);
vertex( 2+movex, 18+movey);
endShape(CLOSE);
}
}
}
</syntaxhighlight>

== spectralmandra ==

Another sketch based on sine waves. This sketch creates nine circulary arranged ellipses - floating around, changing their colors and shapes. The stretching and colorprogress suggest a three dimensional, nearly "hallucinogenic" perception.

[[Image:Processing_einfuehrung_final_tristan_mandra.jpg]]

<syntaxhighlight lang="cpp">
float rad=radians(35);
float counter=0;

void setup() {
size(800, 600);
frameRate(60);
background(255);
}

void draw() {
counter=counter+0.01;
pushMatrix();
translate(width/2+sin(counter)*100, height/2+sin(counter+PI/2)*100);
for (int i=0; i<10; i++) {
noStroke();
rotate(sin(counter));
fill(122+122*sin(i-counter*counter), 122+122*sin(i+counter), 122+122*sin(i*i+counter), 30);
rectMode(CENTER);
ellipse(60, 60, 100*cos(counter*0.4), 100*tan(counter*0.6));
}
popMatrix();
}
</syntaxhighlight>

== volumeter ==

The Volumeter uses the mic input to process speed, size and color of a moving circle. If the volume exceeds a specific treshold, the whole circle turns red and indicates that the sound is "too loud".

[[Image:Processing_einfuehrung_final_tristan_vol.jpg]]

<syntaxhighlight lang="cpp">
import ddf.minim.*;
Minim minim;
AudioInput input;
float xmove=width/2;
float ymove=height/2;
int xaccel=1;
int yaccel=1;

float laut = 0;

void setup() {
size(screen.width, screen.height);
background(0);
minim = new Minim (this);
input = minim.getLineIn (Minim.STEREO, 512);
smooth();
}

void draw() {
fill(0, 20);
noStroke();
rect(0, 0, width, height);
laut = input.mix.level()*4000;
noFill();
strokeWeight(2);
if (laut>=600) {
fill(255, 0, 0, 235);
}
xmove=xmove+laut*xaccel/50;
ymove=ymove+laut*yaccel/50;
if (xmove<=0) {
xaccel=1;
}
if (xmove>=width) {
xaccel=-1;
}
if (ymove<=0) {
yaccel=1;
}
if (ymove>=height) {
yaccel=-1;
}
else {
stroke(195-laut/100, 195-laut/100, 255, 235);
}
ellipse(xmove, ymove, laut, laut);
}

</syntaxhighlight>

File:Processing einfuehrung final tristan vol.jpg

2011-12-19T16:20:21Z

Ktrin:

== Summary ==

== Copyright status: ==

== Source: ==

File:Processing einfuehrung final tristan mandra.jpg

2011-12-19T16:20:06Z

Ktrin:

== Summary ==

== Copyright status: ==

== Source: ==

File:Processing einfuehrung final tristan dimensionclock.jpg

2011-12-19T16:19:50Z

Ktrin:

== Summary ==

== Copyright status: ==

== Source: ==

File:Processing einfuehrung final tristan colorpattern.jpg

2011-12-19T16:19:28Z

Ktrin:

== Summary ==

== Copyright status: ==

== Source: ==

File:Processing einfuehrung tristan dimensionclock.zip

2011-12-19T15:56:50Z

Ktrin:

== Summary ==

== Copyright status: ==

== Source: ==

File:Processing einfuehrung tristan.zip

2011-12-19T15:30:07Z

Ktrin:

== Summary ==

== Copyright status: ==

== Source: ==

GMU:Einführung ins Programmieren mit Processing/final/Star Trails

2011-12-19T15:25:19Z

Ktrin: /* PROGRAM */

= Star Trails =

Inspired by photos and videos of star trails my aim was to recreate the look of these in an interactive processing sketch.

== Short Description ==
In this version of the code you are able to randomly add new stars and show/hide/fade their trails, and switch to »Vortex Mode«

== Implementation ==
So, what does a starry sky consist of and how can we code something similar?
At first you have to create the stars, they are all basically just little dots and circles with different size, color and brightness. Does not seem to be a problem for the size, just let it be random. Same for brightness and... oh wait – stars do not have random colors, there are no green stars for example. There are mostly white, blue, yellow and some red stars. It turns out that the color of a star depends on its energy level, its temperature ... [http://www.astronomycafe.net/qadir/q72.html astronomycafe]
The point is, I can not use random() for my colors, so I create an array of colors I want to have and pick my colors out of that. To get the right amount of stars of each color I simply say »15 out of 20 colors in my array are blueish-white, 4 are yellow, 1 is red«. After thinking about that I do the same for size and brightness, so I get the right distribution of values – I do not want all my stars to be maximum sized and ultra bright, I need a little more control. Well, now there is a star field. To get some traces the stars have to be moved and drawn again every frame. You could do this by assigning every single star a vector changing over time but there is a much simpler way for this particular idea. Since it is not the stars that are moving but our earth, they all move the same. To move all the stars at once I simply move the whole coordinate system with rotate() and translate(). In this version of the sketch there is only one kind of movement – rotation – but you could easily write other types of movement, too. There is the »Vortex Mode« though, it works not by moving the whole system but by moving every single star.
With the function moveSystem(int mode) the coordinate system can be moved, thereby new motion patterns can be created. The patterns can be selected via the MODE value.

== PROGRAM ==

[[Image:Processing_einfuehrung_final_sebastian.jpg|left]]
 

<syntaxhighlight lang="cpp">

// import processing.opengl.*;

/////////////////////////////////////////////
// TRY PRESSING f, t, and v
/////////////////////////////////////////////
int winWidth = 800; // width of the window
int count = 100; // how many "stars" to draw at once
float maxSize = 3; // maximum size of "stars"
float centerX = 66; // percent
float centerY = 62; // percent
boolean trace = true; // if "stars" traces should be drawn
boolean fade = false; // if traces should fade out
boolean vortex = false; // if "stars" move to one point
/////////////////////////////////////////////

int winHeight = int((winWidth/16)*9); // aspect ratio 16/9
ArrayList circles = new ArrayList(); // ArrayList to store objects of the Circle class
float step = 0; // initial state of rotation steps (360steps)
color colors[] = new color[20]; // Array of possible colors
float sizes[] = new float[20]; // Array of possible sizes

void setup()
{
size(winWidth, winHeight, JAVA2D); // JAVA2D (standard) renderer for smooth rendering
frameRate(24);
noStroke();
smooth();
//hint( ENABLE_OPENGL_2X_SMOOTH ); // 2x "antialiasing" for OPENGL renderer
//hint( ENABLE_OPENGL_4X_SMOOTH ); // 4x "antialiasing" for OPENGL renderer

colorMode(HSB, 360);
background(0);

createSizes();
createColors();
createCircles();
}

void draw() {
if (!trace) {
background(0);
}
pushMatrix();
translate((centerX/100)*width, (centerY/100)*height);
moveSystem(2);
drawCircles();
popMatrix();
step += .005;
if (step >= 360) {
step = 0;
}
if (fade) {
fill(0, 10);
rect(0, 0, width, height);
}
}

void mouseReleased() {
if (circles.size() >= 1) {
createCircles();
}
}

void keyReleased() {
if (key == 't' || key == 'T') {
trace = !trace;
}
if (key == 'f' || key == 'F') {
fade = !fade;
}
if (key == 'v' || key == 'V') {
vortex = !vortex;
}
}

void createCircles() {
for (int i = 0; i < count; i++) {
float sz = sizes[int(random(sizes.length))];
color clr = colors[int(random(colors.length))];
circles.add(new Circle(new PVector(random(-width, width), random(-height, height), sz), clr));
}
}

void drawCircles() {
for (int i = 0; i < circles.size(); i++) {
Circle crcl = (Circle)circles.get(i);
PVector target = new PVector(0, 0, 0);
if (vortex) {
crcl.vortex(target);
}
crcl.display();
}
}

void createSizes() {
for (int i = 0; i < sizes.length; i++) {
sizes[i] = random(maxSize/3); // most "stars" are not larger than a third of maxSize
if (i <= sizes.length/5) { // every 5th "star"
// is
sizes[i] = random(maxSize); // between 0 and maxSize
}
}
}

void createColors() {
for (int i = 0; i < colors.length; i++) {
colors[i] = color(random(350, 360));
if (i <= colors.length/2) { // half of all "stars" // are
colors[i] = color(random(180, 240), random(60, 120), random(330, 360), random(60, 300)); // BLUE
}
if (i <= colors.length/4) { // every 4th // is
colors[i] = color(random(50, 60), random(60, 120), random(330, 360), random(60, 180)); // YELLOW
}
if (i <= random(1)) { // of those one or two
// are
colors[i] = color(random(0, 15), random(180, 240), random(330, 360), random(300, 360)); // RED
}
}
}

void moveSystem(int mode) {
switch(mode) {
case 1:
rotate(step);
case 2:
// translate(100*sin(step), 100*cos(step));
}
}

class Circle {
PVector p;
color c;

Circle (PVector tempP, color tempC) {
p = tempP;
c = tempC;
}

void vortex(PVector target){
target = PVector.sub(target, p); // find vector pointing towards target
target.normalize(); // normalize it
p.add(target); // add it to position vector
}

void display(){
fill(c);
ellipse(p.x, p.y, p.z, p.z);
}
}

</syntaxhighlight>

GMU:Einführung ins Programmieren mit Processing/final/Star Trails

2011-12-19T15:23:58Z

Ktrin: Created page with "= Star Trails = Inspired by photos and videos of star trails my aim was to recreate the look of these in an interactive processing sketch. == Short Description == In this versi..."

= Star Trails =

Inspired by photos and videos of star trails my aim was to recreate the look of these in an interactive processing sketch.

== Short Description ==
In this version of the code you are able to randomly add new stars and show/hide/fade their trails, and switch to »Vortex Mode«

== Implementation ==
So, what does a starry sky consist of and how can we code something similar?
At first you have to create the stars, they are all basically just little dots and circles with different size, color and brightness. Does not seem to be a problem for the size, just let it be random. Same for brightness and... oh wait – stars do not have random colors, there are no green stars for example. There are mostly white, blue, yellow and some red stars. It turns out that the color of a star depends on its energy level, its temperature ... [http://www.astronomycafe.net/qadir/q72.html astronomycafe]
The point is, I can not use random() for my colors, so I create an array of colors I want to have and pick my colors out of that. To get the right amount of stars of each color I simply say »15 out of 20 colors in my array are blueish-white, 4 are yellow, 1 is red«. After thinking about that I do the same for size and brightness, so I get the right distribution of values – I do not want all my stars to be maximum sized and ultra bright, I need a little more control. Well, now there is a star field. To get some traces the stars have to be moved and drawn again every frame. You could do this by assigning every single star a vector changing over time but there is a much simpler way for this particular idea. Since it is not the stars that are moving but our earth, they all move the same. To move all the stars at once I simply move the whole coordinate system with rotate() and translate(). In this version of the sketch there is only one kind of movement – rotation – but you could easily write other types of movement, too. There is the »Vortex Mode« though, it works not by moving the whole system but by moving every single star.
With the function moveSystem(int mode) the coordinate system can be moved, thereby new motion patterns can be created. The patterns can be selected via the MODE value.

== PROGRAM ==

<syntaxhighlight lang="cpp">

// import processing.opengl.*;

/////////////////////////////////////////////
// TRY PRESSING f, t, and v
/////////////////////////////////////////////
int winWidth = 800; // width of the window
int count = 100; // how many "stars" to draw at once
float maxSize = 3; // maximum size of "stars"
float centerX = 66; // percent
float centerY = 62; // percent
boolean trace = true; // if "stars" traces should be drawn
boolean fade = false; // if traces should fade out
boolean vortex = false; // if "stars" move to one point
/////////////////////////////////////////////

int winHeight = int((winWidth/16)*9); // aspect ratio 16/9
ArrayList circles = new ArrayList(); // ArrayList to store objects of the Circle class
float step = 0; // initial state of rotation steps (360steps)
color colors[] = new color[20]; // Array of possible colors
float sizes[] = new float[20]; // Array of possible sizes

void setup()
{
size(winWidth, winHeight, JAVA2D); // JAVA2D (standard) renderer for smooth rendering
frameRate(24);
noStroke();
smooth();
//hint( ENABLE_OPENGL_2X_SMOOTH ); // 2x "antialiasing" for OPENGL renderer
//hint( ENABLE_OPENGL_4X_SMOOTH ); // 4x "antialiasing" for OPENGL renderer

colorMode(HSB, 360);
background(0);

createSizes();
createColors();
createCircles();
}

void draw() {
if (!trace) {
background(0);
}
pushMatrix();
translate((centerX/100)*width, (centerY/100)*height);
moveSystem(2);
drawCircles();
popMatrix();
step += .005;
if (step >= 360) {
step = 0;
}
if (fade) {
fill(0, 10);
rect(0, 0, width, height);
}
}

void mouseReleased() {
if (circles.size() >= 1) {
createCircles();
}
}

void keyReleased() {
if (key == 't' || key == 'T') {
trace = !trace;
}
if (key == 'f' || key == 'F') {
fade = !fade;
}
if (key == 'v' || key == 'V') {
vortex = !vortex;
}
}

void createCircles() {
for (int i = 0; i < count; i++) {
float sz = sizes[int(random(sizes.length))];
color clr = colors[int(random(colors.length))];
circles.add(new Circle(new PVector(random(-width, width), random(-height, height), sz), clr));
}
}

void drawCircles() {
for (int i = 0; i < circles.size(); i++) {
Circle crcl = (Circle)circles.get(i);
PVector target = new PVector(0, 0, 0);
if (vortex) {
crcl.vortex(target);
}
crcl.display();
}
}

void createSizes() {
for (int i = 0; i < sizes.length; i++) {
sizes[i] = random(maxSize/3); // most "stars" are not larger than a third of maxSize
if (i <= sizes.length/5) { // every 5th "star"
// is
sizes[i] = random(maxSize); // between 0 and maxSize
}
}
}

void createColors() {
for (int i = 0; i < colors.length; i++) {
colors[i] = color(random(350, 360));
if (i <= colors.length/2) { // half of all "stars" // are
colors[i] = color(random(180, 240), random(60, 120), random(330, 360), random(60, 300)); // BLUE
}
if (i <= colors.length/4) { // every 4th // is
colors[i] = color(random(50, 60), random(60, 120), random(330, 360), random(60, 180)); // YELLOW
}
if (i <= random(1)) { // of those one or two
// are
colors[i] = color(random(0, 15), random(180, 240), random(330, 360), random(300, 360)); // RED
}
}
}

void moveSystem(int mode) {
switch(mode) {
case 1:
rotate(step);
case 2:
// translate(100*sin(step), 100*cos(step));
}
}

class Circle {
PVector p;
color c;

Circle (PVector tempP, color tempC) {
p = tempP;
c = tempC;
}

void vortex(PVector target){
target = PVector.sub(target, p); // find vector pointing towards target
target.normalize(); // normalize it
p.add(target); // add it to position vector
}

void display(){
fill(c);
ellipse(p.x, p.y, p.z, p.z);
}
}

</syntaxhighlight>

[[Image:Processing_einfuehrung_final_sebastian.jpg|left]]

File:Processing einfuehrung patawat.zip

2011-12-19T15:03:24Z

Ktrin:

== Summary ==

== Copyright status: ==

== Source: ==

GMU:Einführung ins Programmieren mit Processing/final/Crimewave

2011-12-19T15:01:41Z

Ktrin: Created page with "= Crimewave = == top concept == A music reactive system and a crime restriction are band. 600px == c..."

= Crimewave =

== top concept ==
A music reactive system and a crime restriction are band.
[[File:Processing_einfuehrung_final_crimewave1.jpg|left|600px]]
 

== color + code ==
[[File:Processing_einfuehrung_final_crimewave2.jpg|left]]
 

== construction ==
[[File:Processing_einfuehrung_final_crimewave3.jpg|left]]
 

[[File:Processing_einfuehrung_final_crimewave4.jpg|left]]
 

[[File:Processing_einfuehrung_final_crimewave5.jpg|left]]
 

[[File:Processing_einfuehrung_final_crimewave6.jpg|left]]
 

[[File:Processing_einfuehrung_final_crimewave7.jpg|left]]
 

== PROGRAM ==

>> Final pattern
[[File:Processing_einfuehrung_patawat.zip|Download SketchFolder]]

[[Image:Processing_einfuehrung_final_patawat.jpg|left]]

File:Processing einfuehrung final crimewave7.jpg

2011-12-19T14:54:08Z

Ktrin:

== Summary ==

== Copyright status: ==

== Source: ==

File:Processing einfuehrung final crimewave6.jpg

2011-12-19T14:53:43Z

Ktrin:

== Summary ==

== Copyright status: ==

== Source: ==

File:Processing einfuehrung final crimewave5.jpg

2011-12-19T14:53:28Z

Ktrin:

== Summary ==

== Copyright status: ==

== Source: ==

File:Processing einfuehrung final crimewave4.jpg

2011-12-19T14:53:09Z

Ktrin:

== Summary ==

== Copyright status: ==

== Source: ==

File:Processing einfuehrung final crimewave3.jpg

2011-12-19T14:52:55Z

Ktrin:

== Summary ==

== Copyright status: ==

== Source: ==

File:Processing einfuehrung final crimewave2.jpg

2011-12-19T14:52:37Z

Ktrin:

== Summary ==

== Copyright status: ==

== Source: ==

File:Processing einfuehrung final crimewave1.jpg

2011-12-19T14:52:22Z

Ktrin:

== Summary ==

== Copyright status: ==

== Source: ==

File:Processing einfuehrung moritz.zip

2011-12-19T14:39:19Z

Ktrin:

== Summary ==

== Copyright status: ==

== Source: ==

GMU:Einführung ins Programmieren mit Processing/final/Linebender

2011-12-19T14:38:06Z

Ktrin: Created page with "= Linebender = == Idea == A very simple, yet appealing pattern can be created by drawing multiple vertical lines with equal distances – but what happens if this representation..."

= Linebender =

== Idea ==
A very simple, yet appealing pattern can be created by drawing multiple vertical lines with equal distances – but what happens if this representation of perfect geometry is being disturbed?

''Vertical lines''
<gallery>
File:Processing_einfuehrung_final_linebender1.jpg|(a) in peace
File:Processing_einfuehrung_final_linebender2.jpg|(b) disturbed
</gallery>

In the linebender sketch, one or a couple of agents will be placed between the lines and start to move in random directions. The lines should try to avoid contact with the agents and bend away. During this animation of action and reaction, new patterns of lines will be generated. One line shall be highlighted for a better visualization of the effect.

<gallery>
File:Processing_einfuehrung_final_linebender3.jpg|Agent at work
</gallery>

This process will be achieved by creating an array of lines, each line consisting of an array of points.
These points will react to the agent’s movements.
The observer should be able to reset the process (UP-key) and save single frames of the animation as
a pdf (left mouse button).

''Vertical lines with one highlighted:''
<gallery>
File:Processing_einfuehrung_final_linebender4.jpg|(a) in peace
File:Processing_einfuehrung_final_linebender5.jpg|(b) disturbed
</gallery>

== PROGRAM ==
[[File:Processing_einfuehrung_moritz.zip|Download SketchFolder]]

[[Image:Processing_einfuehrung_final_moritz.jpg|left]]

File:Processing einfuehrung final linebender5.jpg

2011-12-19T14:33:47Z

Ktrin:

== Summary ==

== Copyright status: ==

== Source: ==

File:Processing einfuehrung final linebender4.jpg

2011-12-19T14:33:29Z

Ktrin:

== Summary ==

== Copyright status: ==

== Source: ==

File:Processing einfuehrung final linebender3.jpg

2011-12-19T14:33:15Z

Ktrin:

== Summary ==

== Copyright status: ==

== Source: ==

File:Processing einfuehrung final linebender2.jpg

2011-12-19T14:33:00Z

Ktrin:

== Summary ==

== Copyright status: ==

== Source: ==

File:Processing einfuehrung final linebender1.jpg

2011-12-19T14:32:45Z

Ktrin:

== Summary ==

== Copyright status: ==

== Source: ==

GMU:Einführung ins Programmieren mit Processing/final/Groving Ivy

2011-12-19T14:20:32Z

Ktrin: /* ivy leave 4 */

= 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 ====

[[File:Processing_einfuehrung_final_ivy.jpg|thumb|ivy]]

<syntaxhighlight lang="cpp">
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;
}

</syntaxhighlight>

==== ivy leave 2 ====

[[File:Processing_einfuehrung_final_ivy2.jpg|thumb|ivy]]

<syntaxhighlight lang="cpp">
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();
}

</syntaxhighlight>

==== ivy leave 3 ====

[[File:Processing_einfuehrung_final_ivy3.jpg|thumb|ivy3]]

<syntaxhighlight lang="cpp">
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();
}
</syntaxhighlight>

==== ivy leave 4 ====

[[File:Processing_einfuehrung_final_ivy4.jpg|thumb|ivy4]]

[[File:Processing_einfuehrung_julia_ivy4.zip|Download SketchFolder]]

=== final version ===
[[File:Processing_einfuehrung_julia_all.zip|Download SketchFolder]]

[[Image:Processing_einfuehrung_final_julia.jpg|left]]

GMU:Einführung ins Programmieren mit Processing/final/Groving Ivy

2011-12-19T14:19:59Z

Ktrin: /* ivy leave 3 */

= 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 ====

[[File:Processing_einfuehrung_final_ivy.jpg|thumb|ivy]]

<syntaxhighlight lang="cpp">
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;
}

</syntaxhighlight>

==== ivy leave 2 ====

[[File:Processing_einfuehrung_final_ivy2.jpg|thumb|ivy]]

<syntaxhighlight lang="cpp">
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();
}

</syntaxhighlight>

==== ivy leave 3 ====

[[File:Processing_einfuehrung_final_ivy3.jpg|thumb|ivy3]]

<syntaxhighlight lang="cpp">
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();
}
</syntaxhighlight>

==== ivy leave 4 ====
[[File:Processing_einfuehrung_julia_ivy4.zip|Download SketchFolder]]

=== final version ===
[[File:Processing_einfuehrung_julia_all.zip|Download SketchFolder]]

[[Image:Processing_einfuehrung_final_julia.jpg|left]]

GMU:Einführung ins Programmieren mit Processing/final/Groving Ivy

2011-12-19T14:19:27Z

Ktrin: /* ivy leave 2 */

= 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 ====

[[File:Processing_einfuehrung_final_ivy.jpg|thumb|ivy]]

<syntaxhighlight lang="cpp">
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;
}

</syntaxhighlight>

==== ivy leave 2 ====

[[File:Processing_einfuehrung_final_ivy2.jpg|thumb|ivy]]

<syntaxhighlight lang="cpp">
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();
}

</syntaxhighlight>

==== ivy leave 3 ====
<syntaxhighlight lang="cpp">
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();
}
</syntaxhighlight>

==== ivy leave 4 ====
[[File:Processing_einfuehrung_julia_ivy4.zip|Download SketchFolder]]

=== final version ===
[[File:Processing_einfuehrung_julia_all.zip|Download SketchFolder]]

[[Image:Processing_einfuehrung_final_julia.jpg|left]]

GMU:Einführung ins Programmieren mit Processing/final/Groving Ivy

2011-12-19T14:19:01Z

Ktrin: /* ivy leave */

= 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 ====

[[File:Processing_einfuehrung_final_ivy.jpg|thumb|ivy]]

<syntaxhighlight lang="cpp">
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;
}

</syntaxhighlight>

==== ivy leave 2 ====
<syntaxhighlight lang="cpp">
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();
}

</syntaxhighlight>

==== ivy leave 3 ====
<syntaxhighlight lang="cpp">
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();
}
</syntaxhighlight>

==== ivy leave 4 ====
[[File:Processing_einfuehrung_julia_ivy4.zip|Download SketchFolder]]

=== final version ===
[[File:Processing_einfuehrung_julia_all.zip|Download SketchFolder]]

[[Image:Processing_einfuehrung_final_julia.jpg|left]]

File:Processing einfuehrung final ivy4.jpg

2011-12-19T14:17:26Z

Ktrin:

== Summary ==

== Copyright status: ==

== Source: ==

File:Processing einfuehrung final ivy3.jpg

2011-12-19T14:17:13Z

Ktrin:

== Summary ==

== Copyright status: ==

== Source: ==

File:Processing einfuehrung final ivy2.jpg

2011-12-19T14:17:02Z

Ktrin:

== Summary ==

== Copyright status: ==

== Source: ==

File:Processing einfuehrung final ivy.jpg

2011-12-19T14:16:46Z

Ktrin:

== Summary ==

== Copyright status: ==

== Source: ==

GMU:Einführung ins Programmieren mit Processing/final/Groving Ivy

2011-12-17T18:17:58Z

Ktrin:

= 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 ====
<syntaxhighlight lang="cpp">
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;
}

</syntaxhighlight>

==== ivy leave 2 ====
<syntaxhighlight lang="cpp">
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();
}

</syntaxhighlight>

==== ivy leave 3 ====
<syntaxhighlight lang="cpp">
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();
}
</syntaxhighlight>

==== ivy leave 4 ====
[[File:Processing_einfuehrung_julia_ivy4.zip|Download SketchFolder]]

=== final version ===
[[File:Processing_einfuehrung_julia_all.zip|Download SketchFolder]]

[[Image:Processing_einfuehrung_final_julia.jpg|left]]

File:Processing einfuehrung julia ivy4.zip

2011-12-17T18:17:40Z

Ktrin:

== Summary ==

== Copyright status: ==

== Source: ==

File:Processing einfuehrung julia all.zip

2011-12-17T18:10:29Z

Ktrin:

== Summary ==

== Copyright status: ==

== Source: ==

GMU:Einführung ins Programmieren mit Processing/final/Groving Ivy

2011-12-17T18:09:50Z

Ktrin: Created page with "= 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 ..."

File:Processing einfuehrung jin.zip

2011-12-17T17:55:39Z

Ktrin: uploaded a new version of "File:Processing einfuehrung jin.zip"

== Summary ==

== Copyright status: ==

== Source: ==

GMU:Einführung ins Programmieren mit Processing/final/Lively Dots

2011-12-17T17:55:24Z

Ktrin:

= Lively Dots =

Lively dots is an interactive work that is based on camera input. Movement is detected to control an image, the image is not shown until something moves.

== Interaction ==
* ''mouse pressed'' can pause the video
* ''key: s'' stands for save the picture
* ''key: a'' stands for add the number of the balls
* ''key: m'' stands for minus the number of the balls

== Camera ==
Use library
<syntaxhighlight lang="cpp">
import JMyron.*;
JMyron m; //a camera object
</syntaxhighlight>

Camera Settings
<syntaxhighlight lang="cpp">
void drawCamera() {
//get the normal image of the camera
int[] img = m.differenceImage();
loadPixels();
//loop through all the pixels
for (int i=0;i<width*height;i++) {
//draw each pixel to the screen
pixels[i] = img[i];
}
updatePixels();
}

</syntaxhighlight>

== Dots ==
Initial value
<syntaxhighlight lang="cpp">
float objx = 320;
float objy = 240;
float objdestx = 320;
float objdesty = 240;

int numBalls = 25600;
float maxVelocity = 16;
minAccel = 0.8;
maxAccel = 1.8;
</syntaxhighlight>

Location of the dots
<syntaxhighlight lang="cpp">
if (!(avX==0&&avY==0)&&centers.length>0) {
objdestx = avX;
objdesty = avY;
}
objx += (objdestx-objx)/10.0f;
objy += (objdesty-objy)/10.0f;
for (int i=0; i<numBalls; i++) {
ball[i].seek(new PVector(objx, objy));
ball[i].render();
</syntaxhighlight>

== PROGRAM ==
[[File:Processing_einfuehrung_jin.zip|Download SketchFolder]]

[[Image:Processing_einfuehrung_final_jin.jpg]]

GMU:Einführung ins Programmieren mit Processing/final/Lively Dots

2011-12-17T17:54:24Z

Ktrin: Created page with "= Lively Dots = Lively dots is an interactive work that is based on camera input. Movement is detected to control an image, the image is not shown until something moves. * ''m..."

= Lively Dots =

Lively dots is an interactive work that is based on camera input. Movement is detected to control an image, the image is not shown until something moves.

* ''mouse pressed'' can pause the video
* ''key: s'' stands for save the picture
* ''key: a'' stands for add the number of the balls
* ''key: m'' stands for minus the number of the balls

== Camera ==
Use library
<syntaxhighlight lang="cpp">
import JMyron.*;
JMyron m; //a camera object
</syntaxhighlight>

Camera Settings
<syntaxhighlight lang="cpp">
void drawCamera() {
//get the normal image of the camera
int[] img = m.differenceImage();
loadPixels();
//loop through all the pixels
for (int i=0;i<width*height;i++) {
//draw each pixel to the screen
pixels[i] = img[i];
}
updatePixels();
}

</syntaxhighlight>

== Dots ==
Initial value
<syntaxhighlight lang="cpp">
float objx = 320;
float objy = 240;
float objdestx = 320;
float objdesty = 240;

int numBalls = 25600;
float maxVelocity = 16;
minAccel = 0.8;
maxAccel = 1.8;
</syntaxhighlight>

Location of the dots
<syntaxhighlight lang="cpp">
if (!(avX==0&&avY==0)&&centers.length>0) {
objdestx = avX;
objdesty = avY;
}
objx += (objdestx-objx)/10.0f;
objy += (objdesty-objy)/10.0f;
for (int i=0; i<numBalls; i++) {
ball[i].seek(new PVector(objx, objy));
ball[i].render();
</syntaxhighlight>

== PROGRAM ==
[[File:Processing_einfuehrung_jin.zip|Download SketchFolder]]

[[Image:Processing_einfuehrung_final_jin.jpg]]

File:Processing einfuehrung jin.zip

2011-12-17T17:40:15Z

Ktrin:

== Summary ==

== Copyright status: ==

== Source: ==

GMU:Einführung ins Programmieren mit Processing/final/Pattern

2011-12-17T17:37:16Z

Ktrin:

= Pattern =

For the final homework, I want to create a pattern, which consist of squares, circles and stars. The shape will randomly selected and tweens to the next shape. At the beginning, the user should click, if the next tween should happened, but I changed it. If a tween is finished, a new shape will randomly selected and the tween starts. The user can control some aspects of the shape.

These aspects are:
''by pressing a key''
* UP Moves the origin of the shapes 20px up
* DOWN Moves the origin of the shapes 20px down
* LEFT Moves the origin of the shapes 20px left
* RIGHT Moves the origin of the shapes 20px right

''by releasing a key''
* a/A adds a new shape on the right, if the current number is below the maximum
* s/S removes the shape on the right (The minimum is 1 shape)
* d/D adds a new shape on the bottom, if the current number is below the maximum
* f/F removes the shape on the bottom (The minimum is 1 shape)

''by mouse click''
* Creates a new color for every shape, there will be a tween between the current number and the new one

''by moving the mouse''
* It will adjust the distance between the shapes, considering the current origin of the shapes

''by adjusting properties in the FinalHomework sketch''
* randomIsOK Will position the shapes in every frame randomly to its origin (not the origin of all shapes)
* randomValue If randomIsOK, it will be the offset from the origin of the shape
* resetBackground If the background should be reset, if no: A rectangle will be drawn with the following color
* bicolor color for the background (without alpha) or for the rectangle (with alpha)

 

== PROGRAM ==

[[File:Processing_einfuehrung_andreas.zip|Download SketchFolder]]
[[Image:Processing_einfuehrung_final_andreas.jpg]]

GMU:Einführung ins Programmieren mit Processing/final/Pattern

2011-12-17T17:36:30Z

Ktrin: Blanked the page

GMU:Einführung ins Programmieren mit Processing/final/Sinus Wave

2011-12-17T17:34:54Z

Ktrin:

= Sinus Wave =

== Idee ==
Mein Ziel war es, ein dreidimensionales Ebenenraster zu generieren, das aus mehreren geometrischen, an den Rasterpunkten angeordneten Objekten besteht und durch deren sinusartige Auf und Abwärtsbewegung ein natürliche Wellenbewegung grafisch beschreibt.

== Umsetzung ==
Für dessen Umsetzung war es zunächst erforderlich, mir die Funktionsweise einer beweglichen Sinuskurve auf zweidimensionaler Ebene zu vergegenwärtigen: Die Berechnung in Programmiersprache erfolgt im Grunde durch eine einfachen Sinuskalkulation eines fortlaufenden Wertes(Theta), multipliziert mit dem maximalen Höhenwert der Kurve. Durch den fortlaufenden Wert des Winkels ergeben sich bei jeder Berechnungsabfolge einer Schleife periodische Werte, die der Reihe nach in einem 'Array' gelistet werden.

<syntaxhighlight lang="cpp">
yvalues = new float[10]; //Array hat zunächst noch eine Länge in der Größe von 10 Schleifendurchläufen
theta += 0.08;
float x = theta;
for (int i = 0; i < 10; i++) {
yvalues[i] = sin(x)*30;
x+=dx;
}
</syntaxhighlight>

Zur grafischen Darstellung erfolgt der Aufruf einer separaten Funktion, in dieser das Geometrische Objekt (Kubus), mittels einer Schleife, jeweils neu erstellt und in horizontaler Achsenrichtung, um einen definierten Abstandswert(50 Pixel) verschoben werden soll. Für jedes einzelne Objekt
wird bei erneutem Schleifendurchlauf ein neuer Y-Wert aus dem Array geschöpft.

<syntaxhighlight lang="cpp">
for (int x = 0; x < 10; x++) {
pushMatrix();
translate(50*x+50, 500+yvalues[x], 0);
box(15);
popMatrix();
line(50+(x*50), 500+yvalues[x], 0, 100+(x*50), 500+yvalues[x+1], 0); //Verbindungslinien
}
</syntaxhighlight>

Für eine dreidimensionale Darstellung der Objekte in Reihen (in Richtung x-Achse) und Spalten (in Richtung z-Achse), ist eine Doppelschleife erforderlich:

<syntaxhighlight lang="cpp">
for (int x = 0; x < 10; x++) {
for (int z = 0; z < 10; z++) {
pushMatrix();
translate(50*x+50, 500+yvalues[x+z], z*-50);
box(15);
popMatrix();
line(50+(x*50), 500+yvalues[z+x], z*-50, 100+(x*50), 500+yvalues[z+x+1], z*-50);
line(50+(x*50), 500+yvalues[z+x], z*-50, 50+(x*50), 500+yvalues[z+x+1], (z*-50)-50);
}
}
</syntaxhighlight>

Hierbei wird, um eine diagonale Wellenbewegung zu erzielen, dem Listenindex des Arrays der Zählwert der Variable 'z' hinzu addiert. Das Array muss jedoch bei der Deklaration den doppelten Längenwert aufweisen, da sonst seine Liste überfüllt wäre. Das gleiche gilt für die Anzahl der Schleifendurchläufe bei der Sinusberechnung. Andere Formen der Darstellung mittels 'translate' sind jedoch möglich:

<syntaxhighlight lang="cpp">
for (int x = 0; x < 10; x++) {
for (int z = 0; z < 10; z++) {
pushMatrix();
translate(50*x+50, 500+yvalues[x], z*-50);
translate(0, yvalues[z], 0);
box(15);
popMatrix();
line(50+(x*50), 500+yvalues[z]+yvalues[x], z*-50, 100+(x*50), 500+yvalues[z]+yvalues[x+1],
z*-50);
line(50+(x*50), 500+yvalues[z]+yvalues[x], z*-50, 50+(x*50), 500+yvalues[z+1]+yvalues[x],
(z*-50)-50);
}
}
</syntaxhighlight>

== PROGRAMM ==

[[Image:Processing_einfuehrung_final_florian.jpg]]

<syntaxhighlight lang="cpp">
float theta; // Start angle at 0
float dx; // Value for incrementing X, a function of period and xspacing
float[] yvalues; // array in dem die höhenwerte der jeweiligen boxen gespeichert werden

void setup() {
smooth();
size(600, 600, P3D);
frameRate(30);
dx = (TWO_PI / 500) * 60; //anzahl bzw. abstand der wellenberge
yvalues = new float[20];
translate(width/2, height/2);
}

void draw() {
rotateX(-0.5);
}

void keyPressed() {
background(55);
theta += 0.08; //geschwindigkeit
float x = theta;
for (int i = 0; i < 20; i++) {
yvalues[i] = sin(x)*30; //höhe des wellenbergs
x+=dx;
}

if (key == '1') {
renderWave1();
}

if (key == '2') {
renderWave2();
}
}

void renderWave1() {
for (int x = 0; x < 10; x++) {
for (int z = 0; z < 10; z++) {
pushMatrix();
translate(50*x+50, 500+yvalues[x+z], z*-50);
//translate(0, yvalues[z], 0);
box(15);
popMatrix();
line(50+(x*50), 500+yvalues[z+x], z*-50, 100+(x*50), 500+yvalues[z+x+1], z*-50);
line(50+(x*50), 500+yvalues[z+x], z*-50, 50+(x*50), 500+yvalues[z+x+1], (z*-50)-50);
}
}
}

void renderWave2() {
for (int x = 0; x < 10; x++) {
for (int z = 0; z < 10; z++) {
pushMatrix();
translate(50*x+50, 500+yvalues[x], z*-50);
translate(0, yvalues[z], 0);
box(15);
popMatrix();
line(50+(x*50), 500+yvalues[z]+yvalues[x], z*-50, 100+(x*50), 500+yvalues[z]+yvalues[x+1], z*-50);
line(50+(x*50), 500+yvalues[z]+yvalues[x], z*-50, 50+(x*50), 500+yvalues[z+1]+yvalues[x], (z*-50)-50);
}
}
}
</syntaxhighlight>

GMU:Einführung ins Programmieren mit Processing/final/Sinus Wave

2011-12-17T17:33:29Z

Ktrin: Blanked the page

GMU:Einführung ins Programmieren mit Processing/final/Snowflakes & Raptorclone

2011-12-17T17:31:38Z

Ktrin: Created page with "= Snowflakes = Wer liebt sie nicht, die Schneeflocken die der Winter uns jährlich schenkt. Doch damit wir nun nicht mehr auf diese kalte Jahreszeit warten müssen, gibt es nun:..."

= Snowflakes =

Wer liebt sie nicht, die Schneeflocken die der Winter uns jährlich schenkt. Doch damit wir nun nicht mehr auf diese kalte Jahreszeit warten müssen, gibt es nun: Die Processing Applikation "Snowflakes". Jetzt denkt ihr vielleicht: "Und was wenn ich Schnee nicht ausstehen kann?" Nun - auf für diesen Fall ist gesorgt!

Snowflakes ist eine einfache Schneeflockensimulation, welche als Schneeflocken Vorgerenderte Bilder verwendetet und diese in drei Ebenen, unterschiedlichen Geschwindigkeiten und Größen in einer von der Größe der Flocke abhängigen Sinusfunktion vom oberen Bildschirmrand herunterfallen läßt.

Für das Abspielen der Geräusche wurde die minim-Bibliothek genutzt.

== PROGRAMM ==
[[File:Processing_einfuehrung_jan_snowflakes.zip|Download SketchFolder Snowflakes]]
[[Image:Processing_einfuehrung_final_jan2.jpg|left]]
 

= Raptorclone =
Da mich das Spiel "Raptor - Call of Shadows" aus meiner Jugendzeit bis heute nicht losgelassen hat, habe ich mich an eine Annäherung des Spielprinzips herangewagt. Da ich ein Android-Smartphone besitze und Processing die einfache Portierung auf Android ermöglicht, war ein mein Ziel, das Spiel auch auf meinen Smartphone zum Laufen zu bringen, was mir auch geglückt ist. Anzumerken zur Portierung wäre, dass zB die minim-Bibliothek auf Android nicht lauffähig ist und die Size-Funktion keine Variablen bis auf screenWidth und screenHeight schluckt, egal ob das Programm Anweisungen enthält oder völlig leer ist.

Als technische Besonderheit wird die komplette Grafik auf einen virtuellen Bildschirm gezeichnet, so dass man die finale Auflösung auf die jeweilige Bildschirmgröße des Gerätes anpassen kann (skalieren) ohne die eigentlich "Spielfläche" auszudehnen.

<gallery>
File:Processing_einfuehrung_jan_mobile.jpg
File:Processing_einfuehrung_jan_mobile2.jpg
</gallery>

== PROGRAMM ==
[[File:Processing_einfuehrung_jan_raptorclone.zip|Download SketchFolder Snowflakes]]
[[Image:Processing_einfuehrung_final_Jan1.jpg|left]]

File:Processing einfuehrung jan mobile2.jpg

2011-12-17T17:22:20Z

Ktrin:

== Summary ==

== Copyright status: ==

== Source: ==

File:Processing einfuehrung jan mobile.jpg

2011-12-17T17:22:06Z

Ktrin:

== Summary ==

== Copyright status: ==

== Source: ==

File:Processing einfuehrung jan snowflakes.zip

2011-12-17T17:10:46Z

Ktrin: