Dark Bit Factory & Gravity

GENERAL => Challenges & Competitions => Topic started by: Rbz on October 27, 2018

Title: [Halloween 2018] The ScareCrow
Post by: Rbz on October 27, 2018

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 (http://rbraz.com/WebGL/Demo1/)

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 (http://www.letmegooglethat.com/?q=webgl+mozilla+tutorial)
Title: Re: [Halloween 2018] The ScareCrow
Post by: boogop on October 28, 2018
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.
Title: Re: [Halloween 2018] The ScareCrow
Post by: Kirl on October 29, 2018
Awesome painting!  :clap:
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.
Title: Re: [Halloween 2018] The ScareCrow
Post by: aNdy on October 29, 2018
Stunning image!
Title: Re: [Halloween 2018] The ScareCrow
Post by: Rbz on October 29, 2018

@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).
Title: Re: [Halloween 2018] The ScareCrow
Post by: ~Ar-S~ on October 30, 2018
 :|| Great work !
Amazing GFX !
Title: Re: [Halloween 2018] The ScareCrow
Post by: Kirl on November 01, 2018
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.
Title: Re: [Halloween 2018] The ScareCrow
Post by: Rbz on November 01, 2018
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 . 8)