# Combining fading codes for music video

**URL:** https://discourse.processing.org/t/combining-fading-codes-for-music-video/11214
**Category:** Libraries
**Created:** [May 14, 2019, 12:17am UTC](https://discourse.processing.org/t/combining-fading-codes-for-music-video/11214 "2019-05-14T00:17:34Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![mellebond](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mellebond/32/5177_2.png) [@mellebond](https://discourse.processing.org/u/mellebond)
#### Post date: [May 14, 2019, 12:17am UTC](https://discourse.processing.org/t/combining-fading-codes-for-music-video/11214/1 "2019-05-14T00:17:35Z")

</div>

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:

```auto
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:

```auto
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!

---

<div class="post-metadata">

### Author: ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)
#### Post date: [May 14, 2019, 2:27am UTC](https://discourse.processing.org/t/combining-fading-codes-for-music-video/11214/2 "2019-05-14T02:27:28Z")

</div>

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

```auto
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);
}

```

---

<div class="post-metadata">

### Author: ![mellebond](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mellebond/32/5177_2.png) [@mellebond](https://discourse.processing.org/u/mellebond)
#### Post date: [May 14, 2019, 9:37am UTC](https://discourse.processing.org/t/combining-fading-codes-for-music-video/11214/3 "2019-05-14T09:37:20Z")

</div>

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!

---

<div class="post-metadata">

### Author: ![mellebond](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mellebond/32/5177_2.png) [@mellebond](https://discourse.processing.org/u/mellebond)
#### Post date: [May 14, 2019, 10:05am UTC](https://discourse.processing.org/t/combining-fading-codes-for-music-video/11214/4 "2019-05-14T10:05:18Z")

</div>

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

Melle

---

<div class="post-metadata">

### Author: ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)
#### Post date: [May 14, 2019, 11:22am UTC](https://discourse.processing.org/t/combining-fading-codes-for-music-video/11214/5 "2019-05-14T11:22:53Z")

</div>

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

```auto
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

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

```

also bookmark this [page](https://processing.org/reference/) so you can find out anything you need about processing.

---

<div class="post-metadata">

### Author: ![mellebond](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mellebond/32/5177_2.png) [@mellebond](https://discourse.processing.org/u/mellebond)
#### Post date: [June 6, 2019, 10:02pm UTC](https://discourse.processing.org/t/combining-fading-codes-for-music-video/11214/6 "2019-06-06T22:02:06Z")

</div>

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

---

<div class="post-metadata">

### Author: ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [June 6, 2019, 11:47pm UTC](https://discourse.processing.org/t/combining-fading-codes-for-music-video/11214/7 "2019-06-06T23:47:09Z")

</div>

> [@mellebond](#):
>
> but I’d like the background to be alpha instead of white

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.

---

<div class="post-metadata">

### Author: ![mellebond](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mellebond/32/5177_2.png) [@mellebond](https://discourse.processing.org/u/mellebond)
#### Post date: [August 25, 2019, 8:24pm UTC](https://discourse.processing.org/t/combining-fading-codes-for-music-video/11214/8 "2019-08-25T20:24:28Z")

</div>

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

Thanks everyone!

---

<div class="post-metadata">

### Author: ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)
#### Post date: [August 25, 2019, 10:49pm UTC](https://discourse.processing.org/t/combining-fading-codes-for-music-video/11214/9 "2019-08-25T22:49:47Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)
#### Post date: [August 27, 2019, 9:57am UTC](https://discourse.processing.org/t/combining-fading-codes-for-music-video/11214/10 "2019-08-27T09:57:22Z")

</div>

Is the video recorded in Amsterdam?

---

<div class="post-metadata">

### Author: ![mellebond](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mellebond/32/5177_2.png) [@mellebond](https://discourse.processing.org/u/mellebond)
#### Post date: [August 27, 2019, 11:10am UTC](https://discourse.processing.org/t/combining-fading-codes-for-music-video/11214/11 "2019-08-27T11:10:46Z")

</div>

Close! Noordwal, The Hague.
