Creative Coding Week 5: Exercise 1 - Basic Text
A sketch was supplied that displays the cursor position next to a pointer indicating the position. The text is hidden when the cursor is close to the edges of the window. My solution was to offset the text depending on the quadrant of the window in which the cursor appears.
> View source code for preceding sketch.
/*
* Creative Coding
* Week 5, 01 - Basic Text
* by Jon McCormack
* Copyright (c) 2014 Monash University
*
* Amended by Gerard Holden to adjust text positioning so it does not run off edge of window.
*
* This sketch shows how to use text in Processing
* It draws the current location in x and y of the mouse on the screen
* and a red + centered at the mouse location
* Note that this requires that you have the "Arial" typeface installed on
* your computer. This font is standard on Mac and Windows computers
*
*/
PFont myFont; // STEP 1: the font to be used
float xSize = 10;
void setup() {
size(800, 600);
String [] fonts = PFont.list();
// println("Fonts available:");
// println(fonts);
// STEP 2: create the font object and reference it to myFont
// Using the Arial font, 16 point with antialiasing (smoothing)
myFont = createFont("Arial", 16, true);
// STEP 3: use myFont at size 24
textFont(myFont, 24);
// set the fill colour to white
fill(255);
}
void draw() {
// clear the screen to black
background(0);
// get the current mouse position as a string in the form "(x,y)"
String mousePosition = "(" + str(mouseX) + "," + str(mouseY) + ")";
// STEP 4: display the mousePosition string at the current mouse location
// adjusted to ensure the text is always in the window
float textW = textWidth(mousePosition);
float textH = textAscent() + textDescent();
if (mouseX < width/2) {
if (mouseY < height/2) {
text(mousePosition, mouseX, mouseY + textH); // quadrant 1
} else {
text(mousePosition, mouseX, mouseY - textH); // quadrant 3
}
} else {
if (mouseY < height/2) {
text(mousePosition, mouseX - textW, mouseY + textH); // quadrant 2
} else {
text(mousePosition, mouseX - textW, mouseY - textH); // quadrant 4
}
}
// text(mousePosition, mouseX, mouseY);
// draw the red '+' at the mouse location
stroke(255, 0, 0);
line(mouseX - xSize, mouseY, mouseX + xSize, mouseY);
line(mouseX, mouseY - xSize, mouseX, mouseY + xSize);
}
The sketch supplied in the course material follows.
> View source code for preceding sketch.
/*
* Creative Coding
* Week 5, 01 - Basic Text
* by Jon McCormack
* Copyright (c) 2014 Monash University
*
* This sketch shows how to use text in Processing
* It draws the current location in x and y of the mouse on the screen
* and a red + centered at the mouse location
* Note that this reqires that you have the "Arial" typeface installed on
* your computer. This font is standard on Mac and Windows computers
*
*/
PFont myFont; // STEP 1: the font to be used
float xSize = 10;
void setup() {
size(800, 600);
String [] fonts = PFont.list();
println("Fonts available:");
println(fonts);
// STEP 2: create the font object and reference it to myFont
// Using the Arial font, 16 point with antialiasing (smoothing)
myFont = createFont("Arial", 16, true);
// STEP 3: use myFont at size 24
textFont(myFont, 24);
// set the fill colour to white
fill(255);
}
void draw() {
// clear the screen to black
background(0);
// get the current mouse position as a string in the form "(x,y)"
String mousePosition = "(" + str(mouseX) + "," + str(mouseY) + ")";
// STEP 4: display the mousePosition string at the current mouse location
text(mousePosition, mouseX, mouseY);
// draw the red '+' at the mouse location
stroke(255, 0, 0);
line(mouseX - xSize, mouseY, mouseX + xSize, mouseY);
line(mouseX, mouseY - xSize, mouseX, mouseY + xSize);
}
