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

leevanchief

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();
}

GoToLoop

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

leevanchief

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);

    }

GoToLoop

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

Chrisir

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);
}

leevanchief

Thanks GoToLoop , making a class worked a treat ;-)

leevanchief

Thanks also Chrisir ! :-)

Chrisir

Sure!