Hi, I’m new to Processing and I don’t know how to recreate this image on the right side of 800x400 interactively, please help me
Beautiful image!
And welcome to the forum!
The grid
You can draw a grid of rectangles
Use
for (int x.... {
for (int y.... {
rect( x * 20, y * 20, ....
}
}
Now for the interactive part
Please look closely at the image.
What do you see?
The width and height of each rectangle is changing separately.
So calculate wRect = map(mouseX, 0, width, 0, 16);
(check out the map() command in the reference)
This is obviously wrong but it’s a start.
Use wRect as a parameter for the width of each rectangle, repeat the process with the height hRect.
Your line should now look like this:
rect( x * 20, y * 20, wRect, hRect );
Later
Later you can use dist(mouseX, 0,rectangle’s pos x ,0) to get the distance from the rect to mouse.
This gives you the distance that you can use in the map() command above.
Check reference for the commands.
Chrisir
1 Like
Would recommend to set the origin to the center, makes it imo easier and has the advantage that you will implicitly correct the inconsistency (from an aesthetic perspective) in the posted image. 
Let’s imagine numdots=20
Means, draw the small rects (use rectMode CENTER) from -numdots/2 to numdots/2 (inclusive) by applying a scaling factor and set width and height for it depending their distances from the center.
Below is created by very few lines of code, so if you think about it you’ll manage it. 
Cheers
— mnse
PS:
setting origin:
for drawing:
For sizing:
PPS: by add two more code lines…
Coloring:
Processing resources (tutorials, references, examples) are here:
https://processing.org/
I encourage you to peruse the website and get familiar with the resources there and use them.
A must read:
Guidelines—Asking Questions
You must first be familiar with the Processing environment and entry level programming; assuming you have some of the basics to get started.
You must understand the co-ordinate system. See the tutorial.
That looks like a grid. < Important concept and keyword when doing a search!
A nested for() loop will be helpful. < Another important concept!
The Processing reference has one example of a nested for() loop:
The points in the example can be made larger or replaced with other shapes.
There may be other examples on the site that use for() and nested for() loops.
After you get a grid you can start manipulating the points with some additional code.
Add interactivity later! There is a tutorial that discussed that.
My initial attempt:
The grid is the first step and very achievable.
The rect() and spacing is the next challenge!
You can space them with increasing and decreasing values along each row and column.
Only after you master the above you can consider more advanced approaches.
Try it with just a one row first. The columns can be added after and you will start to see how that works with some (maybe lots of) coding.
I like to experiment and have fun with coding!
Once I progressed (this may be advanced for a beginner) I used sine waves and spacing along the y for equal increments along x for the rect() size:
Shows the spacing used (blue points and lines on left):
Give consideration to interactivity and variables you are using but add that last.
One step at a time!
Have fun!
:)
3 Likes