"Gee Brain...
What are we going to do tonight?..."
"Same thing we do every night, Pinky: Try to take over the world!"
That's our goal too, Brain!
This app features some of the hilarious banter between these two lab mice. A common shtick in every(?) episode was Brain asking Pinky: "Are you pondering what I'm pondering" with Pinky replying with a goofy non sequitur.
Each click of the canvas reveals a new (non-repeated) random (no pun intended) response from Pinky. Stats are shown below the canvas.
The challenge was to calculate a font size that best fit into the canvas based on the length of the response. Novices had several approaches to the problem and you can choose how the font size is determined by using the radio-button console under the picture of the hapless mice!
Egad, Brain! We were so inspired by the purple background behind the mice that we added two new shapes to our JSGS library: TNTQuadStar and TNTPulsar. We're also working toward animating those shapes with P5JS. Stay tuned!
See the font calculation code:
When TTG did this work, he envisioned a scenario where the font size scaled with the number of characters in the message.
This looks like a job for 'map'!
But as usual, novices outshined him and came up with other techniques that were easier and probably better. hence:
Learn from your novices!
function computeTextSize(){
numChars = msg.length;
noStroke();
if(fontCalcRoutineNo == 0) calcFontByMapping();
if(fontCalcRoutineNo == 1) calcFontByRooting();
if(fontCalcRoutineNo == 2) calcFontByLooping();
charFontPara.innerHTML = "No. chars = " + numChars + "; Font size = " + fontSize.toFixed(2);
}//end computeTextSize
//-----------------------------------------------
function calcFontByRooting(){
fontSize = myWidth/(Math.round(Math.sqrt(numChars)))
if(fontSize >= myWidth/4){
fontSize = myWidth/4;
}
}//end calcFontByRooting
//-----------------------------------------------
function calcFontByLooping(){
fontSize = 120;
textSize(fontSize);
let msgWidth = textWidth(msg);
while(msgWidth > myWidth*2.4){
fontSize--;
textSize(fontSize);
msgWidth = textWidth(msg);
}
}//end calcFontByLooping
//-----------------------------------------------
function calcFontByMapping(){
if(numChars < 50){
fontSize = map(numChars, 5, 30, 100, 60);
}else if (numChars < 100){
fontSize = map(numChars, 50, 100, 40, 15);
}else{
fontSize = map(numChars, 100, 120, 30, 20, true);
}
if(myWidth <= 390) fontSize = minFontSize;
if(myWidth <= 350) fontSize = (minFontSize)*.75;
}//end calcFontByMapping
...LOADING...
Stats:
