I have been working on two codes that I would now like to have in the same frame, one over the other. I am asking for advice or just straight up the full solutions to merging these two codes. I have tried everything that I know and have yet to come up with the results that I want, especially since there are many repeated lines on either code (if that makes sense). Code #1 is the background, code #2 the foreground;

CODE #1 (background)

float x, y;

float xStep = 50;

float yStep = 50;

float a, a_;

int num = 328;

void setup() {

size(200, 200);

}

void draw () {

background(15, 20, 30);

strokeWeight(xStep);

strokeCap(CORNER);

int n=8;

while (n<num) {

stroke (255-255*cos(radians (a)),255*cos(radians(a)),255-255*sin(radians(a)), 255-255*sin(radians(a)));

line (x, y, x, y+yStep);

x+=xStep;

if (x>width) {

x=xStep/2;

y+=yStep;

}

if (y>=height) {

y=0;

a=0;

}

n++;

a+=a_;

}

a_+=0.1;

}

CODE #2 (foreground)

float angle;

float x, y;

float xStep = 50;

float yStep = 50;

float a, a_;

int num = 328;

void setup() {

size(200, 200);

surface.setLocation(175,0);

strokeWeight (5);

}

void draw () {

{

background(15, 20, 30);

strokeWeight(xStep);

strokeCap(CORNER);

int n=8;

while (n<num) {

stroke (255-255*cos(radians (a)),255*cos(radians(a)),255-255*sin(radians(a)), 255-255*sin(radians(a)));

line (x, y, x, y+yStep);

x+=xStep;

if (x>width) {

x=xStep/2;

y+=yStep;

}

if (y>=height) {

y=0;

a=0;

}

n++;

a+=a_;

}

a_+=0.1;

}

background (300);

translate(width/2, height/2);

for (int i=0; i < 10; i ++){

fill (i*90, 300-i*90, 400-i*800);

scale (0.99);

rotate(radians(angle));

rect (0, 0, 75, 75);

angle+=0.03;

}

}

Thank you for reading this post, any advice can help as I am still a beginner!