Hello, I am a student at the Slade school of Art and I am looking for some help.
I have been trying to make animations of squares in after effects all term and my tutor told me about processing. I have a bit of experience with code, I have done it in after effects expressions and have worked a bit with python. But am totally new to processing.
I would like to animate squares, for the moment colour is not important, black and white checker is fine. First I am interested in this grid of 4 squares randomly (psuedo-randomly) turning off and on. Then the squares subdivide and move in psuedo-random patterns.
Could anyone tell me how to start something like this? I am willing to put time into developing the system, but for now am struggling with the basics and how I might build a pattern generator which could help.
I am interested in procedural noise patterns as methods to generate the pattern, perhaps perlin noise would be helpful? Any help would be amazing.
This post shows an idea of how to do something like this. The concept is that you have a class SquareCell which is defined by a size and position and it has a function call draw() do draw itself. The code has an ArrayList of squares. In each frame you draw all the squares based on the noise pattern. The trick is that every so often in draw, say every 10 seconds, you change the grid pattern as to make the square smaller. When you do this, you remove all the squares in the list and then you add the squares back again with a new size and with a defined position, which is based on size. Let us know if this is enough info to get you started or if something is not clear.
By the way, if you want to try, there is a python mode in Processing. I am not good at it, but I could always give it a try.
Thank you @kfrajer this is very helpful. I am looking into the random pattern you have constructed, cell size etc.
with the example you have given (as far as I can see) it is a static frame.
What would be needed to automate this so that ‘r’ is returned with a controllable speed.
In other work I have done in cinema 4d I would use a frame step command, but here, as yet we don’t have a time frame (maybe we don’t need one)
Finally - I would like to output this as a jpg sequence - how would I go about this.
There is an easy trick for this. It is based on the frameCount and the modulo operator. Processing frame rate is about 30fps. The frameCount keeps track what frame number is being executed at all times. In other words, it tells you how many times draw() has been called. (Every times draw() is executed, a new frame is shown in the screen. In your case, you could do something like:
color bg=0; //Black
void setup(){
size(400,600);
}
void draw(){
//For a frame rate of 30, this next executes every 10 secs
if(frameCount%300) bg(random(256),0,0);
background(bg); //New reddish background every 10 secs
}
This is a way to do this which could work in your case. Another way is to control the frame rate in setup using frameRate(). A third option is working with the millis() function when you keep track of time and execute the random portion of the code after some time has elapsed. This is how TimeUtilities work (fourth option) which you can install using the contribution manager in the PDE. It is an external library and it comes with a copuple of examples. Check them out. In the PDE, go to Files>>Examples* and then go to the Contributed Libraries>>TimingUtilities. Notice you need to install the lib first to access these examples.
For saving the image, you have save and saveFrame. If you need to have transparency in your saved files, you will need to use a PGraphics.
I realise I wasn’t precise enough in my last question - I meant simply not to change the background, but to animate the checkerboard moving or pressing “R” repeatedly.
I probably have enough information in what you have written here to extrapolate the right script, but will let you know if I run into a wall.
One other thing, I can’t see in your script how to change the size of the cubes?
The examples I provided are not a complete solution. it is more like pieces and bits that demonstrates functionality. You just grub all those pieces and put them together. For the sizes, I mentioned a possible approach:
So in other words, when your animation triggers the change of size, you dump the current squares that you have and you create a new set of squares with a new size and with their defined position. At this point, I am not sure what would the final outcome of your design. Give it a try and post some code if you get stuck.