Discuss Scratch

Gabriel2900
Scratcher
100+ posts

Snap! user discussion

How does this block work?
(JavaScript function \(\ @addInput \)\ \{\ [] } ::operators)
jokebookservice1
Scratcher
1000+ posts

Snap! user discussion

Gabriel2900 wrote:

How does this block work?
(JavaScript function \(\ @addInput \)\ \{\ [] } ::operators)
Well, there is a text-based programming language called JavaScript, and if you want to write some code in that language instead of Snap, you can define a function and it will act like a Snap! one.

Let's do an example of a function that joins two strings together.

function (firstParameter, secondParameter) {
    return firstParameter + secondParameter;
}

is how you would write it in JavaScript. Well, you can write that using the Snap! block like so

(JavaScript function \(\ [firstParameter] [secondParameter] @addInput \)\ \{\ [return firstParameter + secondParameter;] } ::operators)

what's great about this is that you can interact with sprites, the canvas (where the result is displayed) and also some features that are only available in JavaScript (perhaps also a flaw with the block).

For example, pop-ups and playing arbitrary audio becomes much easier with the block.

But how do you run it? Well, you can just use the block just like any other reporter block in Snap!, you can call it

call (JavaScript function \(\ [firstParameter] [secondParameter] @addInput \)\ \{\ [return firstParameter + secondParameter;] } ::operators) [Hello ] [World] @addInput ::control reporter

You can use it as a mapping function over an array, and much much more.

As I say, it can also modify lots of things such as the costumes of snap, something that other blocks in Snap can't do. Good luck!

Last edited by jokebookservice1 (March 19, 2017 21:48:09)



Gosh just be nice to people come on.
bharvey
Scratcher
1000+ posts

Snap! user discussion

… and the reason it can work is that Snap! is written in Javascript, so you're just adding code to Snap! itself.

If you do Open>Examples>JSFunction you can find examples in which it's used.

Last edited by bharvey (March 19, 2017 21:44:31)


Gabriel2900
Scratcher
100+ posts

Snap! user discussion

Thx jokebookservice1 and bharvey
xly
Scratcher
100+ posts

Snap! user discussion

Gabriel2900 wrote:

Thx jokebookservice1 and bharvey

You can also have a look at :
http://www.xleroy.net/ByobTuto/WebJSnap/JSnap.html
MichaelOlifant
Scratcher
27 posts

Snap! user discussion

I'm working on tuples in Snap!


They're like lists but they are frozen.
Try it here: https://michaelolifant.github.io/mikej/snap/snap.html

The CAPITALBOYS will protect me from kumquats.
~smile~ Y combinator:
define Y(fn)
report ((call (fn) with inputs (fn) [] @delInput @addInput::control)@addInput::grey ring)::control cap

