Full rotation using pointLight();

p5.js Coding Questions
1

Hello, my brain hurts. I am using the pointLight method on this sphere. I want the light to rotate around the sphere, but I can’t figure out how to do a complete rotation. I am incrementing the z position, but it stops when it gets to the middle of the sphere (max z). Any pointers on how I can get this to have a seemingly full rotation around the sphere? I’m thinking that I have to incorporate the x or y positions of the light, but I’m struggling to figure it out. Thanks in advance.

const ballcolor = [30, 180, 255]; // COLOR TO CHANGE (H, S, B)
let brightness = 40;
let z = -40;

function setup() {
   createCanvas(400, 400, WEBGL);
   colorMode(HSB,255);
   frameRate(10);
}

function draw() {

  background(30,20,brightness);
  brightness += 5;
  if (brightness >= 161) brightness = 70;
  
  // CENTRAL SPHERE 
  push();
  noStroke();
  
  //HELP
  z += 20;
  if (z >= 800) z = -40;
  pointLight(ballcolor, 200, -200, z);  
  
  specularMaterial(250);
  shininess(70);
  sphere(75);
  pop();
}
1 Like
2

Hi @achip30,

What you want is simple trigonometry:

Try to think about how you would compute the position of a point at a certain radius on a circle centered on another point in space. (hint)

4 Likes
4

you want cos and sin to make a circle from an angle going from 0…360

(multiply with radius (200?) and add centerx and centery)

the circle you get:

  • your x is your x and
  • your y is your z
float x = cos (radians(angle)) * radius + centerX; 
float z = sin (radians(angle)) * radius + centerY;

see Download GitHub directory

3 Likes
5

Helped a lot, thanks @Chrisir and @josephh.
Updated code:

const ballcolor = [30, 180, 255]; // COLOR TO CHANGE (H, S, B)
let brightness = 40;

//let y = -200;
let rad = -10;
function setup() {
   createCanvas(400, 400, WEBGL);
   colorMode(HSB,255);
   frameRate(10);
}

function draw() {
  background(20);
  /*background(30,20,brightness);
  brightness += 5;
  if (brightness >= 161) brightness = 70;*/
  
  // CENTRAL SPHERE 
  push();
  noStroke();
  rad += 10; 
   var x = (cos(radians(rad)) * 200);  
   var z = (sin(radians(rad)) * 200); 
   var y = (cos(radians(rad)) * 200);
  pointLight(ballcolor, x, -y, z); 
  specularMaterial(250);
  shininess(100);
  sphere(75);
  pop();
}
3 Likes
6

Hello,

This may be of interest:

I used the Cartesian coordinates (x, y, z) directly and stepped through Φ phi and θ theta over time.

From Wikipedia page above:

image

A link to Trigonometry tutorial:

Does not seem to be in the tutorials on new site.

Have fun!

:)

3 Likes