Porting example for embedded links

[thumbsupep]

Actual Behaviour

The Processing site has an example for embedded links https://processing.org/examples/embeddedlinks.html

Expected Behaviour

The p5js site should have a similar example using window.open instead of link since we will not be wrapping window.open in its own p5 function https://github.com/processing/p5.js/pull/532

Would you like to work on the issue?

I will be working on adding this example

[limzykenneth]

The example on processing.org is using p5.js, specifically for this example it's the following

var overLeftButton = false;
var overRightButton = false;

function setup() {
  var canvas = createCanvas(640, 360);
  canvas.parent("p5container");
}

function draw() {
  background(204);

  // Left buttom
  if (overLeftButton == true) {
    fill(255);
  } else {
    noFill();
  }
  rect(20, 60, 75, 75);
  rect(50, 90, 15, 15);
  
  // Right button
  if (overRightButton == true) {
    fill(255);
  } else {
    noFill();
  }
  rect(105, 60, 75, 75);
  line(135, 105, 155, 85);
  line(140, 85, 155, 85);
  line(155, 85, 155, 100);
}

function mousePressed() {
  if (overLeftButton) { 
    window.location = "http://www.processing.org";
    //link("http://www.processing.org");
  } else if (overRightButton) {
    window.open("http://www.processing.org");
    //link("http://www.processing.org", "_new");
  }
}

function mouseMoved() { 
  checkButtons(); 
}
  
function mouseDragged() {
  checkButtons(); 
}

function checkButtons() {
  if (mouseX > 20 && mouseX < 95 && mouseY > 60 && mouseY < 135) {
    overLeftButton = true;   
  } else if (mouseX > 105 && mouseX < 180 && mouseY > 60 && mouseY <135) {
    overRightButton = true; 
  } else {
    overLeftButton = overRightButton = false;
  }
}

As you can see it is using window.open. One problem with it though is that it is being blocked as a pop up window.

[thumbsupep]

thanks for making the modification to the example! the p5js website examples https://p5js.org/examples/ do not have one for embedded links (unless I'm missing something?) which is what this issue intends to address - just porting over the example. I would think handling pop-up blockers is out of scope for porting the initial example. I'm open to further input though

[limzykenneth]

Sorry I wasn't clear in the last comment. What I meant is that the example on https://processing.org/examples/embeddedlinks.html is using the code posted in the last comment for its sketch.

Unlike Processing which has its own link function, there is no equivalent function in p5.js itself (window.open not being a p5.js function) so I'm not sure if that is in scope for p5.js since the aim is not to achieve parity with Processing, but only where it made sense.

Pop up being blocked is an issue though especially if the intent is to port the example (ie by using the code like in my last comment), because in that case, one of the buttons will not be working and there really shouldn't be a way to get around it, even hacky ones (pop up windows or tabs should only be initiated by <a> tags).

[thumbsupep]

Oh I see. I hadnt looked at the actual script - I was just looking at the code in the <pre> tag that's rendered in the DOM. In that case I can't repro the blocked window.

so are embedded links not something p5js should have an example for since window.open isnt specific to p5js?

[limzykenneth]

I can't say for sure whether we should include such example or not, let's see if anyone else have more of an idea about this.