Coding Challenge #86: Cube Wave by Bees and Bombs

TL;DR

Recreating a geometric illusion gif in p5.js using WebGL renderer.

Transcript

all right this is my first coding challenge that I'm going to attempt in JavaScript using 3d rendering I am currently working on a set of tutorials about WebGL in p5.js I will link to those from this coding challenges video description but I bees and bombs on Twitter I highly recommend if you're interested in looking for like really geometric algor... Read More

Key Insights

• 👨‍💻 The challenge explores the transition from 2D to 3D rendering through JavaScript coding.
• 👨‍💼 Use of the sine function enables smooth oscillating behavior for animations.
• ❓ Isometric perspective and orthographic projection techniques are essential in achieving visually accurate 3D renderings.
• 💨 Optimization of code for faster rendering performance is crucial for efficient WebGL applications.
• 🖐️ Lighting and perspective adjustments play a significant role in enhancing the visual appeal of 3D animations.
• 👨‍💻 Experimentation with different angles and speeds offers creative possibilities in coding 3D scenes.
• 💨 Challenges in coding pave the way for learning opportunities and skill development in programming.

Questions & Answers

Q: What is the challenge in the coding video?

The challenge involves recreating a geometric gif using WebGL in p5.js, transitioning from 2D to 3D rendering.

Q: How does using the sine function help create oscillating behavior in the initial 2D work?

By utilizing the sine function, the challenge achieves smooth up-and-down oscillations, reminiscent of harmonic motion in physics.

Q: What adjustments were made to the code to create a grid of oscillating boxes in an isometric perspective in 3D?

The offset and distance calculations were utilized to create an angular offset for each box, resulting in a grid of oscillating boxes in a visually appealing isometric view.

Summary & Key Takeaways

• Coding challenge in JavaScript aims to recreate a geometric gif using WebGL in p5.js.

• Initial work in 2D establishes oscillating behavior with the sine function for smooth motion.

• Transitioning to 3D, the challenge involves creating a grid of oscillating boxes in an isometric perspective.