Loading...
Logo
Processing Forum

origami alphabet

in Programming Questions  •  4 months ago  
I have made a sketch which types origami letters. The more often a letter occurs in a string, the more it unfolds. It uses tweets as a source, but once you click, you can type your own text. Now i want to make a cool animation at the start of the sketch saying 'Unfold'. The max steps is 6 and I want al the letters to begin at the first step and end at the last step with intervals of 2 seconds. Can anyone help me? I have uses png files as images for the letters.


(this is the class)

class typedLetter{
  String typedChar;
  int count;
  float letterAlpha = 0;
  
  typedLetter(String typedChar){
    this.typedChar = typedChar;
    letter lInst = letters.get(typedChar);
    //letter_shapes = lInst.letter_shapes;
    //println(typedChar);
    this.count = lInst.count;
    lInst.count++;
    lInst.count = constrain(lInst.count,0,max_steps);
  }
  void display(){
    tint(255,letterAlpha);
    
    letterAlpha += fadeSpeed;
    letterAlpha = constrain(letterAlpha,0,255);
    
    letter lInst = letters.get(typedChar);
    PImage origami = lInst.letter_shapes.get(count);
    image(origami,0,0);
    //println("DISPLAY");
  }
}


class letter {
  String letter;
  ArrayList<PImage> letter_shapes;
  int count;
  letter(String letter) {
    this.letter = letter;
    letter_shapes = new ArrayList<PImage>();
    for (int i=0; i<=max_steps; i++) {
      String filename = "letter_"+this.letter+"_step_"+(i+offset)+".png";
      //println(filename);
      PImage letter_shape = loadImage(filename);
      letter_shapes.add(letter_shape);
    }
  }


  String toString() {
    return "[LETTER OBJECT] I am the letter " + letter;
  }
}


this is the twitter feed


import twitter4j.*;


ConfigurationBuilder cb;
Twitter twitter;
ArrayList<String> getTweets() {
  Query query = new Query("origami");

  ArrayList<String> tweet_texts = new ArrayList<String>();

  try {
    QueryResult result = twitter.search(query);
    ArrayList tweets = (ArrayList) result.getTweets();
    for (int i = 0; i < tweets.size(); i++) {
      Status t = (Status) tweets.get(i);
      String tweet_msg = t.getText();
      int q_count = 0;
      for (int j=0; j<tweet_msg.length(); j++) {
        if (tweet_msg.charAt(j) == '?') {
          q_count++;
        }
      }
      
      if (q_count < 5) {
        tweet_texts.add(t.getText());
      }
    };
  }
  catch (TwitterException te) {
    //println("Couldn't connect: " + te);
  };

  return tweet_texts;
}

void initTwitter() {
  cb = new ConfigurationBuilder();
  cb.setOAuthConsumerKey("uEpelg8CTgvjN4Z99s9iaw");
  cb.setOAuthConsumerSecret("sDR7oeBkNKY9AlBxXq2t6XRm4fbXqzxlZdpCtaHjM");
  cb.setOAuthAccessToken("46233081-oBUW6fXkb03sD1SENtZbSsxmuYK9ykLTFfIQXdhaF");
  cb.setOAuthAccessTokenSecret("2EGcFHucVGSGFc2d2F9ufPbe7tlqyIxdeHe8DqOpk");

  twitter = new TwitterFactory(cb.build()).getInstance();
}
void getNewTweet(){
 ArrayList<String> tweets = getTweets();
    /*for (int i=0; i<tweets.size(); i++) {
      String tweet = tweets.get(i);
      println(tweet);
    } */
    String tweet = tweets.get(floor(random(tweets.size())));
    for(int i = 0; i<tweet.length(); i++){
      typeChar(tweet.charAt(i)+"");
    }
    //println(tweet);
}

this is the rest

HashMap<String, letter> letters;
ArrayList<typedLetter> letterList = new ArrayList<typedLetter>();

float letterWidth = 90;
float letterHeight = 90;

float letterSpaceX = 90;
float letterSpaceY = 90;

float Xpos = 85;
float Ypos = 250;

float scrollY = 0;
float fadeSpeed = 3;

PFont myFont;

boolean loadingTwitter = true;
int lastTyped = millis();

