Wireframe cube of spaces

Resources
,
1

Hi community!

Imagine, you’re sitting alone, bothering nobody, and suddenly a voice in your head starts whispering “Hey! Listen! Draw a box… in browser’s console”…
Well, here we are!


Demo: https://codepen.io/prisoner849/pen/OPRBmwv

I don’t know if this is somehow useful for something serious. Just wanted to share what strange things you can do with the framework. :sweat_smile:

PS The “image” gets heavy flickering sometimes.

12 Likes
2

This is brutal!

When you check “persist logs” in devtools the console.clear is ignored, and you can enjoy a dump of individual frames one after another.

PS. Would the voice in your head tell you paint the faces of the cube in different colors?

2 Likes
3

you are truly a genius

1 Like
4

Love it!
That’s it, I’m ditching canvas. 3D console are the future. :grinning_face_with_smiling_eyes:

2 Likes
5

This is insane!
It reminds me of the times where I would create rotating 3D objects in an Excel spreadsheet.

2 Likes
6

This actually reminds me of some Linux terminal tools that render animations in ASCII, those always look super cool. Yours has that same feel, really nice.

1 Like
7

hahaha this is sick

That voice is quite convincing! :grinning_face_with_smiling_eyes:

Genius as always

1 Like
8

fyi (prisoner probably knows this already but), you can also log images, and colored text to the console using styles in the log:

console.log("%cHello Shader World!", "color: #00ffcc; font-size: 20px; font-weight: bold;")

and images:

const logImage = (url, scale = 0.5) => {
    // We create a temporary image to get its dimensions
    const img = new Image();
    img.onload = () => {
        const style = [
            `background-image: url(${url})`,
            `background-size: contain`,
            `background-repeat: no-repeat`,
            `padding: ${img.height * scale}px ${img.width * scale}px`, // Create the "box"
            `line-height: ${img.height * scale}px`
        ].join(';');

        console.log('%c ', style);
    };
    img.src = url;
};

// Usage:
logImage('https://threejs.org/files/icon.png', 0.2);
2 Likes
9

Hi @manthrax …

I tried with https://threejs.org/examples/screenshots/webgl_animation_keyframes.jpg in Firefox… without success :unamused_face:

The colored example was OK!

10

Oh it might be chrome only for images… cool that the colored text works tho, you can also set size/font etc.!

2 Likes