Hello,

I am trying to create an animation that cycles between three colors (orange, white, green) by fading in and out using the alpha channel. At this point I got it to work through one cycle using boolean statements, but then it just stops. How do I keep it cycling? Is there a way to do this without re-drawing the image each time, as I have in my code below:

PImage cat1;
PImage cat2;
float a;
float b;
float c;
float acc = 1;
boolean fadeinGreen = false;
boolean fadeinWhite = false;
boolean fadeinOrange = false;
boolean fadeOut = false;

void setup() {
  fullScreen();
  cat1 = loadImage("cat.png");
  cat2 = loadImage(“cat2.png");
}

void draw() {
  background(0);
  noTint();

  cat1.resize(width, 0);
  image(cat1, 0, 50);

  if (a < 255) {
    fadeinGreen = true;
  }

  if (fadeinGreen == true) {
    tint(0, 255, 0, a);
    a = a + acc;
    cat2.resize(width, 0);
    image(cat2, 0, 50);
  }

  if (a == 255) {
    fadeinWhite = true;
  }

  if (fadeinWhite == true) {
    tint(255, b);
    b = b + acc;
    cat2.resize(width, 0);
    image(cat2, 0, 50);
    if (b == 255) {
      fadeinOrange = true;
    }
  }

  if (fadeinOrange == true) {
    tint(255, 119, 0, c);
    c = c + acc;
    cat2.resize(width, 0);
    image(cat2, 0, 50);
    fadeOut = true;
  }

  if (fadeOut == true) {
    if (c >= 255) {
      acc = acc *-1;
    }
  if (c == 0) {
    fadeOut = false;
    fadeinGreen = true;
    }
  }
}

In Processing, press Ctrl+t to format your code in the PDE. Then copy and paste the code and format it in the forum (exactly as you have done above).

This could be relevant: https://forum.processing.org/two/discussion/25094/set-distance-value-with-ultrasonic-sensor#latest

Right now, what does your code do? Can you get any fading at all? Please notice we don't have the videos nor your setup (not kinect here). Can you comment on what type of kinect unit are you using?

For volume, check these:

https://forum.processing.org/two/discussion/13521/minim-help-with-volume-control
https://forum.processing.org/two/discussion/7237/how-to-set-volume-in-minim

Kf

if i put an AlphaValue all the balls fade from the beginning

instead of using a class, you took a step back and work with parallel arrays now, which is ok

but that means that parallel to

ArrayList size;

you need also an ArrayList with the fade value as int and with the information whether if ball is fading

Updated! Download: https://github.com/LuislopezMartinez/GameLibZero

the news: Library for Game development in Processing. Based on Div Games Studio Concept.

-CHANGELOG:

2.2.5: ADD: scene sistem.

2.2.6: BUG SOLVED from sprite shape coords in maximized window.

2.2.7 ADD: mouse.onRegion() for check is mouse on screen region & mouse.getBody() yo get fist body collision directly from mouse instance.

2.3.0 ADD: loadScene() for load scenes with collide zones defined. ENJOY!

2.3.1 ADD: desktopProjectSoftware!!!! a JAVA2D Render version of this library for old machines compatibility. ;)

**v2.4.0 march - 2018.

added ExitHandler with onExit() function. added father id for control father sprite of sprite with simple system. added Xmirroring and Ymirroring sprite properties. added cliping for sprites with Region(), simple systen for asign region of screen to viewport of sprite. screenDrawGraphic() now with region capability. added keyboard object for simplest keyboard input. added soundFade() function for fading sounds..**

Hi.

Code below does exactly what I want; fading picture into almost white. However it does fade always in Java mode it does not in Android mode, better to say I've only one image that does fade in Android mode. I've checked if the pictures have an alpha channel with GIMP and they do. How to generate images that will fade? This is driving me nuts. You can download my fading image here.

Any rescue?

(int i = 255;
boolean flag1;
PImage img;

void setup() {
  size (600, 600);
  background(255);
  img = loadImage("uyf.png");
  tint(255, 255); 
  image(img, 0, 0);
}

void draw() {  
  if (flag1){
  background(255);
  tint(255, i); 
  image(img, 0, 0); 
  i -= 6;
  if(i < 40) flag1 = false;
  }
}

void mousePressed(){
  flag1 = true;
}
)

