Non-photorealistic rendering projects

chooper100

Nice!

I think instead of displaying the zoom icon over images you should just make them go darker, eg.

#myImage {
    background-image: url(LINK HERE);
    transition: 0.5s all ease-in;
    filter: brightness(100%);
}

#myImage :: hover {
   filter: brightness(70%);
}

Sorry for any typos / syntax errors

PullJosh

chooper100 wrote:
Nice!

I think instead of displaying the zoom icon over images you should just make them go darker, eg.
#myImage {
    background-image: url(LINK HERE);
    transition: 0.5s all ease-in;
    filter: brightness(100%);
}

#myImage :: hover {
   filter: brightness(70%);
}
Sorry for any typos / syntax errors

That looks cool! My only concern was that adding filters to filters might make the original filters less cool.

Convert your Scratch projects to JavaScript automatically with Leopard!

chooper100

It would only be for the thumbnails

Also, I'm pretty sure that my syntax doesn't work anyway after some tests on Chrome

PullJosh

chooper100 wrote:
It would only be for the thumbnails

Also, I'm pretty sure that my syntax doesn't work anyway after some tests on Chrome

No, but we could certainly still use the idea (just transition with filters).

I'll try it out and see how it looks.

Convert your Scratch projects to JavaScript automatically with Leopard!

PullJosh

I've just tried it out. I used a bit of fancy CSS to make the images alternate (first image uses chooper100's method, second uses mine, third uses his, and so on…)

It's still at the same url. Try at out and let me know which you like better!

Convert your Scratch projects to JavaScript automatically with Leopard!

BookOwl

PullJosh wrote:
I've just tried it out. I used a bit of fancy CSS to make the images alternate (first image uses chooper100's method, second uses mine, third uses his, and so on…)

It's still at the same url. Try at out and let me know which you like better!

I think that I prefer chooper100's method.
I was kind of hoping that I could work on the website, though…

And PullJosh, shouldn't you be working on Elemental?

who needs signatures

Znapi

Layzej wrote:
Ack! I have it working in real-colour, but only by using hacked blocks to get around a stage3d bug involving stamping with brightness, - even then there appears to be a bug where only brightness < 0 is observed. Brightness approaching 100 is supposed to make the brush white, but it does not… This leaves the sky green instead of white with a hint of green.

Instead of brightness, it really means value. Lowering the saturation would make things lighter, but there isn't a block for that. The pen blocks are confusing.

BookOwl

I have released my background remover project!

It isn't perfect, but it does remove all of the sky! (along with some water, part of @Layzej's shirt and hat, and maybe a bit of his beard

)

who needs signatures

chooper100

This made me lol:

Znapi wrote:
The pen blocks are confusing.

After the Scratch Team deliberately didn't include pen saturation to avoid confusion XD

gtoal

Layzej wrote:
Ack! I have it working in real-colour, but only by using hacked blocks to get around a stage3d bug involving stamping with brightness, - even then there appears to be a bug where only brightness < 0 is observed. Brightness approaching 100 is supposed to make the brush white, but it does not… This leaves the sky green instead of white with a hint of green.

There's a theory that Van Gogh painted the colours he did because his colour vision was addled. Who is to say that green skies are not the next big thing in impressionism? :-)

Last edited by gtoal (Sept. 7, 2015 17:58:02)

gtoal

chooper100 wrote:
Nice!

I think instead of displaying the zoom icon over images you should just make them go darker, eg.

I wouldn't darken something you want to highlight… You might darken everything initially and undarken the highighted item, but then you have a very dark page.

Also I notice that when you remove the mouse from the zoomed image, it fades gradually but when you move into the image it appears immediately. It would be better to fade in the same way as it fades out.

G

gtoal

BookOwl wrote:
I have released my background remover project!

It isn't perfect, but it does remove all of the sky! (along with some water, part of @Layzej's shirt and hat, and maybe a bit of his beard )

That's pretty close! You might be able to refine it by doing a flood fill from the screen edges to determine contiguous background (and ignore non-contiguous parts) but I'd be wary of doing too much special case code that only worked well with this one image.

G

Layzej

Znapi wrote:
Instead of brightness, it really means value. Lowering the saturation would make things lighter, but there isn't a block for that. The pen blocks are confusing.

I guess so, but the documentation seems to indicate that brightness should brighten to white at 100: “ If the brightness is less than or equal to -100, it will appear entirely black. If it is greater than or equal to 100, it will be white.” - http://wiki.scratch.mit.edu/wiki/Graphic_Effect#Brightness

novice27b

Where can I get hold of the original image?

i use arch btw

PullJosh

novice27b wrote:
Where can I get hold of the original image?

Export the list from any of my recent projects. The list contains the original, and all the transformations are applied as the project is run (but not to the list).

Convert your Scratch projects to JavaScript automatically with Leopard!

novice27b

PullJosh wrote:
novice27b wrote:
Where can I get hold of the original image?
Export the list from any of my recent projects. The list contains the original, and all the transformations are applied as the project is run (but not to the list).

Thanks, but I'm looking for the original png/jpg file.

i use arch btw

gtoal

novice27b wrote:
Where can I get hold of the original image?

http://gtoal.com/scratch/nprguy.jpg

novice27b

gtoal wrote:
novice27b wrote:
Where can I get hold of the original image?
http://gtoal.com/scratch/nprguy.jpg

Thanks.

i use arch btw

PullJosh

BookOwl wrote:
I was kind of hoping that I could work on the website, though…
And PullJosh, shouldn't you be working on Elemental?

1) Oh wow, sorry. I had no idea.
2) Yeah, but I tend to jump from project to project. I can't stick with one thing for long.

(Fortunately this site should be a quick deal - short enough to hold my attention.)

gtoal wrote:
Also I notice that when you remove the mouse from the zoomed image, it fades gradually but when you move into the image it appears immediately. It would be better to fade in the same way as it fades out.

I noticed that as well… Unfortunately, I couldn't figure out a solution.

(It seems that the issue is rather sporadic - sometimes it works, sometimes it doesn't.)

BookOwl, maybe you could figure out what's going on? I have .finalImg (that's the one with all the fancy effects applied, also the one that appears without hover) and I have .oldImg (that's the original image). .finalImg is on top of .oldImg (both positioned absolutely), and the opacity of .finalImg transitions from 1 to 0 on hover (revealing the .oldImg on bottom). The code relating to this portion of the page starts on line 97 of the CSS. It might have something to do with this, but it might not. Worth a look.

Convert your Scratch projects to JavaScript automatically with Leopard!

PullJosh

Oh, and I've changed the hover effect (at least, for half of them anyway.)

It now changes to be lighter rather than darker and changes the cursor to the “pointer” style (same as what you'll see on links.) This is definitely an improvement over the other version, but I still prefer the zoom icon. What does everyone else think?

Convert your Scratch projects to JavaScript automatically with Leopard!

Discuss Scratch