Loading...
Logo
Processing Forum
Hey,
i want to make my background change randomly after I am over a certain mouseX position.

So i wrote this:


Copy code
  1. void setup(){

    size(500,500);

    }

    void draw(){

    background(255);

    if (mouseX >= 250) background(random(250));

    }
What do I have to write, if want the background to stay in the last color I got randomly and start changing colors as I cross the mouseX border again, and so on.

It would be nice, if someone could help me please.


Replies(7)

this problem is actually a part of a more complex code, but i was to lazy to explain and didn't want to bother you all.
:)
Just use a variable to store the background color.

Code Example
Copy code
  1. color bg;
  2.  
  3. void setup() {
  4.   size(500, 500);
  5. }
  6.  
  7. void draw() {
  8.   background(bg);
  9.   if (mouseX >= 250) { bg = color(random(255), random(255), random(255)); }
  10.   line(250, 0, 250, height);
  11. }
Ohh so easy, thanks alot.
I thought the explained way  would help me, but i was wrong.
I won't get along without posting the code.

So I wrote a  function which writes text in randomly altering fonts, but the function shall run at start once.
Then the textfont shall only change if i am in the textfield.

/////////////////////////////////////////////////////////////////////////////////////////////////

Copy code
  1. PImage grad;


    //Counter

    int zahl;
    int richtung;


    //trig

    int angle = 50;

    float transX;
    float transY;

    float wGrad;
    float hGrad;

      color c1 = color(255, 0, 0);
      color c2 = color(0, 255, 0 );

    PFont[] fontList = new PFont[2];
    float linelength;
    float abstand;
    float fontPosX = 0;
    int fontPosY = -250;
    int fontSize = 50;
    float linienAbstand;
    float xPos;
    float corrY = 2;


    void setup() {

      size(800, 600);
     
      smooth();
      background(255);

      fontPosX = fontSize*.86;

      linienAbstand = fontSize* .5;

      xPos = width/2;
     


      fontList[0] = loadFont("AntiqueOlive-Roman-70.vlw");
      fontList[1] = loadFont("Imago-Book-70.vlw");
     


        //TRIG For the Gradient

      transX = (sin(radians(90-angle)))*(sin(radians(angle))*height);
      transY = (cos(radians(90-angle)))*(sin(radians(angle))*height);

      hGrad = (sin(radians(angle)) * width)+(cos(radians(angle))*height);
      wGrad = (cos(radians(angle)) * width)+(sin(radians(angle))*height);


    ////// INIT COUNTER //////

     richtung = -1;
     zahl = 500;

    }





    void draw() {

      rectMode(CORNER);

      translate(-transX, transY);

      rotate(radians(-angle));


      //////////////////

      grad = generateGradient(c1, c2, (int) wGrad, (int) hGrad);

      ///////////

      image(grad, 0, 0);

      fill(255, 200);
      noStroke();

      rect(0, 0, width*2, height*2);
     
       rotate(radians(angle));


    ////// POSITION where the Randomness begins /////

      if((mouseX <= 481) && (mouseX >= 134)) {
        if((mouseY >= 80) && (mouseY<= 134))  {
           runBaby();
          }
      }

    }


    void runBaby() {

     
      //////COUNTER///////////


    if (richtung == -1){
                zahl=zahl-10;
                  if (zahl == 0){
                    richtung = 1;
                  }
                }
               
                if (richtung == 1){
                zahl=zahl+10;
                  if (zahl == 500){
                    richtung = -1;
                  }
                }


    ////////
     
      rectMode(CENTER);
      fill(0);

     


    ///////////// LETTERS

      int  x = (int)random(0, 2);
      // println(x);
      textFont(fontList[x], fontSize);
      // textFont(fontList[zeitSchleife], fontSize); 

      textAlign(CENTER, CENTER);
      text("F", xPos + fontPosX, fontPosY);


      x = (int)random(0, 2);
      // println(x);
      textFont(fontList[x], fontSize);
      // textFont(fontList[zeitSchleife], fontSize);
      text("R", xPos + 2*fontPosX, fontPosY);


      x = (int)random(0, 2);
      // println(x);
      textFont(fontList[x], fontSize);
      // textFont(fontList[zeitSchleife], fontSize);
      text("O", xPos +  3*fontPosX, fontPosY);


      x = (int)random(0, 2);
      // println(x);
      textFont(fontList[x], fontSize);
      // textFont(fontList[zeitSchleife], fontSize);
      text("U", xPos +  4*fontPosX, fontPosY);


      x = (int)random(0, 2);
      // println(x);
      textFont(fontList[x], fontSize);
      // textFont(fontList[zeitSchleife], fontSize);
      text("T", xPos +  5*fontPosX, fontPosY);


      x = (int)random(0, 2);
      // println(x);
      textFont(fontList[x], fontSize);
      // textFont(fontList[zeitSchleife], fontSize);
      text("E", xPos +  6*fontPosX, fontPosY);


      x = (int)random(0, 2);
      textFont(fontList[x], fontSize);

      text("6", xPos +  7*fontPosX+15, fontPosY-corrY);


      x = (int)random(0, 2);
      textFont(fontList[x], fontSize);

      text("6", xPos +  8*fontPosX+15, fontPosY-corrY);


    }


    // Generate a vertical gradient image
    PImage generateGradient(color top, color bottom, int w, int h) {
      int tR = (top >> 16) & 0xFF;
      int tG = (top >> 8) & 0xFF;
      int tB = top & 0xFF;
      int bR = (bottom >> 16) & 0xFF;
      int bG = (bottom >> 8) & 0xFF;
      int bB = bottom & 0xFF;

      PImage bg = createImage(w, h, RGB);
      bg.loadPixels();
      for (int i=0; i < bg.pixels.length; i++) {
        int y = i/bg.width;
        //float n = y/(float)bg.height;
        // for a horizontal gradient:
        float n = y/(float)bg.width;
       
        bg.pixels[i] = color(
        lerp(tR, bR+zahl, n),
        lerp(tG, bG+zahl, n),
        lerp(tB, bB, n),
        255);
      }
      bg.updatePixels();
      return bg;
     
    }
