Author: adj311

Link to project: https://editor.p5js.org/adj311/sketches/CpqGmwa3e

For my final project, I wanted to find a way to use the tools I’ve learned to create the best 3d-looking object possible. Having messed around with sin, cos, and noise, I felt that while randomness is sometimes more “cool looking” or maybe “interesting”, being able to change many variables, and being able to see the direct result of those variables, not only helped guide me while coding this project, but also in figuring out how to use 2d objects to create a 3d effect. I originally planned on making objects close the the center of the sketch smaller, but instead used blending modes to achieve what I believe is a stronger 3D-like effect. The code itself was not long, or overly complicated, but included in its short amount of lines are a lot of parameters which I believe all have a powerful role in their effects on how the final visualization looks. I used squares for this visualization, because I thought squares (or “pixels”, if you will) could rotate and help add to the effect of feeling movement. The size of the squares could have been smaller as they grew more distant, but as I mentioned earlier, I felt like simplifying the project, not only in the necessary computations, but also in the way dat.gui parameters interact with the sketch, and opting to use the additive blending mode yielded a more interesting and powerful 3D effect.

This project still had its limitations. I would have liked to use more elements (dots/squares/pixels), and made a more fleshed-out tunnel effect. I also wish that the movement I implemented was not just X and Y, some sort of rippling, or wave like Z-axis effect could have added another element of dimensions or layers to the possible visuals.

I will be honest, I spent a lot of time playing with the sketch, and trying to figure out what could be changed, and how those changes would effect the visual. For example, I discovered halfway through the IMA show that by increasing the “stretch” value, which was both arbitrarily named and arbitrarily given a maximum value, and allowing the shape to stretch past “itself” to higher values, gave the visual a kind of crazy and unique shape, and made me realize that maybe breaking the initial boundaries of what I wanted to do, and allowing parameters to be changed, possibly even to the negative, may yield a more interesting effect than what I anticipated. I think just like in physics, many observations go against what people initially expect, and I think that as I tweaked with values more and more, I realized that more things were possible than what I had intended to create, which is both exciting and sad, because who knows what other parameters could be messed around with to yield something even better.

https://editor.p5js.org/adj311/sketches/7GDNfA4A3

This week I decided to build off of the particle system I made last week and implement a simple yet cool visual effect where each particle tracks mouse movements and steers towards it, haphazardly. I like the curling effect that naturally occurs when multiplying the magnitude of the steering effect of the agents (which is treated as a vector that is the distance between mouse position and position of each particle) as some particles will randomly be further away as the user moves the mouse, causing them to trail behind even more and speed up. I did not implement a max speed because of the ability to click to run the program again. Even keeping the mouse still is a cool effect. My initial idea was to have each mouse location be a target or spawn for particles, attracting other particles between their own spawn and other targets, but this ended up being a very messy effect, and far to laggy because of the number of particles being generated. This is still a very cool effect which I think may be similar in appearance to flocking (?). Looking forward to further exploration, the visualization here is much more interesting to me because of its organic and smooth feeling when moving the mouse around the sketch.

Link: https://editor.p5js.org/adj311/sketches/FaBZAtC3F

Having not attended class, (and unclear lecture notes from the slides) I did my best to interpret the code as well as used some resources off Daniel Shiffman’s website and textbook to understand how particle systems worked for myself. I didn’t employ any use of springs or polymorphism, but I understand the concepts I think fairly intuitively from looking at the code. Particle systems seem like an important foundation for moving forward onto future topics, so I wanted to ensure that I understood their behavior and the code that drives them. For this sketch I just wanted to continue emphasizing interaction and wanted to create something similar to the example sketches in my own way, and ended up with a sort of “circles coming at you” effect. I’m not sure if I went about this in the right way, or if I even correctly used particle systems at all, but I think having not attended class this week’s sketch was a good effort.

https://editor.p5js.org/adj311/sketches/XHO-yhlAQ

This begins an exploration into 3D visualization that I plan on both developing and improving as the semester goes on.  My initial concept, as described in class, was to turn a 2D plane-like object and allowing the user to interact with it, and to show the user how his choice on the 2D plane influences the result of the 3D object that is created after “turning on” the sketch, by hitting spacebar.  Unfortunately, the limitations of 3D in p5.js meant that applying transformations to turn a 2D visual into a 3D one was very taxing on calculations and quite limited by WEBGL as a graphics engine, so because of this, I opted for an approach where the user is able to manipulate the size and movement of the noise field, as well as the intensity of the visualization that the noise is mapped to, in order to create differing effects, mirrored and flipped 180 degrees in order to achieve a sort of similar visual effect in 3D space that I intended before, while incurring far less lag. Had I used the native app instead of the web editor, I think that the visual may have been even better yet – perhaps something to look towards in the future when pursuing 3D visualization.

 

I enjoyed working in 3D space and enjoyed the discovery process of p5.js and its capabilities and limitations, and hope to develop a better understanding, and continue to explore and demonstrate a more complex and complete process and visualization for future projects.

Midterm Proposal Slides

Sketch: https://editor.p5js.org/adj311/sketches/kCSfl4ZjN

For this week’s sketch, I wanted to focus on figuring out collision between walls/rectangles and ball objects, since that will be a large part of my midterm project. I also wanted to toy with the idea of taking a seemingly simple game and making it complex and frustrating. So for this week’s sketch I decided to make a simple game where you have to keep a ball bouncing, but made the coefficient of restitution slightly below 0, forcing the player to move their paddle upwards in order to keep the ball in the air. I didn’t add a  point or health system, but doing so would have been quite easy, something like:

function decreaseHealth() {

health -= healthDown;

if (health <= 0) { gameOver(); }

}

I think the game is pretty challenging. The more you try to push the ball up, the more it moves and snakes around your paddle. I had fun with this little game.