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.

I'm using setTexture() to apply a user choosen image to the sphere and would like the user to be able to change the transparency of this texture/image... as there are other 3D objects rendered within the sphere I would like to be able to see.

simple example from a question regarding setTexture but not about transparency:

PImage earth; 
PShape globe;

void setup() { 
  size(600, 600, P3D); 
  background(0); 
  earth = loadImage( "world32k.jpg");
  globe = createShape(SPHERE, 200); 
  globe.setStroke(false);
  globe.setTexture(earth);
}

void draw() { 
  translate(width/2, height/2);
  shape(globe);
}

where would you use tint() or setTint() in the above to make the globe semi transparent ?

Cheers, mala

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

PImage imgR1_1_1;
PImage imgR1_1_2;

void setup () {
  size (1784, 870, P2D);
  frameRate(fr);
  imgR1_1_1 = loadImage("Riquadro1.1.1.png");
  imgR1_1_2 = loadImage("Riquadro1.1.2.png");
}

void draw () {  

    if ((mll-prg1_3) - ((timer1)-prg1_3) >= secondi) { 
      timer1 = mll;
      Aa1 = random(1, 3);
      A1 = int(Aa1);
      Bb1 = random(1, 3);
      B1 = int(Bb1);
      BBbb1 = random(1, 3);
      BB1 = int(BBbb1);
    }


  if (A1 == 1) {
    if (B1 == 1) {
      if (mll - timer1 <= Is2) {  
        tint(255, 0);
        Radd1 = 0;
      } else {
        tint(255, 255-trah);
        Radd1 = ((((657 * perc) / 100) *  S1_1 ) / (secondi - Is2));
      }
      image(imgR1_1_1, 0, 0 + Radd1, width, width/prop);
    }


    if (B1 == 2) {
      if (mll - timer1 <= Is2) {  
        tint(255, 0);
        Radd1 = 0;
      } else {
        tint(255, 255-trah);
        Radd1 = ((((657 * perc) / 100) *  S1_1 ) / (secondi - Is2));
      }
      image(imgR1_1_2, 0, 0 + Radd1, width, width/prop);
    }
  }

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

 import org.openkinect.processing.*;
 import processing.video.*;
  Movie video;
  Kinect2 kinect2;
 int minDepth=0;
  int maxDepth=4500; //4.5m
  void setup() {
  size(1920,1080);
  video = new Movie(this, "final-02.mov");
  video.loop();
  kinect2 = new Kinect2(this);
  kinect2.initDepth();
  kinect2.initDevice();
  }
  void movieEvent(Movie video){
 video.read();
  }
  void draw() { 
  image(video, 0, 0);
  video.loadPixels();

int[] depth = kinect2.getRawDepth();

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 > 10 && d < 400){
      //video.pixels[offset] = color(255, 100, 15);
      tint(10,255);
    } else {
      //video.pixels[offset] = color(150, 250, 180);
      tint(250,10);
    }
  }
  println(x);
}

  video.updatePixels();
  image(video,0,0);
  }

What I want to know is how to create a pulse from 50% opacity to 100% opacity.

Can somebody help me?

I am trying to create a sketch that simulates a long exposure shot captured on camera. I searched for smth similar on the web and found this reference which proposes to append different layers using different opacities. I did that with the following code, but it doesn't seem to quite do the job properly.

Anybody tried to do that before?

Any other suggestions?

Thanks for your time! :-)

// This patch proposes to simulate a long exposure shot using Processing.

import processing.video.*;

Capture video;

void setup() {
  size(640, 480);
  printArray(Capture.list());
  video = new Capture(this, 640, 480, 30);
  video.start();
}

void mousePressed()
{
  int steps = 10;  // also means amount of pictures taken and merged later
  long opac = 255 / steps; 

  for (int i = 1; i <= steps; i++) 
  {
    if (video.available())
    {
      video.read();
      image(video, 0, 0);
      tint(255, opac * i);    // changes the opacity every step
      delay (100);            // delay between each step
      print(i); 
      println(" " + opac * i);
    }
  }
}

void keyPressed()
{
  background(0);
}

void draw() {
  // Step 5. Display the video image.
}

import java.util.ArrayList; import KinectPV2.KJoint; import KinectPV2.*;

KinectPV2 kinect;

import processing.video.*;

Movie coral; PGraphics feedback;

void setup() { fullScreen(P2D, 2); feedback = createGraphics(1920,1080,P2D); background(0); //blendMode(ADD);

//Video stuff coral = new Movie(this, "CoralReef.mp4"); coral.loop();

//Kinect stuff kinect = new KinectPV2(this); kinect.enableBodyTrackImg(true); kinect.enableSkeletonDepthMap(true); kinect.init(); }

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

PImage kinectSil;

void draw() {

kinectSil = kinect.getBodyTrackImage();

kinectSil.filter(INVERT); kinectSil.loadPixels(); for (int i = 0; i < kinectSil.pixels.length; i++) { if (kinectSil.pixels[i] == color(0)) { kinectSil.pixels[i] = color(0, 0); } else { kinectSil.pixels[i] = color(255,255); } } kinectSil.updatePixels();

feedback.beginDraw(); feedback.image(kinectSil,0,0,1920,1080); feedback.blend(coral, 0, 0, coral.width, coral.height, 0, 0, coral.width, coral.height, MULTIPLY); feedback.filter(THRESHOLD); feedback.endDraw(); tint(255,10); image(coral,0,0,width,height); blend(feedback,0,0,feedback.width,feedback.height, 0, 0, width, height, LIGHTEST); fill(45); rect(0,0,150,54); textSize(30); fill(255); text(frameRate, 20,40); }

when I press 1, then 2 the picture of the mandrill is in green tint. I'm trying to tint the mandrill into 1/3rd red, 1/3rd green and 1/3rd blue. Did i make a mistake? thanks!

I have looked into the OpenCV example (Example: Whichface) and I can't seem to wrangle it to what i need it for. Here is my existing code

    import gab.opencv.*;
    import processing.video.*;
    import java.awt.*;

    Capture video;
    OpenCV opencv;

    PImage ed;
    PImage genie;
    int offset = 0;

    float easing = 0.05;

    void setup() {

    size(724,960);


      video = new Capture(this, 640/2, 480/2);
      opencv = new OpenCV(this, 640/2, 480/2);
      opencv.loadCascade(OpenCV.CASCADE_FRONTALFACE);  
      video.start();
      ed = loadImage("ed.jpg");
      genie = loadImage("genie.jpg");

    }




    void draw() {

      scale(1);
      opencv.loadImage(video);

      noFill();
      stroke(0, 255, 0);
      strokeWeight(3);

       Rectangle[] faces = opencv.detect();
      println(faces.length);




    for (int i = 0; i < faces.length; i++) {



 tint(255, 230);  // Display at half opacity
image(genie, 0, 0);  // Display at full opacity


  int dx = (faces[i].x-genie.width/2) - offset;
  offset += dx * easing;
  tint(255, faces[i].x);  // Display at half opacity
  image(ed, 0, 0);



   }
} 





void captureEvent(Capture c) {
  c.read();
}

I am making a face-tracking Nerf blaster using OpenCV on the Raspberry Pi. I am using a Microsoft LifeCam webcam for capture input and the SoftwareServo class for blaster control. However, my code runs at 1-2 FPS on the Pi (Pi 3 model B). I am currently using scale to improve performance, but the code still runs at 1 FPS. Additionally, the servos are extremely jittery. I am powering the servos using a 2A 5V regulator. The Pi is powered off a 2A USB supply. The grounds are connected. Does anyone know how to improve performance? Maybe a different CV library?

Thanks for input! Code:

import processing.io.*;
import gab.opencv.*;
import processing.video.*;
import java.awt.*; 

PImage img;
Rectangle[] faceRect; 

Capture cam;
OpenCV opencv; 
SoftwareServo panServo;
SoftwareServo trigServo;

int widthCapture=320; 
int heightCapture=240;
int fpsCapture=30; 
int panpos=90;
int firePos = 80;
int readyPos = 0;
long time;
int wait = 500;

int targetCenterX;
int targetCenterY;

int threshold = 20;
int thresholdLeft;
int thresholdRight;
int moveIncrement = 2;


int circleExpand = 20;
int circleWidth = 3;

boolean isFiring = false;
boolean isFound = false;
boolean manual = false;

void setup()
{ 
  size (320, 240); 
  frameRate(fpsCapture); 
  background(0);
  panServo = new SoftwareServo(this);
  trigServo = new SoftwareServo(this);
  panServo.attach(17);
  trigServo.attach(4);

  cam = new Capture(this, widthCapture, heightCapture);
  cam.start(); 

  opencv = new OpenCV(this, widthCapture, heightCapture); 
  opencv.loadCascade(OpenCV.CASCADE_FRONTALFACE);
}

void  draw() 
{
  if (millis() - time >= wait)
  {
    trigServo.write(readyPos);
    isFiring = false;
  }
  if (isFiring) 
  {
    trigServo.write(firePos);
    tint(255, 0, 0);
  } else
  {
    trigServo.write(readyPos);
    noTint();
  }
  if (cam.available() == true) 
  { 
    cam.read();  
    img = cam.get(); 

    opencv.loadImage(img);

    image(img, 0, 0);
    blend(img, 0, 0, widthCapture, heightCapture, 0, 0, widthCapture, heightCapture, HARD_LIGHT);
    faceRect = opencv.detect();
  }

  stroke(255, 255, 255);
  strokeWeight(1);
  thresholdLeft = (widthCapture/2)-threshold;
  thresholdRight =  (widthCapture/2)+threshold;

  stroke(255, 255, 255, 128);
  strokeWeight(1);
  line(thresholdLeft, 0, thresholdLeft, heightCapture); //left line
  line(thresholdRight, 0, thresholdRight, heightCapture); //right line

  if ((faceRect != null) && (faceRect.length != 0))
  {
    isFound = true;
    //Get center point of identified target
    targetCenterX = faceRect[0].x + (faceRect[0].width/2);
    targetCenterY = faceRect[0].y + (faceRect[0].height/2);    

    //Draw circle around face
    noFill();
    strokeWeight(circleWidth);
    stroke(255, 255, 255);
    ellipse(targetCenterX, targetCenterY, faceRect[0].width+circleExpand, faceRect[0].height+circleExpand);
    if (!manual) {
      //Handle rotation
      if (targetCenterX < thresholdLeft)
      {
        panpos -=  moveIncrement;
        //delay(70);
      }
      if (targetCenterX > thresholdRight)
      {
        panpos+=  moveIncrement;
        //delay(70);
      }

      //Fire
      if ((targetCenterX >= thresholdLeft) && (targetCenterX <= thresholdRight))
      {
        isFiring = true;
        println("Gotem");
        noFill();
      }
    }
  }
}
void keyPressed() {
  if (key == 'm') {
    manual = !manual;
    println("manual mode toggled");
    isFiring = false;
  } else if (key == 'a' && manual) {
    panpos-= moveIncrement;
    println("left");
  } else if (key == 'f' && manual) {
    isFiring = !isFiring;
  } else if (key == 'd' && manual) {
    panpos+= moveIncrement;
    println("right");
  } else if (key == 'c' )
  {
    panServo.write(90);
  } else {
    println(key);
  }
}

http://alpha.editor.p5js.org/Jaz/sketches/rkNRPAuqb

What i currently have

PImage img1, img2;

int alpha = 0;
boolean up = true;


void setup() {
  size(640, 360, P2D);
  img1 = loadImage("layer1.jpg");
  img2 = loadImage("layer2.jpg");
}

void draw() {
  background(0);

  if (up == true && alpha < 255)
  {
    alpha++;
  } else up = false;
  if (up == false && alpha > 0) 
  {
    alpha--;
  } else up = true;

  beginShape();
  tint(255, 255);
  texture(img1);
  tint(255, alpha);
  texture(img2);
  vertex(10, 10, 0, 0);
  vertex(width-10, 10, img1.width, 0);
  vertex(width-10, height-10, img1.width, img1.height);
  vertex(10, height-10, 0, img1.height);
  endShape();
}

 Sun ziSun;
Moon ziMoon;
PGraphics pg;
void setup(){
  size(200,200);
  ziSun = new Sun(width/2, height/2, 100);
  ziMoon = new Moon(90,20,100);
  pg = createGraphics(200,200);
}

void draw(){
  background(135,206,235);
  cloud();
  ziSun.hiu(color(184,134,11),1);
  ziSun.hiu(color(244,175,44),2);
  ziSun.hiu(color(255,215,0),1.5);
  ziSun.display();
  ziMoon.display();

  pg.beginDraw();
  pg.background(0,255);
  pg.endDraw();
  image(pg,0,0);

                  //HERE IS THE TINT PROBLEM
                  // lol just this line
  tint(0,mouseX);
}







void cloud(){
  float leftX = 45;
  float rightX = 200;
  fill(255);
    ellipse(rightX, 50, 126, 97);
    ellipse(rightX+50, 50, 70, 60);
    ellipse(rightX-50, 50, 70, 60);
    ellipse(leftX, 150, 126, 97);
    ellipse(leftX+62, 150, 70, 60);
    ellipse(leftX-62, 150, 70, 60);
}

class Moon{
  float size;
  float posx;
  float posy;

  Moon(float saz, float xpos, float ypos){
    size=saz;
    posx = xpos;
    posy = ypos;
  }

  void display(){
    fill(0);
    ellipse(mouseX,posy,size,size);
  }

}

class Sun{
  float posx;
  float posy;
  float size;
  color c;
  float thickness;
  Sun(float xpos, float ypos, float saz){
    posx = xpos;
    posy = ypos;
    size = saz;
  }

  void display(){
    noStroke();
    fill(244,175,44);
    ellipseMode(CENTER);
    ellipse(posx,posy,size,size);
  }

  void hiu(color cola, float strokewzn){
    c = cola;
    thickness = strokewzn;
    float[] lights = new float[10];
    for (int i=0; i<lights.length; i++){
    stroke(cola);
    strokeWeight(strokewzn);
    line(posx,posy,random(width),random(height));
    }
  }
}

press and hold any key to start sampling and effect

import processing.video.*;

Capture camera;
int scale = 1;
void setup()
{
  size(640, 480, P3D);
  colorMode(HSB, 255);

  String[] cameras = Capture.list();

  camera = new Capture(this, width/scale, height/scale, cameras[0]);
  camera.start();

  // init feedback loop
  frames = new PImage[frame_count];
  for(int i = 0; i < frame_count; i++)
  {
      frames[i] = createImage(0, 0, 0);
  }
}

int frame_count = 10;
PImage[] frames;
boolean feedback = false;
void draw()
{
  background(255);

  if(keyPressed)
  {
    image(frames[index], 0, 0);
    for(int i = 0; i < frame_count; i++)
    {
      pushMatrix();
      pushStyle();

      tint(255, 255 / frame_count);
      //translate(0, 0, i * 80 / frame_count);
      image(frames[(index + i) % frame_count], 0, 0);

      popStyle();
      popMatrix();
    }
  }
  else
  {
    image(camera, 0, 0);
  }

  text(frameRate, 20, 20);
}


int index = 0;
void captureEvent(Capture camera)
{
  camera.read();
  PImage p = camera;

  if(keyPressed)
  {
    frames[index] = p.copy();
  }

  index += 1;
  if(index == frame_count)
  {
    index = 0;
  }
}

`if (avgBPM > 75) {
          if (fillColor < 215) {
             fillColor+=colorIncrement;
             tint(fillColor, 0, 0, 200);
            } else 

            fillColor-=colorIncrement;
            tint(fillColor, 0, 0, 200);



              if (avgBPM < 75){
                 if ((fillColor < 215)&&(fillColor > 175)) {
                     fillColor+=colorIncrement;
                     tint(fillColor, 0, 0, 200);
                  } else 

                      fillColor-=colorIncrement;
                      tint(fillColor, 0, 0, 200);
            }`

What am I doing wrong?

if (avgBPM < 55){ tint(255, 255, 255, 200); } } else if ((avgBPM > 55) && (avgBPM < 60)){ tint(215, 255, 255, 200); } } else if ((avgBPM > 60) && (avgBPM < 65)){ tint(175, 255, 255, 200); } } else if ((avgBPM > 65) && (avgBPM < 70)){ tint(135, 255, 255, 200); } else if ((avgBPM > 70) && (avgBPM < 75)){ tint(95, 255, 255, 200); } else if ((avgBPM > 75) && (avgBPM < 80)){ tint(55, 255, 0, 200); }

