Combining fading codes for music video

Processing Libraries
1

Hello!

I’m making a music video and…

I’ve got two codes, and I want to put them together, but just can’t manage…
I want the lines drawn in the first code to fade as they do in the second.
(So a white background and the black lines.)

CODE 1:

PVector center;
float angle;
float radius;

void setup() {

  size(1920,1080);
center = new PVector(width/2, height/2);
PVector point = new PVector(230,230);
float deltaX = center.x - point.x;
  float deltaY = center.y - point.y;
  angle = atan2(deltaX, deltaY);
 radius = dist(center.x, center.y, point.x, point.y);

  ellipseMode(RADIUS);
  background(255);
  frameRate(50);

}

void draw() {

 angle += PI/26.0869;
stroke(0);
  strokeWeight(.9);
 line(center.x,center.y,center.x+ cos(angle)*radius+random(-150,150),center.y + sin(angle)*radius+random(-200,200));
}

CODE 2:

static final int NUM = 0150, NEWEST = NUM - 1;
final int[] x = new int[NUM], y = new int[NUM];
 
void setup() {
  size(800, 600, JAVA2D);
   
  colorMode(RGB, NEWEST);
  frameRate(50);
  smooth(4);
  strokeWeight(1);
 
  mouseX = width>>1;
  mouseY = height>>1;
 
  for (int i = NUM; i-- != 0; x[i] = mouseX, y[i] = mouseY);
}
 
void draw() {
  background(0);
 
  for (int i = 0; i != NEWEST;) {
    stroke(i);
    line(width/2, height/2, x[i] = x[i + 1], y[i] = y[++i]);
  }
 
  x[NEWEST] = mouseX;
  y[NEWEST] = mouseY;
}

I’d be forever grateful!

1 Like
2

you can just modify the second code to do what you want and keep things kinda consistent over both

static final int NUM = 0150, NEWEST = NUM - 1;
final float[] x = new float[NUM], y = new float[NUM];
PVector center;
float angle;
float radius;

void setup() {
size(800, 600, JAVA2D);

colorMode(RGB, NEWEST);
frameRate(50);
smooth(4);
strokeWeight(1);

center = new PVector(width/2, height/2);
PVector point = new PVector(230,230);
float deltaX = center.x - point.x;
float deltaY = center.y - point.y;
angle = atan2(deltaX, deltaY);
radius = dist(center.x, center.y, point.x, point.y);


for (int i = NUM; i-- != 0; x[i] = center.x+ cos(angle)*radius+random(-150,150), y[i] = center.y + sin(angle)*radius+random(-200,200));
}

void draw() {
background(0);

angle += PI/26.0869;
for (int i = 0; i != NEWEST;) {
stroke(i);
line(width/2, height/2, x[i] = x[i + 1], y[i] = y[++i]);
}

x[NEWEST] = center.x+ cos(angle)*radius+random(-150,150);
y[NEWEST] = center.y + sin(angle)*radius+random(-200,200);
}
2 Likes
3

Thanks so much!

Now the background is still black and the lines white instead of the other way around but i guess i’ll fix that in premiere pro then haha.

Thanks!

4

Also, it now doens’t start with just drawing lines. In the first frame there’s already about 30 lines drawn…

Melle

5

by changing “background(0)” to “background(NEWEST)” (NEWEST because you have change the color range) and by changing “stroke(i)” to “stroke(NEWEST - i)” you will get black lines on a white background. as for the start just change this

for (int i = NUM; i-- != 0; x[i] = center.x+ cos(angle)*radius+random(-150,150), y[i] = center.y + sin(angle)*radius+random(-200,200));

to

for (int i = NUM; i-- != 0; x[i] = center.x, y[i] = center.y);

also bookmark this page so you can find out anything you need about processing.

2 Likes
6

Alright, one last and final question…
Everything is working perfectly now, but I’d like the background to be alpha instead of white and can’t figger it out because you’re using the background as the fader of the lines right?

Melle

7

What do you mean by this? The background command itself (the canvas) does not support alpha. It can’t be a clear app window floating on the desktop; you have to pick a color.

2 Likes
8

For anyone interested in the final product: https://www.youtube.com/watch?v=NKCTPGJH6TQ

Thanks everyone!

3 Likes
9

i didn’t realise you were using it as a mask. nice effect.

10

Is the video recorded in Amsterdam?

11

Close! Noordwal, The Hague.