Week 5-6 Documentation

Two of the things that I had tried to do in the past couple weeks– creating a button to randomly generate an object within certain parameters, and creating a class of slider that could be simply copied and pasted into different projects, had proven to be more difficult than I had imagined at the time, and I wound up submitting projects that I wasn’t quite happy with. Given our past two lessons on object-oriented programming, though, I feel like I can take care of both of those concepts in one fell swoop.

I have been meaning to play with Beziers for a while for pComp, so that seemed like a good place to start. For my object class, I would make my own custom Bezier Class complete with moveable handles. Which, although complicated, was something totally manageable.

This code generated a Bezier with random starting and ending points. It takes parameters for the starting and ending points, and then generates two lines as handles based on the points that define the Bezier curve. Importantly, this process was easily repeatable.

Screen Shot 2018-10-13 at 1.28.12 PM.png

Great, custom object class with grabbable handles: check.

Now for the second half of my checklist; randomly generating an object with a button click. I created a new sketch within the file structure of my CustomBezier class, and drew a square with a certain number of custom Beziers attached to random spots on the sides.


This is where I deviated from the assignment a little bit.

The assignment was to create an array with an object class inside of it, and to add more objects by pushing a new object into the array. I couldn’t quite get that process to work with my custom Beziers, so I had to find a work-around. I used a for loop in the setup function to define one hundred Bezier curves in the setup.

Screen Shot 2018-10-13 at 1.37.58 PM.png

The number of curves that are actually displayed was determined by a variable called “bezierNumber”, which at the outset is defined as zero. I wrote an add button to let the user add curves, which really just reveals one of the curves already written by the for loop. It might be cheating a little, but I felt like I had a solid enough grasp of the push method from the quizzes that I didn’t feel too guilty about it. You can only make up to a hundred Beziers this way, but by that point the sketch will be so sluggish and convoluted anyway that I doubt many people would want to.

I was a little worried that users might just see the curves as a weird design rather than something that can actually interact, so I added a bit of text after the third curve pops up to prompt people to play a little with the handles.

I added a clear box to reset the whole sketch and I was about ready to call it a day when I noticed an annoying feature.

If you’re hovering over two handles at the same time when you click, the two handles instantly snap together and become impossible to separate. I considered writing some extra code to make it impossible to select two handles at the same time, but I found it oddly satisfying to drag all the curves around together like a big floppy spider web.

So I decided to turn a bug into a feature. I added a little extra text to pop up after six curves are generated, and I changed the name of the project to Bezier Net.

It’s a game now. Maybe a pointless game, but it’s one that I can’t stop playing.