This is my attempt working with transition/fading between two selected colors.

Kf

//===========================================================================
// GLOBAL VARIABLES:

StackActionExecutor ex;

color c1;
color c2;
float ratio;

//===========================================================================
// PROCESSING DEFAULT FUNCTIONS:

void settings() {
  size(400, 600);
}

void setup() {

  textAlign(CENTER, CENTER);
  rectMode(CENTER);

  fill(255);
  strokeWeight(2);

  ex = new StackActionExecutor(this);
  ex.add(2000, "blackToRed");
  ex.add(3000, "fade_RedToBlue");
  ex.add(2000, "paintBlue");
  ex.add(3000, "fade_BlueToYelow");
  ex.add(1000, "yellowToBlack");

  ex.add(1500, "blackToRed");
  ex.add(1500, "fade_RedToBlue");
  ex.add(3000, "paintBlue");
  ex.add(30, "run4");
}


void draw() {
  background(0);

  fill(lerpColor(c1, c2, constrain(ratio, 0, 1)));
  ellipse(width/2, height/2, 50, 50);
}

void keyReleased() {
  redraw();
}

void mouseReleased() {
  looping=!looping;
  //ex.pauseFlag=!ex.pauseFlag;  //Call this line if sync_to_looping is false and you want the ex to mimic draw's looping state
}



//===========================================================================
// OTHER FUNCTIONS:



void fade_RedToBlue() {
  c1=color(255, 0, 0);
  c2=color(0, 0, 255);

  runThis("RedToBlue");
}

void paintBlue() {
  c1=color(0, 0, 255);
  c2=color(0, 0, 255);

  runThis("Just blue");
}

void fade_BlueToYelow() {
  c1=color(0, 0, 255);
  c2=color(255, 255, 0);

  runThis("BlueToYelow");
}

void blackToRed() {
  c1=color(0);
  c2=color(255, 0, 0);

  runThis("blackToRed");
}

void yellowToBlack() {
  c1=color(255, 255, 0);
  c2=color(0, 0, 0);

  runThis("yellowToBlack");
}

void run4() {
  runThis("RuN4");
  exit();
  return;
}

void runThis(String label) {
  ratio=ratio=ex.progress;

  if (frameCount%60==0) println(label + " running at "+millis()+" msecs.");
}



//===========================================================================
// OTHER FUNCTIONS:


public class StackActionExecutor { 


  ArrayList<StackActionObject> stack;
  final PApplet p;
  protected boolean pauseFlag;

  protected boolean sync_to_looping;
  float progress;

  StackActionExecutor(PApplet pa) {
    p=pa;
    p.registerMethod("draw", this);
    stack = new ArrayList<StackActionObject>();
    pauseFlag=false;
    sync_to_looping=false;  //Pauses based on main sketch state: isLooping()
    progress=0;
  }

  //If sync_to_looping then one can set the pause flag for this class to either true or false
  //Otherwise, the pauseFlag is handled by internal draw and pause should not be generated
  //by user. 
  //TO DO: pauseFlag should be protected and use pause/resume to enable flag. Pause allowed
  //       only when sync_to_looping is false. Conversely, sync_to_looping can be set only 
  //       when the pauseFlag is false  

  void add(int stime, String methodCall) {
    StackActionObject obj=new StackActionObject(stime, methodCall);
    stack.add(obj);
  }

  void runStack() {

    if (!isDone()) {
      StackActionObject obj=stack.get(0);

      if (obj.activated==false) {
        obj.init();
      }

      obj.run(pauseFlag);    
      progress=obj.lapsedTime*1.0/obj.duration;

      if (obj.isDone()) {
        progress=0;
        stack.remove(obj);
      }
    }
  }

  public void draw() {

    if (sync_to_looping) 
      pauseFlag=!p.isLooping();

    runStack();
  }

  boolean isDone() {
    return !(stack.size()>0);
  }

  void pause() {
    if (sync_to_looping==true) {
      println("Pause was not set as user stack is tight to sketch's current lopping state");
      return;
    }
    pauseFlag=true;
  }

  void align_to_sketch() {
    if (pauseFlag==true) {
      println("sync_to_looping can only be set when current user stack is running.");
      return;
    }
    sync_to_looping=true;
  }

  void resume() {
    pauseFlag=false;
  }




  class StackActionObject {


    String methodFun;
    boolean done;
    boolean activated;
    boolean pause;

    int duration;
    int lapsedTime;
    int lastTime;

    StackActionObject() {
      duration=0;
      lapsedTime=0;
      lastTime=-1;  
      done=false;
      methodFun=null;
      pause=false;
    }

    StackActionObject(int _duration, String mc) {
      duration= _duration;
      lapsedTime=0;      
      lastTime=-1;  
      done=false;
      activated=false;
      methodFun=mc;
      pause=false;
    }

    void init() {

      if (duration>0) {
        done=false;
        activated=true;
        lastTime=millis();
        lapsedTime=0;
        run(false);
      }
    }

    void run(boolean pauseRequested) {    

      //P  PR
      //0  0  Normal
      //0  1  Return, does not execute run content
      //1  1  Return
      //1  0

      if (pause && pause!=pauseRequested) {
        pause=pauseRequested;  //When restoring exection
        lastTime=millis();
        return;
      }

      pause=pauseRequested;  //Updating field when pausing

      if (pause==true)
        return;

      lapsedTime += millis()-lastTime;
      lastTime=millis();

      if (lapsedTime > duration-30) {
        done=true;
        method(methodFun);
        return;
      }


      method(methodFun);
    }

    boolean isDone() {
      return done;
    }
  }
}

https://forum.processing.org/two/discussion/24357/is-it-possible-to-adjust-tint-on-a-movie

https://forum.processing.org/two/discussion/17803/how-to-control-tint-of-image-in-processing-with-audio-output-volume

Task 1: Can you draw ellipses on top of your movie and those ellipses to shift from right to left over time?

Task 2: Can you at read the amplitude of the current sound detected by your mic?

Task 3: Can you map this sound amplitude to the height of the screen?

Task 4: Can you generate ellipses every 5 frames (for example) and assign it the current Y position mapped from the detected sound amplitude?

Extra: Paly with the alpha field in color to get some fading effects, or change colors using lerpColor.

Kf

Kf

Hi all,

so for a project with school i had created a temperature sensor using an arduino and breadboard circuit i will leave my code below for the arduino. My issue is that i cannot receive the data from the arduino using processing. I want to create a temperature graph to show on processing.

Arduino code:

#include <LiquidCrystal.h>

int tempPin = 0;
int lightPin = 1;

/*const int rs = 12, en = 11, d4 = 5, d5 = 4, d6 = 3, d7 = 2;
LiquidCrystal lcd(rs, en, d4, d5, d6, d7);*/

LiquidCrystal lcd(12, 11, 5, 4, 3, 2);

int value=0;            
float volts=0.0;      
float temp=0.0;      
float tempF=0.0;
int sensorPin = A0;

void setup() 
{
  pinMode(3,INPUT);      //setting arduino pin3 as input
  Serial.begin(9600);
  lcd.begin(16, 2);
}

void loop()
{
Serial.println(analogRead(0));
 delay(50); 

  //tempReading = analogRead(tempPin);

  int tempReading = analogRead(A0);
  Serial.write(tempReading);
  float tempVolts = tempReading * 5.0 / 1024.0;
  float tempC = (tempVolts - 0.5) * 100.0;
  float tempF = tempC * 9.0 / 5.0 + 32.0;

  lcd.print("TempC             ");
  lcd.setCursor(6, 0);
  lcd.print(tempC);

  int lightReading = analogRead(lightPin);
  lcd.setCursor(0, 1);

  lcd.print("TempF              ");  
  lcd.setCursor(6, 1);
  lcd.print(tempF);
  Serial.print(tempC);
  Serial.println(tempF);
  delay(500);

}


Processing code:
import processing.serial.*;
//import cc.arduino.*;
//Arduino arduino;



//init variables
Serial commPort;
int val;
float tempC;
float tempF;
//float tempVolts;
int yDist;
float[] tempHistory = new float[100];

