ITCC 004 | Images & Text

Artists

• Memo Akten
• Janelle Shane
• Aalto courses generated using a neural net trained with all the current courses in Aalto (2018)
• https://gpt3demo.com/
• Runway ML
• ml5js
• https://github.com/nashory/gans-awesome-applications

Text

If you don’t care about the font of your text, you can just use the command text() to draw text on the screen with a generic sans-serif font.

text("wow",100,100);

If you would like to have more control, you can load a specific font for drawing your text. There are two ways to do it:

• loadFont(): loads a font file from a folder called data inside your sketch folder. The font needs to be in .vlw format. You can create .vlw files with the Create Font tool (Tools–>Create Font).
• createFont(): You can also use any font installed on your system with the createFont(). It will dynamically convert your font to the correct format. createFont() renders the text as vectors when you use the default renderer.

Check the reference and the examples for more details on how to use the text tools.

Images

In order to display images in Processing, we need to use the PImage class.

PImage photo;

void setup() {
  size(640, 480);
  photo = loadImage("imageFileName.jpg");
}

void draw() {
  image(photo, 0, 0);
}

Where does the file have to be?

• You can have the image file on your computer. It needs to be saved in a folder called data inside your sketch folder.
• You can also use an url to load an online image.

Some Examples for Working with Images

Load and Display Image + createFont() for Loading a Font

Define an area of the Image as a Button

Use tint() to Control the Opacity of an Image

• tint() can be used to colorize or fade an image
• noTint() is an easy way to turn off any tint effect
• map() is used to map the values from the mouse coordinates to a range of 0–255

PImage doge;

void setup(){
	size(600,600);
	doge = loadImage("doge.png");
}

void draw(){
	background(0);
	float opacity = map(mouseX,0,width,0,255);
	textSize(24);
	text("Move the mouse from left to right to see magic!",40,height/2);
	tint(255,opacity);
	image(doge,0,0);
}

Use get() to Get the Color of a Pixel

• PImage get() – will give you the color value of a certain pixel

PImage img;
int x;
int y;
float s;
color c;

void setup(){
  size(640,480);
  img = loadImage("doge.jpg");
  background(0);
}

void draw(){
  x = int ( random(img.width) );
  y = int ( random(img.height) );
  c = img.get(x,y);
	
  s = map(mouseX, 0, width, 5, 30);
	
  fill(c);
  noStroke();
  ellipse(x,y,s,s);
}

Homework

No assignment for OpenProcessing, but feel free to add something to the Freestyle (08) folder. Start thinking about what kind of a final project would you like to create (and exhibit) for this course.

• See the guidelines
• Start from something very simple, you can already submit the URL to your document and keep on working on it before the project proposal deadline.