DEV Community

Takane Ichinose
Takane Ichinose

Posted on

2

#CodepenChallenge | 3D Ice Cream 🍦 With p5.js and GSAP

A simple animation of an ice cream 🍦 being served placed on a cone.

I created the 3D image of an ice cream and cone using p5.js.

I created the animation using GSAP timeline.

I'm still practicing creating a 3D image using WebGL (or related libraries). I actually messed up the generation of lighting and the material itself, so the ice cream looks like a rubber ball. 😆

I'm planning to take-on creation of textures, and also better animation of an image. In addition, also creation of a better background for the <canvas> tag to blend the with the background.

The animation can be re-animated by clicking the "Reset" button at the top right corner of the screen.

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

Best practices for optimal infrastructure performance with Magento

Running a Magento store? Struggling with performance bottlenecks? Join us and get actionable insights and real-world strategies to keep your store fast and reliable.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️