say(call(Y((if <(num) = [0]> then [1] else ((num) x (call (fact) with inputs (fact) ((num)-(1))@delInput @addInput::control)::operators)::control) input names: ((fact)::grey) ((num)::grey) @delInput @addInput :: grey ring)) with inputs [5] @delInput @addInput::control
bharvey
Scratcher
1000+ posts

Snap! user discussion

MichaelOlifant wrote:

Try it here
I'm confused; that page is a (presumably modified) Snap!, so I was expecting to see a TUPLE block, like LIST but etc., but instead I'm supposed to use JSFunction?

ironmannn
Scratcher
100+ posts

Snap! user discussion

jokebookservice1 wrote:

Gabriel2900 wrote:

How does this block work?
(JavaScript function \(\ @addInput \)\ \{\ [] } ::operators)
Well, there is a text-based programming language called JavaScript, and if you want to write some code in that language instead of Snap, you can define a function and it will act like a Snap! one.

Let's do an example of a function that joins two strings together.

function (firstParameter, secondParameter) {
    return firstParameter + secondParameter;
}

is how you would write it in JavaScript. Well, you can write that using the Snap! block like so

(JavaScript function \(\ [firstParameter] [secondParameter] @addInput \)\ \{\ [return firstParameter + secondParameter;] } ::operators)

what's great about this is that you can interact with sprites, the canvas (where the result is displayed) and also some features that are only available in JavaScript (perhaps also a flaw with the block).

For example, pop-ups and playing arbitrary audio becomes much easier with the block.

But how do you run it? Well, you can just use the block just like any other reporter block in Snap!, you can call it

call (JavaScript function \(\ [firstParameter] [secondParameter] @addInput \)\ \{\ [return firstParameter + secondParameter;] } ::operators) [Hello ] [World] @addInput ::control reporter

You can use it as a mapping function over an array, and much much more.

As I say, it can also modify lots of things such as the costumes of snap, something that other blocks in Snap can't do. Good luck!


It's quite a powerful block, I'm currently using it to write a sprite generator.

Speaking of which, how come I cant write something like this within the block?

function ExampleFunc ()
{
this.gotoXY(0,0);
};

ExampleFunc();

it just errors out and returns “this.gotoXY is not a function”

when green flag clicked
do really complicated thing
_nix
Scratcher
100+ posts

Snap! user discussion

ironmannn wrote:

Speaking of which, how come I cant write something like this within the block?

function ExampleFunc ()
{
this.gotoXY(0,0);
};

ExampleFunc();

it just errors out and returns “this.gotoXY is not a function”
That's because of JavaScript's annoying scoping issues – basically “this” will become undefined in ExampleFunc. (PS, you should probably be starting your function names with lower case letters, likeThis! That's just the global JS convention.)

var myself = this;
function exampleFunc ()
{
  myself.gotoXY(0, 0);
}
exampleFunc();

That should work. In that case, you're storing the this-object (the sprite) in a variable called “myself”, which you can access from exampleFunc.

You can also use “bind” to change the value of “this” within that function:

function exampleFunc() { /* ... */ }
exampleFunc = exampleFunc.bind(this);
exampleFunc();

Or you could use the “new” ES6 arrow functions, which keep the value of the this-object from the this-object that created it:

var exampleFunc = () => {
  this.gotoXY(0, 0);
};
exampleFunc();

scratchisthebest is right
Nobody reads 5 paragraph signatures
ironmannn
Scratcher
100+ posts

Snap! user discussion

_nix wrote:

ironmannn wrote:

Speaking of which, how come I cant write something like this within the block?

function ExampleFunc ()
{
this.gotoXY(0,0);
};

ExampleFunc();

it just errors out and returns “this.gotoXY is not a function”
That's because of JavaScript's annoying scoping issues – basically “this” will become undefined in ExampleFunc. (PS, you should probably be starting your function names with lower case letters, likeThis! That's just the global JS convention.)

var myself = this;
function exampleFunc ()
{
  myself.gotoXY(0, 0);
}
exampleFunc();

That should work. In that case, you're storing the this-object (the sprite) in a variable called “myself”, which you can access from exampleFunc.

You can also use “bind” to change the value of “this” within that function:

function exampleFunc() { /* ... */ }
exampleFunc = exampleFunc.bind(this);
exampleFunc();

Or you could use the “new” ES6 arrow functions, which keep the value of the this-object from the this-object that created it:

var exampleFunc = () => {
  this.gotoXY(0, 0);
};
exampleFunc();

Thank you, this is information is quite helpful.

EDIT: Is there a way to force updates to the canvas as I'm running JS code?

Last edited by ironmannn (March 21, 2017 16:15:06)


when green flag clicked
do really complicated thing
_nix
Scratcher
100+ posts

Snap! user discussion

ironmannn wrote:

Is there a way to force updates to the canvas as I'm running JS code?
Yeah, you can try the window.requestAnimationFrame function:
// Do something..
//-
// Now wait for the canvas to update..
requestAnimationFrame(function() {
  //-
  // And then do further code..
  //-
});

Although I'm not sure how to integrate this with loops very well – this is an asynchronous function, meaning that the code in the function will be called later. It won't stop things such as loops. (It's generally easiest to use requestAnimationFrame sequentially, that is, before some piece of code and after another, both to only be called once. Example code.)

If you want to get really fancy, the absolute latest versions of JavaScript have a new feature called “async/await” that would make asynchronous tasks (such as waiting for the canvas to update via requestAnimationFrame) be easier; but it's kind of a big topic that doesn't really apply in the real world, yet, since only the latest versions of web browsers support it.

edit: This will only do one animation frame, though. Keep in mind that JavaScript is a single-threaded language so you can't really make Snap! and your code run at the exact same time.

Last edited by _nix (March 21, 2017 16:24:34)


scratchisthebest is right
Nobody reads 5 paragraph signatures
jokebookservice1
Scratcher
1000+ posts

Snap! user discussion

bharvey wrote:

MichaelOlifant wrote:

Try it here
I'm confused; that page is a (presumably modified) Snap!, so I was expecting to see a TUPLE block, like LIST but etc., but instead I'm supposed to use JSFunction?
Perhaps the page has changed since, but for me there is now a tuple block in the data category, just below the “list” constructor.


Gosh just be nice to people come on.
tyranex
New to Scratch
5 posts

Snap! user discussion

Alright, so, sorry to just.. barge in here during a discussion, but I have a problem, and I'm not really sure if the problem is with me, or Snap.

So, I'm creating really tiny sprites (At least below 15 pixels) and all seemed fine at first, but once I came back to my project after saving it and re opening it at a later time, I find that all the sprites have a weird blur effect on it. For an example, I'd have a red 2x2 dot that's got the exact same colour in each pixel. I exit my work, and come back to it Iater, and then the 2x2 dot is now a 3x3, the new pixels are a lighter shade of the original red.

I don't really know what's causing this, but I'd kinda like to turn it off, what's weirder is if I check the paint editor, the blur effect is there, but exporting the costume shows the actual original file that I desire it to be.

I don't know if this is the right place to be asking to be honest, I don't think there's anywhere else to ask about Snap specifically. If there is a better place to ask, can ya point me too it? Sorry about this.
bharvey
Scratcher
1000+ posts

Snap! user discussion

tyranex wrote:

once I came back to my project after saving it and re opening it at a later time, I find that all the sprites have a weird blur effect on it. For an example, I'd have a red 2x2 dot that's got the exact same colour in each pixel. I exit my work, and come back to it Iater, and then the 2x2 dot is now a 3x3, the new pixels are a lighter shade of the original red.
This is absolutely the right place to ask such questions!

What you are seeing is the dreaded anti-aliasing, [rant]one of the worst ideas in the history of computer science[/rant]. In order to create the appearance of smooth diagonal lines, instead of discrete stairsteps, graphics systems these days change the color of pixels near what would otherwise be an abrupt change in color, to take on intermediate color values. This would be fine if they kept the color values you asked for in the data structures, and only at the very moment of display did the blurring. But instead as you're drawing a line, or the edge of a rectangle, they put down blurred pixels in the remembered picture you're drawing. Not only does this look bad in itself, but it makes things like floodfill not work right.

Someday before I die I'm going to talk Jens into doing this right, or, failing that, just turn off anti-aliasing altogether. But meanwhile, draw your costumes pixel-by-pixel in some other graphics program, and stay out of the costume editor.

tyranex
New to Scratch
5 posts

Snap! user discussion

bharvey wrote:

tyranex wrote:

once I came back to my project after saving it and re opening it at a later time, I find that all the sprites have a weird blur effect on it. For an example, I'd have a red 2x2 dot that's got the exact same colour in each pixel. I exit my work, and come back to it Iater, and then the 2x2 dot is now a 3x3, the new pixels are a lighter shade of the original red.
This is absolutely the right place to ask such questions!

What you are seeing is the dreaded anti-aliasing, [rant]one of the worst ideas in the history of computer science[/rant]. In order to create the appearance of smooth diagonal lines, instead of discrete stairsteps, graphics systems these days change the color of pixels near what would otherwise be an abrupt change in color, to take on intermediate color values. This would be fine if they kept the color values you asked for in the data structures, and only at the very moment of display did the blurring. But instead as you're drawing a line, or the edge of a rectangle, they put down blurred pixels in the remembered picture you're drawing. Not only does this look bad in itself, but it makes things like floodfill not work right.

Someday before I die I'm going to talk Jens into doing this right, or, failing that, just turn off anti-aliasing altogether. But meanwhile, draw your costumes pixel-by-pixel in some other graphics program, and stay out of the costume editor.
Alright, thank you for explaining it to me. Now you see, I have indeed imported my costumes, in fact I imported an entire font that's quite tiny, PNG format, pixel perfect. But Snap seems to hate any costume I add through importing or through the program itself and adds Anti Aliasing.

I guess there's not really a workaround for it for now, though, thank you greatly for the response!
_nix
Scratcher
100+ posts

Snap! user discussion

bharvey wrote:

What you are seeing is the dreaded anti-aliasing, [rant]one of the worst ideas in the history of computer science[/rant].
I entirely agree with you. Anti-aliasing should be something I have to opt-in to before it effects anything; if I want to upscale an image, I'd use a program to do that!

It's not as bad when it's text anti-aliasing in a browser renderer (but, of course, let me choose whether or not to antialias text in a drawing program..). But image anti-aliasing when I'm making a game is annoying, and there's certainly enough games that are better off without anti-aliasing being a thing at all, so I'd like to be able to choose whether or not I want anti-aliasing while rendering my game.

scratchisthebest is right
Nobody reads 5 paragraph signatures
tyranex
New to Scratch
5 posts

Snap! user discussion

Something to add to this as well, I only just noticed now, the effect is stacking. The thumbnail and the export pages version of the sprite stays fine like before, but the costume itself, and within the paint canvas, keeps keeps increasingly getting worse and worse with each opening.
Gabriel2900
Scratcher
100+ posts

Snap! user discussion

I made REVERSED and SCRAMBLED blocks.
((text) reversed :: operators) :: control hat
script variables (i) (result) @delInput @addInput :: grey
set [result v] to (list @addInput :: list)
set [i v] to (length of (text))
repeat (length of (text))
add (letter (i) of (text)) to (result)
change [i v] by (-1)

end
report (join input list: (result) :: operators) :: control cap

((text) scrambled :: operators) :: control hat
script variables (i) (result) @delInput @addInput :: grey
set [result v] to (list @addInput :: list)
set [i v] to [0]
repeat (length of (text))
change [i v] by (1)
insert (letter (i) of (text)) at (random v) of (result)
end
report (join input list: (result) :: operators) :: control cap
You can download it here for Snap! 4.0:: https://drive.google.com/file/d/0B0GgRwz1KRIrZWJ6UmJZS3RXaEk/view?usp=sharing
BYOB 3.1: https://drive.google.com/file/d/0B0GgRwz1KRIreUVTYUdfMGhSNzQ/view?usp=sharing

Last edited by Gabriel2900 (Yesterday 13:47:03)

MichaelOlifant
Scratcher
27 posts

Snap! user discussion

bharvey wrote:

MichaelOlifant wrote:

Try it here
I'm confused; that page is a (presumably modified) Snap!, so I was expecting to see a TUPLE block, like LIST but etc., but instead I'm supposed to use JSFunction?
What? There's a
(tuple [] @delInput @addInput:: list)
block!

The CAPITALBOYS will protect me from kumquats.
~smile~ Y combinator:
define Y(fn)
report ((call (fn) with inputs (fn) [] @delInput @addInput::control)@addInput::grey ring)::control cap

say(call(Y((if <(num) = [0]> then [1] else ((num) x (call (fact) with inputs (fact) ((num)-(1))@delInput @addInput::control)::operators)::control) input names: ((fact)::grey) ((num)::grey) @delInput @addInput :: grey ring)) with inputs [5] @delInput @addInput::control
Gabriel2900
Scratcher
100+ posts

Snap! user discussion

MichaelOlifant wrote:

bharvey wrote:

MichaelOlifant wrote:

Try it here
I'm confused; that page is a (presumably modified) Snap!, so I was expecting to see a TUPLE block, like LIST but etc., but instead I'm supposed to use JSFunction?
What? There's a
(tuple [] @delInput @addInput:: list)
block!
Effects: same as this block:
(list @addInput :: list)

Powered by DjangoBB

Standard | Mobile