# Creative Coding with THREE.js

**URL:** <https://discourse.threejs.org/t/creative-coding-with-three-js/58481>\
**Category:** Showcase\
**Tags:** art, getting-started, tutorials\
**Created:** [November 23, 2023, 9:48am UTC](https://discourse.threejs.org/t/creative-coding-with-three-js/58481 "2023-11-23T09:48:45Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![robotbobby](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/robotbobby/32/22706_2.png) [@robotbobby](https://discourse.threejs.org/u/robotbobby)\
**Post date:** [November 23, 2023, 9:48am UTC](https://discourse.threejs.org/t/creative-coding-with-three-js/58481/1 "2023-11-23T09:48:45Z")

</div>

I wrote code art everyday for 3 years, and check out the cool realtime 3D animations and abstract art I made!

[![](https://img.youtube.com/vi/hriAN0iX7zY/maxresdefault.jpg "Learn Creative Coding with JavaScript") ](https://www.youtube.com/watch?v=hriAN0iX7zY)

---

<div class="post-metadata">

**Author:** ![ChrisG](https://avatars.discourse-cdn.com/v4/letter/c/5f8ce5/32.png) [@ChrisG](https://discourse.threejs.org/u/ChrisG)\
**Post date:** [November 24, 2023, 8:12am UTC](https://discourse.threejs.org/t/creative-coding-with-three-js/58481/2 "2023-11-24T08:12:53Z")

</div>

It would be interesting if you could provide API’s that take a string and return/manage the objects (to be added to scene) for those effects on the provided string.

---

<div class="post-metadata">

**Author:** ![robotbobby](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/robotbobby/32/22706_2.png) [@robotbobby](https://discourse.threejs.org/u/robotbobby)\
**Post date:** [November 25, 2023, 3:21pm UTC](https://discourse.threejs.org/t/creative-coding-with-three-js/58481/3 "2023-11-25T15:21:13Z")

</div>

@ChrisG That’s interesting. Could you give an example API call?

---

<div class="post-metadata">

**Author:** ![ChrisG](https://avatars.discourse-cdn.com/v4/letter/c/5f8ce5/32.png) [@ChrisG](https://discourse.threejs.org/u/ChrisG)\
**Post date:** [November 27, 2023, 8:20am UTC](https://discourse.threejs.org/t/creative-coding-with-three-js/58481/4 "2023-11-27T08:20:42Z")

</div>

I was just thinking that for any of the effects you were demonstrating for strings, that you could encapsulate the behavior in several reusable classes. Something like:

```javascript
const message = CodeArt.forString("Creative Coding", ArtEffect.TWIST_AND_SHAKE);
scene.add( message.getDisplayable() );

```

Of course it would be a bit more complicated as you’d need to integrate with the animation loop somehow, among other things. But just a thought.

- Chris

---

<div class="post-metadata">

**Author:** ![robotbobby](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/robotbobby/32/22706_2.png) [@robotbobby](https://discourse.threejs.org/u/robotbobby)\
**Post date:** [November 27, 2023, 3:59pm UTC](https://discourse.threejs.org/t/creative-coding-with-three-js/58481/5 "2023-11-27T15:59:17Z")

</div>

This looks clean and readable, thanks!