JESSIE ZHAI

Digital artist

A documentation page of rambling and experimenting.

@jessiehaseyes
jessiejiranzhai@gmail.com
05 TIME
ICM WEEK5



GO TO:
TIME
P5.JS SKETCH



For week 5’s creative assignment TIME, I chose to create a 3D sketch that resembes the galaxy using WEBGL.



PROCESS

This week I started watching a few WEBGL tutoials and exploring 3D shapes in P5. After learning about textures, I found it an interesting idea to create planets for the time assignment.

I encounter a few problems simply navigating in WEBGL, for example, getting used to all the 3D shapes insread of the 2D assests we’ve been using.

Creating the 3D planets was quite easy to catch on. The only problem that I could not solve was how to make the planets rotate on their own, isntead of rotating around the function drawn before them. In a perfect world, I would also want the planets to not collide into each other.




I created a few orbits using for loops and the torus shapes to make it a bit more abstract and expressive.

Then I started torture myself by trying to figure out how to create a moving starfield in the background. Luckily, there was a coding train video on creating a starfield which helped me with the logic of creating moving stars. However, the video is on creating a starfield in the 2D space. So I had to figure out how to translate it in WEBGL.



Similar to Dan’s video, I created an array for the stars and used push to define x, y, z positions of all teh stars. By setting the X and Y positions to the negative scale, the stars were able to keep moving forward.



I orginally used a function to craete my stars, but it became a 2D plane that rotate around one of my planet(which I didn’t figure out why since I couldn’t figure out how to let the planets rotate on their own). So I put the stars in draw, and used the map function to change the size so they are smaller when they’re far away and bigger when they’re closer.

I was originally using the int() to map star sizes, but I heard about ceil function, which calculates the closest integer value that is greater or equal to the number, instead of just rounding them up. This made my stars appear bigger with variety (not sure if I comepletely understand it but I love this effect).

REFERENCE


Coding Train - Star Field
Define Array


SOLVED PROBLEMS

  • using WEBGL to create shapes and adding textures
  • using Zposition to give stars dimensions and depth
  • ceil()
 


THINGS TO IMPROVE

  • How to make the planets rotate on their own?

INDEX  NEXT
JESSIEZHAI