My question is: How can I set a random video to be played next?

I managed to get the videos playing, but I can't set another random video to follow. My intention is to have a sequence of videos (maybe 10 or more) that will play in a shuffled order. I have looked around this and some other forums but couldn't find a specific answer. Hope you guys can help me out. Thanks!

ps. if something doesn't make sense in my code please tell me :)

import processing.video.*;
import processing.sound.*;

AudioIn input;
Amplitude analyzer;
int scale=4;

Movie mov1, mov2;
Capture cam;

int n = 5; //total number of videos

float vidN = random(1, n+1);
int x = int (vidN);

float vidN2 = random(1, n+1);
int x2 = int (vidN2);

void setup() {
  //frameRate (30);
  size(1280, 720);
  colorMode (HSB);
  //fullScreen();
  //background(0);

  mov1 = new Movie(this, nf(x, 2)+".mp4");
  mov1.loop();
  mov1.volume(100);

  mov2 = new Movie(this, nf(x2, 2)+".mp4");
  mov2.loop();
  mov2.volume(00);

  cam = new Capture(this, width, height);
  cam.start();  

  blendMode(DIFFERENCE);

  imageMode(CENTER);

  //Create an Audio input and grab the 1st channel
  input = new AudioIn(this, 0);

  // start the Audio Input
  input.start();

  // create a new Amplitude analyzer
  analyzer = new Amplitude(this);

  // Patch the input to an volume analyzer
  analyzer.input(input);
}

