Hi

I currently have a setup with Processing running on Raspberry Pi, sending artnet messages across multiple universes to some Teensy's to do LED lighting animations using @cansik 's artnet library. I'm running into serious framerate issues - with drawing animations to screen, then reading from screen into a pixel buffer and then sending messages over artnet, it runs at approximately 7fps.

I know that I can run the whole thing headless, or by not drawing to screen, my fps bumps up to 45-50fps, which is fine, but it limits my ability to make content through creating video or animations and filling my pixel buffer from there. Does anyone know of ways to do this maybe via a virtual screen buffer? The workflow would be create content and read pixels to a pixel buffer from screen during development, and then switch to a virtual buffer when running live.

Code below. Setting the writeToScreen boolean to false, switches the code to writing directly to the pixel buffer.

import ch.bildspur.artnet.*;
import processing.serial.*;

//___________________________
// setup pattern
boolean readFromScreen = false;
boolean writeToScreen = true;
Pattern patterns[] = {
  new TraceDown(), new TraceDown(), new TraceDown(), new TraceDown(), new FadeTrace(), new TraceDown(), 
  new TraceDown(), new TraceDown(), new TraceDown(), new TraceDown(), new FadeTrace(), new TraceDown(), 
  new TraceDown(), new TraceDown(), new TraceDown()
};

//___________________________
// setup artnet 
ArtNetClient artnet;
int numUniverse = 15;
int numChannels = 510;
byte[] dmxData = new byte[numChannels];
ArtnetDMX Artnetclass = new ArtnetDMX();

//___________________________
// stetup serial
Serial port;  // Create object from Serial class
String data = "0 0";     // Data received from the serial port
int[] nums;
byte[] inBuffer = new byte[4];

int windSpeed;
int windDir;
float windSpeedCal;

//___________________________ 
// setup leds
int numLeds = 88;
color led[][] = new color[numChannels/3][numUniverse];
int size = 2;
color[][] pixelBuffer = new color[numChannels/3][numUniverse];

//___________________________
// setup timer
long[] ellapseTimeMs = new long[numUniverse];
long[] ellapseTimeMsStartTime = new long[numUniverse];
float durationMs = 3000;
boolean direction = true; 


//_________________________________________________________
void setup()
{

  size(300, 80);
  colorMode(HSB, 360, 100, 100);
  textAlign(CENTER, CENTER);
  textSize(20);

  // create artnet client without buffer (no receving needed)
  artnet = new ArtNetClient(null);
  artnet.start();

  // create port
  //String portName = Serial.list()[0];
  //port = new Serial(this, portName, 2000000);
}

//_________________________________________________________
void draw()
{
  // create color
  int c = color(frameCount % 360, 80, 100);

  background(0);
  stroke(0);

  //change direction
  if (ellapseTimeMs[0]> durationMs) direction = !direction;
  // choose pattern to run on LED strip
  // int pattern = 0;  
  for (int i = 0; i <numChannels/3; i++) {
    for (int j = 0; j < numUniverse; j++) {
      if (ellapseTimeMs[j]> durationMs) {
        ellapseTimeMsStartTime[j] = 0;
      } else if (direction==true) {
        float position = i/(float)(numChannels/3);
        float remaining = 1.0 - ellapseTimeMs[j]/durationMs;
        if (readFromScreen == false){
          pixelBuffer[i][j] = patterns[j].paintLed(position, remaining, led[i][j]);
        } else {
          led[i][j] = patterns[j].paintLed(position, remaining, led[i][j]);
        }

      } else {
        float position = 1.0 - (i/(float)(numChannels/3));
        float remaining = ellapseTimeMs[j]/durationMs;
        if (readFromScreen == false){
          pixelBuffer[i][j] = patterns[j].paintLed(position, remaining, led[i][j]);
        } else {
          led[i][j] = patterns[j].paintLed(position, remaining, led[i][j]);
        }
      }
    }
  }

  if (writeToScreen == true) {
    showPattern();
  }

  if (readFromScreen == true){
    updatePixelBuffer();
  } 

  Artnetclass.updateArtnet(artnet, dmxData, pixelBuffer);
  //oldUpdateArtnet();

  updateEllapseTime();
  println(frameRate);

  // show values
  //text("R: " + (int)red(c) + " Green: " + (int)green(c) + " Blue: " + (int)blue(c), width-200, height-50);
}


