Screen Shot 2015-10-01 at 4.18.28 PMScreen Shot 2015-10-01 at 4.18.36 PM

I was really drawn to the ellipse envelope curve that I came across on the Math World website. It reminded me a lot of the second exam question about the bezier curve made of descending lines. With my interaction, I really wanted to showcase how the curve is made out of a defined number ellipses, so I made it so that my start state showed regular ellipses transforming into the ellipse envelope through the changes in their x positions, y positions, widths, and heights. I used the constrain function in order to make sure that the ellipse envelope isn’t broken after one’s mouse passes the screen.



This project in particular was a challenge for me because when I set out to create my curve, which was a Spirograph, I wasn’t sure how to implement the equations I was given. This project really pushed me, as it required a great deal of outside research to implement the effects I wanted. The map() and scale() functions, which I had never used before, quickly became my best friends. It took a considerable amount of trial and error (approximately 3 separate versions of the same program) before I managed to get the response I wanted. A relatively minor element that I am actually quite proud of is the echo effect caused by moving the Spirograph. I managed to accomplish this by making a black, but semi-opaque, rectangle which redrew with each iteration and covered the previous versions of the Spirograph partially at first but progressively more as it redrew, until the canvas became solid black again. Ultimately, this project really forced me to utilize the online resources provided to me in a way that I haven’t had to do before, and I think this change resulted in a much cooler final product than I would have been able to produce otherwise.


Xavier Apostol – Project 05 – Composition with Curves

For my composition project, I decided to implement movement and fluidity (shaking). I have always been interested in how things move and the type of emotions these movements result in. The “Devil’s Curve”, found on Wolfram MathWorld, really allowed me to explore this and create shapes that seem calm at first, but can also become violent quickly. Along with this, the resulting shapes also change in complexity, size, and color based off of the different functions of the mouse.

Curve Comp - Notebook (XA)

Curve Comp - Small 1

The project first starts off as a black set of triangles, almost forming the outline of a hexagon. This default allows for a wide variety of changes that the user can determine for themselves.

Curve Comp - Shake Sml

First off, the user can change the “mood” of the shape (level of distortion). This is done by moving in the positive direction of the y-axis with the mouse (mouse down). As the user moves farther down the shape starts to shake more rapidly and the color transitions from black to a very light pink. The user an also change the size of the shape and transition from small to large by moving the mouse positively along the x-axis (move right).

(“Star Explosion”)
Curve Comp - Shake Lrg

(Higher Complexity of Shape)
Curve Comp - Large 1

The click function of the mouse, also dictates new shapes. As the user increases their click count, they are able to increase the amount of vertices of the shape. Combining this with the movement of the x and y-axis, users have the potential to create an image that looks like a star explosion. Lastly, if the user presses “r”, they are able to reset their shape without having to go through the trouble of restarting the program.


Project-05-Curves ChrisHwang

For this project, I tried to make a club-like atmosphere, making the shapes dance in random colors with lights and boombox effects in the corners. These effects happen if the mouse is approximately inside the intersection of the two modified heart shapes. I took the equation of a heart and modified it to make it a cooler, more complex design. I used the random function to add random positions and colors as if it is an actual hip hop dance club.

This is the initial state:
Screen Shot 2015-10-01 at 11.41.47 AM

This is one of the many possible moments when the mouse is in the intersection:
Screen Shot 2015-10-01 at 11.41.57 AM


jabah – Project 05 (Curves)

So the end product of my code definitely was not what I intended when I began, but when I realized the direction it was going mid-code, I focused on perfecting that instead. What I originally was attempting to do was the Whirl, and I tried to do so by moving a square that was the size of the Canvas by theta times a certain factor of mouseX and mouseY. But instead of rotating the squares, I shifted their positions, resulting in these shapes laying over one another. In some way, I actually preferred this over what I originally wanted, and feel glad that I can understand why my code did that in the first place.

I realized after I did this that I still did not have an actual “curve” shape. The bulk of my time was finding a shape with parametric equations that I understood enough to transform into code. This ended up being the Ellipse Evolute, which I placed in the center of the screen and rotated based off of very small percentages of both mouseX and mouseY. I think the end project was much more creative than I anticipated.




When I started this project, I got a little bit overwhelmed at the number of shapes I could make, and the amount of math involved in each one; as a result, I chose a relatively simple shape– an astroid evolute.

Although the function itself was simple, I was able to use it to create the complex shapes that you see here. Each shape is actually composed of vertices that jump back and forth from an inner astroid to an outer one, resulting in many lines. The shapes morph and rotate as you move your mouse.

While I don’t totally understand all the math going on here, I found it to be really interesting and effective just to experiment putting values into different parts of the equation. This resulted in what my high school art teacher used to call “happy accidents” — unintended discoveries that improved my overall design.


Some screenshots of early iterations

Screen Shot 2015-09-29 at 5.21.57 PM

Screen Shot 2015-09-29 at 5.20.37 PM