[Halloween 2018] The ScareCrow

[Rbz]

Hi,

Here is my entry for the challenge!

My first idea was to just make a painting of a scarecrow for practicing, but since I was learning some webgl/javascript I thought I could do something and here it's my first try on web browser coding, there isn't much here, just a particle effect + music player and of course my scarecrow painting. 

I'm really impressed on how much you can do now on browsers these days, very fast and smoothly effects using webgl or even on html5 canvas 2D, pretty cool stuff.

The ScareCrow

Click on the button "Start WebGL Demo" or on canvas to start playing.

Code & Graphics: Rbz
Music: "Blown Away" - http://incompetech.com/
Some webgl code/matrix initialization from developer mozilla tutorial

[boogop]

I played with webGL some a few years ago, along with something like three.js, and was blown away by what it could do. Smooth is right, your prod is incredibly smooth even forgetting that it's running in a web browser. I've always been held up on this technology by the fact that writing web pages is one of the more annoying aspects of my job. But I'm also stuck in webforms (entity framework doesn't support sql2000 which my employer is on) in which dealing with postbacks and javascript are just drudgery.

[Kirl]

Awesome painting! 
Hopefully you'll do some matte paintings (2.5d) in the future, you can turn this into one too.
Great music as well.

It's cool to see you getting into js and webgl, it's so easily viewable on pretty much any device. And I hope to look into webgl more seriously in the future myself.

[aNdy]

Stunning image!

[Rbz]

Thanks!

@Kirl: 2.5D matte painting looks really interesting, never heard of it before.
I found JS really easy to get, it helps that I've been coding on other languages for some time of course.
WebGL is Opengl ES 2.0 and I've done some of it on my experiments on Android, it was also really nice to code.

@boogop: I've checked webgl before (some years ago), but didn't have enough experience on opengl to fully understand it, also never liked html, always thought it was slow and incompatibly.
Now seems to be a standard that those browsers companies agree to follow (IMHO).

[~Ar-S~]

  Great work !
Amazing GFX !

[Kirl]

Actually I think parallax scrolling is the term I should've used (although essentially the same idea as matte's). So basically 3d-ifying a 2d scene, by seperating elements in layers, so that you can create the illusion of depth by moving and scaling them at different speeds.

I'm not familiar with opengl, but I have written a few shaders in Codea (ipad coding app), which also happens to use glsl es2. So I hope I'll be able to implement some of those shaders in my js prods one day. I gave up early on my last attempt because the examples I found seemed quite verbose. I guess should find a good webgl book, to get started for real.

I've also grown to dislike html, because back when I was doing a lot of js, each browser had their own interpretation of the standards, which were themselves in constant flux. It's great to hear this may have improved nowadays.

I'm still a big fan of js because it's so accesible for any device with a browser.

[Rbz]

One day I would like to do a demo using 2D animation like those used on a PS3 game called "Puppeteer" (of course not on the scale of awesomeness of this game   ), I think they used  this method you've said, it looks really nice and I loved that game.

I'll for sure code more things using js/canvas/webgl in the near future and hope to get more people here interested on this, because now on browsers you can do any kind of hightech demo you can imagine, there's also the new webgl2 that use opengl glsl es3, but you still can do alot with webgl1 too, and of course people can do all sorts of oldschool intros with it .