"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!
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
Stage 7: Additional challenges met!
Stage 7 introduced additional challenges of introducing the message dynamically (fading in, and in some cases growing and rotating) and creating a 'snippet' selection menu where you can find and select your favorite Pinky response. Narf! Furthermore, notice when a random response is generated by a canvas click, the select menu loads to that response. Wow.
We also incorporated some additional thematic Google Fonts into the ecosystem. Remember the power of font!
The wonders never cease at TNT!
...LOADING...
Stats: