Falling effect?

General Discussion Other

zegley

in General Discussion • Other • 8 months ago

Ok, so let me begin by saying that I am completely new to programming and in this class i'm taking we were kinda just thrown into coding and are expected to know what we're doing. The class is more researching to figure out how to code than it is actually learning how to do the coding. Anyways, I am trying to make a falling effect; sort of like the famous matrix letter falling thing. But mine is much simpler. I just want there to be squares to fall in straight columns from the top to the bottom. I can probably take on any other slight modifications from there, but i don't even know where to start. I'm looking for a mentor to walk me through the steps necessary to take to get this end product. Any takers, please??

Replies(9)

Chrisir

Re: Falling effect?

8 months ago

Hello!

Welcome in the forum!

Don't be scared. What you plan is not too hard.

There are great examples here in the learning section.
http://processing.org/learning/topics/linear.html

And examples also come with processing (menu file).

Anyway. Look at rect and fill.
There are good explanations in the reference:
http://processing.org/reference/

Make a program with one rect first. It falls when you say

myY=myY+1;

When myY is the y-value for your rect.

When you are confident with this sketch, save it. Make a new one.

There: arrays named myX, myY and myColor.
Look up array in the reference
http://processing.org/reference/
There is even a section of it.

Those are lists.

Think of myX, myY and myColor as parallel lists. The first entries in all 3 lists together describe one rect.

The first element in myX[0] contains the x-value (you use that with rect)
The first element in myY[0] contains the y-value (you use that with rect) (you increase that).
The first element in myColor[0] contains the color (you use that with fill).

The idea is with entry 3 e.g. you have data for one rect in 3 different lists.

For loop over it: Like here in the last example: http://processing.org/reference/Array.html
or here http://processing.org/reference/for.html

In setup() you define all entries, in draw() you draw them.

Ask again.

Greetings, Chrisir

zegley

Re: Falling effect?

8 months ago

I'm doing something wrong here. When I try to move the rect down it leaves a trail behind it that I don't want. Any suggestions?

float myY;

void setup() {

size(400,400);

background(0);

}

void draw() {

stroke(177,5,5);

rect(200, myY, 5, 0);

myY=myY+1;

}

zegley

Re: Falling effect?

8 months ago

Ok, so this simple change fixed that. However, I'm not sure why. I was just guessing and checking.

float myY;

void setup() {

size(400,400);

}

void draw() {

fill(0);

background(0);

stroke(177,5,5);

rect(200, myY, 7, 7);

myY=myY+1;

}

tfguy44

Re: Re: Falling effect?

8 months ago

The difference between this one and the last one is that you moved the call of "background(0);" into the draw() function.
The function draw() runs about 60 times a second, re-drawing the entire screen.
Without the call to background(), the previously drawn frame is not cleared, which created the effect you saw.
When you had it in setup(), it only cleared the background once, when the program started, because setup() only runs one time.

zegley

Re: Falling effect?

8 months ago

What I want this to do is to have the rect fall and have another fall behind that one and another and so on. So this is the code I came up with. (Don't mind the trippy random color change. It's part of the project. Glitch art.)

float myY;

float myX;

float myColor;

void setup() {

size(400,400);

}

void draw() {

fill(random(360), random(360), random(360),50);

rect(0,0,width,height);

stroke(random(177),random(100),random(100));

rect(200, myY, 7, 7);

rect(200, myY-35,7,7);

rect(200, myY-70,7,7);

rect(200, myY-105,7,7);

rect(200, myY-140,7,7);

rect(200, myY-175,7,7);

rect(200, myY-200,7,7);

rect(200, myY-235,7,7);

rect(200, myY-270,7,7);

rect(200, myY-305,7,7);

rect(200, myY-340,7,7);

rect(200, myY-375,7,7);

rect(200, myY-405,7,7);

rect(200, myY-440,7,7);

myY=myY+5;

if (myY-140>400) {

myY = 0;

}

Besides resetting like how it is doing, I'm wondering is there a way to loop the code so they will constantly be falling without giving the appearance of the code resetting. I just want it to look like one fluent motion. I am lost when it comes to setting up an array if that's the solution.

tfguy44

Re: Falling effect?

8 months ago

It can be a solution. Like so:

float[] Ypositions = { 0, 35, 70, 105, 140, 175, 200, 235, 270, 305, 340, 375, 405, 440 };
void setup() {
size(400,400);
}
void draw() {
fill(random(360), random(360), random(360),50);
rect(0,0,width,height);
stroke(random(177),random(100),random(100));
for( int i = 0; i < Ypositions.length; i++){
rect(200, Ypositions[i], 7, 7);
Ypositions[i]+=5;
Ypositions[i]%=height;
}
}

boub_pops..

Re: Falling effect?

8 months ago

Hi guys !

You'd better use int instead of float to store the Yposition as it's a pixel position :)

Cheers

zegley

Re: Falling effect?

8 months ago

Copy code

float[] Ypositions = { 0, 35, 70, 105, 140, 175, 200, 235, 270, 305, 340, 375, 405, 440 };
void setup() {
size(400,400);
}
void draw() {
fill(random(360), random(360), random(360),50);
rect(0,0,width,height);
stroke(random(177),random(100),random(100));
for( int i = 0; i < Ypositions.length; i++){
rect(200, Ypositions[i], 7, 7);
Ypositions[i]+=5;
Ypositions[i]%=height;
}
}

ok, so now that is done and the squares are falling at a steady loop, but how do I get the squares to be falling from different x positions all across the window? I need help soon please!

boub_pops..

Re: Falling effect?

8 months ago

rect(200, Ypositions[i], 7, 7);

==> you have to change the 200 by a changing x position for each rectangle.

something like

in rect(10*i, Ypositions[i], 7, 7);

or whatever you want to be the position.

Top Reply

Statistics

9 Replies
772 Views
2 Followers

Actions

Permalink

VJ Software using Processing

Falling effect?

Replies(9)

Re: Falling effect?

Re: Falling effect?

Re: Falling effect?

Re: Re: Falling effect?

Re: Falling effect?

Re: Falling effect?

Re: Falling effect?

Re: Falling effect?

Re: Falling effect?

Statistics

Tags

Actions

Related Posts