NATURE OF CODE : STEERING

overview

This week, I watched the Shiffman coding challenge video on steering behavior using text. In the midst of midterms/life in general, I thought it was a good reminder to think of positive thoughts. So, in this p5.js sketch, you start out with a “negative” thought, but you can “smash” those thoughts and think positively. In the user interaction, you can mouse over the points of text and do a mouse click to change the word. The points are “afraid” of the mouse, so you see a movement of the points as you mouse over them. To highlight this affect, I added an emoji that has its own steering force interacting with the mouse. It also changes from frown to smile when the words change from positive to negative.

process

I created an array of text with two words: negative/positive and created a counter that would start upon mouseClicked. I also looked at this example by Fabian Kober, regarding his work switching between different words https://www.openprocessing.org/sketch/408132. Ultimately, that was a helpful and complex example, so I studied it and parred it down so the particles would change upon a mouse click. When switching from “negative” to “positive”, the number of particles is not the same, so the next step would be to figure out how to transition between the two words if they don’t have the same number of particles. Here is my pseudocode guess :

  1. Count number of particles in the first word
  2. Count the number of particles in the second word
  3. Subtract the different
  4. Splice the difference count in order to create the second word

Then I, decided to add another layer of the steering force by creating a force just with the mouse. To highlight this I created an emoji. I wanted to switch between a sad and happy face and originally, I set two display methods in my Emoji case (this.displaysad, this.displayhappy). It wasn’t working, so I went to the coding lab and Vince helped me understand that in order to switch between the states, I would want a toggle. And, as a general programming practice if I want a change something within my class, it’s good to set it as a global variable. I created a toggle first using conditionals, then I created a different syntax.

Conditional I’ve done previously!
Fancy new conditional!

questions

  1. How to create the correct number of particles?
  2. How to slow down the shaking of the emoji when touching the mouse?

acknowledgements

Dan Schiffman – https://www.youtube.com/watch?v=4hA7G3gup-4&vl=en

Fabian Kober – https://www.openprocessing.org/sketch/408132

Vince Shao

Leave a comment