void setup()
{
 //setup fonts for use throughout the application
//set the size of the window
 size(900,450);
//init serial communication port
 commPort = new Serial(this, Serial.list()[0], 9600);

//fill tempHistory with default temps
 for(int index = 0; index<100; index++)
 tempHistory[index] = 0;
}

void draw()
{
 //get the temp from the serial port
 while (commPort.available() > 0) 
 {
 tempC = commPort.read();
//refresh the background to clear old data
 background(123);

 //draw the temp rectangle
 colorMode(RGB, 100);  //use color mode sized for fading
 stroke (0);
 rect (49,19,22,162);
 //fade red and blue within the rectangle
 for (int colorIndex = 0; colorIndex <= 160; colorIndex++) 
 {
 stroke(160 - colorIndex, 0, colorIndex);
 line(50, colorIndex + 20, 70, colorIndex + 20);
 }
//draw graph
 stroke(0);
 fill(255,255,255);
 rect(90,80,100,100);
 for (int index = 0; index<100; index++)
 { 
 if(index == 99)
 tempHistory[index] = tempC;
 else
 tempHistory[index] = tempHistory[index + 1];
 point(90 + index, 180 - tempHistory[index]); 
 }
//write reference values
 fill(10,10,10);
textAlign(RIGHT);
 text("100 C", 45, 25); 
 text("0 C", 45, 187);
//draw triangle pointer
 yDist = int(160 - (160 * (tempC * 0.01)));
 stroke(0);
 triangle(75, yDist + 20, 85, yDist + 15, 85, yDist + 25);
//write the temp in C and F
 fill(0,0,0);
textAlign(LEFT);
 text(str((tempC)) + " C", 115, 37);

tempF = ((tempC*9)/5) + 32; text(str((tempF)) + " F", 115, 65); } }

This is totally doable. For the sound effect, you could use either amplitude over time or frequency over time. The latter requires using FFT function to extract the frequency components of each sound buffer which is concurrently being played.

If you are a beginner, i will stick to the amplitude vs. time concept as it is easier to implement. I dunno how much experience you have in processing. So I encourage you to write your first sketch and demonstrate what can you do and show what parts you require some guidance.

For this project, you need to use:

• Minim: Read the input from a mic or play a sound file and access the current sound buffer. You need to also need to get the amplitude of the current buffer (all provided by minim) which it is useful to detect sound. When you detect some sound, you can draw it, exactly as demonstrated in the video you provided.
• Key terms to review in Processing: PGraphics(), mask(), tint(), lerpColor() and map()
• You need the video library to load and play your video.
• You will also need to have an array list to keep track of the objects drawn in the sketch
• Finally you will need to work with classes to simplify the processing of color over time. This is related to the color fading effect, possibly and effect of using time+a pgraphics buffer+tint.

Check the reference for those key terms and don't forget to check the provided examples accessible through the PDE.

Kf

myMovie 1 (should be looping). When something enters it switches to myMovie 2. When the person leaves/and when the end of myMovie2 has been reached, it should play myMovie3 at full length, regardless if something enters or leaves the area. after myMovie3 happened it should switch back to the start of myMovie 1.

Keep in mind that if you are planning to extend your logic, it currently looks like this:

The background movie loops. When an event happens, a sequence of one or more movies plays, then the background restarts.

...which is, slightly more abstract:

Here is a list of movies that lead to other movies.

...with looping as a special case handling of bgMovie -> bgMovie.

One way to approach that in general is a queue like this:

0: bgMovie, 0 (infinite loop)

...and when an event happens you add things to the front, like this:

0: movie2, 45 // now playing
1: movie3, 15
2: bgMovie, 0

When a movie finishes playing, you remove it from the queue and start playing the next movie.

0: movie3, 15  // now playing
1: bgMovie, 0

0: bgMovie, 0  // now playing

Now you can add really complex behaviors to your movie system easily by just adding / removing queued movies -- you don't have to program a set of special rules for each transition. If events happen to change the remaining duration of a movie, or remove it, or switch what comes next, you can express all those things concisely as operations that edit queue items. Common ones might be:

