Discuss Scratch
- Discussion Forums
- » Advanced Topics
- » Non-photorealistic rendering projects
- gtoal
-
1000+ posts
Non-photorealistic rendering projects
I posted the info below to “Project ideas” but if there's any followups they need to be here instead.
Looking at the work Layzej and Martin Braendli have been doing, I think that the Scratch community is ready to take on some significant projects in the area of Non-photorealistic rendering (NPR)/painterly rendering.
Here are some links that might spark some ideas…
WPAP art style… https://goo.gl/ZuMW1O
Mosaics… nhttp://gfx.cs.princeton.edu/proj/isolum/
Pointillism… http://cgm.cs.ntust.edu.tw/publications/conference/seurat_LNCS.pdf (note also Chevreul's color circle in that paper - you will need to master color palettes: http://goo.gl/vyDsC , http://goo.gl/jpcLKc )
These Scratch projects show some of the techniques you could use:
Drawing with circles: https://scratch-mit-edu.ezproxyberklee.flo.org/projects/72012476/ https://scratch-mit-edu.ezproxyberklee.flo.org/projects/72534310/
Drawing with triangles: https://scratch-mit-edu.ezproxyberklee.flo.org/projects/50611046/ http://alteredqualia.com/visualization/evolve/
Color video with triangles : https://scratch-mit-edu.ezproxyberklee.flo.org/projects/34367372/
Splitting up an area Voronoi style: https://scratch-mit-edu.ezproxyberklee.flo.org/projects/60146800/ / Delaunay: https://scratch-mit-edu.ezproxyberklee.flo.org/projects/47435046/
Using force-layout algorithms to position non-overlapping circles via collisions (like Ishihara plates?)
I think a little cross-discipline exploration would be fun…
I've created a studio for this. New projects so far are:
G
Looking at the work Layzej and Martin Braendli have been doing, I think that the Scratch community is ready to take on some significant projects in the area of Non-photorealistic rendering (NPR)/painterly rendering.
Here are some links that might spark some ideas…
WPAP art style… https://goo.gl/ZuMW1O
Mosaics… nhttp://gfx.cs.princeton.edu/proj/isolum/
Pointillism… http://cgm.cs.ntust.edu.tw/publications/conference/seurat_LNCS.pdf (note also Chevreul's color circle in that paper - you will need to master color palettes: http://goo.gl/vyDsC , http://goo.gl/jpcLKc )
These Scratch projects show some of the techniques you could use:
Drawing with circles: https://scratch-mit-edu.ezproxyberklee.flo.org/projects/72012476/ https://scratch-mit-edu.ezproxyberklee.flo.org/projects/72534310/
Drawing with triangles: https://scratch-mit-edu.ezproxyberklee.flo.org/projects/50611046/ http://alteredqualia.com/visualization/evolve/
Color video with triangles : https://scratch-mit-edu.ezproxyberklee.flo.org/projects/34367372/
Splitting up an area Voronoi style: https://scratch-mit-edu.ezproxyberklee.flo.org/projects/60146800/ / Delaunay: https://scratch-mit-edu.ezproxyberklee.flo.org/projects/47435046/
Using force-layout algorithms to position non-overlapping circles via collisions (like Ishihara plates?)
I think a little cross-discipline exploration would be fun…
I've created a studio for this. New projects so far are:
- https://scratch-mit-edu.ezproxyberklee.flo.org/projects/72512206/
https://scratch-mit-edu.ezproxyberklee.flo.org/projects/72524668/
G
Last edited by gtoal (Aug. 8, 2015 00:45:43)
- Layzej
-
100+ posts
Non-photorealistic rendering projects
Here's one that's a little more “non-photorealistic” than I'd like: https://scratch-mit-edu.ezproxyberklee.flo.org/projects/70172336/ The idea was to generate a picture from 20 triangles using a genetic algorithm. It didn't really work. It got to 40% and then stopped climbing. It had the broad outline of the reference picture, but looked more like a mess of triangles if you'd never seen the reference.
I'm running it again with only 10 triangles.. Maybe I'll add more triangles each time it stops climbing. Gtoal had an interesting post about using a mesh of triangles. Maybe that's the right approach?
I'm running it again with only 10 triangles.. Maybe I'll add more triangles each time it stops climbing. Gtoal had an interesting post about using a mesh of triangles. Maybe that's the right approach?
- gtoal
-
1000+ posts
Non-photorealistic rendering projects
Here's a starter project for painting with brush strokes!
Although I'm wondering if procedural stroke generation like this project of Raucket's might be a better tool?
(Also https://scratch-mit-edu.ezproxyberklee.flo.org/projects/56831112/ https://scratch-mit-edu.ezproxyberklee.flo.org/projects/746770/ https://scratch-mit-edu.ezproxyberklee.flo.org/projects/1399011/ https://scratch-mit-edu.ezproxyberklee.flo.org/projects/19483358/ https://scratch-mit-edu.ezproxyberklee.flo.org/projects/1937331/ )
Although I'm wondering if procedural stroke generation like this project of Raucket's might be a better tool?
(Also https://scratch-mit-edu.ezproxyberklee.flo.org/projects/56831112/ https://scratch-mit-edu.ezproxyberklee.flo.org/projects/746770/ https://scratch-mit-edu.ezproxyberklee.flo.org/projects/1399011/ https://scratch-mit-edu.ezproxyberklee.flo.org/projects/19483358/ https://scratch-mit-edu.ezproxyberklee.flo.org/projects/1937331/ )
Last edited by gtoal (Aug. 7, 2015 22:29:26)
- Layzej
-
100+ posts
Non-photorealistic rendering projects
How about this one? https://scratch-mit-edu.ezproxyberklee.flo.org/projects/72512206
- gtoal
-
1000+ posts
Non-photorealistic rendering projects
https://scratch-mit-edu.ezproxyberklee.flo.org/projects/72512206How about this one?

Excellent! That was fast!
Last edited by gtoal (Aug. 9, 2015 22:27:02)
- gtoal
-
1000+ posts
Non-photorealistic rendering projects
Here's one I made!
Well, I guess two projects is enough to justify starting a studio :-)
https://scratch-mit-edu.ezproxyberklee.flo.org/studios/1440810/
It's open. I will also automatically invite anyone who adds an on-topic project to curate; that way you can still use it if I remove the option of letting anyone add projects (which I'll do if it is spammed).
G
- PullJosh
-
1000+ posts
Non-photorealistic rendering projects
Maybe adding a link to this topic in the studio description?
- gtoal
-
1000+ posts
Non-photorealistic rendering projects
Done. Maybe adding a link to this topic in the studio description?
- Layzej
-
100+ posts
Non-photorealistic rendering projects
How about stipple? https://scratch-mit-edu.ezproxyberklee.flo.org/projects/72587144/
- flint1242
-
100+ posts
Non-photorealistic rendering projects
I made one that actually moves depending on the sprite picture and when it rotates, it becomes like an animation. It uses a fisheye effect glitch.
- liam48D
-
1000+ posts
Non-photorealistic rendering projects
Show us? I made one that actually moves depending on the sprite picture and when it rotates, it becomes like an animation. It uses a fisheye effect glitch.

