cgregorip5

[cgregorip5]

Troubled Waters

Fullscreen⬆️ ⬇️Code

[cgregorip5]

Mosaic (4/19/21)

I really like the pixelated, "32-bit" effect that the mosaic creates. When you move, you're (I'm?) able to see in more detail, but when stationary it becomes more low-res

I got inspired by Sakanamon's album art for ロックバンド which uses a similar mosaic like effect.

I then watched TheCodingTrain's series of videos on video and pixel manipulation to learn how to use and work with video in js.

https://www.youtube.com/playlist?list=PLRqwX-V7Uu6aKKsDHZdDvN6oCJ2hRY_Ig

This led me to become more comfortable with video manipulation and video capture in p5.js . Here are some more sketches I did in this series

Slit-Scan: https://editor.p5js.org/cgregori/sketches/H94qQ-Des

Pixel Map: https://editor.p5js.org/cgregori/sketches/moWWgpR6O

Gray-Scale Mosaic: https://editor.p5js.org/cgregori/sketches/MY0Rua-uz

[cgregorip5]

4/12/21 HW

https://glitch.com/edit/#!/few-glen-range

[cgregorip5]

3/22/21 HW

https://glitch.com/edit/#!/guiltless-jet-reminder?path=script.js%3A9%3A17

[cgregorip5]

Midterm Sketches

3 Mouse Movement: https://editor.p5js.org/cgregori/sketches/z-GkwqFY-

Minecart Ride: https://editor.p5js.org/cgregori/sketches/OlLLhUC_p

Grid w/ slider: https://editor.p5js.org/cgregori/sketches/jUpBcfxs1

[cgregorip5]

Glitch Links

Live Website: https://spangled-tricolor-candle.glitch.me

Code (Glitch): https://glitch.com/edit/#!/spangled-tricolor-candle

Code (p5): https://editor.p5js.org/cgregori/sketches/Hu5iFNROC

[cgregorip5]

Loops HW

https://editor.p5js.org/cgregori/sketches/rr9l6epkT

For this HW I added some more helpful sandbox buttons (’erase’, ‘add, ‘refresh’), and was able to provide user-controlled movement of the lights. I also gave each light it’s own color.

I used a for loop to instantiate each boundary, as well as for all 360 degrees of the particle. I used a while loop for the remake boundaries button. Without loops, I would have to incrementally move each value in copious lines of code.

For my next project, I might do a Vanishing Point maker, as that would reuitlize the ray casting class

[cgregorip5]

Very gratifying user interaction found on the web

[cgregorip5]

Conditionals HW

https://editor.p5js.org/cgregori/sketches/FZ2eJuvye

I chose to do Ray Casting for this week’s sketch, after seeing TheCodingTrain’s videos on it. The math for this involved some matrices, but it’ll be helpful for future projects. The ‘moth’ moves across the screen in harmonious random movement (’Natural’ movement) from the Perlin noise. Overall, I liked this sketch, as the ideas contained in it can easily be used for other projects too. {Like a early 3D Doom with enough math}

[cgregorip5]

Cool narrative based on code

https://play.aidungeon.io/

^ This spawns a branching narrative based on what you input into the text bar. The AI is surprisingly smart, and you can have a fun time creating short stories.

[cgregorip5]

2/22/21 Sketch

https://editor.p5js.org/cgregori/present/iQpDz0IYh

For this sketch I wanted to utilize a shifting camera that’s used in side-scrolling games. The little pink balls are asteroids that move from right to left, while the larger circle is a player controlled object. The asteroids can be moved quicker if the mouse is pressed.

The camera and translate() functions were the hardest to wrap my head around, as the math changes quite a bit once the origin point is made relative. I also had ideas to add grid lines and such, but those have been put on a back burner for a later date. I also also had ideas to do parallax scrolling and such, but that will take future iterations on the 2D camera class to implement.

Originally I wanted to have better collision detection, but that is quite an expensive addition to a homework that’s due soon. For the next project, I might try and involve ray casting, as that can lead to better collision detection. 

Sources:

https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection

Looking ahead: https://thecodingtrain.com/CodingChallenges/145-2d-ray-casting.html

[cgregorip5]

Intro p5 Sketch

Intro Sketch: https://editor.p5js.org/cgregori/full/HK_u7OEwo

I really like how easy it is to incorporate movement in p5, so I wanted this sketch to be able to move. I saw some Coding Train videos over break, and loved how accessible and understandable these videos were. The particle systems and flocking videos stood out to me. 

For this sketch, I saw The Coding Train’s acceleration vector video right after my Linear Algebra lecture, and I went from there. I took his mover code, and added a couple things to it, predominately random color and a wall collision checker. I also added an ability to add more movers to the canvas whenever a mouse is clicked.

I’ve had practice working with 2D coordinates before, so I wanted to push my boundaries and work with vectors. I like the somewhat-erratic way the orbs move on the screen, and I’m glad that the wall collision works mostly well.

This is less a self-portrait and more of an idea of the things I’m interested in. Maybe a self-interest-portrait?

Some future stuff that would be cool to add would be a way for an orb to check if it collides with another orb, and have the velocity vector change accordingly. That’s more complicated, but I’ve seen some stuff floating around on the internet on how to accomplish that goal. I also want to play around more with vectors, and eventually get into 3D vector space with normal vectors, binormal vectors and all that.

[cgregorip5]

Test

Start test post

End test post.