trouble with translating PImage

Programming Questions

savannah...

trouble with translating PImage

in Programming Questions • 1 year ago

Hi there: I'm having some difficulty translating a PImage-- a shine-graphic to be placed on top of dialogue boxes in an iMessage-like list of messages. If you run the sketch, you'll see the first dialogue box works as intended, but oddly the following instances of class Post ignore the translate call to the PImage, grad, in the class Blert. Thoughts on why this may be? I appreciate any help. Thanks.

Main:

//very basic class structure added
//posting improved
String[] names = {
"Friend",
"Savannah",
"Wallace Stevens",
"CXP team member",
"M.M.",
"Another friend"
};
String[] sayings = {
"Hi there.",
"Hi my name is so-and-so and I'm working on so-and-so-and-so-and-so project.",
"She sang beyond the genius of the sea. The water never formed to mind or voice, like a body, wholly body, fluttering its empty sleeves; and yet its mimic motion made cry, caused constantly a cry, that was not ours, althought we understood, inhuman, and of the veritable ocean...Oh blessed rage for order, pale Ramon, the makers rage to order words of the sea. Words of the sea. Words of fragrant portals, dimly starred, and of ourselves and of our origins, in ghostlier demarcations, keener sounds.",
"This is a test for a new Yammer feed for the 1100 Flower Status Board. Send suggestions for improvements to Savannah Niles.",
"I do not like to repeat successes, I like to go on to other things.",
"The surest way to corrupt a youth is to teach them to hold in higher esteem those who think alike than those who think differently."
};
String[] imageURLs = { //question about .gifs in processing
//"https://www.yammer.com/mugshot/48x48/817513",
"https://www.yammer.com/mugshot/48x48/10457622",
"https://www.yammer.com/mugshot/48x48/14014053" //Savannah
};
Post[] posts;
PFont f;
Post post;
//color ltBlue = color (173, 238, 245);
color filCol = color (154, 225, 250);
int minSpaceForPost, spaceLeft, postLength, padding;
void setup () {
size (800, 500);
background(0);
smooth();
f = createFont("ArialMT", 16, true);
int fontSize = 16;
textFont(f, fontSize);
textAlign(LEFT);
padding = 20;
minSpaceForPost = 48+padding;
int maxNumberOfPosts = floor((height-padding)/minSpaceForPost);
spaceLeft = height;
posts = new Post[maxNumberOfPosts];
for (int i = 0; i<posts.length; i++) {
posts[i] = new Post(names[int(random(6))], imageURLs[int(random(2))], sayings[int(random(6))], 16);
println (i + " is initialized.");
}
//first post-- check to see if too big
postLength = posts[0].init();
if (spaceLeft >= postLength) {
posts[0].display(height-spaceLeft);
spaceLeft -= postLength;
nextPost();
}
else {
println ("This first post was too big. Head over to Yammer to read it.");
}
}
void nextPost() {
for (int i=1; i<(posts.length-1); i++) {
postLength = posts[i].init();
if (spaceLeft >= postLength) {
// pushMatrix();
// translate(0,height-spaceLeft);
posts[i].display(height-spaceLeft);
// popMatrix();
spaceLeft -= postLength;
println (spaceLeft);
}
else {
println("Out of space with " + spaceLeft + " pixels left.");
break;
}
}
}

Blert: class for text and text bubble, as well as the troubled PImage

class Blert {
String name, says;
int nameSize, fontSize, lineTotal;
PVector boxCorner, boxSize, blertCorner, blertSize;
Blert() {
}
Blert(String name, int nameSize, String says, int fontSize, PVector boxCorner, PVector boxSize, PVector blertCorner, PVector blertSize, int lineTotal) {
this.name = name;
this.nameSize = nameSize;
this.says = says;
this.fontSize = fontSize;
this.boxCorner = boxCorner;
this.boxSize = boxSize;
this.blertCorner = blertCorner;
this.blertSize = blertSize;
this.lineTotal = lineTotal;
}
void display () {
//box
fill(filCol);
strokeWeight(3);
stroke(filCol);
rect(boxCorner.x, boxCorner.y, boxSize.x, boxSize.y, fontSize*1.5, fontSize*1.5);
//shine
PImage grad;
grad = loadImage("gradient.png");
//shine adjustments ******Problem: these are set to work with width=800. Not adjustable. Fix later?
pushMatrix();
scale(1.33, 1.3);
//resize(1.33, 1.3);
// translate(, );
image(grad, blertCorner.x-43, blertCorner.y-20+5.5);
// image (grad, blertCorner.x-43, blertCorner.y- 20+5.5);
popMatrix();
//says
fill(0, 164, 211);
text(name + ": " + says, blertCorner.x, blertCorner.y, blertSize.x, blertSize.y);
//name
fill(0);
text(name + ": ", blertCorner.x, blertCorner.y, blertSize.x, blertSize.y);
}
}

