We love Scott and his Cat :) – Introduction to Interactive Media

In this assignment, I made a picture by using processing. The basic idea is to create two layers of images after importing two images. One image is full of words while the other is Scott’s portrait, the gradients of words sketches outline of the portrait. Then I decided to show all of our names on the portrait of Scott, it would be awesome! Here is the work:)

The first step is to get one text image which is full of words with white background. I used “string” in processing and then got the following image.

The code is here

PFont f;                          
int t = 20;
String s = "We love Scott and his cat! We love Scott and his cat! We love Scott and his cat!";
String h = "Shelley Jiwon Miha Mateo Reine Dean Shunya Yatin Rong Orsolya Luis Cynthia";
void setup() {
  size(730,730);
  f = createFont("Georgia",20,true); 
}

void draw() {
  background(255);
  textFont(f,20);                  
  fill(0);                       
  text(s,10,20); 
  text(h,10,40); 
  text(s,10,60); 
  text(h,10,80); 
  text(s,10,100); 
  text(h,10,120);
  text(s,10,140);
  text(h,10,160);
  text(s,10,180);
  text(h,10,200);
  text(s,10,220);
  text(h,10,240);
  text(s,10,260);
  text(h,10,280);
  text(s,10,300);
  text(h,10,320);
  text(s,10,340);
  text(h,10,360);
  text(s,10,380);
  text(h,10,400);
  text(s,10,420);
  text(h,10,440);
  text(s,10,460);
  text(h,10,480);
  text(s,10,500);
  text(h,10,520);
  text(s,10,540);
  text(h,10,560);
  text(s,10,580);
  text(h,10,600);
  text(s,10,620);
  text(h,10,640);
  text(s,10,660);
  text(h,10,680);
  text(s,10,700);
  text(h,10,720);
}

I tried to find a function to simplify the code, but there was something wrong when I did. Eventually, I printed lines one by one.

About Scott’s portrait, it’s from TWITTER…HAHA

Here is the rest of the code which combines two images.

PImage portrait,txt;
size(800,800);
background(255);
txt=loadImage("cat text.jpg");
tint(0, 153, 204, 126);
txt.resize(height,width);
portrait=loadImage("scott cool.jpg");
portrait.resize(height,width);
portrait.filter(INVERT);
portrait.filter(GRAY);
portrait.filter(POSTERIZE,4);
txt.mask(portrait);
image(txt,0,0);
save("TextThroughPortrait.jpg");

The code here is quite simple, “filter” and “tint” worked for the whole combination.

Leave a Reply Cancel reply