How to change the color of a single pixel.

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By C:\Flavius

In order for me to practice maths, and programming, last summer I made (with the help of the community) a program that makes animations using mathematical objects named epicycloid curves. You can find the program’s trailer on youtube typing “epikiklos trailer” and it will be posted by me Emanuel Hongu if you wanna see it.

Since then I also used some other programs by other people, and seen LOTS of really really amazing and beautiful things made with programming. They are things that I really don’t know how to explain in a single sentence or even a paragraph but long story short, they are programs that do visually appealing stuff.

And I like them. Especially my favourite one; Fragments of Euclid by NuSan, a game that tries to put the non euclidean geometry of Escher’s art into a 3D game, and does it really amazingly well. I would even say in that game you travel through the fourth dimension. At least I absolutely felt like a planeswalker while playing it. I like it so much I even wanna make my own version of it with lots of additions. Seriously just play it, it’s free and great.

So during this year I started developing a taste for visually appealing software, something like artistic programming, where maths and visual beauty are one.

Thus I decided to start making this kinds of programs. And now I wanna make a program that draws fractals. In theory I would want it to draw any Mandelbrot’s Set, but I will begin with the one that we know the most; z = z^2 + c.
I really think I already know the logic to it and how to do it, I just don’t know the syntax of Godot, and I really wanna learn it cause I think Godot is just great and wanna use it.
The first thing I need to know is how to draw a black dot on whatever spot on the screen. I would want that dot to be one pixel wide, so that I can get the best resolution for my fractals, as I wanna change the color of every single pixel on the screen, one by one. (Maybe my PC won’t be able to handle that but I wanna at least try it)

So to summarize, my question is; how can I draw a dot on the screen of a specific color? I can use any color format and any syntax as long as it works.

And lastly, cause my mind just flies unconrolably I need to tell you about some future projects related to fractals. As I said I want this program to be able to draw any exponent of Mandeltrot’s set. But this is not all. I’ve seen that the julia set is kinda like a radiography where you can see like layers of an object that’s been scanned. I thought I could try to put infinitely many of these (not really) two dimensional layers on top of each other and try to make a 3D julia set showing it’s evolution. That would probably look cool.
And of course, the relation between Mandelbrot and Julia set can be represented in (kinda) three dimensions too and I say it would look rather cool, too.

Thank you in advance.

Edit: I used draw_polyline and it works only if the three points of the triangle are in different positions, it the three points I give are in the same position it doesn’t draw anything. I’m thinking I could use draw_line and just use two points. Maybe that works for a line of length one pixel.

Edit2: draw_line works for this. If pos_from and pos_to are one pixel apart it draws what looks to me like a dot. Problem is I don’t really know if that is really a one pixel length dot or is it a two pixel length line (two pixels of length, pixel of pos_from and of pos_to).
Cause I’m not sure but maybe this will mess with my maths later on.

I’m gonna go sleep now, I will reply tomorrow.

Hello!
Yeah it’s me again. Seems you want to undertake another art project using Godot. Well before I can help I’m going to need to know a few things.

  1. When you say you want to draw the 2D mandelbrot set, do you mean the whole thing, or just an outline?
  2. What’s the resolution of the mandelbrot set?
  3. Will this be all done in 2D or 3D?

SIsilicon | 2018-12-05 13:01

I wanna draw the whole thing, if possible with colors.
I was thinking of drawing it pixel by pixel. Is it not a good idea?

The Mandelbrot Set is “a mathematical function”, or rather a set of complex numbers. Actually the set of numbers is just the part that generally is drawn in black, and the other colors are not part of it. The Mandelbrot Set is defined as the set of complex numbers that when iterating z = z^2 + c for c starting with z = 0 remains bounded, if I recall correctly within -2 and 2.
The other numbers however don’t remain bounded and after some time end up outside the boundaries. Depending on how fast they diverge (they go away from the origin) they are given a color or another. And generally that makes it look quite good.

It will be absolutely all done in 2D. I’m not even thinking of trying anything in 3D until I master the 2D Mandelbrot Set. Maybe and only maybe then I will try and do other things.

C:\Flavius | 2018-12-08 02:26

I really think it’s best to use a shader on a Sprite or a ColorRect. it wouldn’t be too hard to implement. Taking some glsl code from here we get this shader.

shader_type canvas_item;

uniform sampler2D tex;
uniform vec2 center;
uniform float scale;
uniform int iter;

void fragment() {
    vec2 z, c;

    c = vec2(1.3333, 1.0) * (UV - 0.5) * scale - center;

    int i;
    z = c;
    for(i=0; i<iter; i++) {
        float x = (z.x * z.x - z.y * z.y) + c.x;
        float y = (z.y * z.x + z.x * z.y) + c.y;

        if((x * x + y * y) > 4.0) break;
        z = vec2(x, y);
    }

    COLOR = texture(tex, vec2((i == iter ? 0.0 : float(i)) / 100.0, 0.0));
}

SIsilicon | 2018-12-08 04:50

As always, sorry for taking too long to reply. Programming is second after studying… I’m really sorry.

Also, I’ve checked it and looks like there’s a function in canvasitem that does just that, draw a point. It is draw_primitive()
I haven’t used it yet though…

