Database interaction with video and Processing


#1

I’m working on my final project in processing that basically loads vines into various denominations of bills and I let the user rank the worth of the “social/digita; currency”. I’d also like to have a page that lets viewers see the current value of each vine/bill. I’m a bit stuck on how to save the denominations for the page that will show all the 10s, 20s, etc. Can anyone
point me in the right direction on how to approach this?

Also conceptually I’m debating allowing the users to write captions and hashtags for the videos instead of pulling random tweets since there is so much random crap out there it really waters down the
experience. Do you think it helps the experience?

I tried to upload the code but as a new user I’m not allowed :frowning: I can email to anyone who is interested


#2

Hey @kyoungman I just upped your permission level so you should be able to upload code.

Alternatively you can paste processing code surrounded by ```.


#3

Thanks @bakercp Here’s the code currently. I hope to get it pulling from an eternal db but haven’t done that before. I

bill_generator_v3_denominations4.pde

import controlP5.*;
import processing.video.*;


ControlP5 cp5;

String caption;
String hashtagit;

PFont radiantFont;
PFont dollarFont;
PFont greenbackFont;
PFont merchantFont;
PImage fiveBill;
PImage tenBill;
PImage twentyBill;
PImage fiftyBill;
PImage hundredBill;

PImage maskImage;

//String tweet = "“Anything is possible if you put your mind to it and you really work hard.”";

int currentVineIndex = 0;
int currentMoneyIndex = 0;
Bill currentBill = null;

PImage[] denominations;

ArrayList<Bill> bills = new ArrayList<Bill>();

void setup()
{
  size(1200, 700);

  imageMode(CENTER);
  tint(240, 255, 240);  

  fiveBill= loadImage("fiveBill.jpg");
  tenBill= loadImage("tenBill.jpg");
  twentyBill= loadImage("twentyBill.jpg");
  fiftyBill= loadImage("fiftyBill.jpg");
  hundredBill= loadImage("hundredBill.jpg");


  denominations = new PImage[] { 
    fiveBill, tenBill, twentyBill, fiftyBill, hundredBill
  };

  radiantFont = createFont ("RadiantAntique", 36);
  dollarFont = createFont("DollarBill", 18);
  greenbackFont = createFont("NumbersGreenback-Regular", 24);
  merchantFont = createFont("MerchantCopy", 36);  

  maskImage = loadImage("mask.jpg");



  Bill bill = new Bill();
  bill.vineVideo = new Movie(this, "1.mp4");
   bill.tweet = "The United States of";
  bill.hashTag = "#FML";
  bills.add(bill);

  bill = new Bill();
  bill.vineVideo = new Movie(this, "2.mp4");
  bill.tweet = "The United States of";
  bill.hashTag = "#BRIGHT";
  bills.add(bill);

  bill = new Bill();
  bill.vineVideo = new Movie(this, "3.mp4");
  bill.tweet = "The United States of";
  bill.hashTag = "#LIFEISGOOD";
  bills.add(bill);

  bill = new Bill();
  bill.vineVideo = new Movie(this, "4.mp4");
  bill.tweet = "The United States of";
  bill.hashTag = "#WANTMORE";
  bills.add(bill);

  bill = new Bill();
  bill.vineVideo = new Movie(this, "5.mp4");
  bill.tweet = "The United States of";
  bill.hashTag = "#BOUNCE";
  bills.add(bill); 

  bill = new Bill();
  bill.vineVideo = new Movie(this, "6.mp4");
  bill.tweet = "The United States of";
  bill.hashTag = "#IMTHEKING";
  bills.add(bill);

  nextVideo();
}



void draw()
{
  background(70);




  if (currentBill != null)
  {
    currentBill.draw();
  }

  drawDenomination();
  drawTriangles();
}




// write a function to save a bill (vine + tweet + amt)

// write a function to keep track of currency amt to saved bills

// write a function to load all the bills of the same value on one page

void mousePressed()
{
  if (mouseX<150 && mouseX>0)
  {

    if (currentBill != null)
    {
      currentBill.value--;
    }
  }

  if (mouseX<width && mouseX>1050)
  {
    if (currentBill != null)
    {
      currentBill.value ++;
    }
  }

  //      nextVideo();
}



void drawTriangles()
{
  textFont(dollarFont);  
  text("press spacebar to load a new vine", width/2, height-100);
  pushStyle();
  textAlign(LEFT);
  fill(100, 120, 100);
  textFont(merchantFont);
  textSize(24);
  text("Worth", 70, 350);
  text("LESS", 70, 375);
  textAlign(RIGHT);
  text("Worth", 1135, 350);
  text("MORE", 1135, 375);

  popStyle(); 

  pushStyle();
  if (mouseX<150 && mouseX>0)
  {    
    fill(230);
  }  
  else {    
    fill(30);
  }
  triangle(40, 300, 10, 350, 40, 400);


  if (mouseX<width && mouseX>1050)
  { 
    fill(230);
  } 
  else {
    fill(30);
  }
  translate(200, 0);
  triangle(960, 300, 990, 350, 960, 400); 
  popStyle();
}



void drawDenomination()
{

  for ( int i=0; i < denominations.length; i++)
  {
    //image(denominations[i], width/2, height/2);
  }
  //  currentMoneyIndex = currentMoneyIndex +1;
}




void nextVideo()
{
  currentVineIndex = currentVineIndex + 1;

  if (currentVineIndex > bills.size() - 1)
  {
    currentVineIndex = 0;
  }

  if (currentBill != null)
  {
    currentBill.stop();
  }

  currentBill = bills.get(currentVineIndex);

  if (currentBill != null)
  {
    currentBill.play();
  }
}


void keyPressed()
{
  nextVideo();
}

"
Bill.pde
"public class Bill
{
  public int value = 0;
  public Movie vineVideo;
  public String tweet;
  public String hashTag;

  void play()
  {
    vineVideo.play();
    vineVideo.loop();
  }

  void stop()
  {
    vineVideo.stop();
  }

  void draw()
  {
    if (vineVideo.available() == true) {
      vineVideo.read();
    }

    int i = 0;

    if (value < 1)
    {
      i = 0;
    }
    else if (value < 2)
    {
      i = 1;
    }
    else if (value < 3)
    {
      i = 2;
    }
    else if (value <4)
    {
      i = 3;
    }
    else
    {
      i=4;
    }



    image(denominations[i], width/2, height/2); 

    vineVideo.mask(maskImage);


    textAlign(CENTER, CENTER);
    ellipseMode(CENTER);
    pushStyle();
    //ellipse(width/2-65, height/2+5, 258, 314);

    image(vineVideo, width/2-49, height/2+5, vineVideo.width*.71, vineVideo.height*.71);
    filter(GRAY);
    tint(240, 255, 240); 
    popStyle();


//TWEET SEARCH
    textFont(dollarFont);  
    fill(50);
    text(tweet, 700, 200, 240, 220);  // Text wraps within text box (Xpos, Ypos, width, height)
    
    //HASHTAG
    textFont(merchantFont);
    textSize(36);
    text(hashTag, 700, 250, 240, 220);
  }
}

#4

'm redesigning the interface so I’m also attaching  of what I hope it to look like when I’m done. It shows where I want to go with this thing


#5

Hi, is there anything wrong with Olab? I keep getting a 502 Bad Gateway
error since last night when I try to follow my topic.

thanks,
Kristen


#6

Sorry, yeah it was down. I was trying to fix a few bugs and just figured out how to get it back up. Sorry …


#7

I’m working on my final project in processing that basically loads vines into various denominations of bills and I let the user rank the worth of the “social/digita; currency”

Possibly due to my ignorance, but I am completely lost on technically what this means. Clarification please?

I’m a bit stuck on how to save the denominations for the page that will show all the 10s, 20s, etc. Can anyone

again, once I understand the first quote, this would clarify this sentence, too. From my speculative grasp, are you saving user input? what do you mean by “save” ? (text file? online post? USB flash drive as a mouse event? )

a bit too vague at least for me to understand.


#8

Hi @danbertner, thanks for writing. To clarify, I am using Processing to create an interface that will load an array of vines (7 sec. video files pulled from links posted on twitter that are called “vines”) into an oval mask. Behind the vines I have a money bill (varying denominations of $5 bill, $10 bill, $20, $50, $100… ) I allow the user to click a plus or minus button to “increase or decrease the denomination”, essentially loading the next increment bill: $10 bill, $20 etc.

The combination of the vine video file name plus the money bill image behind it is what I am looking to save into, I think, a simple database or txt file so I can then use the “value of the bill” + “the vine” to show all the “$5 bill/vines” on one page, all the $10 bill+vines on another page.

I don’t actually know the best technical approach since I don’t have much experience with databases. But technically the ask is to save values (assigned to the images of each bill) and vine file names together and display them in the correct page. Since users are constantly changing the values I need to keep track of their latest state so my guess is that I would save this info in a txt file or db. Right now processing does save the last value/bill associated with each vine but I dont know where to access this.


#9

phew, no worries. Just thought I had already been kicked off! :wink:


#10

I am using Processing to create an interface that will load an array of vines

So I briefly looked over the code, but I’ll focus on a couple bullet points you mentioned in the behavior of your app.

You’ll have a few images ($5, $10, etc) that increase with a mousePressed() event. A video URL will be loaded into a region of your screen (whatever size your sketch window is), and upon each event with a positive( your yep, correct button) you log in a text file. I suggest you review how to detect an interaction event within the 2D coordinate system (x,y… specifically within the boundaries of your images)

First, reference this link on a simple tutorial on how to save a string to a txt file:

http://www.learningprocessing.com/examples/chapter-18/example-18-4/

So, some pseudocode:

Int dollarState = 5;


Main(){ 

Switch(dollarState){

Case 5:
LoadVideo("myURL1");
LoadImage("dolla bill y'all" );
/* note Processing is like collaging! Whatever is read first from top to bottom loads first in the graphical window! (depending on what loops they are nested in aside from the main draw loop) */

If(image progress forward button == pressed  ) {
DollarState=10;
} 
else if (image back button ==pressed){
DollarState == your last dollar image state
}

if (confirmation button == pressed ){ 
 Save ("my text or whatever I want to a text file nested in this loop");
}


break;

case 10:  // $10 bill image
/*

similar logic as above

*/

break;


} //end switch case

} //end program

This is the general logic of your program utilizing a simple switch case statement. The correct syntax is on you :wink:

Also, I may sound like a stickler… But somewhat detailed titles for posts are good practice (especially if you go on sites like http://stackoverflow.com ) with all things programming jumbled in.


#11

Thank you! I’ll start there. And also be more detailed when titling future posts. Appreciate the help.


#12

Hey,

One thing to consider is that to use a text document to store the data, you will also have to build in some ability to load and parse the info, if you hope to build an interface that also recalls these vine+bill combos as well as just storing the info. If you don’t need to recall the data in the application, that’s less of a concern, but in either case, I would suggest coming up with a CSV format to store data if you use text - that way it’s easy to parse in your app and also you can open it all up as a spreadsheet later for investigating / manipulating the data.

I would also mention that, much as I love Processing, what you’re trying to do would be fairly natural in an HTML5 / LAMP environment. It could be quite straightforward to build if you’re familiar with a little html / javascript, and then you could eventually work in some stuff like social media integration (since you are building a social tool using vine vids), and pulling in any of the vine metadata that’s available for these vids as well.

I’m not sure if a web environment is what you’re shooting for as far as the final home for this project, but if you do decide to use a database, that’s going to require some kind of database server or other, so it might be something to consider.

Good luck!