<!DOCTYPE html>
<html><head>
<script src="javascript-processing-example-processing.js"></script>
<script src="javascript-processing-example-init.js"></script>
<link rel="stylesheet" href="javascript-processing-example-style.css">
</head><body><h1><a href="http://ejohn.org/blog/processingjs/">Processing.js</a></h1>
<h2>CharactersStrings</h2>
<p>Click on the image to give it focus and then type letters to
shift the location of the image.
Characters are typographic symbols such as A, d, and %.
The character datatype, abbreviated as char, stores letters and
symbols in the Unicode format, a coding system developed to support
a variety of world languages. Characters are distinguished from other
symbols by putting them between single quotes ('P').
A string is a sequence of characters. A string is noted by surrounding
a group of letters with double quotes ("Processing").
Chars and strings are most often used with the keyboard methods,
to display text to the screen, and to load images or files.</p>
<p><a href="http://processing.org/learning/basics/charactersstrings.html"><b>Original Processing.org Example:</b> CharactersStrings</a><br>
<script type="application/processing">
PImage frog;
PFont fontA;
int lettersize = 90;
int xoffset;
char letter;
void setup()
{
size(200, 200);
fontA = loadFont("Arial");
textFont(fontA);
textSize(lettersize);
// The String datatype must be capitalized because it is a complex datatype.
// A String is actually a class with its own methods, some of which are
// featured below.
String name= "rathausFrog";
String extension = ".jpg";
int nameLength = name.length();
println("The length of " + name + " is " + nameLength + ".");
name = name.concat(extension);
nameLength = name.length();
println("The length of " + name + " is " + nameLength + ".");
// The parameter for the loadImage() method must be a string
// This line could also be written "frog = loadImage("rathausFrog.jpg");
frog = loadImage(name);
}
void draw()
{
background(51); // Set background to dark gray
image(frog, xoffset, 0);
// Draw an X
line(0, 0, width, height);
line(0, height, width, 0);
// Get the width of the letter
int letterWidth = int(fontA.width(letter) * lettersize);
// Draw the letter to the center of the screen
text(letter, width/2-letterWidth/2, height/2);
}
void keyPressed()
{
// The variable "key" always contains the value of the most recent key pressed.
// If the key is an upper or lowercase letter between 'A' and 'z'
// the image is shifted to the corresponding value of that key
if(key >= 'A' && key <= 'z') {
letter = char(key);
// Scale the values to numbers between 0 and 100
float scale = 100.0/57.0;
int temp = int((key - 'A') * scale);
// Set the offset for the image
xoffset = temp;
println(key);
}
}
</script><canvas width="200" height="200"></canvas></p>
<div style="overflow: hidden; height: 0px; width: 0px;"><img src="javascript-processing-example-rathausFrog.jpg" id="rathausFrog.jpg"></div>
<pre><b>// All Examples Written by <a href="http://reas.com/">Casey Reas</a> and <a href="http://benfry.com/">Ben Fry</a>
// unless otherwise stated.</b>
PImage frog;
PFont fontA;
int lettersize = 90;
int xoffset;
char letter;
void setup()
{
size(200, 200);
fontA = loadFont("Arial");
textFont(fontA);
textSize(lettersize);
// The String datatype must be capitalized because it is a complex datatype.
// A String is actually a class with its own methods, some of which are
// featured below.
String name= "rathausFrog";
String extension = ".jpg";
int nameLength = name.length();
println("The length of " + name + " is " + nameLength + ".");
name = name.concat(extension);
nameLength = name.length();
println("The length of " + name + " is " + nameLength + ".");
// The parameter for the loadImage() method must be a string
// This line could also be written "frog = loadImage("rathausFrog.jpg");
frog = loadImage(name);
}
void draw()
{
background(51); // Set background to dark gray
image(frog, xoffset, 0);
// Draw an X
line(0, 0, width, height);
line(0, height, width, 0);
// Get the width of the letter
int letterWidth = int(fontA.width(letter) * lettersize);
// Draw the letter to the center of the screen
text(letter, width/2-letterWidth/2, height/2);
}
void keyPressed()
{
// The variable "key" always contains the value of the most recent key pressed.
// If the key is an upper or lowercase letter between 'A' and 'z'
// the image is shifted to the corresponding value of that key
if(key >= 'A' && key <= 'z') {
letter = char(key);
// Scale the values to numbers between 0 and 100
float scale = 100.0/57.0;
int temp = int((key - 'A') * scale);
// Set the offset for the image
xoffset = temp;
println(key);
}
}</pre>
</body></html>