// clock function
void updateEllapseTime() {
  for (int j = 0; j < numUniverse; j++) {
    if (ellapseTimeMsStartTime[j] == 0) {
      ellapseTimeMsStartTime[j] = millis();
      ellapseTimeMs[j] = 0;
    } else {
      ellapseTimeMs[j] = millis() - ellapseTimeMsStartTime[j];
    }
  }
}

// storing pixels from screen
void updatePixelBuffer() {
  for (int i = 0; i < numChannels/3; i++) {
    for (int j = 0; j < numUniverse; j++) {
      // read screen pixels and assign to pixel buffer
      //pixelBuffer[i][j] = get(i*size/2+(size/4), j*size+size/2);
      pixelBuffer[i][j] = get(i*size +size/2, j*size+size/2);
      fill(pixelBuffer[i][j]);
      stroke(pixelBuffer[i][j]);
      rect(50+i, 50+j, 1, 1);
    }
  }
}

// draw pattern on screen
void showPattern() {
  for (int i = 0; i < numChannels/3; i++) {
    for (int j = 0; j < numUniverse; j++) {
      // show only pixel buffer if not reading from screen
      if (readFromScreen == false){
          fill(pixelBuffer[i][j]);
        } else {
          fill(led[i][j]);
        }
      rect(i*size+size, j*size+size, size, size);
    }
  }
}

Thanks a lot @kfrajer

1. This changes one video, calling the function newvideo (in here I used the thread function but I don't think is doing anything)

2. The alphai is the alpha value of the object, so it goes up or down to create a fadein/fadeput effect every time a new video is called.

In general the script works well, is just that the moment the newvideo() function is called sometimes there's a freezing in the other videos --or even stop. It should be some memory issue but I limited the preloaded videos and the videos shown and the script works better. The thing is that the script running won't take more than 300 Mb in memory (an there's much more available), it should work better, isn't?

Not sure if doing this through a different thread will help. If you are loading the videos, I would say that assigning the videos, the way you do, should work, assuming your computer can handle loading these many videos.

I have to say I am not sure your approach works at the end. You are assigning VideoM objects from your video list but I don't think you are ensuring the same video is not picked. Why is this important? Well, because you are calling jump(). If two VideoM objects are handling the same video, you are calling jump on the same handle. it is very likely only the last jump is applied and both handles would display the same video.

I have to say your code comments are missing? It is hard to understand what you are trying to accomplish in certain parts of your code. Adding comments would help. Also, the name of your arrays are not the best. For this bit of code, the array functionality is lost between the lines. Using better names like masterVideolist would make your code easier to follow.

I have two questions:
1. When the timer ends, do you change one video or all the videos?
2. The display function manages some tinting. What does it do? I can see the alphai counter going up and down but I didn't understand what you want to do.

I have added some code below but it is not a solution. I just want to capture some changes I did and I will change it as soon as you answer my questions.

Kf

import processing.video.*;

final int NSHOWVIDEOS=5;

File path; 
String[] files;
int numfiles = 0;
int timer = -5000;
int tcontrol= 2000;

boolean bStop, bColor=true;
boolean bSave=false, bVidO=false;


VideoM[] v = new VideoM[NSHOWVIDEOS];
Movie[] videoStack;

void setup() {
  size(1920, 1080);
  frameRate(60);
  files = files(); 
  numfiles = files.length;
  if (numfiles>11) numfiles=11;

  loadvideos();  //Inits videoStack

  for (int i = 0; i < NSHOWVIDEOS; i++) {
    v[i] = new VideoM(i);
  }
}


void draw() {

  background(0);
  for (int i = 0; i <NSHOWVIDEOS; i++) {
    v[i].display();
  }

  if ((millis() - timer) > tcontrol) {
    thread("newvideo");   
    timer = millis();
    tcontrol= int(random(2, 6))*1000;
  }
}

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


void keyPressed()
{
  int k = keyCode;

  // reset all videos
  if (key == 'n' || key == 'N') {
    newset();
  }
}  




//=====================================================
void newset() {
  for (int i = 0; i < NSHOWVIDEOS; i++) {
    println(i);
    v[i].newvid();
  }
}

//=====================================================
void newvideo() {
  int i = int(random(NSHOWVIDEOS));
  //v[i].nuevovid(this);
  v[i].cambiavid();
}

//=====================================================
void loadvideos() {

  videoStack = new Movie[numfiles];

  for (int i=0; i<numfiles; i++) {
    String video= files[i]; //files[int(random(numfiles))];
    videoStack[i] = new Movie(this, video);
    videoStack[i].play();
    videoStack[i].pause();
    println ("Loading ", video);
  }
}


//=====================================================
// load files in data
String[] files() {
  // The data path of the folder to look in (write your own)
  java.io.File folder = new java.io.File(dataPath(""));

  // let's set a filter (which returns true if file's extension is .jpg)
  java.io.FilenameFilter pngFilter = new java.io.FilenameFilter() {
    public boolean accept(File dir, String name) {
      return name.toLowerCase().endsWith(".mp4");
    }
  };

  // list all the folders inside the main directory
  String[] listFolders = folder.list(new java.io.FilenameFilter() {
    public boolean accept(File current, String name) {
      return new File(current, name).isDirectory();
    }
  }
  );

  // list the files in the data folder, passing the filter as parameter
  String[] filenames = folder.list(pngFilter);

  return(filenames);
}


//=====================================================

class VideoM {

  Movie m;
  String video;

  int x, y, w, h;
  int alpha;
  int alphai;
  int fadeout=0;
  int idx;

  VideoM(int aidx) {

    idx=aidx;
    newvid();

  }

  void newvid() {  
    m=null;
    int j=idx;//int(random(numfiles));
    println("cambio: ", j);
    m = videoStack[j];
    m.loop();
    genera();
    m.jump(random(m.duration())); 
    println(Thread.currentThread());
  }

  void genera() {
    x=int(random(50, width/2+width/4)); 
    y=int(random(50, height/2+height/4)); 
    w=int(random(280, 820));
    h=int(w/1.88);
    alpha=int(random(100, 255)); 
    alphai=0;
  }

  void display() {
    tint(255, alphai);
    if (fadeout==0) {
      alphai++; 
      if (alphai>alpha) alphai=alpha;
    } else {  
      alphai--; 
      if (alphai<0) {
        alphai=0;
        fadeout=0;
        this.newvid();
      }
    }

    if (frameCount > 1) { 
      //image(m, x, y, w, h);
      image(m, x, y);
    }
  } 

  void cambiavid() {
    fadeout=1;
  }
}

Hello! This script only requires a bunch of .mp4s in the data folder. You'll see a collage of 9 videos (or duplicates) in different positions and transparencies. The thing runs ok but even pre-loading the videos at the beginning every time there's a change/swap in one of the videos (around every 4 seconds) the whole thing freezes for a sec, sometimes (try to use mp4s of different sizes).

I tried to use the thread() command in the switching of the videos but nothing happened. I put a println to see the thread but alway show the main thread, I really don't know if I'm doing this ok..

Thanks a LOT for any help!

import processing.video.*;

File path; 
String[] files;
int numfiles = 0;
int timer = -5000;
int tcontrol= 2000;
int numVideos=9;

VideoM[] v = new VideoM[numVideos];
Movie[] vv;

void setup(){
  size(1920, 1080, P2D);
  frameRate(60);
  files = files(); 
  numfiles = files.length;
  if (numfiles>11) numfiles=11;
  loadvideos();

  for(int i = 0;i < numVideos;i++){
     v[i] = new VideoM();
  }
}


void draw() {

  background(0);
  for(int i = 0; i <numVideos; i++){
     v[i].display();
  }

  if ((millis() - timer) > tcontrol)  {
    thread("newvideo");   
    timer = millis();
    tcontrol= int(random(2,6))*1000; 
}
}


void loadvideos(){

 String video;
 vv = new Movie[numfiles];

 for (int i=0; i<numfiles; i++){
   video= files[int(random(numfiles))];
   vv[i] = new Movie(this, video);
   println ("Loading ", video);
 }
}

class VideoM {

 Movie m;
 String video;

 int x;
 int y;
 int w;
 int h;
 int alpha;
 int alphai;
 int fadeout=0;

 VideoM() {
  genera();
  println(numfiles);
  m = vv[int(random(numfiles)) ];
  m.loop();
  // m.volume(random(0.4,0.6));
  // m.speed(random(0.6,1.0));
  m.jump(random(m.duration()));  
  //m.play(); 
 }

 void genera(){
    x=int(random(50, width/2+width/4)); 
    y=int(random(50, height/2+height/4)); 
    w=int(random(280,820));
    h=int(w/1.88);
    alpha=int(random(100,255)); 
    alphai=0; 
 }

 void display(){
   tint(255, alphai);
   if (fadeout==0) {
     alphai++; if (alphai>alpha) alphai=alpha;
   } else {  alphai--; if (alphai<0) {alphai=0;fadeout=0;this.newvid();}
     }

   if (frameCount > 1) { image(m, x, y, w, h); }
 } 

 void cambiavid(){
   fadeout=1;
 }

void newvid() {  
   m=null;
   int j=int(random(numfiles));
   println("cambio: ", j);
   m = vv[j];
   m.loop();
   genera();
   m.jump(random(m.duration())); 
   println(Thread.currentThread());
 }
}  

void newset(){
  for(int i = 0;i < numVideos;i++){
    println(i);
    v[i].newvid();
  }
}

void newvideo(){
  int i = int(random(numVideos));
  //v[i].nuevovid(this);
  v[i].cambiavid();
}

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

boolean bStop,bColor=true;
boolean bSave=false,bVidO=false;
void keyPressed()
{
  int k = keyCode;

  // reset all videos
  if (key == 'n' || key == 'N') {
    newset();
    }

}  


// load files in data

String[] files(){
// The data path of the folder to look in (write your own)
java.io.File folder = new java.io.File(dataPath(""));

// let's set a filter (which returns true if file's extension is .jpg)
java.io.FilenameFilter pngFilter = new java.io.FilenameFilter() {
  public boolean accept(File dir, String name) {
    return name.toLowerCase().endsWith(".mp4");
  }
};

// list all the folders inside the main directory
String[] listFolders = folder.list(new java.io.FilenameFilter() {
  public boolean accept(File current, String name) {
    return new File(current, name).isDirectory();
  }
});

// list the files in the data folder, passing the filter as parameter
String[] filenames = folder.list(pngFilter);

return(filenames);
}

The images are just black and white photos that are in the data folder. I want to just change the color using tint without having to re-draw them each time. The images are 2233 × 1596 px and I calling them from the data folder.

And yes, the fades should be the same duration.

cat2 = loadImage(“cat2.png");

You have a smart quote in this code line that crashes the sketch -- and exposes a bug in the autoformatter.

How can we test this without the cat images -- can you say something about them (size -- or upload / link)? Does the sketch need these images to demonstrate your problem, or could it just use colored squares?

Should the fades all last the same duration?

I didn't look at your code but this post is relevant: https://forum.processing.org/two/discussion/26558/fade-to-black-at-irregular-frequence-how-to-loop-on-the-last-fade#latest

kf

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

Hello, I was able to make my sound play and stop with Kinect but it doesn't loop or fade out. I want my sound to continue playing with the video and just fade in if the interaction is activated and fade out when the interaction is no longer happening. Also, I want my sound to loop.

     import processing.sound.*;
     import org.openkinect.processing.*;
     import processing.video.*;


    Movie vid;
    Movie vid1;
    SoundFile sound1;
    SoundFile sound2;
    Kinect2 kinect2;

    //PImage depthImg;
    //PImage img1;

    //pixel
    int minDepth=0;
    int maxDepth=4500; //4.5m

    boolean off = false;

    void setup() {
      size(1920,1080);
      //fullScreen();
      vid = new Movie(this, "test_1.1.mp4");
      vid1 = new Movie(this, "test_1.1.mp4");
      sound1 = new SoundFile(this, "cosmos.mp3");
      sound2 = new SoundFile(this, "NosajThing_Distance.mp3");

      //MOVIE FILES
          //01.MOV
          //03.MOV
          //02.mov (File's too big)
          //Urban Streams.mp4
          //HiddenNumbers_KarinaLopez.mov
          //test_w-sound.mp4
          //test_1.1.mp4
          //test005.mov
      //SOUND FILES      
          //cosmos.mp3
          //NosajThing_Distance.mp3

      vid.loop();
      vid1.loop();
      kinect2 = new Kinect2(this);
      kinect2.initDepth();
      kinect2.initDevice();
    //depthImg = new PImage(kinect2.depthWidth, kinect2.depthHeight);
    //img1 = createImage(kinect2.depthWidth, kinect2.depthHeight, RGB);
    }

    void movieEvent(Movie vid){
      vid.read();
      vid1.read();
    }


    void draw() { 
      vid.loadPixels();
      vid1.loadPixels();

      //image(kinect2.getDepthImage(), 0, 0);

        int[] depth = kinect2.getRawDepth();

      float sumX=0;
      float sumY=0;
      float totalPixels=0;

        for (int x = 0; x < kinect2.depthWidth; x++){
          for (int y = 0; y < kinect2.depthHeight; y++){
            int offset = x + y * kinect2.depthWidth;
            int d = depth[offset];

            if ( d > 0 && d < 1000){
          //    //video.pixels[offset] = color(255, 100, 15);
          sumX +=x;
          sumY+=y;
          totalPixels++;
             brightness(0);
            } else {
          //    //video.pixels[offset] = color(150, 250, 180);
              brightness(255);
            }      }
        }
    vid.updatePixels();
    vid1.updatePixels();

    float avgX = sumX/totalPixels;
    float avgY=sumY/totalPixels;


    //VID 01 - Screen 01
    if (avgX>300 && avgX<500){
    tint(255, (avgX)/2);
    image(vid1, 1920/2, 0);
    if(sound2.isPlaying()==0){
    sound2.play(0.5);
    sound2.amp(0.5);
    }
    }else{
    tint(0, (avgX)/2);
    image(vid1, 1920/2, 0);
    if(sound2.isPlaying()==1){
     delay(1);
    //IT DIMS THE VOLUME TO 0 BUT IT DOESN'T GO BACK TO VOLUME 0.5 [sound2.amp(0.5);]
     sound2.amp(0);
     }
    }
     //VID 02 - Screen 01
     if (avgX>50 && avgX<200){
    tint(255, (avgX)/3);
    image(vid, 0-(1920/2), 0);
    }else{
       tint(0, (avgX)/3);
       image(vid, 0-(1920/2), 0);
     }
    }

I've been trying to do a project that fade in/out a series of backgrounds. These backgrounds are made of images and they fade/in and out in a sequence showing a text in between. But at the same time, there's an animation of stars playing in the background. The problem is that when the fade of the backgrounds are happening, the stars get slower. I want to fade the backgrounds and keep the stars with the same speed. This is what I have:

     var particles = [];
        var fundos = [];
        var glifos = [];
        var img;
        var logotri;
        var teste;
        var m = 0;
        var loop;
        var alphafade = 255;
        var idlogo= 255;
        var idglifo = 0;


        function setup() {
          cvn = createCanvas(windowWidth, windowHeight);
          logotri = loadImage("logofinal.png");
          teste = loadImage("primeira-tela-1.png");
          loop = 0;

          for (var i = 0; i < 8; i++){
            fundos[i] = loadImage("primeira-tela-" + (i+1) + ".png");
          }

          for (var i = 0; i < 7; i++){
            glifos[i] = loadImage("Glifo" + (i+1) + ".png");
          }

          for (var i = 0; i < 256; i++) {
            p = new Estrelas();
            particles.push(p); // Criação do vetor das estrelas do fundo
          }
        }

        function draw() {
          background(fundos[0]);

          if (m == 0) { //Página inicial estática
            estrelas();
            image(logotri, windowWidth / 3, windowHeight / 3);
          }

          else if (m == 1){ //Fadeout do logo
            tint(255, alphafade);
            image(logotri, windowWidth / 3, windowHeight / 3);
            estrelas();
            fadeout(2, 2);
            noTint();
            }

          else if (m == 2){ //Fadein do glifo 1 + mudança de fundo
            tint(255, alphafade);
            image(fundos[1], 0,0);
            image(glifos[0], windowWidth / 2, windowHeight / 2, 100, 100);
            fadein(3, 3);
            estrelas();
            noTint();

          }

          else if (m == 3){
            image(fundos[1], 0,0);
            tint(255, alphafade);
            image(glifos[0], windowWidth / 2, windowHeight / 2, 100, 100);
            fadeout(4, 2);
            estrelas();
            noTint();


          }
            else if (m == 4){
            image(fundos[1], 0,0);
            texto('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent posuere sapien vitae vulputate aliquam.');
            estrelas();
            fadein(5, 1);

          }
          else if (m == 5){
            image(fundos[1], 0,0);
            texto('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent posuere sapien vitae vulputate aliquam.');
            estrelas();
            fadeout(6, 2);
          }

          else if (m == 6){
            image(fundos[1], 0,0);
            tint(255, alphafade);
            image(fundos[2], 0,0);
            image(glifos[1], windowWidth / 2, windowHeight / 2, 100, 100);
            estrelas();
            fadein(7, 1);
            noTint();
          }

          else if (m == 7){
            image(fundos[2], 0,0);
            tint(255, alphafade);
            image(glifos[1], windowWidth / 2, windowHeight / 2, 100, 100);
            estrelas();
            fadeout(8, 1);
            noTint();
          }


          else if (m == 8){
            image(fundos[2], 0,0);
            estrelas();
            }
          }

        //Função que controla o movimento das estrelas do fundo
        function estrelas() {
          for (var i = 0; i < particles.length - 1; i++) {
            if (particles[i].getalfa() < 5) {
              particles[i].reset(); //Quando o alfa das particulas está quase apagando, ele reseta a particula
              break;
            }
          }

          for (i = 0; i <= particles.length - 1; i++) {
            particles[i].update();
            particles[i].show(); //Mostra as particulas se movendo
          }
        }

        //Função que controla o fadeout das imagens e passa pro proximo nivel de animação
        function fadeout(proximonivel, speed){
          alphafade = alphafade - speed;
          if (alphafade < 0)
            {
                alphafade = 0;
                m = proximonivel;
              }
        }

        //Função que controla o fadein das imagens e passa pro proximo nivel de animação
        function fadein(proximonivel, speed){
          alphafade = alphafade + speed;
          if (alphafade > 255)
            {
                alphafade = 255;
                m = proximonivel;
              }
        }

        //Função que controla no início se houve movimento na roda do mouse
        function mouseWheel(event) {
          if (event.delta != 0 && loop == 0) {
            m = 1;
            loop = 1;
          }
        }

        //Função que controla no inicio se houve clique do mouse
        function mouseClicked(){
          if ( loop == 0){
            m = 1;
            loop = 1;
          }
        }

        //Função que mostra texto e controla as propriedades
        function texto(string){
          tint(255, alphafade);
          fill(255, alphafade);
          textSize(20);
          textAlign(CENTER, CENTER);
          text(string, windowWidth / 2, windowHeight / 2);
          noTint();
        }

        class Estrelas {

          constructor() {
            this.x = random(0, 1200);
            this.y = random(0, 800);
            this.vx = random(-1, 1);
            this.vy = random(-2, -1);
            this.alfa = random(0, 100);
          }

          getalfa() {
            return this.alfa;
          }

          reset() {
            this.x = random(0, 1200);
            this.y = random(0, 800);
            this.vx = random(-1, 1);
            this.vy = random(-2, -1);
            this.alfa = 100;


          }

          update() {
            this.x += this.vx;
            this.y += this.vy;
            this.alfa--;

          }

          show() {
            fill(255, 255, 255, this.alfa);
            noStroke();
            ellipse(this.x, this.y, 5, 5);
          }

        }

I have tried a lot of things but i can't make it work.

hi! i'm new to p5 and coding in general and i'm having some trouble completing a project because i still lack the knowledge to fill in the gaps. what i want to do seems kind of simple but i don't really know if it is, i've tried looking for tutorials/examples but they either don't work in the online p5 processor (i have sublime, too, but it's not running a lot of the files i'm trying to work on for some reason?) or i don't know exactly how to look it up.

ok, so.

1) i have some text that follows the mouse around on the canvas, but i'd like it to leave a trail (preferably a fixed one but doesn't matter if it fades tbh, just whatever is simplest to do). i figured the code would be something along the lines of "if mouseX and mouseY increase, the quantity of the text increases". i tried it by doing the following:

if (mouseX++,mouseY++){i++}
for(i=1;i<10;i++)
  textFont("courier new")
text("text",mouseX,mouseY)

but the mouseX and mouseY variables start moving on their own rather than increase the number of lines when i move the cursor. (i kinda realize some mistakes here but it's the best i could come up with. i only started w js like a week ago so pls be patient w me)

2) how can i make an object rotate on its axis as an animtion rather than a fixed transform of its position?

and finally (and probably the most complicated. or maybe not and im just really inexperienced lol)

3) the project i'm working on is a sort of interactive story. i've made a bunch of separate files with different code each. is there a way to link them, whether it is to put them all on the same file or through the use of html? i have a little experience with hypertext narratives so thats sorta what i'm going for, but it could be just pushing the spacebar or something to get to the next part if turning an actual object into a link is too difficult.

i'm super confused about everything and i'd really really really appreciate some help even if it's with just one of these things. thanks a lot in advance!!

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

it works the only thig is that when it bounces off it needs to fade out but if i put an AlphaValue all the balls fade from the beginning not just when they touch the ground

You can have a fade or radius variable inside the class

Now use the radius variable with ellipse() command

Let’s make it a float variable radius = 7 : float radius = 7;

After ellipse(...) say radius = radius - 0.3; or even smaller

When radius <= 0 you could mark the ball as dead using a boolean variable isDead = true; inside the class

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..**

Sure

Make a class Ball and an array of it (before setup ())

See tutorial objects

Then fill the array in setup

Move and display array in draw

See examples on movement and gravity

For fade see opacity in command fill

Then show your entire code and tell us what you have problems with

Chrisir

Confirmed. I just tried again. I googled images/horse and took the first one (horse.jpg). I tried java mode, and it faded perfectly. In Android mode nothing happens. I took it to GIMP and exported it with an alpha channel as horsewa.png. Nothing happend. I then opened the layer dialogbox and gave it 1% transparency and exported again as horsewa1.png. Now it perfectly fades. I tried kfrajer's code (thank you for that) but it crashes because it can't find the images. Trying to open the image link in the browser it really doesn't download. I'll try to substitute the images later, but meanwhile I used the P2D renderer with code above. Now it fades even the horse.jpg, but someting strange happens. It doesn't obey my code anymore, it just fades away in total white!

This time I used dropbox and made it public. Hope it works. https://www.dropbox.com/s/8d6dvqip1lsuo1d/horse.jpg?dl=0 https://www.dropbox.com/s/n2771ucpb4tccfd/horsewa.png?dl=0 https://www.dropbox.com/s/q94pls265cgwvl5/horsewa1.png?dl=0

Here is also a link for the ScrollView topic.

https://www.dropbox.com/s/1jdr2cncw7tmlbi/panorama.jpg?dl=0

Currently I have create a snowflakes class file, but unable to make it into an array to redraw it randomly.

tes[] flakes = new tes[100];

void setup() {
  size(600, 400);
  background(255);
  stroke(0);
  flakes[i] = new tes();
}

void draw() {
  background(255);
  //tes flakes = new tes();
  y = y + speed;
  if (y>height+100) {
    y = -10;
    L = 3; //Set value of L back to 3 when it redraw.
  }
  //flakes.animate();
  //flakes.display();
  for (int i =0; i<100; i++) {
    flakes[i].draw();
    flakes[i].mouseClicked();
  }
}


----------------------------------------------------
  tes class file


int SD = 5, sd = SD/2;
float d = sd;
float angle = PI/3;
String state = "[F+F+F+F+F]";
String ruleF = "F-F++F-F";
float L = 3;
float fade = 1;
float speed = random(1, 5);
float x = random(0, 600);
float y = 100;

public class tes {

  void draw() {
    pushMatrix();
    fade++;
    stroke(fade, 255);
      for (int k = 0; k < L; k++) {
        state = substitute(state, ruleF);
      }
    }
    single();
    popMatrix();
  }

  void mouseClicked() {
    L=L-1;
  }

  void single() {
    translate(x, y);
    for (int i =0; i < state.length(); i++)
      turtle(state.charAt(i));
  }

}

How can i change it to an array of snowflakes?

Well after a lot of head scratching l finaly found the solution. Take the picture to an editor like GIMP, select the whole image and give it a transparency of 5 or 10 %. Then it will fade in Android mode. Don't know if I have to report this as a bug.

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