• Replace everything in the queue
• Add things after the current item
• Remove all items from the queue but the last one

If you want to add complex behaviors like cross-fading, you don't have to create a cross-fade for every single possible transition -- you can just create one cross-fade behavior that acts on the current and next items in the queue. Et cetera.

@ruansouza

Beautiful design -- I enjoy the lighting on the surface.

If you are looking for suggestions for enhancements, one thing you might consider doing is adding a behavior if the mouse is not over / interacting with the artwork.

For example, after a certain amount of time a virtual mouse could pick up the spotlight and perform a random walk. And / or the light could fade between colors -- fading to blue when computer controlled, fading to red when the user's mouse is interacting.

^ the numbers look all wrong. if > 1 then make it .1? (also, constrain())

ok, am tidying up the code, but not had any luck with the trails yet. your Particle class holds particles but the FluidSolver arrays are also effectively particles and the two things are at odds with each other. the Fluid fading might be upsetting the trail fading too.

Hello, sorry if the question title is a bit vague, will try to explain what I want to achieve in more detail.

Basically, imagine, there are a lot of things happening in the sketch; particles, text, objects etc, all of them animated. I want them all to leave a blurred trail of them behind, perhaps of the last 30, 40 frames and slowly fading. Does this can be managed through a few simple lines in draw ( maybe like delay() ) or would I have to work on each element in the sketch separately?

I hope my question was clear enough!

Thanks very much.

I'm having some trouble with my text. I cant get them all to fade in at the same rate and I don't know what im doing wrong. After t[0], all the other pieces of text seem to just appear rather than fading in like I want them to. Would really appreciate some help!

import ddf.minim.*;

Minim minim;
AudioPlayer track;



PFont sourceSans, helvet;
float textAlpha = 0;

String []t = {
 "43.8 billion people in the U.S. \n suffer from mental illness",
"Anxiety disorders affect 40 billion people, \n or 18.1%",
"There is a scarce \n but growing market for \n products, designs, \n and tools that \n combat mental health.",
"What can we, \n as designers do?"
};


void setup() {
  size (700, 600);
  noCursor();


sourceSans = createFont ("SourceSansPro-Light", 10);
helvet = createFont ("Helvetica-Bold", 40);


  minim = new Minim(this);
  track=minim.loadFile("heart.mp3");
  track.loop();

} 



void draw() {
  background(0);
  strokeWeight(3);




  //(96,143,193) blue
  //(193,23,49) red

  translate(0, 250);
  for (int i = 0; i< track.bufferSize()-1; i++) {             
    float x1 = map( i, 0, track.bufferSize(), 0, width );  //x1 values remapped to reach width
    float x2 = map( i+1, 0, track.bufferSize(), 0, width );


    if (track.left.get(i) == 0) {                          //stroke color
      stroke(96, 143, 193);
    } else if (track.left.get(i) >0) {
      stroke(193, 23, 49);
    } else if (track.left.get(i) < 0) {
      stroke(193, 23, 49);
    }


    line( x1, track.left.get(i), x2, track.left.get(i) *300);//draw a line from one buffer position to the next for both channels
                                                             //series of vertical lines 
  }


  translate(0,-300);
  textFont(sourceSans);
  fill(255,textAlpha);

  if (millis() >=5000) {
  text(t[0], 100,100);
  textAlpha++;
}

if (millis() >=10000) {
  text(t[0], 100,200);
  textAlpha++;
}

if (millis() >= 12000) {
  text(t[2], 100,350);
  textAlpha++;
}


textSize(20);
if (millis() >= 14000) {
  text(t[3], 500,500);
  textAlpha++;
}

}

@HANkae -- you may also be interested in this old discussion of several different approaches to fading. Note that this is for continuous progressive fade-out rather than fade-in:

• https://forum.processing.org/two/discussion/13189/a-better-way-to-fade

I think you are starting at the wrong end. You have tried to get the text to fade, but I think it would be easier to start by making the text appear and disappear then later fade in and out.

If you have an int that keeps track of which line of text you're on, and a boolean to remember if you're fading in or out, you can just check: 1. Am i fading in or out? 2. Fade the number I am on in or out according to 1