- gtoal
-
1000+ posts
Non-photorealistic rendering projects
https://scratch-mit-edu.ezproxyberklee.flo.org/projects/72587144/How about stipple?
Nice! If you can work out how to dither colours effectively, you've got yourself a Seurat filter! Work with a limited number of colours rather than picking the actual underlying colour.

Alternatively a challenge for monochrome is how to do white on a black background without it looking like a photographic negative. Ie don't just invert the colours, but stipple the ground rather than the figure…
G
Last edited by gtoal (Aug. 9, 2015 22:26:23)
- gtoal
-
1000+ posts
Non-photorealistic rendering projects
The paper http://www.cs.umsl.edu/~kang/Papers/kang_npar07_hi.pdf describes how to calculate an “Edge Tangent Field” which represents the directionality of lines in an image. This is probably too hard to calculate in Scratch but I link to C code that will let you calculate it externally.

In https://scratch-mit-edu.ezproxyberklee.flo.org/projects/72618266/ there is an image which encodes the X/Y vector at each point, and its magnitude, in the R,G,B values of each pixel. It could be used, for example, in selecting the direction of brush strokes in a painting. (Subtract 128 from the R & G values to get the X and Y vector components)

In https://scratch-mit-edu.ezproxyberklee.flo.org/projects/72618266/ there is an image which encodes the X/Y vector at each point, and its magnitude, in the R,G,B values of each pixel. It could be used, for example, in selecting the direction of brush strokes in a painting. (Subtract 128 from the R & G values to get the X and Y vector components)
Last edited by gtoal (Aug. 9, 2015 22:25:42)
- gtoal
-
1000+ posts
Non-photorealistic rendering projects
Last edited by gtoal (Aug. 9, 2015 22:25:03)
- gor-dee
-
1000+ posts
Non-photorealistic rendering projects
I have a challenge for you guys……….
a while ago I was looking at combining a 3D wireframe face (https://scratch-mit-edu.ezproxyberklee.flo.org/projects/17481405/ by @SohCahToa314) with a Picture scanner like https://scratch-mit-edu.ezproxyberklee.flo.org/projects/66980580/ by @Layzej and a triangle filler to make a 3D face mask. I'm afraid to say I gave up at the first hurdle but I still think it would be cool. I'll give fifty waffles to the first person to make a 3D gtoal!
a while ago I was looking at combining a 3D wireframe face (https://scratch-mit-edu.ezproxyberklee.flo.org/projects/17481405/ by @SohCahToa314) with a Picture scanner like https://scratch-mit-edu.ezproxyberklee.flo.org/projects/66980580/ by @Layzej and a triangle filler to make a 3D face mask. I'm afraid to say I gave up at the first hurdle but I still think it would be cool. I'll give fifty waffles to the first person to make a 3D gtoal!
- gor-dee
-
1000+ posts
Non-photorealistic rendering projects
Oh, and if you can combine it with @TheLogFather 's Head tracking https://scratch-mit-edu.ezproxyberklee.flo.org/projects/72290026/ so you can wear the mask on your own shoulders……………
- PullJosh
-
1000+ posts
Non-photorealistic rendering projects
https://scratch-mit-edu.ezproxyberklee.flo.org/projects/72290026/ so you can wear the mask on your own shoulders……………While we're at it, why not let people save their heads in the cloud for other people to put on? Oh, and if you can combine it with @TheLogFather 's Head tracking

- gtoal
-
1000+ posts
Non-photorealistic rendering projects
I have a challenge for you guys……….
a while ago I was looking at combining a 3D wireframe face (https://scratch-mit-edu.ezproxyberklee.flo.org/projects/17481405/ by @SohCahToa314) with a Picture scanner like https://scratch-mit-edu.ezproxyberklee.flo.org/projects/66980580/ by @Layzej and a triangle filler to make a 3D face mask. I'm afraid to say I gave up at the first hurdle but I still think it would be cool. I'll give fifty waffles to the first person to make a 3D gtoal!
Gets my vote :-) Can you do it WPAP style?
- Discussion Forums
- » Advanced Topics
-
» Non-photorealistic rendering projects