Also, mind if I ask a quick question?
Just what does the uvs parameter in draw_polygon() mean? It has PoolVector2Array type. But I have no idea of what that is so I just threw three random vectors. It doesn’t crash, but doesn’t draw anything either. And I don’t even know what uvs stands for. At school I was taught that in order for you to draw a polygon you need at least three points, and a color to draw in the middle of it…

Also, I still feel bad because you put so much effort into helping me and I take so long to reply
Thank you very much for your kind help!!

Edit: Apparently uvs is used as a parameter in draw_primitive() too and I still have no clue about what it is.

Edit2: I found out I can draw a circle without using draw_polygon() or draw_colored_polygon() by using draw_circle()which is more convenient and doesn’t need that uvs thing which I still don’t know what it is. Until now I used cosines and sines to get the points of the polygon and draw circles but this is much easier, just a signle line of code, lol.
Wonder if it can be used do draw a point.
Answer: It draws four points (pixels) so I guess I still have to use draw_primitive or something for that. meh

C:\Flavius | 2018-12-17 20:18

UV’s hold the texture coordinates to sample a texture with. If you give the polygon or primitive no UV coordinates, your won’t be able to draw a texture unto it.

Wikipedia can explain it better.

SIsilicon | 2018-12-17 21:16

I still think it’s a bad idea to draw it pixel by pixel with draw_primitivesor anything else like that. Your GPU can only handle so many vertices. Most likely, you won’t be able to add enough points to even fill up a quarter of the screen.

SIsilicon | 2018-12-17 21:19

That makes sense…
Do you know of another way to draw stuff like that?

C:\Flavius | 2018-12-17 21:25

And thank you for explaining the UV thing. Though I still don’t understand it. I may need to read Wikipedia xd

C:\Flavius | 2018-12-17 21:26

Do you know of another way to draw stuff like that?

The comment I made on December 8th. Reference that.

SIsilicon | 2018-12-17 21:43

Does that work on Godot? Or do I have to translate it to GDScript?
Postdata: I don’t know what a shader is, but I’m willing to learn!

I looked it up. glsl means OpenGL Shading Language and it is used to make shaders.
I also know that Godot suports OpenGL.
Now, do I need to create another file (and probably download another program) to use that shader or how exactly do I have to use it? God I’m a noob

It is almost midnight here so I’m gonna go. Talk to you other day, thanks for all of your help!

C:\Flavius | 2018-12-17 22:04

Yes you are a noob. You’re so noob that you even spelt it wrong! XD But jokes aside, I will teach you the basics to using shaders in Godot.

Ok first of all, a shader is a program that runs on your graphics processor (GPU). They determine how to render a list of vertices. Godot’s shading language is similar to glsl. There are three kinds of functions we can override in a Godot shader to change the way something is rendered.

  • vertex: changes the way the vertices of a mesh gets transformed into screen space.
  • fragment: changes the color of a fragment(a.k.a. pixel) generated by the rasterized mesh.
  • light: changes how the mesh gets effected by lights. Not derived from glsl.

The only shader we need for this case is just the fragment shader. Which is what showed up in the shader I gave you. Now all you need to do is put that shader to good use. Assuming you read that last link in this comment, you now need to add a ColorRect to the scene, give it a new ShaderMaterial, and add the shader.

SIsilicon | 2018-12-17 23:46

oooh great! I’ve always been using Node2Ds and got bored of just using that (and using the nodes necesary to make GUIs, you know labels buttons and so)
Time to practice! I don’t wanna keep being a noob, so I need to learn new things. Thx for the links, I’ll see what I can do

Okay, so I’m already tinkering with it. I will ask you a question later, now I need to go. thx for everything!

C:\Flavius | 2018-12-18 14:49

Okay so before I went out I created a ColorRect into the scene, gave it a ShaderMaterial as shown in the link, pasted the shader and it didn’t do anything. Just a white window. So what I did was read again this page and created a TextureRectwith the one dimensional texture they give (called pal.png) as texture. Then I gave every variable in the shader a value such as 1.0 for the scale, 10 for iter, vec2(0,0) for the center etc just to see if it did anything. But it didn’t do, nor error nor drawing anything so clearly I’m missing something.

Only thing I didn’t do is give tex a value. I guess maybe that’s the problem, it’s just that I don’t know how to give it a value. I tried uniform sampler2D tex = "res://pal.png"; and that didn’t work cause it didn’t recognise the " symbol, tried without them and didn’t recognize identifier “res”

So, my question is, what is this suposed to do if I did it right? This being creating a ColorRect and giving it a ShaderMaterial and pasting the code above.

I feel quite useless now xd god I swear I’ll become the best!

C:\Flavius | 2018-12-18 20:34

I tried uniform sampler2D tex = “res://pal.png”; and that didn’t work

You can’t give a sampler2D uniform a default value in the shader. You have to put it in as a uniform while editing the ShaderMaterial.

SIsilicon | 2018-12-18 23:31

Sir, thou art a wizard. I shalt learn your black magic and become the next dark lord (You’r a genius to me at least and I will reverse egnineer this shader so that I can do many kool stuffs and I love you and I owe you my soul aka it worked and I’m a noob)

C:\Flavius | 2018-12-19 14:56

Haha ok.
Next time you have a question here, I’ll start a discussion at Godot Dev forums. Looks like a better place to talk at.

SIsilicon | 2018-12-19 15:39