void movieEvent(Movie m) {
  if (m == mov1) {
    mov1.read();
  } else if (m == mov2) {
    mov2.read();
  }
}

void draw() {    
  float vol = analyzer.analyze();

  noStroke ();

  tint (255, 80);
  if (cam.available()) {
    cam.read();
    image(cam, width/2, height/2, width, height); // Draw the webcam cam onto the screen

    vol = vol*scale;

    tint (255, 100-vol*100);
    image(mov1, width/2, height/2, width, height);

    tint (255, 100-vol*100);
    image(mov2, width/2, height/2, width, height);
  }
}  

import ddf.minim.*;

PImage img1, img2;
int trans ;
int vol = 1;
float transparency = 255;
AudioPlayer latido;
AudioPlayer pip;
Minim minim;


void setup() {

  size(500, 500);
  background(0);
  trans = 255;
  vol = 1;
  pipi = 3;
  img1 = loadImage("cora.jpg");
  minim = new Minim(this);
  pip = minim.loadFile("pip.mp3");
  latido = minim.loadFile("latido.mp3");
  // the audio "latido" in loop
  latido.loop();
}

void draw() {
  //i combine the audio with the transparency of the image
  int vol = int(latido.mix.level()*500);
  println(vol);
  int trans = int(map(vol,-100,200,80,200));
  tint(trans,100);
  image(img1, -30, -300); 

  if (transparency > 0) { transparency -= 10; }
  tint(0, transparency);
  image(img1, -30, -300);
}
_
**        void keyPressed(){
          //when you press any key the audio "latido" stop, and another audio(pip) starts and the image fade out with tthe last audio(here is my doubt)

          latido.pause();

          pip.setGain(-15);
          pip.play();
          pip.loop();

        }**_

