Discuss Scratch
- Discussion Forums
- » Advanced Topics
- » Snap! user discussion
- 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.
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)
- xly
- Scratcher
100+ posts
Snap! user discussion
Thx jokebookservice1 and bharvey
You can also have a look at :
http://www.xleroy.net/ByobTuto/WebJSnap/JSnap.html
- MichaelOlifant
- Scratcher
35 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
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.
- bharvey
- Scratcher
1000+ posts
Snap! user discussion
I'm confused; that page is a (presumably modified) Snap Try it here!, 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
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 How does this block work?! one.(JavaScript function \(\ @addInput \)\ \{\ [] } ::operators)
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 itcall (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
1000+ posts
Snap! user discussion
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.) 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”
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();
══ trans autistic lesbian enbydoggirls // 16 17 18 19 20, she/they ════
sparrows one word to the paragraph // <3 // ~(quasar) nebula
- ironmannn
- Scratcher
100+ posts
Snap! user discussion
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.) 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”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
1000+ posts
Snap! user discussion
Yeah, you can try the Is there a way to force updates to the canvas as I'm running JS code?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)
══ trans autistic lesbian enbydoggirls // 16 17 18 19 20, she/they ════
sparrows one word to the paragraph // <3 // ~(quasar) nebula
- jokebookservice1
- Scratcher
1000+ posts
Snap! user discussion
Perhaps the page has changed since, but for me there is now a tuple block in the data category, just below the “list” constructor.I'm confused; that page is a (presumably modified) Snap Try it here!, so I was expecting to see a TUPLE block, like LIST but etc., but instead I'm supposed to use JSFunction?
- 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.
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
This is absolutely the right place to ask such questions! 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.
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
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.This is absolutely the right place to ask such questions! 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.
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.
I guess there's not really a workaround for it for now, though, thank you greatly for the response!
- _nix
- Scratcher
1000+ posts
Snap! user discussion
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! What you are seeing is the dreaded
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.
══ trans autistic lesbian enbydoggirls // 16 17 18 19 20, she/they ════
sparrows one word to the paragraph // <3 // ~(quasar) nebula
- 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.
BYOB 3.1: https://drive.google.com/file/d/0B0GgRwz1KRIreUVTYUdfMGhSNzQ/view?usp=sharing
((text) reversed :: operators) :: control hatYou can download it here for Snap! 4.0:: https://drive.google.com/file/d/0B0GgRwz1KRIrZWJ6UmJZS3RXaEk/view?usp=sharing
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
BYOB 3.1: https://drive.google.com/file/d/0B0GgRwz1KRIreUVTYUdfMGhSNzQ/view?usp=sharing
Last edited by Gabriel2900 (March 22, 2017 13:47:03)
- MichaelOlifant
- Scratcher
35 posts
Snap! user discussion
What? There's aI'm confused; that page is a (presumably modified) Snap Try it here!, so I was expecting to see a TUPLE block, like LIST but etc., but instead I'm supposed to use JSFunction?
(tuple [] @delInput @addInput:: list)block!
The CAPITALBOYS will protect me from kumquats.
- Gabriel2900
- Scratcher
100+ posts
Snap! user discussion
Effects: same as this block:What? There's aI'm confused; that page is a (presumably modified) Snap Try it here!, so I was expecting to see a TUPLE block, like LIST but etc., but instead I'm supposed to use JSFunction?(tuple [] @delInput @addInput:: list)block!
(list @addInput :: list)
- _nix
- Scratcher
1000+ posts
Snap! user discussion
Actually, there's just one important difference – the tuple's item list can't be changed:Effects: same as this block:What? There's aI'm confused; that page is a (presumably modified) Snap Try it here!, so I was expecting to see a TUPLE block, like LIST but etc., but instead I'm supposed to use JSFunction?(tuple [] @delInput @addInput:: list)block!(list @addInput :: list)
Note that you can still reassign the “my tuple” variable; you just can't add to or replace items of the tuple.
══ trans autistic lesbian enbydoggirls // 16 17 18 19 20, she/they ════
sparrows one word to the paragraph // <3 // ~(quasar) nebula
- MichaelOlifant
- Scratcher
35 posts
Snap! user discussion
Wrong! The list is immutable.Effects: same as this block:What? There's aI'm confused; that page is a (presumably modified) Snap Try it here!, so I was expecting to see a TUPLE block, like LIST but etc., but instead I'm supposed to use JSFunction?(tuple [] @delInput @addInput:: list)block!(list @addInput :: list)
The CAPITALBOYS will protect me from kumquats.