Processing - Second lesson

Today's topics:

• strokes
• mouse-effect
• pictures
• random
• colouring of pictures

Strokes
In this lesson we should work with strokes. The task was to create repeating lines that change their thickness. So I started with a 500x500 working field in black. The stroke starts with a thickness of 0.2 defined by the value of m. I decided on a very small number to get a better result in growing. M grows in 0.5 steps. The gap between the lines is 15. In the picture it seems that the gaps become smaller but this is because the strokes grow bigger. I then added a colour gradient on the lines (k).

void setup() {
size(500, 500);
background(50);
}

int i=0;
int j=0;
int k=20;
float m=0.2;

void draw() {
line(0,i,500,j);
stroke(50,250,k);
k=k+30; // Farbe

if (k>250) {
k=k-30;
}

strokeWeight(m);
m=m+0.5; // Dicke

i=i+15; // Whlg, Abstand
j=j+15;

if (j>500) {
i=i+15;
j=j+15;
}

}

Mouse-effect

The system variable mouseX always contains the current horizontal coordinate of the mouse. The system variable mouseY always contains the current vertical coordinate of the mouse. 

The system variable pmouseX always contains the horizontal position of the mouse in the frame previous to the current frame.  The system variable pmouseY always contains the vertical position of the mouse in the frame previous to the current frame. 

Example:

           stroke(10,mouseY,50);

The mouseY varies concerning the position of the mouse on the y-axis in the active field.

Pictures

PImage img; is the datatype for storing images. 

PImage photo;

void setup() {
  size(100, 100);
  photo = loadImage("laDefense.jpg");
}

void draw() {
  image(photo, 0, 0);
}

The following code includes a picture that is repeated but cannot be shown in the online version of Processing.

PImage img;
int x;
int y;
void setup () {
size (500,500);
img= loadImage("Bla.jpg");
img.resize(100,100);
}
void draw (){

fill(random(255), random(255), random(255));
rect(x, y, 100, 100);
tint(random(255), random(255), random(255));
translate(x,y);
rotate(radians(random(20)-10));
image(img, 0, 0);
x = x + 100;
if (x >= width) {
x = 0;
y = y + 100;
}
// if (y >= height) {
// y = 0;
// }
}

Random

[...]
int ran = random (9);
line (0,i+ran,300,i+ran);
strokeWeight(1);
r=r+1:
i=i+20;
[...]

Colouring of pictures

tint (random(255),random(255),random(255));
tint (255,255-y/3); // colour & transparency