Some parts of this website go back about 9 years, starting with the javascript game <a href="/CitySlicer/">City Slicer</a>, which still includes work from around that time. I made the site back then with notepad, and no other tools. The original site was just html, but I had upgraded to packing the site using Vite last year. The Vite website was completed at the end of my 3D modelling career, and it included the <a href="/PortfolioCV/">3D portfolio</a> THREE.js canvas that I created with the help of an <a href="https://www.youtube.com/watch?v=rxTb9ys834w">8 hour tutorial</a>, after losing my job in 3D. The Next.js application you see before you today was converted from an html website with the help of copilot ai. The primary goal of the 3D canvas was to showcase some of my 3D work as well as my web design skills. It seems kind of pointless now which is why I feel the need to clarify what was created pre-AI. We’re going to need a word to define that period of time that is now over. I almost wrote pre-singularity. Now that the singularity is here I feel like I don’t really need to explain how I created the rest of the website, as you’re better off asking the AI. That’s how I built it, that, and a combination of my rudimentary computer science experience. It even taught me how to set up a server for comments, which might seem small to you but is huge for me. My understanding usually goes as far as points and lines but the addition of github copilot to my programming practice has removed these limits of my understanding, and I’m not sure that I’m even using it right. For more nitty gritty details, the background is a .js canvas, the css makes the magic nav bar and buttons. The <a href="/ask/">ask page</a> is simply Gemini with some added prompts to use html formatting, which is parsed into react components. This is the core of non-deterministic programming, as I am asking the AI to produce code for me that then runs, although very rudimentary code. In the near future techniques like this will be used to generate apps using prompts, I'm sure someone is already doing this. On the subject of CSS, I never realised it’s potential until working with copilot. I came from a physics background into programming and was always comfortable with an updating game-loop for animation, so when it came to animating in CSS I stuck to the basics because the system didn’t really make sense to me, but now I’ve realised how powerful it is and relatively simple to use, if you have an AI assistant to help you with the differences between flex boxes and blocks. Converting everything to react while learning the language was a daunting task but I think it really helped me to learn faster, and I doubt I would have been able to do it without copilot, at least not so quickly. I doubt I ever would have gained an understanding of what react is without copilot. The react application contains THREE.js, multiple 2D canvases, and all of my old web pages, some of which I remade from scratch. Currently the "stack" is React, Apache, Vercel, Google Cloud. The <a href="/Blog/">Blog</a> section is the only part that is entirely new, apart from the <a href="/ask/">ask</a> page , and that is 3 react pages. 1 main page, 1 category page, and 1 Blog Post page that accesses the blogs from multiple .json files, plus a comment form component and a comment section component both made from scratch, one of which reads comments from a .json file and the other which submits comments to the server. If you’d like to read more about how I made specific things, you can read about them here!:

The future of non-deterministic programming

How I made this

