processing animation in loop - animation

so its my first day using processing and i need a bit of help to start with this is my code, im doing the selection sort:
int[] numbers; // Declare array
int currentmin;
int exchange=0;
void setup() {
frameRate(0.1);
size(500,500);
numbers = new int[10]; // Create array with 10 cells
background(105);
for (int i = 0; i < numbers.length; i++) { // random numbers from 1 to 100
int r = int(random(1,100)); // create random numbers
for (int j=0; j<numbers.length; j++) { //make sure not duplications
if(numbers[j]==r)
{r=r+1;}
}
numbers[i]=r; //fill array with random numbers
println(r);
}
fill(255,0,0);
for (int i = 0; i < numbers.length; i++) { //draw rectangles
rect(i*40+10,400 ,35, -numbers[i]);
}
for (int j=0; j < numbers.length; j++){ //set pivot number
currentmin=numbers[j];
for (int i=j+1; i < numbers.length; i++){ //find lowest number in array
if (numbers[i] < currentmin) {
currentmin = numbers[i];
}
}
for ( int i=j; i<numbers.length;i++){ //swap pivot with lowest number
if ( numbers[i]==currentmin){
exchange=numbers[j];
numbers[j]=numbers[i];
numbers[i]=exchange;
//here
}
}
}
}
void draw() {
background(105);
for (int z = 0; z < numbers.length; z++) {
rect(z*40+10,400 ,35, -numbers[z]);
}
}
as you can see where i have the comment here im trying to make the thing animated and to see the rectangles change place on each iteration in the first loop, but its not working... any help ? i tried calling draw(); hopelessly but it didnt work... anyway i can get a help ?

This isn't exactly a trivial animation to execute. You should really start with something simpler.
But to answer your question, you wouldn't put your animation inside a for loop. Instead, you need to make it so the draw() function draws a single frame of the animation. Processing automatically calls the draw() function 60 times per second, so by changing what's drawn each time, you create an animation.
Shameless self-promotion: I wrote a tutorial on creating animations in Processing available here.

Related

How can I make a grid of tiles (that can be rotated randomly) in processing?

I have the following code in Processing that will produce a grid of randomly selected tiles from loaded files:
static int img_count = 6;
PImage[] img;
void setup() {
size(1200, 800);
img = new PImage[img_count];
for (int i = 0; i < img_count; i++) {
img[i] = loadImage("./1x/Artboard " + (i+1) + ".png");
}
}
void draw() {
for (int i = 0; i < 12; i++) {
for (int j = 0; j < 12; j++) {
int rand_index = int(random(img_count));
image(img[rand_index], 100 * i, 100 * j, 100, 100 );
}
}
}
By itself, it almost does what I want:
But I need that every tile be randomly rotated as well, so I tried this:
void draw() {
for (int i = 0; i < 12; i++) {
for (int j = 0; j < 12; j++) {
float r = int(random(4)) * HALF_PI; // I added this
rotate(r); // I added this
int rand_index= int(random(img_count));
image(img[rand_index], 100 * i, 100 * j, 100, 100 );
}
}
}
This second code doesn't act as I intended, as rotate() will rotate the entire image, including tiles that were already rendered. I couldn't find an appropriate way to rotate a tile the way I want, is there any way to rotate the tile before placing it?
You will probably need to translate before rotating.
The order of transformations is important (e.g. translating, then rotating will be a different location than rotation, then translating).
In your case image(img, x, y) makes it easy to miss that behind the scenes it's more like translate(x,y);image(img, 0, 0);.
I recommend:
void draw() {
for (int i = 0; i < 12; i++) {
for (int j = 0; j < 12; j++) {
float r = int(random(4)) * HALF_PI; // I added this
translate(100 * i, 100 * j); // translate first
rotate(r); // I added this
int rand_index= int(random(img_count));
image(img[rand_index], 0, 0, 100, 100 );
}
}
}
(depending on your setup, you might find imageMode(CENTER); (in setup()) handy to rotate from image centre (as opposed to top left corner (default)))

How can I create a game where you have to avoid circles with your mouse that move around randomly

I don't know how to make the circles move. I also don't know how to make the game end when the mouse touches a circle.
I already have the circles drawn on screen
for(int i = 0; i < 30; i++){
int x = (int)random(100);
int y = (int)random(100);
ellipse(x,y,25,25);
}
It shows a screen with circles. I need them to move around and have the game end when the mouse touches them.
In order to solve this problem you need to store the values of x and y in two arrays.
Next you need to initialize the arrays with a for loop (like your code).
In the order to have a continuous movement of the circle we add a little step each loop with another for loop.
And then you can calculate the distance between the mouse and each circle.
int[] x;//creation of arrays
int[] y;
int size = 30;
int nbBalls = 20;
void setup() {
size(400, 400);
x = new int [nbBalls];
y = new int [nbBalls];
for(int i=0;i<nbBalls;i++){//initialisation
x[i] = (int)random(400);
y[i] = (int)random(400);
}
}
void draw()
{
background(51);
for(int i = 0; i < nbBalls; i ++)//draw
ellipse(x[i],y[i],size,size);
for(int i = 0; i < nbBalls; i ++) {//move
x[i] = x[i] + (int)random(5)-2;
y[i] = y[i] + (int)random(5)-2;
}
for(int i = 0; i < nbBalls; i ++)//collision test
if(dist(mouseX,mouseY,x[i],y[i])<size)
noLoop();
}

Processing - Loops - amount of circles decrease

