Documentation -- click here to go the actual assignment
When considering which exercise to expand upon, I think I would
like to make a more dynamic iteration image. One idea I saw online
one time was to make a series of dots -- some that attract one another
and some that repel -- to make a living image. I would love to try
this idea, but I'd also like to embed it into my website. Right now,
I'm thinking it'd be fun to have buttons on my website that the
dots would interact with too, but the buttons would stay static.
I found a book called The Nature of Code that helps with
creating the system I'm seeking. However, it's written for use with
the language Processing, which is more low-level than p5.js. So while
it can help me with general concepts of herding/flocking, I need
to ignore the sample code he provides because it will just confuse me.
Update: So I figured out how to render a p5.js drawing behind
the elements of my html page. This was done by including the HTML elements
inside a div on my HTML page, then making that div be embedded in the
container holding the p5.js page. So far, I've just included a simple
p5.js rendering I found on the examples page of the p5.js website so I
can test that it worked. The rendering was of a circle, but the more
bubbly, cartoonish look I think actually works. I may go in that direction,
making several iterations of circle with different colors and sizes that
interact with each other and the HTML elements in simple ways. I might
have them attract to their nearest element or bounce off the elements.
Final conclusion: Now that I have finished my project, I spent a lot of time on
things I did not expect. For one, I found that, when making my circles bounce
off of the images, to look realistic, I would need to have the x-velocity be multiplied by -1 when
the ball hit a side edge of the image and the y-velocity be multiplied by negative 1 when the ball hit the
top edge of the image. However, I could not figure out how to encode whether the circle
was hitting from the top edge or side edge of the image. So I had to make it so that
when the circle entered the domain of the image at all, both the y-velocity and the
x-velocity were multiplied by negative 0.8.
Another obstacle I had to deal with is the creation of balls inside of or on the edge of
the images. To deal with these unwanted circles, I created an array of spaces in between the images that the
circles could be originally drawn inside of. While this does kind of create unwanted and
unnatural order in the original drawing, that quickly dissolves as the circles move.
Despite all of these worked out kinks, there were some issues that I have had trouble resolving.
For one, the balls would often stop when they hit the images, especially if they were slow-moving.
I think this might be because I had it set up that the circles go to 70% their original speed when they hit the side of the image.
This isn't really ideal, because I was aiming for continual movement in my image, but I actually
think it looks alright when the circles stop on the edge of the image. It creates a kind of bubbly
frame. The reason I had the speed go to 70% of its original speed when it hit the image is
because the balls would bounce too quickly back and forth when their speed would only be
reversed upon hitting the image.
how it worked