MugShot: profile picture

class MugShot {
String imageURL;
PVector mugShotLoc;
int margin;
PImage mug;
MugShot() {
}
MugShot (String imageURL, PVector mugShotLoc, int margin) {
this.imageURL = imageURL;
this.mugShotLoc = mugShotLoc;
this.margin = margin;
}
void display() {
imageMode (CENTER);
// line(margin, 0, margin, height);
//triangle
strokeWeight(3);
stroke(filCol);
fill(filCol);
triangle (1.5*mugShotLoc.x, mugShotLoc.y-6, margin*1.25+2.5, mugShotLoc.y-12, margin*1.25+2, mugShotLoc.y+2);
pushMatrix();
translate (3, 0);
noStroke();
triangle (1.5*mugShotLoc.x, mugShotLoc.y-6, margin*1.25+2.5, mugShotLoc.y-12, margin*1.25+2, mugShotLoc.y+2);
popMatrix();
//image
mug = loadImage(imageURL, "gif");
image(mug, mugShotLoc.x, mugShotLoc.y);
}
}

Post: engine to compile all parts of a post

class Post {
Blert blert;
MugShot mugShot;
// Shine shine;
/********************INIT VARIABLES***********************/
String imageURL;
String name, says;
int margin = 75;
float bodyWidth = width-(margin);
int lineTotal, nameSize;
int fontSize;
PVector boxCorner, boxSize, blertCorner, blertSize, mugShotLoc;
int place;
/********************CONSTRUCTORS**********************/
Post () {
}
Post (String name, String imageURL, String says) {
this.name = name;
this.imageURL = imageURL;
this.says = says;
}
Post (String name, String imageURL, String says, int fontSize) {
this.name = name;
this.imageURL = imageURL;
this.says = says;
this.fontSize = fontSize;
}
Post (String name, String imageURL, String says, int fontSize, float bodyWidth) {
this.name = name;
this.imageURL = imageURL;
this.says = says;
this.fontSize = fontSize;
this.bodyWidth = bodyWidth;
}
Post (String name, String imageURL, String says, int fontSize, float bodyWidth, int margin) {
this.name = name;
this.imageURL = imageURL;
this.says = says;
this.fontSize = fontSize;
this.bodyWidth = bodyWidth;
this.margin = margin;
}
/********************INIT AND DISPLAY**********************/
int init() {
String totalText = name + ": " + says;
println (totalText);
//deltaW and deltaH are aggregates of shift variables for simplicity
int deltaW = padding+margin;
int deltaH = padding; //+ place in stack
lineTotal = ceil(textWidth(totalText)/(bodyWidth-deltaW-padding*1.5));
nameSize = ceil(textWidth(name + ": "));
boxCorner = new PVector (0+deltaW, 0+deltaH-.5*padding);
boxSize = new PVector (bodyWidth-deltaW+padding*1.5, fontSize*1.5*lineTotal+padding);
blertCorner = new PVector (0+ deltaW+padding, 0+deltaH+2);
blertSize = new PVector (bodyWidth-deltaW, fontSize*1.5*lineTotal);
mugShotLoc = new PVector (margin-.25*margin, padding*1.75);
////////////////
blert = new Blert(name, nameSize, says, fontSize, boxCorner, boxSize, blertCorner, blertSize, lineTotal);
mugShot = new MugShot(imageURL, mugShotLoc, margin);
///////////////
return(int(boxSize.y-boxCorner.y+padding));
}
void display(int place) {
this.place = place;
pushMatrix();
translate(0, place+padding);
blert.display();
mugShot.display();
popMatrix();
}
}

Replies(3)

Chrisir

Re: trouble with translating PImage

1 year ago

In my not-so-ambitious tests, I found out that you might want to insert

imageMode(CORNER);

before calling

image(grad,
blertCorner.x-13, blertCorner.y-20+5.5 );

That's because
you have

imageMode (CENTER);

in class MugShot / method display() which changes it and then it stays that way ( imageMode(CORNER); is the default).

Hint:

you could load the image grad once in setup (and make PImage grad; global of course) instead of loading it again and again in the class (using hard drive always costs quite a lot of time).

Greetings, Chrisir

savannah...

Re: trouble with translating PImage

1 year ago

Thanks so much-- this was exactly the problem. I am thankful for you attention to detail! My blerts are looking so shiny now....

Chrisir

Re: trouble with translating PImage

1 year ago

Thanks!

I absolutely like the design of the bubbles with text!

Top Reply