I'm facing another problem, this time concerning a PShape that loads an svg. I want to display this svg "as is", but want to fade it in. I used disableStyle on simple svgs before, but now I'm importing some pretty complex svgs with multiple colors and I'd love to hear if any of you have a solution to keep the style enabled and only change the alpha/opacity/transparency.

The relevant parts of the code:

PShape[] svgs = new PShape[2];

...

svgs[i] = loadShape("test/svg" + (i + 1) + ".svg");

...

currentSvg = svgs[int(random(svgs.length))];

...

//I used the following line on the simple svg, because the lifespan variable increases and then decreases again, creating a nice fade.
//fill(0, lifespan*255);
shapeMode(CENTER);
shape(currentSvg, position.x, position.y, currentSvg.width/ratio, currentSvg.height/ratio);

I also tried using tint(255, lifespan*255); but this only seems to work on images?

Thanks for taking the time to read this, have an amazing day!

You have deliberately vandalised this discussion.

Please read the discussion DO NOT DELETE YOUR POSTS.

koogs has restored your original posting below.

PGraphics pg;
color c, cp;
boolean t;
void setup()
{
  size(200,200);
  background(80);
  c = color(166,130,180);
  t = false;
  pg = createGraphics(200,200);
  pg.beginDraw();
  pg.noStroke();
  pg.fill(c);
  pg.rect(10,10,180,180);
  pg.endDraw();
}
void draw()
{
  background(80);
  if (t) { tint(255,255); }
  else { noTint(); }
  image(pg,0,0);
  fill(0);
  text("rect rgb: " + red(c) + ", " + green(c) + ", " +  blue(c), 16, 26);
  text("pick rgb: " + red(cp) + ", " + green(cp) + ", " +  blue(cp), 16, 46);    
  text("tint: " + t, 60, 80);
}  
void mousePressed()
{
  cp = get(mouseX,mouseY);
  println(cp);
}
void keyPressed()
{
  t = !t;
}  