///////////////////////////////////////////////////////////////////////////////////////////////////



Is there a way to do it by code?
loop - noLopp doesnt make sense for me.



PS: To run the sketch you should create 2 fonts ("XXXXX.vlw") and insert them instead of mine in the fontList Array, afterwards move the mouse in the in the textfield. near the upper left corner.


AND PLEEEEASE HELP ME.

The principle is exactly the same: store the value. Now you are creating random values and displaying letters on each draw. What you want is only to create random values at the start and when you are in the textfield. And display the letters all the time. So seperate them and use, in this case, an array to store the random values.

Adapted Code
Copy code
  1. PImage grad;
  2.  
  3. //Counter
  4. int zahl;
  5. int richtung;
  6.  
  7. //trig
  8. int angle = 50;
  9. float transX;
  10. float transY;
  11. float wGrad;
  12. float hGrad;
  13.  
  14. color c1 = color(255, 0, 0);
  15. color c2 = color(0, 255, 0 );
  16.  
  17. PFont[] fontList = new PFont[2];
  18. float linelength;
  19. float abstand;
  20. float fontPosX = 0;
  21. int fontPosY = -250;
  22. int fontSize = 50;
  23. float linienAbstand;
  24. float xPos;
  25. float corrY = 2;
  26.  
  27. String word = "FROUTE66";
  28. int[] randomValues = new int[word.length()];
  29.  
  30. void generateRandomValues() {
  31.   for (int i=0; i<randomValues.length; i++) {
  32.     randomValues[i] = int(random(2));
  33.   }
  34. }
  35.  
  36. void setup() {
  37.   size(800, 600);
  38.   smooth();
  39.   fontPosX = fontSize*.86;
  40.   linienAbstand = fontSize* .5;
  41.   xPos = width/2;
  42.   fontList[0] = createFont("Arial", 70);
  43.   fontList[1] = createFont("Times New Roman", 70);
  44.   transX = (sin(radians(90-angle)))*(sin(radians(angle))*height);
  45.   transY = (cos(radians(90-angle)))*(sin(radians(angle))*height);
  46.   hGrad = (sin(radians(angle)) * width)+(cos(radians(angle))*height);
  47.   wGrad = (cos(radians(angle)) * width)+(sin(radians(angle))*height);
  48.  
  49.   ////// INIT COUNTER //////
  50.  
  51.   richtung = -1;
  52.   zahl = 500;
  53.  
  54.   //////////////////////////
  55.  
  56.   generateRandomValues();
  57. }
  58.  
  59. void draw() {
  60.   rectMode(CORNER);
  61.   translate(-transX, transY);
  62.   rotate(radians(-angle));
  63.  
  64.   //////////////////
  65.  
  66.   grad = generateGradient(c1, c2, (int) wGrad, (int) hGrad);
  67.  
  68.   ///////////
  69.  
  70.   image(grad, 0, 0);
  71.  
  72.   fill(255, 200);
  73.   noStroke();
  74.   rect(0, 0, width*2, height*2);
  75.  
  76.   rotate(radians(angle));
  77.  
  78.   ////// POSITION where the Randomness begins /////
  79.  
  80.   if ((mouseX <= 481) && (mouseX >= 134)) {
  81.     if ((mouseY >= 80) && (mouseY<= 134)) {
  82.       generateRandomValues();
  83.     }
  84.   }
  85.  
  86.   runBaby();
  87. }
  88.  
  89. void runBaby() {
  90.   //////COUNTER///////////
  91.  
  92.   if (richtung == -1) {
  93.     zahl=zahl-10;
  94.     if (zahl == 0) {
  95.       richtung = 1;
  96.     }
  97.   }
  98.  
  99.   if (richtung == 1) {
  100.     zahl=zahl+10;
  101.     if (zahl == 500) {
  102.       richtung = -1;
  103.     }
  104.   }
  105.  
  106.   ////////
  107.  
  108.   rectMode(CENTER);
  109.   fill(0);
  110.  
  111.   ///////////// LETTERS
  112.  
  113.   textAlign(CENTER, CENTER);
  114.   for (int i=0; i<word.length(); i++) {
  115.     textFont(fontList[randomValues[i]], fontSize);
  116.     if (Character.isDigit(word.charAt(i))) {
  117.       text(word.charAt(i), xPos + (i+1) * fontPosX+15, fontPosY-corrY);
  118.     } else {
  119.       text(word.charAt(i), xPos + (i+1) * fontPosX, fontPosY);
  120.     }
  121.   }
  122. }
  123.  
  124. // Generate a vertical gradient image
  125. PImage generateGradient(color top, color bottom, int w, int h) {
  126.   int tR = (top >> 16) & 0xFF;
  127.   int tG = (top >> 8) & 0xFF;
  128.   int tB = top & 0xFF;
  129.   int bR = (bottom >> 16) & 0xFF;
  130.   int bG = (bottom >> 8) & 0xFF;
  131.   int bB = bottom & 0xFF;
  132.  
  133.   PImage bg = createImage(w, h, RGB);
  134.   bg.loadPixels();
  135.   for (int i=0; i < bg.pixels.length; i++) {
  136.     int y = i/bg.width;
  137.     //float n = y/(float)bg.height;
  138.     // for a horizontal gradient:
  139.     float n = y/(float)bg.width;
  140.  
  141.     bg.pixels[i] = color(
  142.     lerp(tR, bR+zahl, n),
  143.     lerp(tG, bG+zahl, n),
  144.     lerp(tB, bB, n),
  145.     255);
  146.   }
  147.   bg.updatePixels();
  148.   return bg;
  149. }
Thats amazing how you have shortened the script, thanks alot for the transfer. Now I will Sleep well;)
In Fact it looks quite the same, I couldnt have imagine. And learned some new Textstuff. Great.

Hey
I got the whole thing in this post worked out as i wanted, but there is still one thing i dont get.

How can I generate Random Values and store them only if they havent been generated before.
How would you code that?

So "FROUTE66" will always be written in 8 different fonts, assuming i use min 8 fonts in the Pfont array.

regards