Image Update

Programming Questions

stevethes..

in Programming Questions • 5 months ago

I want to be able to show a graphical representation of cards moving and sorting. But I found out draw() only updates after it's done. I thought that if I call my sort from setup, then have the sort call draw() every time it wants to update, it would get rid of that problem. But it still only displays when it's done.

How can I fix this problem, and how should I organize code like this in the future? I don't want the code to be sloppy and inefficient, what is the best way to approach this? I've not come across this problem before.

PFont f;

Card[] a;
int numcards = 20;

void setup(){
size(650, 400);
rectMode(CENTER);
f = createFont("Arial",16,true);
textFont(f);
a = new Card[numcards];
for(int i = 0; i < numcards; i++){
a[i] = new Card(i*30 + 15, 60, i+1);
}
switchcards(0, 1);
}

void draw(){
background(255);
for(int i = 0; i < numcards; i++){
a[i].carddraw();
}
}

void waittime(int i){
int time = millis();
while(millis() - time < i){}
}

void selectionSort(){
for(int i = 0; i < numcards; i++){
    int m = i;
    int j;
    for(j = i+1; j < numcards; j++){
      if(a[j].num < a[m].num){
        m = j;
      }
    }
switchcards(i, m);
}
}

void switchcards(int i, int j){
int w = a[i].y;
int v = a[j].y;
for(int k = 0; k <= 200; k++){
    a[i].y = w + k;
    a[j].y = v + k;
    draw();
    waittime(5);
}
w = a[i].x;
v = a[j].x;
for(int k = 0; k <= v-w; k++){
    a[i].x = w + k;
    a[j].x = v - k;
    draw();
    waittime(5);
}
w = a[i].y;
v = a[j].y;
for(int k = 0; k <= 200; k++){
    a[i].y = w - k;
    a[j].y = v - k;
    draw();
    waittime(5);
}
}

class Card{

int x;
int y;
int num;

Card(int num_){
    num = num_;
}

Card(int x_, int y_, int num_){
    x = x_;
    y = y_;
    num = num_;
}

Card(Card c){
    this.x = c.x;
    this.y = c.y;
    this.num = c.num;
}

void carddraw(){
    fill(255, 180, 60);
    stroke(0);
    rect(x, y, 28, 50);
    fill(0);
    text("" + num, x-10, y);
}

}

Replies(4)

PhiLho

Re: Image Update

5 months ago

Why have you created a new topic? You could have continued in the previous one...

You don't call draw(), that's draw() which calls you. Uh, no, actually, that's Processing that calls it. You should never call setup(), draw() or similar.

Note that your waittime() function is just a CPU-intensive version of delay(), you shouldn't use it either.

And remember the part of the article where it mentions that draw() acts like the body of a loop: you can replace one of your for loop with global variables and manual increment.

stevethes..

Re: Image Update

5 months ago

I don't even know where I would use global variables to replace my for loops, because I need three different movements every time I switch my cards.

And to answer your question, the article is not helpful, because it is barely my problem, or at least I have no idea how that is my problem.

Last, how else am I supposed to make my program wait besides using my wait method or delay? I cannot easily find any resources that can explain to me how not to use delay, or even how to use delay.

v.k.

Re: Image Update

5 months ago

I didn't really dig into your code, but perhaps what PhiLho means is something like this:

int iGlobal;
color RED = color(255,0,0);
color BLUE = color(0,0,255);
void setup() {
size(300, 300);
}
void draw() {
background(255);
iGlobal= (iGlobal+10)%width;
for (int i = 0; i < width; i+=10) {
stroke(0);
line(i, 0, i, height/3);
}
stroke(RED);
line(iGlobal, height/3, iGlobal, height/3*2);
//or even...
stroke(BLUE);
for (int i = 0; i < iGlobal; i+=10) {
line(i, height/3*2, i, height);
}
}

PhiLho

Re: Image Update

5 months ago

The article says: "don't make several drawings in draw, and expect them to be animated". That's the core of it. And it tries to show an alternative.
Alternative to delay(): use millis(). This is explained in the next article (see the Technical FAQ overall). I don't remember if I pointed to it, that's the inconvenience to make several threads on the same topic.
If you need to make several animations, you have to organize your sketch.
Simple example: make a shape move left, then up, then right. You have to think around the draw() function, using it to execute each small step of your animation, using these global variables to keep track of the state where it is and to tell what to do next.

int state; // 0 move left, 1 move up, 2 move right
int x, y; // Current position
int startTime;
void setup()
{
size(800, 800);
x = width / 2;
y = height - 100;
}
void draw()
{
background(255);
switch (state)
{
case 0:
if (x < 100) // Position-based decision
{
// Next state
state = 1;
startTime = millis();
}
else
{
x -= 10;
}
break;
case 1:
if (millis() - startTime > 3000) // Three seconds: time-based decision
{
state = 2;
}
else
{
y--;
}
break;
case 2:
if (x < width - 50)
{
x += 5;
}
else
{
// Do something else. Here, we just stop the sketch.
exit();
}
break;
}
// Update the stuff to animate
ellipse(x, y, 20, 20);
}

Yes, it is complex to do non-trivial stuff, Processing is a rather low-level library, although there are libraries to handle such animations more gracefully.

Top Reply

Image Update

Replies(4)

Re: Image Update

Re: Image Update

Re: Image Update

Re: Image Update

Statistics

Tags

Actions

Related Posts