Click rect to pick color --> Correct color
Press a key --> apply tint(255,255);
Click rect to pick color --> Wrong color
More, changing tint to off (pressing a key again) does not restore the original color.
I have tested the color change with a color picker program too.
Where am I doing wrong?

originalCanvas = createCanvas(windowWidth/2, windowHeight);
originalCanvas.position(0, 0);
originalCanvas.background(0);

copiedCanvas = originalCanvas;
copiedCanvas.position(windowWidth/2, 0);

However, only the right half of the screen is black. The left part is white, which I find weird. If my approach didn't work, shouldn't at least the left part be black and the right part white?

When I put an ellipse with mouseX and mouseY in draw(), it only shows in the black/right canvas. The left canvas seems inactive.

I know about createGraphics, but then I would have to always draw things twice, right? For example "original.ellipse(...) and copy.ellipse(...)" - or am I missing something?

Code I'm using is approximately: var path = "assets/video_placeholder.jpg" var imgHandler = loadImage(path); tint(255, 126); image(imgHandler, 200, 200, 450, 450);

Is this expected? Other than using DOM to load images and applying CSS to control opacity, is there any better way to give transparency to images?

thx!

I am quite new to processing and I have been playing with it the last couple of weeks. I am working on a tiny project. The idea is to make a simple sequential animation. it is basically a few images, shapes, and text that appear in sequence. I have written the pde code (see below) and all works fine using the IDE. Now I want to port this on a website using processing.js (simply using processing.min.js and a canvas element).

