Draw random 'X' and remain drawing to same location.

edited December 2017 in Library Questions

Hi there, My issue is with the drawX() function. At the moment it draws an 'X' in a random place which then disappears as the next frame of 'myVid' refreshes the screen. I want to be able to draw each individual 'X' to its random location but then continue draw to that same location throughout the sketch. Thus resulting in an ever growing number of 'X's across the screen. I think i need to assign each individual 'X' to an array as it is drawn in order for it to maintain its (x,y) position. But i am not sure how to go about this. Hope this is clear. Any help would be greatly appreciated:

PFont font; 
import processing.video.*;
Movie myVid;
String letter = "X";
float x;
float y;
float interval  = 1200;
float currentTime;
int offset = 100;

void setup() {
  size(540, 540);
  background(254);
  myVid = new Movie(this, "seaClip_001.mp4");
  myVid.loop();
  //frameRate(0.5);
}

void draw() {
  image(myVid, 0, 0-offset, 540, 540);
  drawFrame();
  drawX();
}

void drawFrame() {
  shapeMode(CENTER);
  fill(1);
  rect(width/2, 0, 10, height);
  shapeMode(LEFT);
  rect(0, 390, width, 10);
  //fill(color'ffa7e8');
  fill(255, 167, 232);
  rect(0, 400, width, 140);
}

void drawX() {
  fill(0);
  font = createFont("Arial", 1);
  textFont(font);
   x = random(width);
   y = random(height);
  if (currentTime > 1000)
    textSize(random(120, 500));
  text(letter, x, y);
  currentTime = millis() % interval; //
}

void movieEvent(Movie m) {
  m.read();
}

Answers

  • edited December 2017

    A very important rule: Avoid loading resources after setup() is finished! L-)
    For example: Why are you re-createFont() the very same "Arial" font again & again? :-@

    ... but then continue draw to that same location throughout the sketch.

    To keep those 'X' forever, you can text() them on a separate PGraphics, then display that via image(): *-:)
    https://Processing.org/reference/PGraphics.html

    More ideas: Given drawFrame() is a static drawing; that is, it's the same for the duration of the program; you can turn the whole thing into a PGraphics too! :-bd

    1 last thing: Why are you using shapeMode() if you're not actually using shape()? :-\"
    https://Processing.org/reference/shapeMode_.html

  • edited December 2017

    Cool. Thanks for that advice GoToLoop . I have duly taken on board. I have now implemented arrays for 'xpos', 'ypos' and 'txtSize' . Now whilst the 'xpos' and 'ypos' arrays do what i want them to. The 'txtSize' gives a random general size for all 'X's. How can i give each 'X' in the 'letterCount' its own individual random size?

        PFont font;
        import processing.video.*;
        Movie myVid;
        String letter = "X";
        int letterCount  = 5;
        int[] xpos = new int[letterCount];   
        int[] ypos = new int[letterCount];   
        int[] txtSize = new int[letterCount];
        color c = #fb954a;
    
        void setup() {
          size(540, 540);
          myVid = new Movie(this, "seaClip_001.mp4");
          for (int i = 0; i < letterCount; i++) { 
            xpos[i] = int(random(width));
            ypos[i] = int(random(height));
            txtSize[i] = int(random(350));
            font = createFont("Arial", txtSize[i]);  
            //textFont(font);
          }
          myVid.loop();
        }
    
        void draw() {
          image(myVid, 0, 0, 540, 540);
          drawFrame();
          drawX();
        }
    
        void drawX() {  //every 1000 millis draw i
          fill(c); 
          textFont(font);
          for (int i = 0; i < letterCount; i++) {
            text(letter, xpos[i], ypos[i]);
          }
        }
    
        void movieEvent(Movie m) {   // loops video
          m.read();
        }
    
        void drawFrame() {
          fill(1);
          rect(width/2, 0, 5, height);
          rect(0, 390, width, 5);
    
        }
    
  • edited December 2017 Answer ✓

    We can control canvas PFont's current size via textSize(): :)>-
    https://Processing.org/reference/textSize_.html

    Things would be much easier for you if you'd create 1 class for all your 'X's though: *-:)
    https://Forum.Processing.org/two/discussion/8081/from-several-arrays-to-classes

  • Answer ✓

    How can i give each 'X' in the 'letterCount' its own individual random size?

    use int[] txtSize

    PFont font;
    import processing.video.*;
    Movie myVid;
    String letter = "X";
    int letterCount  = 5;
    int[] xpos = new int[letterCount];   
    int[] ypos = new int[letterCount];   
    int[] txtSize = new int[letterCount];
    
    color c = #fb954a;
    
    void setup() {
      size(540, 540);
      myVid = new Movie(this, "seaClip_001.mp4");
      for (int i = 0; i < letterCount; i++) { 
        xpos[i] = int(random(width));
        ypos[i] = int(random(height));
        txtSize[i] = int(random(350));
        font = createFont("Arial", txtSize[i]);  
        //textFont(font);
      }
      myVid.loop();
    }
    
    void draw() {
      image(myVid, 0, 0, 540, 540);
      drawFrame();
      drawX();
    }
    
    void drawX() {  //every 1000 millis draw i
      fill(c); 
      textFont(font);
      for (int i = 0; i < letterCount; i++) {
        textSize(txtSize[i]); 
        text(letter, xpos[i], ypos[i]);
      }
    }
    
    void movieEvent(Movie m) {   // loops video
      m.read();
    }
    
    void drawFrame() {
      fill(1);
      rect(width/2, 0, 5, height);
      rect(0, 390, width, 5);
    }
    
  • Thanks GoToLoop , making a class worked a treat ;-)

  • Thanks also Chrisir ! :-)

Sign In or Register to comment.