Yes I know how how to display a line of text. I want the text to display over a sketch of mine and I'm just struggling how to format my code - whether to make a class and how to work that into my main code.

This is my main code:

PFont sourceSans;

float t;
float theta, theta2;
int maxFrameCount = 150;
float numRot = 25;
float numOne = 50;
float numTwo = 150;

int a = 49;
int b = 44;

void setup() {
  size(700, 600);
  noFill();
  strokeJoin(ROUND);
  strokeCap(ROUND);
  frameRate(35);

 //text
  textAlign(CENTER);
  sourceSans = createFont ("SourceSansPro-Light", 10);
  textFont (sourceSans);


}

void draw() {
  background(255);
  translate(width/2, height/2);

  t = (float)frameCount/maxFrameCount;
  theta = TWO_PI*t;                    //angle of rotation for wave1
  theta2 = TWO_PI*t*2;                  //angle of rotation for wave2

  for ( int x= -500; x <= 500; x+= 5) {

    float offSet = (x*a); 
    float offSetRot = (x*b); 
    float w1 = map(sin(-theta+offSet), -1, 1, -numOne, numOne);        //wave1 along sine curve
    float w2 = map(cos(-theta2+offSet), -1, 1, -numTwo, numTwo);        //wave2 along cosine curve
    float rotValue = map(sin(-theta+offSetRot), -1, 1, numRot, -numRot);

    stroke(171,232,242);        //stroke color changes according to mouse location
    strokeWeight(0.5);
    waves(x, 0, w1, w2, rotValue);


  }

  //TEXT

}


void waves(float xPos, float yPos, float s1, float s2, float rot) {        //code waves of repeating quads
  pushMatrix();
  translate(xPos, yPos);
  rotate(TWO_PI*(rot/300));
  quad( mouseY/2, 0+numOne, s2, 0, mouseY/2, mouseY/2, 0, s1);     
  popMatrix();
}

and I just to start off, I made a separate sketch of just my text fading in and out:

float timeInterval;
float timePast;

int textAlpha = 100;
int textFade = 2;

PFont sourceSans;

void setup() {
size (700,600);
timePast = millis();
timeInterval = 3000.0f;
textAlign (CENTER);
sourceSans = createFont ("SourceSansPro-Light", 10);
textFont (sourceSans);
}

void textFade() {
  if (millis () > timeInterval + timePast) {
    timePast = millis();
    textFade *= -1;
  }
  textAlpha += textFade;
}



void draw () {
  background (255);
  textFade();
  textSize (10);
  fill (0, textAlpha);
  text ("Science has proven that\n certain forms, colors, and shapes\n can soothe the human mind.", 350, 100);
  text ("With this knowledge, \n what kind of designs can be created \n to address mental health?", 350, 200);
  text ("43.8 billion people in the U.S. \n suffer from mental illness", 350, 300);
  text ("We must consider the ways \n we can design and create \n to raise awareness for mental health.", 350, 400);

}

I am mostly confused about how to make this into a class and also, whether I would use the mouseClicked() function in my class or in my main code in void draw().

@UsamaRehan -- GoToLoop's example demonstrates the fading background effect that Kajuna suggested -- try changing BG to see what is happening. This works great as long as the fade rate is sufficient, and as long as there are no non-fading objects -- in other words, if everything leaves trails.

If not, you can put only things that leave trails onto a separate buffer, then copy it to the canvas and draw non-trailing things on top of it. At a certain point, however, this isn't really less complex than implementing object trails as location histories.

Looks fine to me. Each fad object represents a dot that is fading in. Since each dot has many things to know about itself - position, size, color, how much it has faded in - it makes a lot of sense to have a class for them (instead of many arrays of variables). :D

thank you! pls look down how it fades now... but i want each dot fading in seperatly, from its appearance, not all at the same time until it's finished...

int fade=0;

void setup(){
    size(800, 600);
  smooth();
}

void draw(){

  pattern();
}

void pattern(){
    if (fade < 255){
    fade ++;
      }else{
    fade=255;
  }
  fill(0,fade);
  noStroke();
  ellipse(random(width),random(height),11,11);
}