Forem: gfish94

Unreal Engine

gfish94 — Mon, 01 Jan 2024 17:02:28 +0000

The Unreal Engine is a series of of game engines developed by Epic Games. The Unreal Engine is written in C++ and was initially designed for the creation of first-person shooters, including its first game Unreal released in 1998. Unreal has since added support for other genres including top-down and third-person --both of which have premade templates available on the platform. The Unreal Engine has also expanded into other industries such as film.

Unreal Engine, as of the time I'm writing this, is on its fifth iteration. Unreal Engine 5 is a source-available engine with a royalty model. Projects developed using the Unreal Engine that reach over 1 million USD in revenue will be charged 5% by Epic Games, but the engine is free to use up until that point.

Unreal Engine is designed with beginner friendliness in mind. Coding for the engine can be done in raw C++ with the use of a compiler or you can use the built in Blueprint Visual Scripting system. Blueprint uses a table of node based interfaces to represent lines of code and is designed to be very simple to understand and learn. Below is an example from the Unreal Engine 5 Blueprint tutorial that shows how to create a spring board that launches characters when come into contact with them.

Unreal Engine also has other user friendly interfaces such as the menus used for adding and modifying 3D models. Models can be added to the game environment directly from the toolbar and its mesh material and physics can all be accessed and changed from with in the same menu.

Unreal Engine also has a large community of developers meaning a it has a many resources on how to pick it up and start learning. With all these user friendly features and resources it is easy to see why it so popular and it definitely helps that doesn't cost anything to start out. So if you are looking to try your hand at 3D game development, maybe give Unreal a shot.

OpenGL, WebGL and Three.js

gfish94 — Sun, 10 Dec 2023 02:00:45 +0000

What is OpenGL?

OpenGL is a specification developed and maintained by Khronos Group. OpenGL is a set of rules and guidelines for how a function's input and output should be setup in order to render 3D vector graphics using GPU. Most OpenGL libraries are developed and implemented by graphics card manufacturers and are designed to be supported for that specific hardware.

What is WebGL?

WebGL is a JavaScript API that conforms to OpenGL ES specifications. WebGL allows for 3D graphics rendering in an all modern web browsers as long as the user's device has a compatible GPU. WebGL uses the HTML <canvas> element tag to render graphics to the page.

Three.js

Three.js is a simple to use lightweight library designed to create 3D vector graphics. Three.js comes with built in functions to quickly create 3D object, cameras, scenes and animations.

Lights, Camera, ACTION!!

Following is a boilerplate for setting a scene context and camera for rendering.



import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75,
 window.innerWidth/window.innerHeight,
 0.1, 1000);

camera.position.x = 1;
camera.position.y = 1;
camera.position.z = 20;

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

Then, you can add objects creating a new mesh object and defining its geometry and material. Different materials have different textures and react to light differently. There are also different light options such as ambient, which illuminates all objects in the scene, or directional, which is set up like the camera with a position and direction. These new objects are then added to the scene context via the add method. Now you can render the scene using renderer.render() passing in the scene context object and the camera.



const geometry = new THREE.IcosahedronGeometry();
const material = new THREE.MeshPhongMaterial();
const ico = new THREE.Mesh(geometry, material);
const ambient = new THREE.AmbientLight(0x00FF00, 0.35);
const directional = new THREE.DirectionalLight( 0xffffff );
directional.position.set( 1, 1, 0.5 ).normalize();

scene.add( ico, directional, ambient );
renderer.render(scene, camera);

And there you have it, a 3D vector object rendered in the browser.

Sources

learnopengl.com

WebGL: 2D and 3D graphics for the web - Web APIs | MDN

WebGL (Web Graphics Library) is a JavaScript API for rendering high-performance interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins. WebGL does so by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML <canvas> elements. This conformance makes it possible for the API to take advantage of hardware graphics acceleration provided by the user's device.

developer.mozilla.org

