Forem: Chris Godber

Vlog series on my JSK13Games webXR entry

Chris Godber — Sun, 05 Sep 2021 18:11:56 +0000

Js13kGames is a JavaScript coding competition for HTML5 Game Developers. The fun part of the compo is the file size limit set to 13 kilobytes.

Website - https://js13kgames.com/

The following is my webseries on developing my idea for project called Superposition for the WebXR category. Its still a wip but almost finished. Its an Interesting challenge which forces you to think creatively. I'll also do a follow up vid once I've submitted and finished the project.

Initial prototyping and idea generation

Making idea more concrete / finishing initial prototype / implementation of core game mechanic

VR Testing and thinking of VR more

The project (still WIP) can be viewed here

drnoir / Superposition

Game for js13kgames code completion

Covid Data Visualisation App Three JS - [Code Overview]

Chris Godber — Wed, 28 Jul 2021 15:24:43 +0000

3D visualisation tool showing daily cases for covid in England - uses threejs-starter-kit and gov.uk api

Try it out
https://drnoir.github.io/3D-Covid-Visualisaton/

Source
https://github.com/drnoir/3D-Covid-Visualisaton

Building a 3D library with playcanvas

Chris Godber — Mon, 10 May 2021 10:56:02 +0000

I walk you through methods to create a prototype 3D virtual gallery using the Playcanvas engine which you could build on and utilise in a number of different ways. Hopefully this gives you some foundations if you want to create a virtual library or similar project.

Meaning in Programming

Chris Godber — Mon, 12 Apr 2021 19:05:26 +0000

Lets talk about ways in which we can find meaning in our work as programmers.

3D Mood Board Prototype - [Code Overview]

Chris Godber — Mon, 12 Apr 2021 19:03:37 +0000

A Prototype 3D mood board tool made with React and React-Three-Fiber

a side project I started to get used to using React-Three-Fiber
https://github.com/pmndrs/react-three-fiber

Repo for project
https://github.com/drnoir/3D-Image-Board-Viewer-

3D Image Board Viewer / Photo tool prototype

Chris Godber — Thu, 18 Mar 2021 08:04:52 +0000

An experimental 3D app built with React and React-Three-Fiber for arranging and displaying images on a canvas

Drag images around in 3D into different arrangements
Take a photo of arrangements and download images
zoom images - make 3D images bigger to view detail

App is currently in early development phase

Features to develop

Add custom images - currently just placeholders
enhance UI
More move features
Better visuals / backgrounds etc

Core Libraries and dependencies

React
React-three-fiber
three
html-to-image - for capturing canvas
drei

Source - https://github.com/drnoir/3D-Image-Board-Viewer-

Cubegen 3.0 - Javascript / AFrame game

Chris Godber — Sun, 14 Feb 2021 19:56:32 +0000

Experimental A-Frame project / game using AFrame, AFrame physics component / vanilla js to create a fun arcade style game.
I decided to evolve the earlier version of the Cubegen project I started a few weeks ago, adding different difficulty levels, a HUD display and some more effects as well as enhancing the gameplay. I still want to enhance it some more and it's still a prototype, but happy with where it is at more.

Cubegen3 is a Procedurally generated cube collection game
Collect all the generated energy cubes before the timer runs out and avoid the negative boxes which will damage your health.

The number of cubes is randomly generated according to the difficulty

Controls: Keyboard: WASD - Movement Mouse: Click and drag to rotate

Play: https://drnoir.itch.io/cubegen

Video Overview on project

GitHub repo

drnoir / find-the-boxes-gen

Small experimental game made with AFrame and JS - find all the white boxes amongst the randomly generated boxes

CubeGen

by Chris Godber

Game Aim

Find the white boxes

Current Version - 3.0

Experimental A-Frame project / game using AFrame, AFrame physics component / vanilla js to create a fun arcade style game.

Procedurally generated cube collection game Collect all the generated portal cubes (the cube you see on the right) before the
timer runs out and avoid the negative boxes which will damage your health.

The number of cubes is randomly generated according to the difficulty

Controls: Keyboard: WASD - Movement Mouse: Click and drag to rotate

Play on Itch.io - https://drnoir.itch.io/cubegen

View on GitHub

Maze Generation in 10 mins with AFrame

Chris Godber — Fri, 12 Feb 2021 19:31:36 +0000

Quick overview and tutorial on creating a quick maze in A-Frame with the A-frame maze component

GitHub Repo for A-Frame Maze component:

mitchallen / aframe-maze-component

An aframe component for creating VR mazes

aframe-maze-component

A component for building VR mazes

Browser Usage

Live Example

Here are some live examples of the component. The simpler demo is ideal for mobile.

https://mitchallen.bitbucket.io - best viewed in Chrome
https://mitchallen.bitbucket.io/stats.html - Chrome demo displaying stats
https://mitchallen.bitbucket.io/simple.html - simpler demo for mobile

Demo notes

Lowered or removed birds-eye platform to try to reduce issues with users falling through the floor
For birds-eye demos:
Start to move forward until you fall onto the lower platform
WAIT a second or two - then proceed onto the ground
Works fine in Chrome on a Mac
On Windows 10 machine (Lenovo Yoga 710 laptop) can't seem to walk and turn at the same time

Physics engine issues

Having issues with player falling through floor on iOS for complex demos
Keep it simple on mobile, don't have player drop from high position
Player can push through or into objects if determined
If player…

View on GitHub

Experiments with A-Frame and Javascript Games - Chase the cats and CubeGen.

Chris Godber — Tue, 09 Feb 2021 19:42:04 +0000

I have been exploring using AFrame and vanilla javascript a lot more in the last week to create simple game like experiences. I like A-Frame ease of use and though I think in some ways it can be hard to make something that feels 'polished' with it, for purely experimental fun little side project like these two it can be nice and simple to try out ideas with it. What promoted these two random games was in fact randomness! So I have been playing a bit with generating elements of a level in games for the last 6 months, mostly on playcanvas projects, and looking more into procedural generation, and wanted to apply this in a simple setting. I started as simple as it can get - generating a random numbers of cubes!

CubeGen

CubeGen is a simple game whereby you have to find the white cubes from a randomly generated amount of cubes with a shimmering texture look to them. In the first version of the game I just created it on a typical plane with no walls, and the player had to push through the boxes to find the correct one, but it felt like it lacked a certain dynamic to make it more interesting.

So after a day or two I decided to really start playing with the A-Frame physics system component some more, figured out how to create a fly cam which worked with collisions etc and put it in zero gravity. I go into it more in the video below but the actual code is fairly simple - Do some DOM manipulation with js combined with utilising A-Frames component system to detect collision event and then a fair amount of for loops to create the 'random' cubes to the game area. There is more info below along with an overview on the original prototype if you are interested.

Overviews on CubeGen conception

Final Game

Source:

drnoir / find-the-boxes-gen

Small experimental game made with AFrame and JS - find all the white boxes amongst the randomly generated boxes

CubeGen

by Chris Godber

Game Aim

Find the white boxes

Current Version - 3.0

Experimental A-Frame project / game using AFrame, AFrame physics component / vanilla js to create a fun arcade style game.

The number of cubes is randomly generated according to the difficulty

Controls: Keyboard: WASD - Movement Mouse: Click and drag to rotate

Play on Itch.io - https://drnoir.itch.io/cubegen

View on GitHub

Play:

https://drnoir.itch.io/cubegen

After I made CubeGen I wanted to extend the idea a little further and make something a little different so I of course opted for cats! Much of the code and logic was copied from the CodeGen project but the main difference was trying to create random movement for the cats which was sort of implemented but needs some refining and fixing still. There is a more in-depth overview below.

Overview of Chase the Cats

Source:

drnoir / chasethecats

Another experiment in creating random generated stuff in A-Fame- catch the cats in a randomly generated enviroment

Chase the Cats

Experiment with A-Frame by Chris Godber

Funny little experiment with A-Frame and randomness, building on CubeGen project I wanted to create something a bit more zany and to experiment somewhat more with environment generation.

In this project mountains and trees are generated, and a random number of cats (up to 40) which the player then has to catch.

This was made for fun, feel free to fork, build on it, look at it, poke around etc etc

Might work on it again sometime but as I said weird little experiment. It could certainly be made more of a 'game'

Controls

WASD - Move
Mouse - Look around

Libraries / Dependencies

A-Frame
A-Frame Extras
A-Frame Physics System
A-Frame Mountains Component
A-Frame Simple Sun Sky

Game logic etc is contained in main.js, everything else is just minified js for each dependency

View on GitHub

5 Creative Coding JS libraries

Chris Godber — Tue, 03 Nov 2020 09:47:33 +0000

Exploring 5 creative coding JavaScript libraries
http://paperjs.org/
https://threejs.org/
https://aframe.io/
https://playcanvas.com/
https://p5js.org/

Basic Setup for a Maze Scene with Physics with A-Frame

Chris Godber — Sat, 17 Oct 2020 12:00:07 +0000

Quick video showing how to add basic physics to an A-Frame scene, in this example adding walls and demoing collisions between player and wall. This could be built on to create a larger 3D environment or maze , but gives you a start

Create a Chart with multiple Dataset switching via state [React + react-chartjs-2 Tutorial]

Chris Godber — Sat, 17 Oct 2020 11:55:59 +0000

SOURCECODE- https://github.com/drnoir/switchingcharts-demo

This tutorial goes over a basic overview of a method to create a chart in a class component in react using react-chartjs-2 and how to update the chart with different data using SetState within that chart based on onClick events within the component - in this example 3 months, 6 months and a year.

In a real life example you would probably get your data from props, or state but this should provide a good starting point for understanding how to do this.