I've implemented a selection sort algorithm in Processing 3.0 and I would like to display the bars as they are being sorted. The code is as follow:
ArrayList<Bar> sort() {
int smallest;
for (int i = 0; i < sortedBars.size(); i++) {
smallest = indexOfMinimum(i);
swap(sortedBars, smallest, i);
background(0);
for (int i2 = 0; i2 < sortedBars.size(); i2++) {
sortedBars.get(i2).display(i2, 255);
}
}
return sortedBars;}
however, this code only displays some bars in the initial state and the final state, skipping everything in between.
On the other hand, if I use a similar function, but that runs only one time
ArrayList<Bar> sort(int i) {
int smallest = indexOfMinimum(i);
swap(sortedBars, smallest, i);
return sortedBars;}
And then call it multiple times inside draw() function, it works just fine.
Am I doing something wrong?
edit: Forgot to mention, this is the display function:
void display(int position, color col) {
stroke(col);
line(position, height, position, height - barSize);}
Also, the Bar class has an attribute called barSie.
This is exactly how Processing is intended to work.
Processing is double-buffered, which means that it draws everything to an off-screen buffer before it copies that buffer to the screen. Usually that's a good thing, as it makes animations smoother. But like you've discovered, it prevents the "in-between" frames from showing.
To solve your problem, there are two approaches I can think of:
Option one: instead of using a for loop to do your iteration, use each call to the draw() function as one "step" in your algorithm. That would allow you to show one step per frame.
Option two: instead of drawing to the screen, draw each step of your algorithm to its own buffer, which you can create using the createGraphics() function. Either save the frames to disc, or in their own data structure. Then when the algorithm completes, you'll have a set of frames that you can then display.
Which approach you take really depends on you and what your end goal is. Good luck.
Related
This is a simple program in processing, all it does is draws four circles in the last four frames (My Graphics card's refresh rate is 60Hz, so it draws them once every second)
But sometimes for some reason it is skipping frames, so I don't see all the four circles. Why is that and what can I do to make it not skip frames.
int counter = 1;
void setup(){
fullScreen();
background(0);
fill(255);
}
void draw(){
background(0);
if(counter == 57){
ellipse(383,383,100,100);
}
else if(counter == 58){
ellipse(583,383,100,100);
}
else if(counter == 59){
ellipse(783,383,100,100);
}
else if(counter == 60){
ellipse(983,383,100,100);
counter = 0;
}
counter++;
}
Think about what happens each time the draw() function is called:
First you call background(0) to clear out old frames.
Then you check which frame it is, and possibly draw a circle.
What happens on frame 61? You're going to clear out the old frames (clearing out the circles you've drawn), and then not draw anything. So each circle is shown for 1/60th of a second, which is probably impossible for you to see.
To fix your problem, you need to think about what you want to happen each frame. Consider getting rid of the call to background() so old frames are not cleared out, or possible redrawing old circles every frame. It depends on exactly what you want your sketch to do.
Side note: you don't need to create your own counter variable. Processing provides a frameCount variable that does exactly this. More info can be found in the reference.
I'm trying to make a loop in p5.js that will draw small ellipses across the canvas. I've done something like this before, but the code was different.
There, when I wanted to try a loop, all I had to type was:
for (var i = 0; i < 200; i++) {}
The manual I'm using (Make: Getting Started with p5.js) tells me that the code to do this is similiar. This was an example it gave for drawing a bunch of lines:
for (var i = 20; i < 400; i += 8) {
line(i,40,i+60,80)
}
However, when I enter this code to even test it, it doesn't work. Can someone explain how to draw multiple small ellipses on the screen (I have variables set in place for the x and y coordinates of the ellipses so that they will be random)?
EDIT: This is a more full version of the code:
function draw() {
noStroke();
fill(fishCr,fishCg,fishCb);
arc(ellX,ellY,ellW,ellH,0,180);
arc(ellX+5,ellY-10,ellW/1.5,ellH/1.5,arcEl,50);
arc(ellX-45,ellY+20,ellW/1.5,ellH*1.5,340,110);
arc(ellX-60,ellY-10,ellW/1.5,ellH*2,arcT,40);
fill(0,200,255,0.5); //this is the start of the code in
//question
for (var i = 0; i < 200; i++) {
ellipse(bubX,bubY,5,5);
}
}
Please try to be more specific than saying it doesn't work. What exactly happens? What do you see in the JavaScript console?
You should also read up on a tutorial on for loops. Here is one I wrote for Processing, but the basic ideas are the same.
Your first for loop starts at 0 and increases by 1 until it reaches 200. Your second for loop starts at 20 and increases by 8 until it reaches 400.
Also note that you have an extra opening curly brace { in your second for loop.
If you still can't get it figured out, please post a MCVE that shows the problem. Good luck.
Edit: Take a look at your for loop:
for (var i = 0; i < 200; i++) {
ellipse(bubX,bubY,5,5);
}
Here you're drawing 200 circles, but you're drawing all of them at the same location, based on the bubX and bubY variables. You probably want to pass in random values here instead of the same variables every time.
createCanvas(500, 500);
function setup() {
for (var i = 0; i < 200; i++) {
ellipse(random(0, width), random(0, height), 5);
}
}
This creates a Canvas and draws 200 small circles at random locations.
Is this waht you are looking for?
The code is supposed to fade and copy the window's image to a buffer f, then draw f back onto the window but translated, rotated, and scaled. I am trying to create an effect like a feedback loop when you point a camera plugged into a TV at the TV.
I have tried everything I can think of, logged every variable I could think of, and still it just seems like image(f,0,0) is doing something wrong or unexpected.
What am I missing?
Pic of double image mirror about x-axis:
PGraphics f;
int rect_size;
int midX;
int midY;
void setup(){
size(1000, 1000, P2D);
f = createGraphics(width, height, P2D);
midX = width/2;
midY = height/2;
rect_size = 300;
imageMode(CENTER);
rectMode(CENTER);
smooth();
background(0,0,0);
fill(0,0);
stroke(255,255);
}
void draw(){
fade_and_copy_pixels(f); //fades window pixels and then copies pixels to f
background(0,0,0);//without this the corners dont get repainted.
//transform display window (instead of f)
pushMatrix();
float scaling = 0.90; // x>1 makes image bigger
float rot = 5; //angle in degrees
translate(midX,midY); //makes it so rotations are always around the center
rotate(radians(rot));
scale(scaling);
imageMode(CENTER);
image(f,0,0); //weird double image must have something not working around here
popMatrix();//returns window matrix to normal
int x = mouseX;
int y = mouseY;
rectMode(CENTER);
rect(x,y,rect_size,rect_size);
}
//fades window pixels and then copies pixels to f
void fade_and_copy_pixels(PGraphics f){
loadPixels(); //load windows pixels. dont need because I am only reading pixels?
f.loadPixels(); //loads feedback loops pixels
// Loop through every pixel in window
//it is faster to grab data from pixels[] array, so dont use get and set, use this
for (int i = 0; i < pixels.length; i++) {
//////////////FADE PIXELS in window and COPY to f:///////////////
color p = pixels[i];
//get color values, mask then shift
int r = (p & 0x00FF0000) >> 16;
int g = (p & 0x0000FF00) >> 8;
int b = p & 0x000000FF; //no need for shifting
// reduce value for each color proportional
// between fade_amount between 0-1 for 0 being totallty transparent, and 1 totally none
// min is 0.0039 (when using floor function and 255 as molorModes for colors)
float fade_percent= 0.005; //0.05 = 5%
int r_new = floor(float(r) - (float(r) * fade_percent));
int g_new = floor(float(g) - (float(g) * fade_percent));
int b_new = floor(float(b) - (float(b) * fade_percent));
//maybe later rewrite in a way to save what the difference is and round it differently, like maybe faster at first and slow later,
//round doesn't work because it never first subtracts one to get the ball rolling
//floor has a minimum of always subtracting 1 from each value each time. cant just subtract 1 ever n loops
//keep a list of all the pixel as floats? too much memory?
//ill stick with floor for now
// the lowest percent that will make a difference with floor is 0.0039?... because thats slightly more than 1/255
//shift back and or together
p = 0xFF000000 | (r_new << 16) | (g_new << 8) | b_new; // or-ing all the new hex together back into AARRGGBB
f.pixels[i] = p;
////////pixels now copied
}
f.updatePixels();
}
This is a weird one. But let's start with a simpler MCVE that isolates the problem:
PGraphics f;
void setup() {
size(500, 500, P2D);
f = createGraphics(width, height, P2D);
}
void draw() {
background(0);
rect(mouseX, mouseY, 100, 100);
copyPixels(f);
image(f, 0, 0);
}
void copyPixels(PGraphics f) {
loadPixels();
f.loadPixels();
for (int i = 0; i < pixels.length; i++) {
color p = pixels[i];
f.pixels[i] = p;
}
f.updatePixels();
}
This code exhibits the same problem as your code, without any of the extra logic. I would expect this code to show a rectangle wherever the mouse is, but instead it shows a rectangle at a position reflected over the X axis. If the mouse is on the top of the window, the rectangle is at the bottom of the window, and vice-versa.
I think this is caused by the P2D renderer being OpenGL, which has an inversed Y axis (0 is at the bottom instead of the top). So it seems like when you copy the pixels over, it's going from screen space to OpenGL space... or something. That definitely seems buggy though.
For now, there are two things that seem to fix the problem. First, you could just use the default renderer instead of P2D. That seems to fix the problem.
Or you could get rid of the for loop inside the copyPixels() function and just do f.pixels = pixels; for now. That also seems to fix the problem, but again it feels pretty buggy.
If somebody else (paging George) doesn't come along with a better explanation by tomorrow, I'd file a bug on Processing's GitHub. (I can do that for you if you want.)
Edit: I've filed an issue here, so hopefully we'll hear back from a developer in the next few days.
Edit Two: Looks like a fix has been implemented and should be available in the next release of Processing. If you need it now, you can always build Processing from source.
An easier one, and works like a charm:
add f.beginDraw(); before and f.endDraw(); after using f:
loadPixels(); //load windows pixels. dont need because I am only reading pixels?
f.loadPixels(); //loads feedback loops pixels
// Loop through every pixel in window
//it is faster to grab data from pixels[] array, so dont use get and set, use this
f.beginDraw();
and
f.updatePixels();
f.endDraw();
Processing must know when it's drawing in a buffer and when not.
In this image you can see that works
I am trying to store the motion detected from optical flow for frames in a video sequence and then use these stored motion vectors in order to predict the already known frames using just the first frame as a reference. I am currently using two processing sketches - the first sketch draws a motion vector for every pixel grid (each of width and height 10 pixels). This is done for every frame in the video sequence. The vector is only drawn in a grid if there is sufficient motion detected. The second sketch aims to reconstruct the video frames crudely from just the initial frame of the video sequence combined with information about the motion vectors got from the first sketch.
My approach so far is as follows: I am able to determine the size, position and direction of each motion vector drawn in the first sketch from four variables. By creating four arrays (two for the motion vector's x and y coordinate and another two for its length in the x and y direction), every time a motion vector is drawn I can append each of the four variables to the arrays mentioned above. This is done for each pixel grid throughout an entire frame where the vector is drawn and for each frame in the sequence - via for loops. Once the arrays are full, I can then save them to a text file as a list of strings. I then load these strings from the text file into the second sketch, along with the first frame of the video sequence. I load the strings into variables within a while loop in the draw function and convert them back into floats. I increment a variable by one each time the draw function is called - this moves on to the next frame (I used a specific number as a separator in my text-files which appears at the end of every frame - the loop searches for this number and then increments the variable by one, thus breaking the while loop and the draw function is called again for the subsequent frame). For each frame, I can draw 10 by 10 pixel boxes and move then by the parameters got from the text files in the first sketch. My problem is simply this: How do I draw the motion of a particular frame without letting what I've have blitted to the screen in the previous frame affect what will be drawn for the next frame. My only way of getting my 10 by 10 pixel box is by using the get() function which gets pixels that are already drawn to the screen.
Apologies for the length and complexity of my question. Any tips would be very much appreciated! I will add the code for the second sketch. I can also add the first sketch if required, but it's rather long and a lot of it is not my own. Here is the second sketch:
import processing.video.*;
Movie video;
PImage [] naturalMovie = new PImage [0];
String xlengths [];
String ylengths [];
String xpositions [];
String ypositions [];
int a = 0;
int c = 0;
int d = 0;
int p;
int gs = 10;
void setup(){
size(640, 480, JAVA2D);
xlengths = loadStrings("xlengths.txt");
ylengths = loadStrings("ylengths.txt");
xpositions = loadStrings("xpositions.txt");
ypositions = loadStrings("ypositions.txt");
video = new Movie(this, "sample1.mov");
video.play();
rectMode(CENTER);
}
void movieEvent(Movie m) {
m.read();
PImage f = createImage(m.width, m.height, ARGB);
f.set(0, 0, m);
f.resize(width, height);
naturalMovie = (PImage []) append(naturalMovie, f);
println("naturalMovie length: " + naturalMovie.length);
p = naturalMovie.length - 1;
}
void draw() {
if(naturalMovie.length >= p && p > 0){
if (c == 0){
image(naturalMovie[0], 0, 0);
}
d = c;
while (c == d && c < xlengths.length){
float u, v, x0, y0;
u = float(xlengths[a]);
v = float(ylengths[a]);
x0 = float(xpositions[a]);
y0 = float(ypositions[a]);
if (u != 1.0E-19){
//stroke(255,255,255);
//line(x0,y0,x0+u,y0+v);
PImage box;
box = get(int(x0-gs/2), int(y0 - gs/2), gs, gs);
image(box, x0-gs/2 +u, y0 - gs/2 +v, gs, gs);
if (a < xlengths.length - 1){
a += 1;
}
}
else if (u == 1.0E-19){
if (a < xlengths.length - 1){
c += 1;
a += 1;
}
}
}
}
}
Word to the wise: most people aren't going to read that wall of text. Try to "dumb down" your posts so they get to the details right away, without any extra information. You'll also be better off if you post an MCVE instead of only giving us half your code. Note that this does not mean posting your entire project. Instead, start over with a blank sketch and only create the most basic code required to show the problem. Don't include any of your movie logic, and hardcode as much as possible. We should be able to copy and paste your code onto our own machines to run it and see the problem.
All of that being said, I think I understand what you're asking.
How do I draw the motion of a particular frame without letting what I've have blitted to the screen in the previous frame affect what will be drawn for the next frame. My only way of getting my 10 by 10 pixel box is by using the get() function which gets pixels that are already drawn to the screen.
Separate your program into a view and a model. Right now you're using the screen (the view) to store all of your information, which is going to cause you headaches. Instead, store the state of your program into a set of variables (the model). For you, this might just be a bunch of PVector instances.
Let's say I have an ArrayList<PVector> that holds the current position of all of my vectors:
ArrayList<PVector> currentPositions = new ArrayList<PVector>();
void setup() {
size(500, 500);
for (int i = 0; i < 100; i++) {
currentPositions.add(new PVector(random(width), random(height)));
}
}
void draw(){
background(0);
for(PVector vector : currentPositions){
ellipse(vector.x, vector.y, 10, 10);
}
}
Notice that I'm just hardcoding their positions to be random. This is what your MCVE should do as well. And then in the draw() function, I'm simply drawing each vector. This is like drawing a single frame for you.
Now that we have that, we can create a nextFrame() function that moves the vectors based on the ArrayList (our model) and not what's drawn on the screen!
void nextFrame(){
for(PVector vector : currentPositions){
vector.x += random(-2, 2);
vector.y += random(-2, 2);
}
}
Again, I'm just hardcoding a random movement, but you would be reading these from your file. Then we just call the nextFrame() function as the last line in the draw() function:
If you're still having trouble, I highly recommend posting an MCVE similar to mine and posting a new question. Good luck.
I'm currently writing a android game and and am dealing with fast collision detections.
I've come up with a solution, yet I'd like to know the most and preferred way to do this.
My solution: If we have a game object that moves 30 units a frame, we might go straight through another game object. So when I update I iterate the game object by 1 unit and run a collision detections until my wanted velocity is reached, and then I render.
This is a game object, that checks if the player's lasers or if the player itself has collided with it.
public void update(PlayerDroid[] holderPlayerDroid) {
// Update the location
//y = y + velocity;
//stupidBadDroidPositionShape.setLocation(this.x, this.y);
// Updates regarding interactions with the enemy out of the StupidBadDroids perspective, which is the PlayeDroid
for(int numberOfPlayerDroid = 0; numberOfPlayerDroid < holderPlayerDroid.length; numberOfPlayerDroid++) {
// Check if the StupidBadDroid got hit
for(int iterations = 0; iterations < velocity; iterations++) {
y = y + 1;
stupidBadDroidPositionShape.setLocation(this.x, this.y);
// Check if StupidBadDroid collides with the enemy (which is the player)
if(Physics.shapeInShape(holderPlayerDroid[numberOfPlayerDroid].getPlayerPositionShape(), getPlayerPositionShape())) {
isDead = true;
}
for(int i = 0; i < holderPlayerDroid[numberOfPlayerDroid].amountOfVisibleLasers; i++) {
if(holderPlayerDroid[numberOfPlayerDroid].holderLaser[i].isDisposed() == false) {
if(Physics.shapeInShape(holderPlayerDroid[numberOfPlayerDroid].holderLaser[i].getLaserPositionShape(), getPlayerPositionShape())) {
isDead = true;
holderPlayerDroid[numberOfPlayerDroid].holderLaser[i].dispose();
}
}
}
}
}
}
This way is very CPU demanding. Do you believe there are better solution I could apply?
You are describing tunneling, and are attempting to do continuous collision detection. Your method is CPU intensive because you are attempting to brute-force the solution.
The more fidelity that you want, the more technical the solution. If you don't need much fidelity, you could assume that the path the objects take in each frame is linear, and "expand" your hitboxes to cover the entire distance the objects moved during the frame. So, for example, instead of moving each point a discrete distance at a time, you could simply expand the points to a line segment and see if they intersect. Your hitboxes are not going to be points, though, so just "stretch" them by the path length. This is a very low-fi solution - if multiple collisions on the same object happen, you won't always pick the collision that happened "first".
For very complex solutions, try -
http://www.bulletphysics.org/mediawiki-1.5.8/index.php/Collision_Detection_and_Physics_FAQ