Tuesday

Ooh Flashy!

I found this exciting sketch on OpenProcessing!:

http://www.openprocessing.org/visuals/?visualID=12179 
STREETLIGHTS by Benjamin Poynter




It contains code that creates this funky flashing text effect.
I thought it would be worth a try!

Here is my code incorporated into my stars sketch (including sample sound):

import hypermedia.video.*;

import processing.opengl.*;
import processing.video.*;
PImage bg;
OpenCV opencv;                    //  Creates a new OpenCV Object

// add image to sketch
PImage particleImg;
int x = 255; //variable to make appear/make disppear different animation loops
int y = 255; //variable to make disappear the main menu text
int z = 0; //variable for a random alpha/gamma flicker effect
int blip = 0; //will turn on/into a transparent tint upon ->R
//PImage[] image = new PImage [numFrames]; //varible for the set of animation loops
PFont font; //calls the variable to use for text typed.
int title = 255; //variable to make disappear the title rectangle bg.

import ddf.minim.*;
AudioPlayer player;
Minim minim; //these three lines call the minim audio program to be used.


Particle[] particles;

final int MAX_PARTICLES = 150;

void setup()
{

  size(1000,250);
  frameRate(30);
  font = loadFont("Clubland-20.vlw");
  bg= loadImage ("sky5.jpg"); 
  opencv = new OpenCV( this );    //  Initialises the OpenCV object
  opencv.capture( 250,250);     //  Opens a video capture stream

  particles = new Particle[0]; 
  particleImg = loadImage("shining star.png");

 minim = new Minim(this);
player = minim.loadFile("80s & Early 90s--REM - Losing My Religion.mp3");
player.play();
player.loop();
player.setGain(3);

  //
}


void draw()
{


  noStroke();
  noTint(); 
  imageMode(CORNER);

  opencv.read();                  //  Grabs a frame from the camera


  /* pushMatrix();
   //scale(2,2);
   translate(width,0); 
   scale(-2,2); */
  //image( opencv.image(), 0, 0 );  //  Display the difference image

  background (bg);
  // popMatrix();

  opencv.absDiff();               //  Calculates the absolute difference
  // opencv.flip(OpenCV.FLIP_HORIZONTAL);
 rectMode (CENTER);
    //fill(255, title); //'title' will be turned to '0' if -> is pressed.
   //rect (320, 180, 640, 360); //This rectangle is title screen. Will go away.
    float z = random(200, 255); //Gives flicker to variables z and y.
    fill(z, y); //Flickers the opening font.
    textFont(font, 25); //(loaded font, font size)
    text("Reach for the stars", 400, 220);
    textFont(font, 15);
    text("Nike Jump-Magic", 400, 230); 
 

  imageMode(CENTER);

  updateParticles();

  makeParticles(opencv.image());

  if(particles.length>MAX_PARTICLES)  
    particles = (Particle[]) subset(particles, particles.length-MAX_PARTICLES);

  opencv.remember();              //  Remembers the current frame
}

void updateParticles()
{

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

    Particle p = particles[i];

    p.update();
    p.draw();
  }
}


void makeParticles(PImage img)
{

  Particle p;
  for(int i= 0; i<200; i++)
  {
    int xpos = (int) random(img.width);
    int ypos = (int) random(img.height);
    if(brightness(img.get(xpos,ypos))>50)
    {
      p = new Particle(width - (xpos*4), ypos);
      p.draw();
      particles = (Particle[]) append(particles, p);
    }
  }
}


class Particle
{

  float xPos;
  float yPos;
  float xVel;
  float yVel;

  float rotation = 0;
  float spin;

  float currentAlpha = 255;
  float currentScale = 0.5;

  float drag = 0.2;
  float fadeSpeed = -5;
  float shrink = 0.9;
  float gravity  = -0.1;

  Particle(float xpos, float ypos)
  {
    this.xPos = xpos;
    this.yPos = ypos;
    this.xVel = random(-20,20);
    this.yVel = random(-20,20);
    this.currentScale = random(0.01,0.10);
    this.currentAlpha = random (0,255);   
    this.rotation = random(0,360);  
    this.spin =  random(-2,-5);
  }


  void update()
  {
    xVel*=drag;
    yVel*=drag;

    yVel+=gravity;

    xPos += xVel;
    yPos += yVel;
    currentAlpha -=fadeSpeed;
    currentScale*=shrink;
    rotation+=spin;
  }

  void draw()
  {
    if(currentAlpha<=0) return;

    pushMatrix();

    tint(255,currentAlpha);
    translate(xPos, yPos);
    scale(currentScale);
    rotate(radians(rotation));
    image(particleImg, 0, 0);
    popMatrix();
  }
}

and the effect looks like this (before any pretty design elements are put into place!):


After a few different experiments, I decided, like the Animated Gif, that the flashing text takes away the attention from the star particles, which should be what catches peoples attention. Therefore in the same way I discarded the Gif, I will dscard the flashing text!

Onwards and upwards!...

0 comments:

Post a Comment