is p5.js responsive?

1rulesupersedes

I have a p5 sketch and I like the way it looks on my lap top. I check it out on different size screens its not responsive. Is there something like bootstrap to make it responsive?

var font;
var vehicles = [];

function preload() {
  font = loadFont('fonts/FingerPaint-Regular.ttf');
}

function windowResized(){
    resizeCanvas(windowWidth, windowHeight);
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(0);
  // textFont(font);
  // textSize(192);
  // fill(255);
  // noStroke();
  // text('train', 100, 200);

  var points = font.textToPoints('"1', 200, 200, 100, {
    sampleFactor: 0.25
  });

  var points1 = font.textToPoints('RULE', 220, 300, 100, {
    sampleFactor: 0.25
  });

  var points2 = font.textToPoints('SUPERSEDES"', 220, 400, 100, {
    sampleFactor: 0.25
  });

  for (var i = 0; i < points.length; i++) {
    var pt = points[i];
    var vehicle = new Vehicle(pt.x, pt.y);
    vehicles.push(vehicle);
    // stroke(255);
    // strokeWeight(8);
    // point(pt.x, pt.y);
  }

  for (var i = 0; i < points1.length; i++) {
    var pt = points1[i];
    var vehicle = new Vehicle(pt.x, pt.y);
    vehicles.push(vehicle);
    // stroke(255);
    // strokeWeight(8);
    // point(pt.x, pt.y);
  }

  for (var i = 0; i < points2.length; i++) {
    var pt = points2[i];
    var vehicle = new Vehicle(pt.x, pt.y);
    vehicles.push(vehicle);
    // stroke(255);
    // strokeWeight(8);
    // point(pt.x, pt.y);
  }
}

function draw() {
  background(0);
  for (var i = 0; i < vehicles.length; i++) {
    var v = vehicles[i];
    v.behaviors();
    v.update();
    v.show();
  }
}

function Vehicle(x, y) {
  this.pos = createVector(random(width), random(height));
  this.target = createVector(x, y);
  this.vel = p5.Vector.random2D();
  this.acc = createVector();
  this.r = 0;
  this.maxspeed = 10;
  this.maxforce = 1;
}

Vehicle.prototype.behaviors = function() {
  var arrive = this.arrive(this.target);
  var mouse = createVector(mouseX, mouseY);
  var flee = this.flee(mouse);

  arrive.mult(1);
  flee.mult(5);

  this.applyForce(arrive);
  this.applyForce(flee);
}

Vehicle.prototype.applyForce = function(f) {
  this.acc.add(f);
}

Vehicle.prototype.update = function() {
  this.pos.add(this.vel);
  this.vel.add(this.acc);
  this.acc.mult(0);
}

Vehicle.prototype.show = function() {
  stroke(255);
  strokeWeight(this.r);
  point(this.pos.x, this.pos.y);
}


Vehicle.prototype.arrive = function(target) {
  var desired = p5.Vector.sub(target, this.pos);
  var d = desired.mag();
  var speed = this.maxspeed;
  if (d < 100) {
    speed = map(d, 0, 100, 0, this.maxspeed);
  }
  desired.setMag(speed);
  var steer = p5.Vector.sub(desired, this.vel);
  steer.limit(this.maxforce);
  return steer;
}

Vehicle.prototype.flee = function(target) {
  var desired = p5.Vector.sub(target, this.pos);
  var d = desired.mag();
  if (d < 50) {
    desired.setMag(this.maxspeed);
    desired.mult(-1);
    var steer = p5.Vector.sub(desired, this.vel);
    steer.limit(this.maxforce);
    return steer;
  } else {
    return createVector(0, 0);
  }
}

GoToLoop

Still very noobish about this whole responsive subject. X_X

Most I've got is this simple windowResized() template below which relies on Window::getComputedStyle() in order to take canvas.parentElement's margins into account for centralizing & fully expand the sketch's canvas: 8-|

https://developer.Mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

function windowResized() {
  const css = getComputedStyle(canvas.parentElement),
        marginWidth  = round( float(css.marginLeft) + float(css.marginRight)  ),
        marginHeight = round( float(css.marginTop)  + float(css.marginBottom) );

  resizeCanvas(windowWidth - marginWidth, windowHeight - marginHeight, true);
}

Here's an online example which is "responsive" horizontally only: :ar! http://Bl.ocks.org/GoSubRoutine/fa085945d45152786698f44a9523ccac

1rulesupersedes

Hello GotoLoop,

Thanks for the reply. I am going to try it out and see if I can get it work. I'll be in touch.

1rulesupersedes

1rulesupersedes

Hello GotoLoop,

I tried for about 5 hours and couldn't get it to work. In the example you refer to the canvas is responsive not the balls. In my example I can make the canvas responsive, I can't get the text to be responsive. It's this part I need to be responsive.

      var points = font.textToPoints('"1', 200, 200, 100, {
        sampleFactor: 0.25
      });

      var points1 = font.textToPoints('RULE', 220, 300, 100, {
        sampleFactor: 0.25
      });

      var points2 = font.textToPoints('SUPERSEDES"', 220, 400, 100, {
        sampleFactor: 0.25
      });

GoToLoop

For Processing and all of its flavors like p5.js, anything which depends on current canvas' dimensions should be based on "system" variables width & height: L-)

1. https://p5js.org/reference/#/p5/width
2. https://p5js.org/reference/#/p5/height

GoToLoop

https://forum.Processing.org/two/discussion/20905/spaces-in-texttopoints

1rulesupersedes

GoToLoop, I am interested in your first answer. I not really sure how it works. However, I know more now then two days ago. Can you elaborate?