New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

pointLight not responding to z-argument #2251

Closed
nicolaspe opened this Issue Oct 9, 2017 · 7 comments

Comments

Projects
None yet
5 participants
@nicolaspe

nicolaspe commented Oct 9, 2017

Nature of issue?

  • Found a bug
  • Existing feature enhancement
  • New feature request

Most appropriate sub-area of p5.js?

  • Color
  • Core
  • Data
  • Events
  • Image
  • IO
  • Math
  • Typography
  • Utilities
  • WebGL
  • Other (specify if possible)

Which platform were you using when you encountered this?

  • Mobile/Tablet (touch devices)
  • Desktop/Laptop
  • Others (specify if possible)

Details about the bug:

The pointLight function doesn't work with the p5.min.js file (got it by exporting a project from the web editor). Used an older p5.js file (from the older IDE package) and it works perfectly (p5.js v0.4.23 March 04, 2016).

This should be fixed for a correct use of the web editor.

  • p5.js version: p5.min.js v0.5.11 June 01, 2017
  • Web browser and version: Google Chrome | 60.0.3112.113 (Official Build) (64-bit)
  • Operating System: OSX El Capitan, Version 10.11.6
  • Steps to reproduce this:

You can check the differences in the following sites: older-p5-working version / p5.min-not-working version (can be reproduced on the web editor). The sketch is this one:

function setup(){
  createCanvas(400, 400, WEBGL);
}
 function draw(){
	background(0);
	//move your mouse to change light direction
	var dirX = (mouseX / width - 0.5) *2;
	var dirY = (mouseY / height - 0.5) *(-2);
	pointLight(0, 0, 250, dirX, dirY, -0.6);
	ambientMaterial(250);
	sphere(100);
	translate(0, 200);
	sphere(100);
}

@lmccart lmccart added the area:webgl label Oct 12, 2017

@mlarghydracept

This comment has been minimized.

Show comment
Hide comment
@mlarghydracept

mlarghydracept Oct 31, 2017

Contributor

Thanks for your well-written issue! So from what I can tell this is not working because those calculations used to put dirX and dirY within a specific range are no longer necessary and in fact make the change too small to notice. If you just put mouseX and mouseY directly into the x, y arguments for pointLight() you should see the desired result. The logic for positioning objects in WebGL now more closely resembles the 2D portion of the library.

I will submit a PR with an updated example for pointLight()

Contributor

mlarghydracept commented Oct 31, 2017

Thanks for your well-written issue! So from what I can tell this is not working because those calculations used to put dirX and dirY within a specific range are no longer necessary and in fact make the change too small to notice. If you just put mouseX and mouseY directly into the x, y arguments for pointLight() you should see the desired result. The logic for positioning objects in WebGL now more closely resembles the 2D portion of the library.

I will submit a PR with an updated example for pointLight()

@mlarghydracept

This comment has been minimized.

Show comment
Hide comment
@mlarghydracept

mlarghydracept Oct 31, 2017

Contributor

Actually I decided to check on directionalLight() before submitting a PR and it doesn't follow the same logic. It seems to react as expected to the values when they have been normalized to be between -1, 1 as opposed to pointLight() which prefers standard mouseX and mouseY values. This doesn't appear to happen cpu side as the code for both are nearly identical with the only meaningful difference being the distinct shader values they are changing. I am assuming this is happening in the shader then.

@kjhollen Any thoughts before I dive into the shader?

Contributor

mlarghydracept commented Oct 31, 2017

Actually I decided to check on directionalLight() before submitting a PR and it doesn't follow the same logic. It seems to react as expected to the values when they have been normalized to be between -1, 1 as opposed to pointLight() which prefers standard mouseX and mouseY values. This doesn't appear to happen cpu side as the code for both are nearly identical with the only meaningful difference being the distinct shader values they are changing. I am assuming this is happening in the shader then.

@kjhollen Any thoughts before I dive into the shader?

@kjhollen

This comment has been minimized.

Show comment
Hide comment
@kjhollen

kjhollen Oct 31, 2017

Member

