create canvas texture

This topic has 11 replies, 2 voices, and was last updated 2 years, 1 month ago by noname.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
2022-11-03 at 12:46 am #57031

noname
Participant

I would like to draw a canvas to a surface of a cube object but im not that familiar with 3D textures. Is this possible?

(black square replacing with canvas coded with javascript)
https://v3d.net/c7o

2022-11-03 at 1:30 am #57032

kdv
Participant

It’s possible

Puzzles and JS coding. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

2022-11-03 at 2:35 pm #57054

noname
Participant

Wow this is awsome. I tried your code and it works. However after testing a little I was not able to manipulate the canvas after the initial setup.

Lets say i want to clear the canvas and draw another Rect on it. Is that possible? My goal is to build like a little gameboy that runs with a html/javascript canvas and that you can also control with the real buttons on the 3d model.

Attachments:
You must be logged in to view attached files.

2022-11-03 at 2:56 pm #57060

kdv
Participant

draw a new image and update the canvas texture again.

Puzzles and JS coding. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

2022-11-03 at 3:23 pm #57065

noname
Participant

This works. Thank you much, sir!

2022-11-10 at 3:23 pm #57265

noname
Participant

Sorry for having to ask again here @kdv77kdv

I was playing around with it but im not able to draw animations to the textures. Replacing the texture with a new static image is okay but how do I create an animation on it, using setInterval?

2022-11-10 at 3:54 pm #57267

kdv
Participant

What kind of animation you’re trying to draw? A sequence of images or a video file?

Puzzles and JS coding. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

2022-11-16 at 11:21 am #57373
noname
Participant
@kdv77kdv
It’s more like a javaScript manipulated drawing.

Example JsFiddle:
https://jsfiddle.net/7mvq29xa/1/
```
var canvas = document.getElementById("myCanvas");
    var c = canvas.getContext("2d");
    var startX = 50;
    var startY = 50;
    var endX = 100;
    var endY = 100;
    var amount = 0;
    setInterval(function() {
        amount += 0.05; 
        c.clearRect(0, 0, canvas.width, canvas.height);
        c.strokeStyle = "black";
        c.moveTo(startX, startY);
        c.lineTo(startX + (endX - startX) * amount, startY + (endY - startY) * amount);
        c.stroke();
    }, 30);
```
2022-11-16 at 12:22 pm #57375

kdv
Participant

do you update the canvas texture after every frame?

Puzzles and JS coding. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

2022-11-17 at 2:58 pm #57434

noname
Participant

Okay when using the setInterval as Puzzleblock and not in the Code-Block it seems to work doing animations.

https://v3d.net/clp

Attachments:
You must be logged in to view attached files.

2022-11-17 at 3:07 pm #57436

kdv
Participant

Replace texture every frame??? That’s a cruel solution ))) As I’ve said, you just need to update the canvas texture every frame.

This script draws two videos to the canvas texture

Puzzles and JS coding. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

2022-11-17 at 3:44 pm #57438

noname
Participant

Ah yes thanks for the hint. Now it works like intended. Thanks a lot.

https://v3d.net/clp

Attachments:
You must be logged in to view attached files.
Author

Posts