mrdoob / three.js

JavaScript 3D Library.

three.js

JavaScript 3D library

The aim of the project is to create an easy-to-use, lightweight, cross-browser, general-purpose 3D library. The current builds only include a WebGL renderer but WebGPU (experimental), SVG and CSS3D renderers are also available as addons.

Examples — Docs — Manual — Wiki — Migrating — Questions — Forum — Discord

Usage

This code creates a scene, a camera, and a geometric cube, and it adds the cube to the scene. It then creates a WebGL renderer for the scene and camera, and it adds that viewport to the document.body element. Finally, it animates the cube within the scene for the camera.

import * as THREE from 'three';
const width = window.innerWidth, height = window.innerHeight;

// init

const camera = new THREE.PerspectiveCamera( 70, width / height, 0.01, 10 );
camera.position.

…

View on GitHub

khronos.org

threejs.org

Intro to C++

gfish94 — Sun, 26 Nov 2023 04:10:24 +0000

C++ is a general purpose, object oriented programming language that developed as an extension of C by Bjarne Stroustrup. C++ was originally called "C with classes". C++ was given its official name in 1983 and was commercially released in 1985.

Variables

Variables in C++ have to be declared with the datatype that they are intended to store. For numbers, int is used to store whole numbers and double is used to store floating point numbers. char is used to store single characters and the value must be wrapped in single-quotes. string is used to store text strings and the value must be wrapped in double-quotes. bool is used to store boolean values which output to 1 and 0 respectively.


/*
multiple variables of the same type can
be initialized on the same line
*/
int x = 1, y = 2, z = 3;

//const creates a read only variable
const int sum = x + y + z;

double decimal = 0.1;

char letter = 'A';

string sentence = "This is a sentence.\n";

/*
true => 1
false => 0
*/
bool t = true, f = false;

Functions

In C++, functions are declared using the datatype that the function is meant to return or void if there is no return. Parameters must also be declared with the datatype that are intended to be passed as arguments. When possible the datatype will be converted to the appropriate datatype, such as with int and double. Conversion will mutate the value and the amount of storage it takes in memory. In the case of double to int the value will be rounded up to the nearest whole number value.

#include <iostream>
using namespace std;

int add(int x, int y)
{
  return x + y;
};

double add(double x, double y)
{
  return x + y;
};

void print(double x, double y)
{
  string result = (x < y)
                      ? "x is less than y\n"
                      : "x is greater than y\n";
  cout << result;
};

int main()
{

  int x1 = add(1, 2);
  int y1 = add(3, 4);
  //will convert int to double when necessary
  print(x1, y1);

  double x2 = add(11.2, 5.5);
  double y2 = add(10.4, 5.3);
  print(x2, y2);


  return 0;
}

Classes and Objects

Living up to its original name, C++ is syntactically similar to its predecessor but with the additional support for classes and objects. Classes are created using class followed by curly braces containing the members -- props and methods. Classes require an access specification or it will default to private which makes the members inaccessible or viewable outside of the class. public allows members to be accessed outside of the class. protected works similarly to private, however it allows the members to be accessed by derived classes.

#include <iostream>
using namespace std;

class Pet {
  //access level
  public:
  string name;
  string species;
  int age;

  //constructor
  Pet(string x, string y, int z){
    name = x;
    species = y;
    age = z;
  }


  // method
  void print()
  {
    cout << this->name
         << ' ' << this->species
         << ' ' << this->age << endl;
  }
};

int main(){
  //creates a new Pet object
  Pet obj("Bobby", "cat", 1);

  //method call
  obj.print();

  return 0;
}

Conclusion

C++ is a widely used language due to its fast and efficient nature. Many things are made using C++ including OS, game engines, databases, web browsers, machine learning, and telecommunications just to name a few. In other words, the modern world runs on C++.

Intro to C++

gfish94 — Sun, 26 Nov 2023 04:10:24 +0000

Variables


/*
multiple variables of the same type can
be initialized on the same line
*/
int x = 1, y = 2, z = 3;

//const creates a read only variable
const int sum = x + y + z;

double decimal = 0.1;

char letter = 'A';

string sentence = "This is a sentence.\n";

/*
true => 1
false => 0
*/
bool t = true, f = false;

Functions

#include <iostream>
using namespace std;

int add(int x, int y)
{
  return x + y;
};

double add(double x, double y)
{
  return x + y;
};

void print(double x, double y)
{
  string result = (x < y)
                      ? "x is less than y\n"
                      : "x is greater than y\n";
  cout << result;
};

int main()
{

  int x1 = add(1, 2);
  int y1 = add(3, 4);
  //will convert int to double when necessary
  print(x1, y1);

  double x2 = add(11.2, 5.5);
  double y2 = add(10.4, 5.3);
  print(x2, y2);


  return 0;
}

Classes and Objects

#include <iostream>
using namespace std;

class Pet {
  //access level
  public:
  string name;
  string species;
  int age;

  //constructor
  Pet(string x, string y, int z){
    name = x;
    species = y;
    age = z;
  }


  // method
  void print()
  {
    cout << this->name
         << ' ' << this->species
         << ' ' << this->age << endl;
  }
};

int main(){
  //creates a new Pet object
  Pet obj("Bobby", "cat", 1);

  //method call
  obj.print();

  return 0;
}

Conclusion

ML5 ALIVE!

gfish94 — Sun, 15 Oct 2023 22:32:57 +0000

ML5.js

ML5.js is a machine learning library built on top of TensorFlow.js. It aims to be more approachable than TensorFlow.js. It accomplishes this by abstracting away the higher level mathematics involved in understanding TensorFlow or machine learning at large.

Getting Started

<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>

ML5.js does not run in node.js, which the developers hope to remedy now that TensorFlow.js has node support. First thing is first you need to load the script into your html. From there you can start coding in your environment of choice.

For my adventure into ML5.js, I followed the tutorial for the image classifier and used the MobileNet model.

// Initialize the Image Classifier method with MobileNet
const classifier = ml5.imageClassifier('MobileNet', modelLoaded);

// When the model is loaded
function modelLoaded() {
  console.log('Model Loaded!');
}

// Make a prediction with a selected image
classifier.classify(document.getElementById('image'), (err, results) => {
  console.log(results);
});

When the classifier is provided an image, it will send a get request to the model provided and return a result object with the labeled output.

ML5 comes with many other image based functionality. PoseNet is a model that allows the algorithm to detect the poses of one or multiple people, this data can be used for such things as tracking virtual avatars or motion capture animation. BodyPix is a model that takes an image of a person and differentiate between the background of the image as well as categorize the human form into 24 different body parts. Pix2pix is a model that can take a line art and render it in color. Ml5 also has features for sound recognition and text generators.

Machine learning as a creative outlet

Experimenting with Ml5.js — extrasleepy

Ever since I completed the Machine Learning Literacy workshop back in February (at the School for Poetic Computation), I've been wanting to put together a project using Machine Learning. I finally finished something I call Land of Lumps .  Land of Lumps is an experimental comic strip

extrasleepy.com

The above link shows another user's adventure with ML5. They created a series of comics called Land of Lumps. In the comic, they have two characters- the first representing the user's input and the second representing the machine's response. The short experimental comic shows off the interworking of how the machine interprets language.

Here is a comic I made using the comic generator provided by the creator, Andrew Kleindolph.

Conclusion

All in all ML5 is a robust library with many functions that are all simple to learn and easy to implement. This seems to be the dev team's whole mission statement, to make machine learning easy and accessible to the broader community. ML5.js is an open source library build on top of TensorFlow. It abstracts away a lot of the complexity of TensorFlow allowing for it to be accessible to nearly anyone. ML5 also does not have any external dependencies allowing it to be extremely quick to set-up and try out. In conclusion, ML5 is a great library for anyone to try their hands at machine learning.

Helpful Resources

Getting Started with ML5.js — Tutorial Part I: Image Classifier | by Veronica Peitong Chen | AIxDESIGN | Medium

Veronica Peitong Chen ・ Dec 3, 2021 ・
Medium

learn.ml5js.org

Brain.js for Beginners

gfish94 — Sun, 08 Oct 2023 16:45:41 +0000

Brain.js

Brain.js is a JavaScript library used to create neural networks that is very easy to learn and implement. Neural networks are a data structure inspired by and named after the human brain. Neural networks are comprised of layers of nodes each with associated weight thresholds. If a nodes output is above the threshold then that neuron is activated and the data is sent to the connected node in the next layer. In Brain.js the process of initializing this data structure is as simple as loading in the module and calling a constructor function.



const brain = require('brain.js');

//initialize neural network

const net = new brain.NeuralNetwork();

Training

This newly constructed object needs to be given a dataset in order to make predictions. Brain.js makes the process very simple all you need to do is call the .train method and pass in an array of objects -- each with key value pairs of inputs and outputs. The basic network constructor only supports an array of 0s and 1s, or a hash of 0s and 1s; however the are other more complex models that allow for other datatypes to be entered in the dataset.



//input training dataset

net.train([

  { input: [0, 0], output: [0] },

  { input: [0, 1], output: [1] },

  { input: [1, 0], output: [1] },

  { input: [1, 1], output: [0] },

]);

Run

Now that you have input a dataset and trained your artificial brain you need to call the .run method on your neural network. This will return an array with decimal value corresponding to the probability that your expected output is equal to 1. The higher the decimal point value the more likely the neural network believes the output should be a 1.



//outputs a probability 

const output1 = net.run([1, 0]);//  [ 0.9327429533004761 ]

const output2 = net.run([0, 0]);//)  [ 0.05645085498690605 ]

const output3 = net.run([1, 1]);//  [ 0.08839469403028488 ]

console.log('output 1:', output1);

console.log('output 2:', output2);

console.log('output 3:', output3);

console.log(Math.round(output1[0]));// => 1

console.log(Math.round(output2[0]));// => 0

console.log(Math.round(output3[0]));// => 0

Saving your Trained Network

The networks ability to predict the expected output is made more accurate by supplying a larger dataset; however with a larger dataset or if you are implementing one of the more complex network models --which require iterating over your dataset a set number of time in order to train -- the amount of time the code takes to execute also grows. This can be circumvented by utilizing brain.js's .toJSON and .fromJSON to store the pretrained network to a JSON. Here is an example of how to use node.js's file system module to save and load a network.



const brain = require('brain.js');

const data = require('./data.json');

const fs = require('fs');

//init neural network

const net = new brain.recurrent.LSTM();

const trainingData = data.map(item => ({

  input: item.message,

  output: item.response

}));

//input training data and configuration object

net.train(trainingData, {

  log: (err) => console.log(err),

  iterations: 500

});

//save trained network to json

const networkState = net.toJSON();

fs.writeFileSync('network_state.json',

  JSON.stringify(networkState),

  'utf-8');



const brain = require('brain.js');

const fs = require('fs');

//init neural network

const net = new brain.recurrent.LSTM();

//load trained network to json

const networkState = JSON.parse(

  fs.readFileSync('network_state.json',

    'utf-8'));

net.fromJSON(networkState);

Conclusion

Brain.js is a fun and simple way to learn and implement neural networks in JavaScript. I hope that this inspires more people to go out and implement machine learning algorithms in JavaScript.

Intro to Machine Learning

gfish94 — Sun, 01 Oct 2023 20:29:15 +0000

What is Machine Learning?

Machine learning is a branch of artificial intelligence. Machine learning uses algorithms to train computer systems and imitate the way that humans learn. The process of teaching a computer how to build associations through inputting data is referred to as training.