ah yes pointLight should use real world coordinates rather than a normalized direction, like directionalLight (but confusingly, the example for pointLight in the docs makes the value look like it's being normalized, sort of)

I had been confused about this over the summer, because the examples seemed the same with different results.

Member

kjhollen commented Oct 31, 2017

ah yes pointLight should use real world coordinates rather than a normalized direction, like directionalLight (but confusingly, the example for pointLight in the docs makes the value look like it's being normalized, sort of)

I had been confused about this over the summer, because the examples seemed the same with different results.

@mlarghydracept

This comment has been minimized.

Show comment
Hide comment
@mlarghydracept

mlarghydracept Oct 31, 2017

Contributor

The normalization that is happening in the examples for both of them is a bit strange, for example:
var dirY = (mouseY / height - 0.5) *(-2);

but when I play around, directionalLight seems to want values that are essentially normalized like:
var dirY = map(mouseY, 0, height, -1, 1);

whereas pointLight seems to work best when the values are normalized like:
var dirY = map(mouseY, 0, height, -height/2, height/2);

Contributor

mlarghydracept commented Oct 31, 2017

The normalization that is happening in the examples for both of them is a bit strange, for example:
var dirY = (mouseY / height - 0.5) *(-2);

but when I play around, directionalLight seems to want values that are essentially normalized like:
var dirY = map(mouseY, 0, height, -1, 1);

whereas pointLight seems to work best when the values are normalized like:
var dirY = map(mouseY, 0, height, -height/2, height/2);

@mlarghydracept

This comment has been minimized.

Show comment
Hide comment
@mlarghydracept

mlarghydracept Jan 7, 2018

Contributor

Okay so this issue has changed slightly since some updates that have been made. Point light now moves around lighting the scene as expected with

pointLight(0, 0, 250, mouseX-(width/2), mouseY-(height/2), 0);

Now the only thing that keeps pointLight from behaving like the first example you posted is that regardless of what is placed in the z argument the light never appears to be between the camera and the object.

Editing the name for organization and clarity to reflect the current issue.

Contributor

mlarghydracept commented Jan 7, 2018

Okay so this issue has changed slightly since some updates that have been made. Point light now moves around lighting the scene as expected with

pointLight(0, 0, 250, mouseX-(width/2), mouseY-(height/2), 0);

Now the only thing that keeps pointLight from behaving like the first example you posted is that regardless of what is placed in the z argument the light never appears to be between the camera and the object.

Editing the name for organization and clarity to reflect the current issue.

@mlarghydracept mlarghydracept changed the title from pointLight not working in p5.min.js to pointLight not responding to z-argument Jan 7, 2018

@Spongman

This comment has been minimized.

Show comment
Hide comment
@Spongman

Spongman Jan 7, 2018

Contributor

the light never appears to be between the camera and the object

i'm not seeing this issue. on master, this works fine for me:

 function setup() {
   createCanvas(500, 500, WEBGL);
   noStroke();
   fill(255, 255, 255);
 }

 function draw() {
   background(0);
   pointLight(255, 0, 100, mouseX - width/2, mouseY - height/2, 150);
   sphere(100);
 }

remember that if a pointLight is inside a sphere then it's not going cast any light on that sphere.

Contributor

Spongman commented Jan 7, 2018

the light never appears to be between the camera and the object

i'm not seeing this issue. on master, this works fine for me:

 function setup() {
   createCanvas(500, 500, WEBGL);
   noStroke();
   fill(255, 255, 255);
 }

 function draw() {
   background(0);
   pointLight(255, 0, 100, mouseX - width/2, mouseY - height/2, 150);
   sphere(100);
 }

remember that if a pointLight is inside a sphere then it's not going cast any light on that sphere.

@mlarghydracept

This comment has been minimized.

Show comment
Hide comment
@mlarghydracept

mlarghydracept Jan 7, 2018

Contributor

🙈 Ah yeah of course! I was still thinking with the old coord system. Anyways I changed all of the light reference examples to look better and fixed the pointLight one, which should be a fine close to this issue.

Contributor

mlarghydracept commented Jan 7, 2018

🙈 Ah yeah of course! I was still thinking with the old coord system. Anyways I changed all of the light reference examples to look better and fixed the pointLight one, which should be a fine close to this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment