Category: Coding Trainwreck

Space Invaders for the Coding trainwreck!

demo:  here

github : here

I’ve done this one before

When I worked at brady communications I developed a lot of the touch interfaces you might have ran into on Royal Caribbean cruise line ships.  One of those interfaces was a ‘kids cafe’ internet cafe.  The “Royal Caribbean SurfStation”.

Basically there is no email out in the ocean so this is a way the ships allow connection. They can collect everything and send it in bulk via satellite late at night to save costs.

For the one loading screen/game section entry points I developed a simple space invaders game in Flash.  If you have Flash you can check it out on my portfolio site.   but for now this one works rather well in canvas.

Here is a path to that one!

Again it’s a pain to deal with canvas rather than being able to attach events and actions to sprites themselves… only doing it a lot will make that easier.

Outside of that nothing really to learn here.  This was more of re-establishing lessons from previous challenges.   I will probably come back to visit this one again and add some decent graphics and some ‘sheilds’ like the original SI.

Purple Rain Coding Challenge (#4)

This is the fourth coding challenge of Dan Shiffmans coding train youtube channel, ‘purple rain’. Well, it’s my version in p5js of his processing code. This is really an experiment in me learning p5js and eventually processing.  I also hope it helps re-motivate myself with ‘fun’ code rather than just endless forms, submits and radio buttons.

So here it is!

Demo: here

github: here

This isn’t anything new to me.  I’ve done this rain effect thousands of times in the past 15  plus years.   I’ve  also gotten to the point of adding in wind and air resistance in the past. While I kept this simple to keep the flow or motivation going.

This was more of a practice of the mapping function in p5js. I like it though I’ve also lived without it for years so I’m sure it’ll take some time to really incorporate it in my thinking rather than just doing the percentage values myself. I really should test which is quicker.

There isn’t a lot different about this over Daniel Shiffmans version.  He did his in processing while i used js (i’m sure he has a js version somewhere).  The only really big difference is I created a ‘reset’ method in the ‘drop’ class to centralize the ‘resetting’ of a particle. nothing really unusual.

That all said I do believe the best way to learn a new language is to learn a simple particle system.  This is it.

What happened to #3?

Oh I did it. and I made it work on mobile(swiping). it’s on github I just kept working on it for a rediculously long time.  I even made graphic/sprites in sketchup for it.  yup, I made actual 3d models for it.

I did take a lot of time on it. Pretty much I spent too much time on it and did the one thing that I really hate that dev’s do, I made it way more complicated than it ever needed to be.  I also don’t feel that the instantiation of p5js is very intuitive with multiple classes being used. It actually turns into a trainwreck very quickly.

I want to push it further still but I was loosing motivation to continue working on it so I jumped on to the next challenge to get the drive back and to expose myself to more p5js.

The code is definitely a trainwreck so I stopped and started a 3.1 version. That version is more about the UI than the game so far. So don’t worry too much about that.

check it out so far here  (it does say press ‘enter’ – if you are on mobile – swipe to start)

OR as usually the trainwreck could just be me.

This is the Menger sponge.

well this is MY Menger sponge in P5.js. My Code Demo (NOTE: you need WebGL or this won’t work for ya!)

If you have Flash installed, this is one old portfolio interface I made and never finished. I started to make it in css3 but never followed through with that. Check it out here!

I’ve seen Menger sponges before but never knew what it was called. I also didn’t really every thing about recreating it.  It is Daniels coding challenge number 2 and an opportunity for me to get to know some basics of p5.js’ 3d system/webgl.

This is Daniels original done in Processing. I still don’t know Processing so I’ll be doing this in JS.

Yes I know that Daniel will recreate things in both Processing and in P5.  I’m doing my best to not look at his code or conversions outside of what is in his videos. (Which if you watch the livestreams, is way too much information. It’s still fun to watch though!)

P5 makes 3d primitives pretty easy but they alter the coordinate system from 2D. While this make sense it really threw me off.

Everything fell together with simple logic and class structure. The pop and push before translating also threw me off. Granted I remember having to do these before when I messed with Canvas, it still feels out of place in closure/scope. ‘Works as designed’, right?

I will note that I limited my ‘divisions’ to 3 mouse presses as that is where JS seems to just about call it quits. I do want to learn this in Processing now because I do enjoy things like this.

My Github code

My Code Demo (NOTE: you need WebGL or this won’t work for ya!)

As always, thank you to Daniel!

clean phil

It was time to get started with p5.js!

This is the first Coding Challenge on ‘The Coding Train’. The Starfield.

This is Daniels version of it. You should subscribe, he’s just a fun guy to watch.

While I’ve used html canvas before and written a few things that have used it, I have not used a library intended for it. So mostly this, and I imagine a few more of these challenges, will be for learning the basics of the library.

This implementation was of a super simple particle system with ellipses drawn to canvas.  This is 2D so the Z is only mathematical control for scale and zoom/speed effect.

Daniel then drew lines between points to show the zoom in processing. I opted to just let the ‘background’ take care of this effect with an alpha setting. Granted this does show the ellipses separated when the ‘zoom’ speed is too great. But I can live with that as the effect is still there.   I may come back and revisit this with the line design that Daniel used.

My Code Demo

Github Code

As always a thanks to Daniel for the motivation and inspiration!

I don’t really need to code as much as I use to.  I use to love it! I don’t really want it to atrophy. This guy, Daniel, has a channel that has renewed a good bit of the fun I use to have when coding.

https://www.youtube.com/user/shiffman

Since, I’ve watched pretty much all of his ‘Coding Challenges’ knowing what ‘should’ happen, I figured I should spend time actually doing the challenges to the best of my ability. Along the way I’ll learn p5.js and hopefully processing.

I’m also using this to keep my git knowledge up-to-date. I will be uploading each project into my github. https://github.com/philipbenner

If you don’t know coding at all, you really should check out this guy.  Hyper and ‘disorganized.  Disorganized creativity that seems to be like mine was, ‘there are rules. learn them. Then break them intelligently’. And as much as I don’t like that JS is unclassed and uncast, it really allows you to break and bend the rules!

So here goes nothing!