Training Models

There are four main training models for machine learning. Supervised, Unsupervised, Semi-supervised and Reinforcement training.

Supervised Machine Learning: In supervised machine learning the system is fed labeled datasets (input = output) into an algorithm so that is can accurately learn to predict future outcomes.
Unsupervised Machine Learning: In unsupervised machine learning the system is fed an unlabeled dataset (input = ?) and the algorithm is left to discover patterns without human intervention.
Semi-Supervised Machine Learning: In semi-supervised machine learning the system is fed a small labeled dataset, as it is in supervised, and a larger unlabeled dataset. This allows for some level of control like in supervised training without the need to create a large labeled dataset.
Reinforcement Machine Learning: In reinforcement machine learning the system is forced to iterate through a problem multiple times and learns based on trial and error.

Machine Learning in JS

JavaScript has multiple libraries that allow for building machine learning algorithms. Some of these include Brain.js, Math.js, ml5.js and TensorFlow. Following is an example of reinforcement machine learning called neuroevolution.

https://github.com/xviniette/FlappyLearning

Complex DataTypes in JS

gfish94 — Fri, 18 Aug 2023 04:26:48 +0000

Collections

Objects and arrays are ‘complex’ data-types in JavaScript. Objects and arrays are mutable meaning that they can be accessed and changed after being created. JavaScript collections can be of indeterminant size.

What's the Difference?

Objects are collections of data made of unordered properties. These properties are made of a value assigned to a key. A key need to be a string, however a value can be any data-type.

Arrays are collections of data made of values assigned to a numerical index starting at zero. Arrays, unlike objects, are specifically ordered. Array values can also be any data-type.

Accessing Object Properties

Dot notation is used to access an objects properties when the LITERAL name of a key is known.

Bracket notation can be use a variable assigned to a key can be passed in the place of a key’s literal name. Bracket notation can also be used when a key has a ‘special’ character.

Accessing Array Elements

Array elements are accessed using bracket notation passing the index number of the value trying to be accessed.

Property Deletion

Object properties can be deleted using the delete keyword.

Removing Elements from an Array

There are various ways to remove elements from arrays.

The array method splice takes in two arguments: the index of the first element to remove and the number of elements to remove. The splice method can be used to return an array of the removed elements or if no arguments are passed then it can create an unaltered copy of the array.

The array method shift can be used to remove the first element from an array. The shift method can be used to return the element that was removed.

The array method pop can be used to remove the last element from an array. The pop method can also be used to return the element that was removed.

Forem: gfish94

Unreal Engine

OpenGL, WebGL and Three.js

What is OpenGL?

What is WebGL?

Three.js

Lights, Camera, ACTION!!

Sources

WebGL: 2D and 3D graphics for the web - Web APIs | MDN

mrdoob / three.js

JavaScript 3D Library.

three.js

JavaScript 3D library

Usage

Intro to C++

Variables

Functions

Classes and Objects

Conclusion

Intro to C++

Variables

Functions

Classes and Objects

Conclusion

ML5 ALIVE!

ML5.js

Getting Started

Machine learning as a creative outlet

Experimenting with Ml5.js — extrasleepy

Conclusion

Helpful Resources

Getting Started with ML5.js — Tutorial Part I: Image Classifier | by Veronica Peitong Chen | AIxDESIGN | Medium

Veronica Peitong Chen ・ Dec 3, 2021 ・ Medium

Brain.js for Beginners

Brain.js

Training

Run

Saving your Trained Network

Conclusion

Intro to Machine Learning

What is Machine Learning?

Training Models

Machine Learning in JS

Complex DataTypes in JS

Collections

What's the Difference?

Accessing Object Properties

Accessing Array Elements

Property Deletion

Removing Elements from an Array

Veronica Peitong Chen ・ Dec 3, 2021 ・
Medium