int max_steps = 6;
int offset = 1;

void setup() {
  

myFont = createFont("AbeatbyKai", 46);
 textFont(myFont); 
 
  size(displayWidth, displayHeight, P2D);
  background(128);

  letters = new HashMap<String, letter>();
  for (int i=65; i<=90; i++) {
    String character = char(i) + "";
    letter l = new letter(character);
    letters.put(character, l);
  }
  letter space = new letter(" ");
  letters.put(" ", space);
  /*for (int i=65; i<=90; i++) {
   for(int j =0; j<max_steps; j++){
   typeChar(char(i)+"");
   }
   }*/
  initTwitter();
  getNewTweet();
}
void draw() {

  background(255);
  smooth();
  fill(255);

  textAlign(CENTER, BOTTOM);
  pushMatrix();
  translate(Xpos, Ypos);
  rotate(-HALF_PI);
  smooth();
  textFont(myFont);
  textSize(50);
  text("U n f o l d   M e", 0, 0);
  popMatrix();

  if (millis()-lastTyped > 15*500) {
    for (int i =  letterList.size(); i>0; i--) {
      removeChar();
      loadingTwitter = true;
    }
    getNewTweet();
    lastTyped = millis();
    //println("RESET");
    background(0);
  }

  rectMode(CENTER);
  translate(0, scrollY);
  translate(80, 70);

  int letterNumber = 0;
  int maxLetters = floor((width-100)/letterSpaceX);
  
  float letters_per_row = 13;
  float num_rows = floor(letterList.size() / letters_per_row);
  float max_rows = 8;
  
  float offset = 0;
  if (num_rows >= max_rows) {
    offset = -((num_rows-max_rows) * letterSpaceY);
  }
  
  
  for (typedLetter origamiLetter : letterList) {
    pushMatrix();
    int x = letterNumber % maxLetters;
    int y = floor(letterNumber/maxLetters);
    translate(x*letterSpaceX, (y*letterSpaceY) + offset);
    origamiLetter.display(); 
    letterNumber++;
    popMatrix();
  }

  if ((frameCount % 60) < 30) {
    pushMatrix();
    int x = letterNumber % maxLetters;
    int y = floor(letterNumber/maxLetters);
    translate(x*letterSpaceX, (y*letterSpaceY) + offset);
    stroke(10);
    line(x, y, x, letterSpaceY);
    popMatrix();
  }

  /*
  //if (frameCount%70==1) {
   stroke(0);
   //letterNumber++;
   int x = letterNumber % maxLetters;
   int y = floor(letterNumber/maxLetters);
   pushMatrix();
   translate(x*letterSpaceX, y*letterSpaceY);
   line(0, -15, 0, 15);
   popMatrix();
   //}
   */
}
void typeChar(String letter) {
  letter = letter.toUpperCase();
  char i = letter.charAt(0);
  if (i>=65 && i<=90) {
    letter = i+"";
  }
  else {
    letter = " ";
  }
  typedLetter origamiLetter = new typedLetter(letter);
  letterList.add(origamiLetter);
}

void removeChar() {
  if (letterList.size()>0) {
    typedLetter letterInst = letterList.get(letterList.size()-1);
    String typedChar = letterInst.typedChar;
    letter lInst = letters.get(typedChar);
    lInst.count--;
    lInst.count = constrain(lInst.count, 0, max_steps);
    letterList.remove(letterList.size()-1);
  }
}

void keyPressed() {
  if (key == BACKSPACE) {
    removeChar();
  }
  else if (key != CODED) {
    if (loadingTwitter) {
      for (int i =  letterList.size(); i>0; i--) {
        removeChar();
      }
      loadingTwitter=false;
    }
    typeChar(key+"");
    lastTyped = millis();
  }
}

Replies(3)

Re: origami alphabet

4 months ago
There is (at least one) an animation library that can ease your work for this task.
Or you do it manually, using millis() and state management.

Re: origami alphabet

4 months ago
Hey, 

Thanks for the reaction, but I have done this together with my teacher, so half of the code is like Chinese to me, so I don't even know where to begin :P

Re: origami alphabet

4 months ago

we can't run it because we don't have the images.

can you upload on www.openprocessing.org (using version 1.51) or so ?