Day 422

Codepen is an incredible website for learning about cool website tricks. Someone else’s CSS can go a long way on your website. For Habit-Chain I went ahead and added this styling to all the buttons on my website. I’m very happy with how it turned out.

I’ve still got a lot of work to do but it feels good to see my Habit-Chain app coming together. Here is another cool codepen I found. Would be much harder to put this in my app, but I’m impressed that someone used math to make such a dope animation.

This code appears to be a JavaScript program that creates a simple animation using the HTML5 canvas element. Let’s walk through the code and understand what each part does:

1. The code starts by clearing the console using console.clear().
2. Several constants and functions are declared using destructuring assignment and the Math and glMatrix libraries.
3. The main() function is defined, which serves as the entry point for the program. It sets up the canvas, initializes the state, creates a Stats object for performance monitoring, and starts the animation loop.
4. The resize() function is responsible for adjusting the size of the canvas whenever the window is resized. It is called initially and also added as an event listener for the resize event.
5. The initState() function initializes the state of the program. It generates walls and actors using the genWalls() and genActors() functions.
6. The genWalls() function generates an array of wall objects. It creates walls with random positions, angles, widths, and colors. The walls are stored in the walls array.
7. The genActors() function generates an array of actor objects. Similar to genWalls(), it creates actors with random positions, widths, and colors, and stores them in the actors array.
8. The cycle() function is the main animation loop. It is called repeatedly by the requestAnimationFrame() method. It updates the time, calls the control(), process(), and render() functions, and measures the performance using the Stats object.
9. The control() function is currently empty and does not perform any specific actions. It could be used to handle user input or other control-related logic.
10. The process() function is currently empty as well. It is a placeholder for any processing logic that needs to be executed during each frame of the animation.
11. The render() function is responsible for drawing the scene on the canvas. It clears the canvas, translates the coordinate system to the center of the canvas, and calls various drawing functions like drawActors(), drawWalls(), and drawWallShadows().
12. The drawWallShadows() function draws shadows of the walls based on the position of the mouse cursor. It calculates the projected positions of the walls and fills the shapes with a black color.
13. The drawWalls() function draws the walls on the canvas using the stroke() method of the canvasCtx context. Each wall is drawn as a line segment with a specified color.
14. The drawActors() function draws the actors (circles) on the canvas using the arc() method of the canvasCtx context. Each actor is drawn as a filled circle with a specified color.
15. The adjustAngle() function is a utility function that helps adjust angles smoothly. It takes two angles, a target angle (b) and a current angle (a), and a speed value. It calculates the difference between the angles, ensuring that the resulting angle change is within the specified speed.

That’s a high-level overview of the code. It sets up the canvas, generates walls and actors, and creates an animation loop to continuously update and render the scene. I know it’s not your typical art, but I’d argue it takes amazing creativity to make something like this. Just a different kind of creativity then most are used to.

It’s an exciting time to get to live through humanity entering exponential growth. I’m hopeful we can use these technologies to help create a world of abundance. A world that will be proud to raise our kids in. A world where there is no more war because people control their data with cryptographic keys and AI chatbots that run locally and help us navigate the digital wild west.

5/18/23

Conor Jay Chepenik