TextSize in name spacing mode

CallumStrachan

Hey, Im having some issues with the textSize function when using it multiple times in a single Canvas in namespacing mode. Wondered if anyone has any ideas where I'm going wrong.

Apologies for any messy/poorly written code, this is my first p5 programme.

Example

Code Snippet:

var sketch5 = function(p) {

  p.peopleCount;
  p.currentValue;

  p.textExample;
  p.typeChoice;

  p.mappedFigure;

  p.setup = function() {

    var peopleCanvas = p.createCanvas(200, 300);

    peopleCanvas.parent('canvasHold');

    calport27 = p.loadFont('fonts/ASoPMFCalport-Circle2.7.ttf', p.setType);

    p.background(255);

    p.peopleCount = 0;

    p.buttonIn = p.createButton('IN');
    p.buttonOut = p.createButton('OUT');

    p.buttonIn.position(980, 30);
    p.buttonOut.position(980, 70);

    p.fill(0);

    p.buttonIn.id('buttonIn');
    p.buttonOut.id('buttonOut');

    p.buttonIn.mousePressed(p.doCountPlus);
    p.buttonOut.mousePressed(p.doCountMinus);

    p.buttonIn.style("background-color", buttonColour);
    p.buttonOut.style("background-color", buttonColour);

    p.buttonIn.style("z-index", "100000");
    p.buttonOut.style("z-index", "100000");
  }

  p.setType = function() {

    p.fill(0);

    currentTF = calport27 ;

    p.textFont("ASop MF Calport");

    p.currentValue = p.text("Visitors: " + p.peopleCount, 15, 270);
    p.textAlign(p.LEFT, p.BASELINE);
    p.mappedFigure = p.text("Type Frequency: " + '2.7', 15, 285);

    p.textSize(12);
    p.text('people', 15, 20);

    p.textSize(27);
    p.textAlign(p.CENTER, p.CENTER);
    p.textFont(calport27);
    p.textExample = p.text('A SUM\nOf\nPARTS', 100, 115);

  }

  p.doCountPlus = function() {

    p.peopleCount++;
    p.typeCheck();

  }

  p.doCountMinus = function() {

    if (p.peopleCount > 0) {
      p.peopleCount--;
    }

    p.typeCheck();
  }

  p.typeCheck = function() {

    p.typeChoice = p.map(p.peopleCount, 0, 100, 2.7, 0.3);

    p.rounded = Math.round(p.typeChoice * 10) / 10;

    if (p.rounded < 0.3) {
      p.rounded = 0.3;
    }
    var fixed = p.rounded.toFixed(1);

    currentTF = window['calport' + fixed*10] ;

    visitors = p.peopleCount;
    typeFreq = p.rounded;

    p.background(255);

    p.textAlign(p.LEFT, p.BASELINE);
    p.textSize(12);
    p.textFont("ASop MF Calport");

    p.text("people", 15, 20);
    p.text("Type Frequency: " + p.rounded, 15, 285);
    p.text("Visitors: " + p.peopleCount, 15, 270);

    p.textAlign(p.CENTER, p.CENTER);

    p.textSize(27);
    p.textFont(currentTF);
    p.text('A SUM\nOf\nPARTS', 100, 115);
  }

  p.draw = function() {
  }

}
var people = new p5(sketch5);

The issue is that when the typeCheck function runs (after pressing in or out buttons) that the title and data text take the bigger text size specified later in the function for the "A Sum of Parts" text and not the smaller text size specified right before their text functions.

So basically I am trying trying to create 5 separate sketches that then share some variables that inform each other, which is all working okay locally but the video and audio inputs are not being gathered when on my server. Would this be because they need to be running on a https:// url?

Any help would be greatly appreciated, thanks!

GoToLoop

This is just a cleanup attempt. I haven't tested it at all since I don't have those fonts! :(|)

/**
 * PeopleCount (v2.1.4)
 * by  CallumStrachan
 * mod GoToLoop (2016-May-19)
 *
 * CallumStrachan.co.uk/aproductof/combined.html
 * forum.Processing.org/two/discussion/16685/textsize-in-name-spacing-mode
*/

"use strict";

