Looking for help (p5.js)

dyrra

Hi, I am looking for somebody who can help me asap with three sketches in p5.js processing. If you are interested, please let me know.

Chrisir

Heck, why not?

Just post them here and ask what you need

TfGuy44

Shoot me an email too. My rates are pretty unreasonable!

Oh, you wanted free help? Better post your code here then.

dyrra

Hi, problem is that in two of them, i even don't know how to start. Basically I need somebody to draw me these two sketches. So I cant ask here. I didn't wanted it for free of course.

TfGuy44

Start by describing what it is you want to do. Post the description here so we can point you in the right direction.

dyrra

Ok, thanks, will do.

dyrra

Ok, I want to create bunch of lines, which will be travelling from bottom to top and being bounced off the borders, ideally speeding up. Then I want to add a mouse interactivity, so when I click the mouse, the lines start travelling.

If you can write a cook-book with steps how should i proceed, I would be very grateful. Thank you.

noahbuddy

Without beginning to implement this, I have some pseudocode.

For a single travelling point:

define each line as a pair of vectors (start and end)
p = vector at some starting point (mouse coordinates?)
vel = vector with initial velocity(and direction) of p
distance traveled = 0

last_hit = test for side of line

Loop until distance traveled > some maximum or point hits wall or the top of screen
    update p's location by adding vel
    distance travelled += vel.mag()

    for each line:
        hit = test for side of line
        hit is different from last_hit, reflect vel against line
        if accelerate_on_hit:
            multiply vel by some factor

    test for hitting top of screen or wall (a wall could be another line)

For a travelling "line", I would probably use an array of points and update them in sequence. Maybe draw a line between each.

Take a look at the PVector p5.Vector reference. (Thanks @jeremydouglass)

I would have to look up "test side of line" and "reflection against line" myself. It has been a while.

jeremydouglass

I want to create bunch

• https://p5js.org/examples/arrays-array.html
• https://p5js.org/reference/#/p5/append

of lines

• https://p5js.org/reference/#/p5/line
• https://p5js.org/examples/form-points-and-lines.html

which will be traveling

• https://github.com/processing/p5.js/wiki/p5.js-overview
• https://p5js.org/examples/data-variables.html

from bottom to top

• https://p5js.org/reference/#/p5/width
• https://p5js.org/reference/#/p5/height

and being bounced off the borders

• http://alpha.editor.p5js.org/projects/BJKWv5Tn
• https://p5js.org/examples/mobile-acceleration-ball-bounce.html
• 

ideally speeding up.

• https://p5js.org/examples/math-increment-decrement.html

Then I want to add a mouse interactivity, so when I click the mouse,

• https://p5js.org/reference/#/p5/mouseClicked

the lines start traveling.

---

@noahbuddy, p5.js, not processing.js -- p5.js uses p5.Vector, not PVector.

• https://p5js.org/reference/#/p5.Vector

dyrra

Ok, thank you all!