<a href="/2DGame/">[[image:https://pleyland.co.za/homeSquare/city_slicer.png]]</a> <a href="/2DGame/">City Slicers</a> is my attempt to make an interactive “CV” website without really knowing anything about web-design, and instead transferring my java knowledge to javascript canvas to create a 2D platformer. At some point I lost track of the CV idea and instead just made a reasonably fun action game that you can play in your browser, scattered with examples of my work from the time. It’s no Animal Well but it sure has potential to be one. The music was made years before the game, although it was changed to have more of a melody to it. The final boss battle of this game occurs on the platforms arranged in the shape of the music. </a> <h2><a href="/2DGame/">PLAY THE GAME HERE</a> </h2>

- 2D platformer in your Browser- 

City Slicers

<a href="/Spectrum/">[[image:https://pleyland.co.za/blog/Dev/spectrum.png]]</a> <a href="/Spectrum/">Pleyland’s Spectrum Generator</a> allows you to generate colour schemes without the pesky business of directly selecting the colours. With Pleyland’s Spectrum Generator you can generate a repeating or infinitely and unpredictably changing spectrum of colours by changing the frequency, phase, amplitude, and a number of other factors of 3 sin waves that serve as arguments for a changing RGB rainbow. This method of mixing colours was originally developed by me in 2014 while creating a valentines day card. Once a desirable palette has been selected, you can use it to draw while the colours change in real-time, and you can control the speed of change as well as the brush size during strokes using the keyboard shortcuts. You can use the program to create paintings like the one above. It’s fun because it can be unpredictable but manageable if you learn to paint in a rhythm The app will also output the mathematical function that produces the spectrum so that you can copy it into your own project if needed, but I find that it's easier to just select the colors explicitly for whatever project you are working on, and instead just use the generator for inspiration. Chaos occurs when the frequencies of the colors are not perfect factors of each other, similar to how dissonance occurs in musical harmony. This means that the colors will change inifnitely and seemingly randomly if the frequencies are not divisible, but if they are ratios of each other you can get some really nice gradients that have more interesting patterns than simple 1:1 ratios. This is the same way that chords work. I will be exploring this more in future with presets and harmonic noches on the sliders. I have plans to expand this in future and make it fit better with my react website. </a> <h2><a href="/Spectrum/">Tinker with the Spectrum Generator Here</a> </h2>

-Generate Colours with Sin Waves-

Spectrum Generator

[[youtube:rxTb9ys834w]] This is the tutorial I referenced to create the 3D canvas from scratch. I didn't watch the entire video as I was already experienced with blender and the basics of web-design, but what I really took from this was the use of bundlers for websites, in this case Vite, and secondly how to load resources to me manipulated with THREE.js. THREE.js was easy enough for me to use as my background lies in both 3D and javascript. I don't recommend watching or using the tutorial now over copilot, as you could easily get started using THREE.js using the docs, and in fact I think the method that I used is a little too complicated for my liking. The author of the tutorial emphasises the use of singletons which defy my understanding, and to me seem to just complicate code that is simple. </a> <h2><a href="/Spectrum/">SEE 3D CANVAS HERE</a> </h2>

- using THREE.js -

3D Portfolio

[[youtube:kNYamaymspI]] This is a game I am making where you can build cities and terraform the landscape while managing a colony of believers. The game is still in the early stages but right now it is fun to watch them build a city by themselves. </a> <h2><a href="https://play.google.com/store/apps/details?id=org.godotengine.leylands&irclickid=TV-zqKX%3AZxyPWRaU1KwtGztmUkHU5RwhvTD%3ASg0&irgwc=1&utm_source=impact&utm_medium=affiliate&utm_campaign=Hypeee/">DOWNLOAD FOR ANDROID HERE</a> </h2>

- Colony/God Game -

Leylands

[[youtube:fWU3N1geZsY]] This is a game I am making where you can smash through walls with an untethered wrecking ball Points are awarded for hitting hard and fast, with a multiplier that grows with successive hits. The game is still in the early stages but right now it is fun to see how many points you can get. Most of this game was made in 7 days while I was banned from youtube. </a> <h2><a href="https://play.google.com/store/apps/details?id=org.godotengine.wallsmasher&irclickid=2fj0W3Q4vxyPUIhVYmzLvXrTUkH1YW01vTD%3ASg0&irgwc=1&utm_source=impact&utm_medium=affiliate&utm_campaign=Hypeee/">DOWNLOAD FOR ANDROID HERE</a> </h2>

- wall-smashing game -

Wallsmasher

[[image:https://pleyland.co.za/blog/Dev/MagicPortal.png]] This is a silly mistake in my code that resulted in this. No idea how it works. It's just a youtube iframe with a "/" for the href. It's not really a magic portal </a> <h2><a href="/MagicPortal/">Tinker with the Magic Portal here</a> </h2>

- It's not a bug, it's a feature -

Magic Portal

[[image:https://pleyland.co.za/blog/Dev/NqobasKingdom.png]] This is a website that I made for a client that never got back to me after paying the deposit </a> <h2><a href="/NqobasKingdom/">Peruse Nqobas Kingdom Here</a> </h2>

CATEGORIES

Dev

ARTICLES

What do you think? Leave a comment