Loops… I wasn’t really sure how I could use a for, or while loop when the draw() function is itself a loop anyways. My previous experience with programming (which isn’t much) has taught me using for, or while loops in sorting algorithms but I didn’t know where to use loops when drawing an image in p5js. In any case, I looked through the magazines to see if there was anything I felt I could do.
When I saw the image above, I immediately began to think about how I could create it in p5js. I knew I could use ellipses to create what, in the image, looks rings around a tube. I also knew that by making the background black, making the outline of the ellipses white, and removing the fill of the ellipses it could look almost exactly like the image. The only problem was that I didn’t really know how to make the shape without hardcoding all the values. So, instead of hardcoding all the x-coordinate, y-coordinate, width, and height values of all the ellipses I realized I could use a for loop.
When first testing out the idea I made a class and an array and made variables of that class which I put in the array and was just testing to see what worked and what didn’t since I wasn’t familiar with the syntax. In hindsight, I didn’t need to use a class or an array but it was good practice nonetheless. In any case, I ended up with the code below:
for (let i = 0; i < ellipseArray.length; i++) {
let something = map(i, 0, ellipseArray.length, -1, 1);
w = map(tan(frameCount * something * 0.025), -1, 1, 0, 100);
y = map(i, 0, ellipseArray.length, 10, height);
ellipseArray[i].make(width / 2 - 100, y, w, 20);
ellipseArray[i].make(width / 2 + 100, y, w, 20);
}
The method of the class which drew the ellipse was called make. Looking at it again I could have just had ellipse() in the place of ellipseArray[i].make … it would be easier to look at but I’ll just call it good practice. Despite that, I am happy with the code I wrote above. I was especially happy with my use of the map() function. At first I wasn’t sure how to use it, I also felt that the p5js references didn’t explain it very well but with a bit of trial and error it became obvious. I was also happy with how I used the frameCount variable to make the image move. I think it might be slightly obvious that I didn’t really know what I was doing throughout all of this as I named one of my variables something, I’m still not sure what to call it but the idea was that depending on where the ellipse was in the array it would have a different value from the tan() function.
At the end, I made the background slightly transparent so that it would leave a shadow of the previous ellipses, which I think makes a similar effect as the slightly fuzzy lines that can be seen in the image I took inspiration from.
Reflection
I mentioned this a few times before and it is that I should just use the ellipse() function alone rather than use a class and array to make the code more readable, and maybe even more efficient. I also think I could have added more comments to explain what each line or section did, I left most of it uncommented because I myself wasn’t sure what I was doing and was making changes fairly quickly. I feel with more practice and if I lay out my thought process with comments I can be more efficient when writing my code.
Future Ideas
For the future if I ever choose to come back to this style I could have a design where it uses a trigonometric function as I used it for this assignment but the ellipses are made around the cursor then it would look cool as you move the cursor. Also, I only varied the width of the ellipse, I could also vary both the height and width in the future.