Source Code. Projects. Nerd Stuff. Art Stuff.

Moving Storybook


Posted on October 2nd, by amoeboar in classes, icm. No Comments

I created an animated storybook. A collection of nouns, adjectives, and verbs is stored in a word array, and each time the user clicks the mouse, a random word is chosen. While each word is displayed, it’s possible to draw directly into the screen by pressing the mouse and moving the cursor. After releasing the mouse, the word will appear to trace its path.

The program runs and displays a continuous cycle of 72 images (according to the speed I wanted the words to travel at). Each image is displayed for 30 milliseconds to create animation.

The only problem I had with this sketch is that the font I used will not load properly in JS mode, so what we see is the default font.

 

 

[gn_spoiler title="Moving Storybook Source Code:" open="0" style="1"]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
/********************************
/ John Capogna
/ movingStorybook.pde
/ ITP, 2012
/ based on the 'Animator' sketch
/ http://processing.org/learning/topics/animator.html
********************************/

/* WORD ARRAY
********************************/
String[] word = {
 
// nouns
"time", "year", "man", "woman", "day", "desolation", "world", "life",
"hands", "eyes", "place", "wish", "fury", "you", "I", "we", "us", "it",
"storm", "rain", "dawn", "dusk", "sun", "moon", "stars", "death", "faith",
// verbs
"command", "fight", "die", "fall", "rise", "have", "do", "say", "go",
"know", "take", "see", "come", "think", "look", "want", "give", "use",
"tell", "seem", "feel", "try", "leave", "call", "beg", "hear", "love",
"need", "offer", "become", "will", "don't", "please", "won't",
// adjectives
"new", "first", "last", "long", "great", "own", "old", "right", "high",
"different", "small", "large", "next", "early", "young", "important",
"few", "sometimes", "when", "lovely", "painful", "dark", "light", "this",
"true", "always", "without", "one", "more", "thankful", "a", "an", "been",
"my", "beautiful", "fragrant", "delicious",
// prepositions
"to", "of", "in", "for", "on", "with", "at", "by", "from", "up", "about",
"into", "after", "beneath", "above", "because", "why", "but",
// fillers
 "and", "or", "as", "the", "and", "or", "as", "the", "and", "or", "as", "the",
 "!", "?", "!", "?", "!", "?"
};
/*******************************/

int currentFrame = 0;
int randomWord;
PImage[] frames = new PImage[72];  // each frame in the cycle is a new PImage
PImage paper;
PFont font;
int lastTime = 0;

void setup() {
  size(800, 600);
  frameRate(90);
  paper = loadImage("http://theflavorful.com/wp-content/uploads/2012/10/paper.png");
 
  for (int i = 0; i < frames.length; i++) {
    frames[i] = paper; // Create a blank frame
  }
 
  fill(35);
  font = loadFont("Mistral-32.vlw");
  textFont(font, 32);
  image(paper, 0, 0);
}

void draw() {

  int currentTime = millis();
 
  if (currentTime > lastTime+30) {  // if 30 milliseconds has passed
    nextFrame();                    // move on to the next frame
    lastTime = currentTime;         // save the new time
  }
 
  // when the mouse is pressed create a new word at the mouse's location
  if (mousePressed == true) {
    text(word[randomWord], pmouseX, pmouseY, mouseX, mouseY);
  }
}

void nextFrame()
{
  frames[currentFrame] = get();        // Get the display window
  currentFrame++;                      // Increment to next frame
  if (currentFrame >= frames.length) {
    currentFrame = 6;       // skips over first blank frame to avoid glitches
  }
  image(frames[currentFrame], 0, 0);
}

void mousePressed() {       // Event handler to generate random word
    randomWord = int(random(word.length));
}
[/gn_spoiler]




Leave a Reply