[beginner] stuck trying to figure out array using variable?

in Programming Questions • 1 year ago

Hi, everyone. I'm currently trying to study array and classes. But I just can't seem to quite grasp it. Right now my goal is to make a background like the warp effect seen in the YouTube link below

http://www.youtube.com/watch?feature=player_detailpage&v=eaC6adlQg5Q#t=163s

It's from a game called Dariusburst for iOS.

This is what I have so far and I'm working in increments. Right now I'm focusing on a single set of lines to loop back to origin as it reach the screen's edge.

int l=15; //line length
int x=0;
void setup() {
size(500, 500);
smooth();
}
void draw() {
background(255);
x++;
if (x>500){
x=0;
}
for (int j=0; j<500; j+=20) {
line((j+x)-l,50,j+x,50);
}
}

So far, I have a for array of the lines but the ENTIRE set of line go all the way past the edge of the screen before going back to the origin (int x). What I want is each line in the set to loop back rather than waiting for the last line in the set to pass through to the right.

As far as I can figure it out, I need to make an array of variables. Unfortunately, this is exactly where I'm tripping up. I can't seem to understand exactly how this work. I can make a basic for array but not with variable on what I know right now.

Once I have figured this out with your help, I plan to use another for array with rotate to spread this single line all over the screen to recreate the similar effect as in the youtube clip.

Thank you in advance for any advice and information.

Replies(5)

maleo

Re: [beginner] stuck trying to figure out array using variable?

1 year ago

int l = 30; // line length
int g = 5; // gap in between lines
int s = 2; // movement in x direction (each frame)
//int[] x; // x positions of lines
int n;
int x = 0;
int y = 50;
void setup() {
size(500, 100);
// how many lines are needed to span the whole width of the window
n = width / (l + g) + 3;
}
void draw() {
background(255);
for (int i=0; i<n; i++) {
line(i * (l + g) + x, y, i * (l + g) + x + l, y);
}
x = ((x + s) % (l+g)) - (l+g);
}

lostearst..

Re: [beginner] stuck trying to figure out array using variable?

1 year ago

that was exactly what I was looking for! thanks! I'm trying to make head and tail of how it all works. I've messed with the code to include the rotate() for covering the whole screen. However, I can't seem to be able to limit the rotate function to only certain angles. I'm also trying to tweak the strokeWeight to increase the thickness of each lines slightly the further it moves. I think I'll only be able to figure this out when I figure out your formulas in this code like the "x = ((x + s) % (l+g)) - (l+g);"

|||EDIT|||

i overcomplicated the whole strokeWeight thing. strokeWeight(i); was exactly what I needed. heh

|||EDIT|||

|||EDIT2|||

I'm also trying to figure out how to make each set of lines move at a different speed slightly. I'm trying to see if I can make some slower sets with thinner strokeWeight to add some perspective trick of distance in the background. I can make just another for statement but I believe that there are some more concise method of achieving this with some true randomization of the speeds.

||EDIT2|||

Again, thank you! :-)

int l = 30; // line length
int g = 15; // gap in between lines
int s = 10; // movement in x direction (each frame)
//int[] x; // x positions of lines
int n;
int x = 0;
int y = 0;
void setup() {
size(500, 500);
// how many lines are needed to span the whole width of the window
n = width / (l + g) + 3;
}
void draw() {
background(0);
stroke(255);
//translate(width+200, height/5);
translate(width/2,height/2);
for (int j=0; j<360; j += 1) {
//float h = radians(j);
rotate(j);
for (int i=0; i<n; i++) {
// strokeWeight(1+((-x/2)/100));
line(i * (l + g) + x, y, i * (l + g) + x + l, y);
}
}
x = ((x + s) % (l+g)) - (l+g);
}

http://www.lost-ear-studio.com

lostearst..

Re: [beginner] stuck trying to figure out array using variable?

1 year ago

This is what I got so far. I think I still need to learn exactly how to generate and use an array of variable itself as I still seem to not be able to figure that particular aspect out. The warp field is still too regular. The gaps is lined up between the three for statements and I don't want to have to create multiple int and floats just to do that without learning anything.

knowledge of how to use an array of variable will help me with a lot of other projects and that is exactly what I'm looking for.

int l = 30; // line length
int g = 25; // gap in between lines
int s = 10; // movement in x direction (each frame)
//int[] x; // x positions of lines
int n;
int x = 0;
int y = 0;
float r = random(10); //for slow rotational effect
float r2 = random(10);
float r3 = random(10);
void setup() {
size(500, 500);
// how many lines are needed to span the whole width of the window
n = (width*2) / (l + g) + 3;
}
void draw() {
background(0);
stroke(255);
translate(width+200, height/5);
pushMatrix();
r+=0.001;
rotate(r);
//translate(width/2,height/2);
for (int j=0; j<360; j += 10) {
//float h = radians(j);
rotate(j);
for (int i=0; i<n; i++) {
strokeWeight(i);
line(i * (l + g) + x, y, i * (l + g) + x + l, y);
}
}
popMatrix();
pushMatrix();
r2+=0.002;
rotate(r2);
for (int j=0; j<360; j += 10) {
//float h = radians(j);
rotate(j);
for (int i=0; i<n; i++) {
strokeWeight(i/2);
line(i * (l + g) + x, y, i * (l + g) + x + l, y);
}
}
popMatrix();
pushMatrix();
r3+=0.003;
rotate(r3);
for (int j=0; j<360; j += 10) {
//float h = radians(j);
rotate(j);
for (int i=0; i<n; i++) {
strokeWeight(i/3);
line(i * (l + g) + x, y, i * (l + g) + x + l, y);
}
}
popMatrix();
x = ((x + s) % (l+g)) - (l+g);
}

again, thank you for any advices.

maleo

Re: [beginner] stuck trying to figure out array using variable?

1 year ago

looks quite nice already!

for achieving a more irregular look, why don't you try tripling the other variables too, like you did with r? (l, g, s, n, x, y, r)

then you would have 3 sets of lines with different thickness speed, length, gap and all..

if you want even more sets, or a variable number of sets you should use an array for each of those variables.

I think I'll only be able to figure this out when I figure out your formulas in this code like the "x = ((x + s) % (l+g)) - (l+g);"

this sets the x position for one string of lines (line gap line gap line gap).

x =

it adds the speed s to the old position, so the whole line moves to the right (you can also try a negative number for the speed).

x = x + s

now we divide the result by (l+g) which is the length of one line segment and the gap and use only the remainder. (look up the modulo operator % for more information how this works)

so actually the whole line is moved at max (l+g) to the right, because then it looks the same as if it wasn't moved at all so it is set back to zero again.

x = (x + s) % (l + g)

finally offset the whole thing to the left by one line segment (+ gap), so we don't see emptiness coming in as we move the line to the right.

x = (x + s) % (l + g) - (l + g)

lostearst..

Re: [beginner] stuck trying to figure out array using variable?

1 year ago

Thank you for your advice. I ended up finding an example script thank to my teacher and modified it to produce much better result. I'm currently working on limiting the rotate() to improve the spread of the lines along certain angles.

see link for updated script. I'm done with this thread.

https://forum.processing.org/topic/limit-the-range-of-rotate

Again, thank you.

~~~
http://www.lost-ear-studio.com

Top Reply

Response title

Attachments

New to this Portal?