new p5(p => {
  const MIN_FOLKS = 0, MAX_FOLKS = 100,
        DEFAULT_FONT_PATH = 'fonts/ASoPMFCalport-Regular',
        FONT_PATH = 'fonts/ASoPMFCalport-Circle', FONT_EXT = '.ttf',
        FONTS = 25, IDX_OFFSET = 3,
        fonts = Array(FONTS);

  let regularFont, people = 0;

  p.preload = () => {
    regularFont = p.loadFont(DEFAULT_FONT_PATH + FONT_EXT);

    for (let i = 0; i < FONTS; ++i) {
      const freq = p.nf(.1 * (i + IDX_OFFSET), 0, 1);
      fonts[i] = p.loadFont(FONT_PATH + freq + FONT_EXT);
    }
  };

  p.setup = () => {
    p.createCanvas(200, 300).parent('canvasHold');
    p.fill(0).noStroke().noLoop();

    const buttonIn = p.createButton('IN'), buttonOut = p.createButton('OUT');

    buttonIn.position(980, 30).id('buttonIn').mousePressed(doCountPlus);
    buttonOut.position(980, 70).id('buttonOut').mousePressed(doCountMinus);

    buttonIn.style('background-color', p.color('blue')).style('z-index', 100000);
    buttonOut.style('background-color', p.color('red')).style('z-index', 100000);
  };

  p.draw = () => {
    const fontIdx = p.round(p.map(people, MIN_FOLKS, MAX_FOLKS, FONTS - 1, 0)),
          freq = p.nf(.1 * (fontIdx + IDX_OFFSET), 0, 1);

    p.background(255);

    p.textFont(regularFont).textAlign(p.LEFT, p.BASELINE).textSize(12);
    p.text('People', 15, 20);
    p.text(`Visitors: ${people}\nFrequency: ${freq}`, 15, 270);

    p.textFont(fonts[fontIdx]).textAlign(p.CENTER, p.CENTER).textSize(27);
    p.text('A SUM\nOF\nPARTS', 100, 115);
  };

  function doCountPlus() {
    p.redraw(people < MAX_FOLKS && ++people);
  }

  function doCountMinus() {
    p.redraw(people > MIN_FOLKS && --people);
  }
});

CallumStrachan

Brilliant, thanks! Took a few tweaks but that seems to have fixed the textSize issue.

Now to go back through the rest of it and make it look as nice as your part haha! Lots of quicker ways to do things I can get from that.

Any ideas on why it is not asking permission for or trying to gathering the video and audio inputs? I've assumed its due to needing an SSL certificate but would rather not pay for that if I don't need to!

blindfish

Check for output in your browser console: it should inform you if it's blocking AJAX requests and why; or alternatively will list any requests that failed for other reasons...

GoToLoop

• Just an addendum: The code I've posted is in JS ES6 version, a.K.a. ECMA2015. ;;)
• However, only very recent browsers can understand the new syntax. :-SS
• Once ready, in order to deploy the program for the general public, you're gonna need to transpile it back to JS ES5, which all browsers can run. :-\"
• For such, simply paste the non-ES5 code at the left side and obtain its corresponding ES5 code at the right side, going to this site: <:-P https://BabelJS.io/repl/

GoToLoop

Took a few tweaks but that seems to have fixed the textSize() issue.

Well, I've peeked @ http://CallumStrachan.co.uk/aproductof/combined/sketch.js in order to know what those fixes were about. ;))

Exported back those to the posted code here as version 2.1. :ar!

Ah, and don't forget to transpile it to ES5 via https://BabelJS.io/repl/, OK?. L-)

CallumStrachan

You guys are crazy efficient, its actually scary! =D> haha

the color functions at 39,40 needed p. infront though :>

Did you notice it had happened again in the time programme then? X_X any ideas how to fix it in there? Seems to be when I use the custom fonts it just ignores the textSize :((

And yeah sure will remember to use that when it's ready to go live properly just uploading it to test for now!

In regards to the video/sound input issue, checked the console and it says getUserMedia() no longer works on insecure origins. So I guess it is in need of a SSL then!

Thanks for all the help so far code lords! ^:)^ ^:)^ ^:)^

Edit: Also should I be worried that you can access those files? I should take another look at my file permissions maybe :))

GoToLoop

The color() functions at 39,40 needed p. in front though.

Oops, forgot about those! X_X In order to access any of p5.js' API we need the sketch's p5's reference.
In this case, parameter p holds it. :-B Anyways, fixed it now as of version 2.1.1. O:-)

GoToLoop

Seems to be when I use the custom fonts it just ignores the textSize().

Since my tweaked version 2.1, 'fonts/ASoPMFCalport-Regular.ttf' is being loaded via loadFont() too.