It all works fine in the browser (chrome), but here is the problem the animation looks fine on a desktop, but on a tablet (a lenovo quad core) or Smasung Galaxy S3, the animation is all jerky (looks like the frame rate is dropping to unacceptable levels). So my question is: Is this a normal behavior, is my animation simply too complex, or may be I am doing something wrong in my code that is making the animation so heavy for non-desktop devices (although for example I don't think I have too long for loops )?

Also, does anyone has any best practice and tips when trying to set up simple sequential animation like below?

In btw, the images are each around 20-30KB. may be this is also slowing down things !!

I will appreciate any help, thank you.

Michel.

PS: I could not find a place (such as jsfiddle) to put the code along with the images somewhere for people to visualize the animation :(.

PImage main,cloud,phone,send,hand,alert;

PFont f;
String message1 = "Hello there, this";
String message2 = "is a message.";
String message3 = "See you.";
int c;

float typeSpeed = 12;
float speedDot = 3.0;

float x;
float y;

float xCloud,yCloud,xPhone,yPhone;

int fr = 24;

float angle,anglePhone,scaleCloud,scaleSend,angleSend,scaleAlert,angleAlert;

float xDot,xDot2,yDot; // Dot2 is used on the right side of the cloud

float cloudWidth = 150;

int ringingDuration,sendDuration,clickDuration,alertDuration,inBtwLoops;

int diam=50;

boolean finishedTextDisplay;

int myFrameCount;

void setup() {  
  size(1000,400);  
  frameRate(fr);  
  /* @pjs preload="data/main.png"; */
  /* @pjs preload="data/cloud.png"; */
  /* @pjs preload="data/phone.png"; */
  /* @pjs preload="data/send.png"; */
  /* @pjs preload="data/hand.png"; */
  /* @pjs preload="data/alert.png"; */

  main = loadImage("data/main.png");
  cloud = loadImage("data/cloud.png"); 
  phone = loadImage("data/phone.png");
  send = loadImage("data/send.png");
  hand = loadImage("data/hand.png");
  alert = loadImage("data/alert.png");  

  f = createFont("Arial",14,true); textFont(f);  
  resetValues();  
}

void draw() {
  myFrameCount++; // each trip thry draw is 1 frame count
  imageMode(CORNERS);image(main,0,0);  
  displayCloud(0); 
  displayPhone(0);
  if (alertDuration == 0 || alertDuration > fr) {displayAlert(0,false);} // displayAlert(scale,tinted) 

  if (finishedTextDisplay == false) {

        x = 195;
        y = 170;
        for (int i = 0; i < message1.length(); i++) { // show letters 1 sec interval 
          //println("for loop");
          if (fr*i/typeSpeed <= myFrameCount) {  
            c = 0; // show
          } 
          else {
            c = 255; // don't show
          }    
          fill(c);
          text(message1.charAt(i),x,y);    
          x += textWidth(message1.charAt(i));
          // println(textWidth(message3.charAt(i)));
        }

        x = 190;
        y = 170 + textAscent()+textDescent();        
        for (int i = 0; i < message2.length(); i++) { // show letters 1 sec interval 
          //println("for loop");
          if (fr*i/typeSpeed <= myFrameCount - ((fr/typeSpeed)*(message1.length()))) {
            c = 0; // show
          } 
          else {
            c = 255; // don't show
          }    
          fill(c);
          text(message2.charAt(i),x,y);    
          x += textWidth(message2.charAt(i)); 
        }

        x = 185;
        y = 170 + 2*(textAscent()+textDescent());

        for (int i = 0; i < message3.length(); i++) { // show letters 1 sec interval 
          // println("for loop");
          if (fr*i/typeSpeed <= myFrameCount - ((fr/typeSpeed)*(message1.length()+message2.length()))) {
            c = 0; // show
            if (i == message3.length()-1) { // last character shown --> click button
                      finishedTextDisplay = true;
            }
          } 
          else {
            c = 255; // don't show
          }    
          fill(c);
          text(message3.charAt(i),x,y);    
          x += textWidth(message3.charAt(i)); 
        } // end for loop 
    } // if finishedTextDisplay

    else // characters are all dislayed 
    {
      // display strings
      // println("NO for loop");
      fill(0);
      x = 195;y = 170; text(message1,x,y);    
      x = 190;y = 170+textAscent()+textDescent(); text(message2,x,y);
      x = 185;y = 170+2*(textAscent()+textDescent()); text(message3,x,y);

      // display hand
      if (clickDuration <= 0.5*fr) {
        // display bigger send button
        /*
        if (angle <= PI) { 
          scaleSend = map(sin(angleSend), 0, 1, 0, 0.15); 
          displaySend(scaleSend);
          angleSend += 5*PI/100;       
        }
        */
        if (clickDuration < 0.5*0.5*fr ) {scaleSend = clickDuration;}
        else {scaleSend = 0.5*fr - clickDuration;}
        // println(scaleSend);        
        scaleSend = map(scaleSend, 0, 0.5*0.5*fr, 0, 0.15); 
        displaySend(scaleSend);
        clickDuration++;

        tint(255,180);imageMode(CORNERS);image(hand,265,205);tint(255,255); 


      }
      else 
      {
                      displaySend(0);
                      // move on with simualtion
                      if (xDot < xCloud - cloudWidth/2) { // not reached cloud yet
                        displayDot();
                        // println("dot");
                      }
                      else 
                      { // dot reached the cloud --> no dot and grow cloud
                        // put the dot on the other side of the cloud
                        if (angle <= PI) { // once inflate and deflates once, cloud stops moving
                          // println(scaleCloud);
                          scaleCloud = map(sin(angle), 0, 1, 0, 0.15); 
                          displayCloud(scaleCloud);
                          angle += 5*PI/100;
                          // println("cloud");
                        }                  
                        else 
                        { // dot on the other side                    
                          if (xDot2 < xCloud + 165) { // not reached the arrow
                            displayDot2();
                            // println("dot 2");
                        }
                        else { // dot reached the phone --> no dot , phone shakes
                             if (ringingDuration < 4.5*fr) {
                               // println("ringing");
                               // displayPhone(random(-0.06,0.06)); // phone shakes
                               displayPhone(map(sin(anglePhone), -1, 1, -(PI/50), +(PI/50)));
                               anglePhone += (PI/2);

                               // rings
                               if ( (0 < ringingDuration && ringingDuration <= 0.5*fr) || (ringingDuration > 2.5*fr && ringingDuration <= 3*fr)) {                     
                                 displayRing(0);
                               }
                               if ( (0.5*fr < ringingDuration && ringingDuration <= fr) || (ringingDuration > 3*fr && ringingDuration <= 3.5*fr) ) {
                                 displayRing(0);
                                 displayRing(20);
                               }                         
                               if ( (fr < ringingDuration && ringingDuration <= 1.5*fr) || (ringingDuration > 3.5*fr && ringingDuration <= 4*fr)) {  
                                 displayRing(0);
                                 displayRing(20);
                                 displayRing(40);
                               }
                               if ( (ringingDuration > 1.5*fr && ringingDuration <= 2.0*fr) || (ringingDuration > 4*fr && ringingDuration <= 4.5*fr)) {  
                                 displayRing(0);
                                 displayRing(20);
                                 displayRing(40);
                                 // displayRing(60);
                               }
                               ringingDuration++;
                             }
                             else {
                                if (alertDuration <= fr) {
                                    // alert beeps 2 times  
                                    if (alertDuration >= 0 && alertDuration < fr/4 ) {scaleAlert = alertDuration;}
                                    if (alertDuration >= fr/4 && alertDuration < 2*fr/4) {scaleAlert = 2*fr/4 - alertDuration;}
                                    if (alertDuration >= 2*fr/4 && alertDuration < 3*fr/4) {scaleAlert = alertDuration - 2*fr/4;}
                                    if (alertDuration >= 3*fr/4 && alertDuration <= fr) {scaleAlert = fr - alertDuration;}
                                    // else {scaleAlert = 0.5*fr - alertDuration;}
                                    // println(scaleAlert);        
                                    scaleAlert = map(scaleAlert, 0, 0.5*0.5*fr, 0, 0.15); 
                                    displayAlert(scaleAlert,true);
                                    alertDuration=alertDuration+1;                                
                                }    
                                else 
                                {
                                  // alertDuration = 0;
                                  // wait for a second a so before starting the animation again
                                  if (inBtwLoops <= 2*fr) {
                                    inBtwLoops ++;
                                  }
                                  else {
                                    resetValues();
                                  }  
                                }
                             }
                          }  
                        }
                      }
      }

    }

}

void displayAlert(float scaleAlert, boolean tinted){
    pushMatrix();
    translate(222,386);
    imageMode(CENTER);
    scale(1+scaleAlert);
    if (tinted) {tint(217, 83, 79);} 
    image(alert,0,0); 
    tint(255,255);
    popMatrix();
}

void resetValues(){  
  angle=anglePhone=scaleCloud=scaleSend=angleSend=scaleAlert=angleAlert=0;  
  xCloud = width/2+85;
  yCloud = height/2-10;  
  xDot = xCloud - 170; 
  yDot = height/2;  
  xDot2 = xCloud + cloudWidth/2;  
  xPhone = xDot2 + 170 + 50;
  yPhone = height/2;  
  ringingDuration = sendDuration = clickDuration = alertDuration = inBtwLoops = 0;  
  finishedTextDisplay = false; 
  myFrameCount = 0;
}

void displayRing(int diamExtra){
  int alpha = round(map(diamExtra,0,40,255,50));
  strokeWeight(5.5);
  strokeCap(ROUND); 
  noFill();
  stroke(24, 188, 156, alpha);
  // arc(xPhone+10, yPhone - 69, diam+diamExtra, diam+diamExtra, -HALF_PI,0);
  arc(xPhone+10, yPhone - 69, diam+diamExtra, diam+diamExtra, -HALF_PI+(HALF_PI/7),0-(HALF_PI/7));
}

void displayCloud(float scaleCloud){
    pushMatrix();
    translate(xCloud,yCloud);
    imageMode(CENTER);
    scale(1+scaleCloud);
    image(cloud,0,0,150,150);
    popMatrix();
}

void displayPhone(float anglePhone){
    pushMatrix();
    translate(xPhone,yPhone);
    rotate(anglePhone);
    imageMode(CENTER);
    // scale(1+scaleCloud);
    image(phone,0,0,55,161);
    popMatrix();
}

void displayDot(){
    xDot+=speedDot;
    fill(21, 158, 130);
    stroke(21, 158, 130);
    ellipse(xDot,yDot,15,15);
}
void displayDot2(){
    xDot2+=speedDot;
    fill(21, 158, 130);
    stroke(21, 158, 130);
    ellipse(xDot2,yDot,15,15);
}

void displaySend(float scaleSend){
    pushMatrix();
    translate(275,215);
    imageMode(CENTER);
    scale(1+scaleSend);
    image(send,0,0,48,26);
    popMatrix();  
  /*
    pushMatrix();
    imageMode(CORNERS);
    tint(255,alpha);  // alpha=0: tranparent  
    image(send,250,205);
    tint(255,255); // 255: normal
    popMatrix();
  */  
}