Get started with offscreen images

Here is a simple example to get you started with creating offscreen images:

image = new Image( 64, 64 )


// use setRGB or setRGBA to edit your image pixel by pixel
for i=0 to image.width-1 by 1
  for j=0 to image.height-1 by 1
    image.setRGB(i,j,random.next()*255,random.next()*255,random.next()*255)
  end
end

// or use the same drawing functions as for the screen
// note that the coordinates system is different
// 1 unit == 1 pixel
// 0,0 is top left
// y-axis is pointing down
image.fillRect(0,0,16,16,"rgb(255,0,0)")

screen.drawImage( image, 0, 0, 100, 100 )

update = function()
  if mouse.press then
    // save the image on the user's PC
    system.file.save(image) // saves a png with default name

    // or system.file.save(image,"myfilename","jpg",0.95)
  end
end

:0 yess this gives me so many ideas of things to do! Now we can make custom noise, texture mapping, etc.

Oh oh, another tinkerer on the loose :)

Live Long and Tinker

The possibilities are nearly endless ;)

Is there any way to get the RGB value of a certain pixel?

image.getRGB( x, y [,result])
Check the new API cheatsheet for more toys :)

Is there a way to draw a procedural generated image to the screen?

Something not as ugly as:

init = function()
  sprite = sprites["icon"]
  img =  sprite.frames[0]
  img.drawLine(0,0,16,16)
  img.drawLine(16,0,0,16)
end

draw = function()
  screen.drawSprite(sprite,0,0,100)
end

@HomineLudens like this:

img = new Image(16,16)
img.setRGB(8,8,255,0,255)
screen.drawImage( img, 0, 0, 100 )

You also have drawImagePart for drawing only a part of your image to the screen. Note that you can also pass an image object to drawSprite, it will work just as well. drawImage and drawImagePart were just added for the sake of clarity but they are the very same functions as drawSprite and drawSpritePart. They all accept either an Image, a Sprite or the name of a sprite as first argument.

See https://github.com/pmgl/microstudio/wiki/en-API-cheatsheet#images

Thanks @gilles, I don't know how I miss it. Just what I was looking for.

is it possible to create HMTL-Image out of MicroStudio-Image?

@kesha: the MsImage class has the instance property canvas. To turn a small MsImage into an HTMLImageElement, use something similar to the following code:

//javascript
global.ms_to_img = function(ms_img) {
  let result = new Image(ms_img.width, ms_img.height);
  result.src = ms_img.canvas.toDataURL();
  return result;
}

init = function()
  my_image = new Image(16, 16)
  print(ms_to_img(my_image))
end

This solution uses a data URL, which is only suitable for small canvases. For large images, use blobs and URL.createObjectURL.

@gilles, I tried to implement your example in JavaScript, but something went wrong

Invalid or unexpected token, in file "source3" at line 34

image.fillRect is not a function, in file "_main" at line 17

image.setRGB is not a function, in file "_main" at line 8

What could be the mistake?

Here is the code itself

init = function() {
  image = new Image( 64, 64 )
}

function update() {
  for(let i = 0; i<image.width-1; i++){
    for(let j = 0; j<image.height-1; j++){
      image.setRGB(i,j,Math.random()*255,Math.random()*255,Math.random()*255)
    }
  }
  if(mouse.press){
    system.file.save(image)
  }
}

draw = function() {
  image.fillRect(0,0,16,16,"rgb(255,0,0)")
  screen.drawImage( image, 0, 0, 100, 100 )
}

In JavaScript projects, the Image constructor creates an HTMLImageElement. For the code to work, use new msImage(width, height) instead.

Yes, indeed, in order for everything to work on JS, you need to add ms to the Image (get msImage). The error "Invalid or unexpected token in the source3 file on line 34" is still displayed, and the exported images have white horizontal and vertical lines, maybe I'm doing something wrong, I didn't have enough time to figure it out. There is no "-1" in the lines with "image.width" and "image.height", I experimented, I thought it would help

Here is a screenshot

Currently, in JavaScript projects, the line number of the error is incorrect. Try checking all of the code in "source3" for syntax errors.

oh, yeah, I'm sorry, my mistake in source 3 is not an MS problem

the white lines when exporting are something like a transparent background, or rather, its replacement. it should have been done like this: "age.width+1" to make them disappear

P.S. never! do not assign keyboard buttons to "system.file.save"!