And when I go to your sketch's URL, and then paste my own version in the console, thus instantiating another "People" sketch canvas, textSize() is clearly working for me for 'People', 'Frequency: ' & 'Visitors: ' strings. :>

CallumStrachan

Oh yeah sure the "people" canvas is fine, its the "time" canvas that I having the problem with now :(

The clock in the middle should be center aligned and bigger, similar to the "a sum of parts" text.

The idea was to set the typeface by the people amount and then serve that to the clock so they match up via a global variable, but when I do that the seems to revert to size 12 and left aligned. #-o

blindfish

Looking at your sketch code I see:

//snip
var sketch1 = function(p) {

  p.video;
  p.vScale = 10;
  p.canvasVar;

//snip...

p.takeshot = function() {
//snip...

Note that in this context p is a reference to the p5 instance; but you appear to be using it to store arbitrary sketch variables and functions by adding them as ad-hoc properties/methods of p. This is very BAD...

At some point one of your property/function names will collide with an internal p5js property/method and all hell will break loose; the world will end and Trump will become president... oh shhhii... :-&

You can safely set them as function level variables since they'll only exist within the scope of the individual sketch function:

//snip
var sketch1 = function(p) {

  var video;
  var vScale = 10;
  var canvasVar;

//snip...

var takeshot = function() {
//snip...

Or, if you must, you can create your own object to store sketch variables:

var myVars = {};
myVars.video;
myVars.vScale = 10;
myVars.canvas;

//etc...

I'm not going to try debugging your code further as it may be just such a collision that is causing your problems...

Also should I be worried that you can access those files?

Are you serious? If you put anything on the web your dirty laundry is there for everyone to see :P

CallumStrachan

Ah I see, I learn't the instance mode stuff from the shiffman videos on youtube, must have misunderstood the variable part. Apologies! :(

At some point one of your property/function names will collide with an internal p5js property/method and all hell will break loose; the world will end and Trump will become president... oh shhhii...

oh no we dont want that @-)

Have gone through and changed all of the variables that were using the p. and the problem is still persisting with the clock text ~X(

I think its being caused by it drawing from the font that is saved in a global variable. As when I remove that the text is the correct size and alignment.

Is there any better way I can pass over what font to use from the "people" sketch to the "time" one?

EDIT:

I've managed to fix it by loading the fonts array within both the sketches and then just sharing the fontIdx as a global variable rather than the whole array. Probably a bit messy but its working!

Thanks guys! [-O< :D

blindfish

I've managed to fix it by loading the fonts array within both the sketches and then just sharing the fontIdx as a global variable rather than the whole array. Probably a bit messy but its working!

Looking at the p5 source it runs the following when setting a font size:

this._renderer._setProperty('_textFont', theFont);

I haven't followed through further; but the fact that it accepts a reference to theFont suggests that it applies changes directly to the stored font reference. In that case changes made to the font in one sketch would obviously affect the other sketches...

GoToLoop

Probably a bit messy but its working!

Here's some template plan to tidy it up. :bz
Although I'm not much confident about it b/c I'm suspicious that textSize() might be shared for the same p5.Font. :-/

P.S.: Seems like @blindfish shares my worries about it too. ^#(^

"use strict";

// Global constants & variables:
var FONTS = 25, IDX_OFFSET = 3,
    sketches = [], fonts = Array(FONTS),
    regularFont;

sketches.push(p => {
  // 1st sketch...
});

// ...

sketches.push(p => {
  // Last sketch...

  const MIN_FOLKS = 0, MAX_FOLKS = 100;
  let people = 0;

  p.setup = () => {
    p.createCanvas(200, 300).parent('canvasHold');
    p.fill(0).noStroke().noLoop();

    // And so on...
  };
});

new p5(p => {
  // Font loader sketch:

  const DEFAULT_FONT_PATH = 'fonts/ASoPMFCalport-Regular',
        FONT_PATH = 'fonts/ASoPMFCalport-Circle', FONT_EXT = '.ttf'

  p.preload = () => {
    regularFont = p.loadFont(DEFAULT_FONT_PATH + FONT_EXT);

    for (let i = 0; i < FONTS; ++i) {
      const freq = p.nf(.1 * (i + IDX_OFFSET), 0, 1);
      fonts[i] = p.loadFont(FONT_PATH + freq + FONT_EXT);
    }
  };

  p.setup = () => {
    // Ignite all pushed pre-created sketches:
    for (let s of sketches)  new p5(s);

    // Disable this loader sketch:
    p.noCanvas();
    p.noLoop();
  };
});