Resize function with code

[Furiosposion]

Hi, i'm working on a type of painting app, here is drawing of preview page, i'm having issues with that.
thing i want to do is resize 64*64 drawing to 320*320 (lets say 5x resize for example) in preview. (without built-in function etc)
thanks for any help on fixes of this code

//1x1 pixel
var spr = s_pixel;

//lets say 5x resize for example
var resize =  5;

//image's width*height
var size = 64*64;

for (var i = 0; i < size; i++){

var xx = ds_list_find_value(x_pos , i);
var yy = ds_list_find_value(y_pos , i);
var R = ds_list_find_value(red , i);
var G = ds_list_find_value(green , i);
var B = ds_list_find_value(blue , i);

var color = make_color_rgb(R,G,B);

for (var i = 0; i < resize; i++){
for (var i = 0; i < resize; i++){
draw_sprite_ext(spr,0,xx+i,yy,1,1,0,color,1);
draw_sprite_ext(spr,0,xx,yy+i,1,1,0,color,1);
}}
 
}

 

[Furiosposion]

for (var i = 0; i < resize; i++){
for (var i = 0; i < resize; i++){
draw_sprite_ext(spr,0,xx+i,yy,1,1,0,color,1);
draw_sprite_ext(spr,0,xx,yy+i,1,1,0,color,1);
}}
is the code i tried for resizing like drawing 5 pixels for one pixel and that would be 5x resized but theres issues and it doesnt work as expected.

 

[CedSharp]

To draw a square, you can use division and modulo.
Basically, if you want a square that is 5 pixel in width, you want your x position to be '0, 1, 2, 3, 4, 0, 1, 2, 3, 4, 0, 2, 3, 4, ...'
That's what modulo does. Modulo of 5 will return a sequence of 0 to 4 which repeats. 4 modulo 5 is 4, and 5 modulo 5 is 0. 6 modulo 5 is 1, etc.
You also want your y position to be 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, etc. You basically want it to repeat 5 times (for the x to draw on the right row).
You can do this with division and floored integers. 0 divided by 5 is 0. 1 divided by 5 is 0.2, 4 divided by 5 is 0.8. all those values, when you use floor(), will give you 0.
Then 5 divided by 5 is 1, 6 divided by 5 is 1.2, 9 divided by 5 is 1.8, etc. Those, once floored, will be 1.

So I would create a loop that goes from 0 to 24 (5*5 - 1), and make the x = iteration modulo 5, and y = floor(iteration / 5).

Here is an example:

var square_size = 5;
for(var i=0; i<(square_size*square_size); i++) {
  var xx, yy;
  xx = i mod 5;
  yy = floor(i / 5);
  draw_point(xx, yy);
}

Of course, if the size of what you want to draw is bigger than 1 pixel, you'll have to include that in the calculation.
For example, if every "point" you draw are 64 pixels, then you could do "xx * 64" to draw every 64 pixel in distance.

Hope this helps!

 

[Furiosposion]

it works with the creating size*size square, but how could i implement into my code above and convert whole image into 5x bigger?

 

[Furiosposion]

bump

 

[TheouAegis]

Draw to a surface and then save that surface.

Personally, I'd just multiply your coordinates by your resize factor and then draw a rectangle.

for(var xx,yy,r,g,b,i= 0; i<size; i++) {
xx = ds_list_find_value(x_pos , i);
yy = ds_list_find_value(y_pos , i);
r = ds_list_find_value(red , i);
g = ds_list_find_value(green , i);
b = ds_list_find_value(blue , i);
xx *= scale;
yy *= scale;

draw_set_color(make_color_rgb(r,g,b));
draw_rectangle(xx,yy,xx+scale-1,yy+scale-1,0)
}

You need the -1 in the draw_rectangles otherwise it will actually be scale+1 onscreen.

Also, you could be saving the full color in your list, you don't need to break it down into the RGB components. That would cut out three function calls out of your code right there, speeding it up considerably.

for(var xx,yy,r,g,b,i= 0; i<size; i++) {
xx = ds_list_find_value(x_pos , i);
yy = ds_list_find_value(y_pos , i);
xx *= scale;
yy *= scale;

draw_set_color(ds_list_find_value(color,i));
draw_rectangle(xx,yy,xx+scale-1,yy+scale-1,0)
}

 

[Furiosposion]

i've tried with rectangles as this:

var scale = 5;

for (var i = 0; i < ds_list_size(list_color); i++){
 
var xx = ds_list_find_value(list_xx,i); 
var yy = ds_list_find_value(list_yy,i);

var color = ds_list_find_value(list_color,i);

var dx1 = xx * scale;
var dy1 = yy * scale;
var dx2 = dx1 + scale;
var dy2 = dx2 + scale;

draw_set_color(color);

//Drawing scaled pixels with rectangle
draw_rectangle(dx1, dy1, dx2, dy2, false);
}

But result was broken, it did only rendered half of image.

LEFT SIDE IS ORIGINAL, RIGHT SIDE IS RENDER RESULT OF CODE

 

[TheouAegis]

var dy2 = dx2 + scale;

Typo