Here is a grid of crosses in circles currently 5x5. I'm attempting to get a row of 5, followed by a row of 4 underneath, then 3, then 2 etc. I've tried changing the for loops and the values but nothing is working. Do I need to use rows and columns?
int x=20;
int y=30;
size(100,100); //set size of canvas screen
for(int i=0; i<5 ; i++)
{
for (int j=0; j<5; j++)
{
x=x+10; //add 10 to value stored in variable x
ellipse(x,y,10,10);
line (x-5,y,x+5,y);
line (x,y-5,x,y+5);
}
x=20;
y=y+10;
}
Thank you!
Like I said in your last post, the best thing you can do is to get out a piece of graph paper and a pencil and draw out a few examples. Do this until you find a pattern, and you can use that in your for loops. Shameless self-promotion: I've written a tutorial on for loops in Processing available here.
Another thing you might try is separating each row into its own for loop. Don't worry about nested for loops right now; just get it working with 5 individual for loops, one for each row. When you have that working, you'll be able to look for patterns that you can use to condense the whole thing into one nested for loop.
One more thing you might do is separate drawing a row of circles into its own function, which might be defined like this:
void drawRow(float circleY, int circleCount){
Then you'd put your inner for loop inside this function. Now that you have this, you can write another for loop that calls this function.
The trick is to reduce the number of circles drawn in the OUTER FOR LOOP. Compare with something I did :)
size(500, 500);
background(255);
int gridSize = 15;
int nTimes = gridSize;
int num = 1; //number the circles
float circleD = (width/gridSize);
float w = (width/gridSize)/2;
float h = (height/gridSize)/2;
float hOffset = h;
float wOffset = w;
int count = 1;
for(int i = 0; i < nTimes; i++){
for(int j = 1; j <= gridSize; j++){ //horizontal
if(count %2 == 1){
fill(0, 0, 255);
}
else{
fill(255, 0, 0);
}
ellipse(wOffset, hOffset, circleD, circleD);
fill(14);
textSize(circleD/6);
textAlign(CENTER, CENTER);
text(num, wOffset, hOffset);
num++;
wOffset += circleD;
}
gridSize -= 1;
wOffset = w;
hOffset += circleD;
count += 1;
}

Faster way to find the closest pair of points

I'm trying to compare all elements of an array to each other. I can do it with nested loops but it's a very inefficient algorithm and I can tell it's not the right way to do it. Here's what I'm doing right now.
PER answers below I've changed this code and I'm expanding on the question.
// Point from java.awt.Point;
private static void findShortestDistance(Point[] pt) {
ArrayList<Double> distance = new ArrayList<Double>(1000);
for(int i=0; i<pt.length; i++) {
for(int j=i+1; j<pt.length; j++) {
double tmp = pt[i].distance(pt[j]);
distance.add(tmp);
}
}
double min = distance.get(0);
for(Double d : distance) {
if(d < min) { min = d; }
}
}
There's the full code for the method I have so far. I'm trying to find the shortest distance between two points in the given array.
Have a look at wikipedia.
http://en.wikipedia.org/wiki/Closest_pair_of_points
And this question seems to be the same as
Shortest distance between points algorithm
As long as you say the above code is exactly what you want the following will be the implementation you want:
for(int i=0; i<pt.length; i++) {
for(int j = i + 1; j<pt.length; j++) {
/* do stuff */
}
}
However, I have a god feeling you are actually interested in comparing the array values or am I wrong?
for(int i=0; i<pt.length; i++) {
for(int j=i+1; j<pt.length; j++) {
if(pt[i] != pt[j]) { /* do stuff */ }
}
}
for(int i=0; i<pt.length; i++) {
for(int j=i; j--; ) {
{ /* do stuff */ }
}
}
And, for completeness:
for(int i=pt.length; i--; ) {
for(int j=i; j--; ) {
{ /* do stuff */ }
}
}
Initializing j to i+1 will skip the redundant comparisons.
for(int i = 0; i < pt.length; i++) {
for(int j = i + 1; j < pt.length; j++) {
if(pt[i] != pt[j]) { /* do stuff */ }
}
}
(BTW, changed the if-statement, assuming you meant to use i and j as indexes into an array.)
That's about the best you can get for the most basic case where you need to get a cross product of the array with itself, minus all the elements {x, y} | x == y. (i.e. an exhaustive list of unordered pairs of differing elements.) If you need ordered pairs of differing elements, then your code is best.

Pixel Replication bug

My Old image is being copied till the middle of the new image
PImage toPixelReplication(PImage p)
{
PImage newImage = new PImage((p.width*2),(p.height*2));
newImage.loadPixels();
for(int i = 0; i < p.width; i++)
{
for(int j = 0; j < p.height; j++)
{
newImage.pixels[((2*i))*p.width + (j*2)]= p.pixels[(i)*p.width + j];
}
}
newImage.updatePixels();
return newImage;
}
You are missing a factor two since the new image's width is twice the old one:
newImage.pixels[((2*j))*(2*p.width) + (i*2)]= p.pixels[(j)*p.width + i];
I also exchange i and j because they should be the other way round in the pixel calculations (i denotes the column, j the row).
Note: this method fills only every second pixel in every second row. If you want the full image filled (each pixel doubled horizontally and vertically) you may use the following lines:
for(int i = 0; i < 2*p.width; i++) {
for(int j = 0; j < 2*p.height; j++) {
newImage.pixels[j*2*p.width + i]= p.pixels[(j/2)*p.width + (i/2)];
}
}

Resources