// Cloned by Jackson Tarus on 29 Nov 2023 from World "Complex World (clone by Jackson Tarus)" by Jackson Tarus
// Please leave this clone trail here.
// Cloned by Jackson Tarus on 11 Nov 2023 from World "Complex World" by Starter user
// Please leave this clone trail here.
// ==== Starter World =================================================================================================
// This code is designed for use on the Ancient Brain site.
// This code may be freely copied and edited by anyone on the Ancient Brain site.
// To include a working run of this program on another site, see the "Embed code" links provided on Ancient Brain.
// ====================================================================================================================
// =============================================================================================
// More complex starter World
// 3d-effect Maze World (really a 2-D problem)
// Movement is on a semi-visible grid of squares
//
// This more complex World shows:
// - Skybox
// - Internal maze (randomly drawn each time)
// - Enemy actively chases agent
// - Music/audio
// - 2D world (clone this and set show3d = false)
// - User keyboard control (clone this and comment out Mind actions to see)
// =============================================================================================
// =============================================================================================
// Scoring:
// Bad steps = steps where enemy is within one step of agent.
// Good steps = steps where enemy is further away.
// Score = good steps as percentage of all steps.
//
// There are situations where agent is trapped and cannot move.
// If this happens, you score zero.
// =============================================================================================
// ===================================================================================================================
// === Start of tweaker's box ========================================================================================
// ===================================================================================================================
// The easiest things to modify are in this box.
// You should be able to change things in this box without being a JavaScript programmer.
// Go ahead and change some of these. What's the worst that could happen?
AB.clockTick = 100;
// Speed of run: Step every n milliseconds. Default 100.
AB.maxSteps = 1000;
// Length of run: Maximum length of run in steps. Default 1000.
AB.screenshotStep = 50;
// Take screenshot on this step. (All resources should have finished loading.) Default 50.
//---- global constants: -------------------------------------------------------
const show3d = true; // Switch between 3d and 2d view (both using Three.js)
const TEXTURE_WALL = '/uploads/jackt/grass.jpg' ;
const TEXTURE_MAZE = '/uploads/jackt/wood.jpg' ;
const TEXTURE_AGENT = '/uploads/jackt/agent.png' ;
const TEXTURE_ENEMY = '/uploads/jackt/enemy.png' ;
// credits:
// http://commons.wikimedia.org/wiki/File:Old_door_handles.jpg
// https://commons.wikimedia.org/wiki/Category:Pac-Man_icons
// https://commons.wikimedia.org/wiki/Category:Skull_and_crossbone_icons
// http://en.wikipedia.org/wiki/File:Inscription_displaying_apices_(from_the_shrine_of_the_Augustales_at_Herculaneum).jpg
const MUSIC_BACK = '/uploads/jackt/TomJerryCantStopConductingClassicCartoonWBKidsTubeRipper.com.mp3' ;
const SOUND_ALARM = '/uploads/starter/air.horn.mp3' ;
// credits:
// http://www.dl-sounds.com/royalty-free/defense-line/
// http://soundbible.com/1542-Air-Horn.html
const gridsize = 40; // 20; // number of squares along side of world
const NOBOXES = Math.trunc ( (gridsize * gridsize) / 4 ); // 10
// density of maze - number of internal boxes
// (bug) use trunc or can get a non-integer
const squaresize = 100; // size of square in pixels
const MAXPOS = gridsize * squaresize; // length of one side in pixels
const SKYCOLOR = 0xddffdd; // a number, not a string
const startRadiusConst = MAXPOS * 0.8 ; // distance from centre to start the camera at
const maxRadiusConst = MAXPOS * 10 ; // maximum distance from camera we will render things
//--- change ABWorld defaults: -------------------------------
ABHandler.MAXCAMERAPOS = maxRadiusConst ;
ABHandler.GROUNDZERO = true; // "ground" exists at altitude zero
//--- skybox: -------------------------------
// skybox is a collection of 6 files
// x,y,z positive and negative faces have to be in certain order in the array
// https://threejs.org/docs/#api/en/loaders/CubeTextureLoader
// mountain skybox, credit:
// http://stemkoski.github.io/Three.js/Skybox.html
const SKYBOX_ARRAY = [
"/uploads/jackt/px1.png",
"/uploads/jackt/nx1.png",
"/uploads/jackt/py1.png",
"/uploads/jackt/ny1.png",
"/uploads/jackt/pz1.png",
"/uploads/jackt/nz1.png"
];
https://ancientbrain.com/uploads/jackt/nx.png
// space skybox, credit:
// http://en.spaceengine.org/forum/21-514-1
// x,y,z labelled differently
/*
const SKYBOX_ARRAY = [
"/uploads/starter/sky_pos_z.jpg",
"/uploads/starter/sky_neg_z.jpg",
"/uploads/starter/sky_pos_y.jpg",
"/uploads/starter/sky_neg_y.jpg",
"/uploads/starter/sky_pos_x.jpg",
"/uploads/starter/sky_neg_x.jpg"
];
*/
// urban photographic skyboxes, credit:
// http://opengameart.org/content/urban-skyboxes
/*
const SKYBOX_ARRAY = [
"/uploads/starter/posx.jpg",
"/uploads/starter/negx.jpg",
"/uploads/starter/posy.jpg",
"/uploads/starter/negy.jpg",
"/uploads/starter/posz.jpg",
"/uploads/starter/negz.jpg"
];
*/
// ===================================================================================================================
// === End of tweaker's box ==========================================================================================
// ===================================================================================================================
// You will need to be some sort of JavaScript programmer to change things below the tweaker's box.
document.write ( `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple AI chat example</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 20px;
}
h1 {
color: #333;
}
div {
margin-bottom: 15px;
}
label {
font-weight: bold;
margin-right: 10px;
}
input {
padding: 5px;
margin-right: 10px;
}
button {
padding: 5px 10px;
cursor: pointer;
}
#response {
margin-top: 10px;
}
.chat-log {
border: 1px solid #ccc;
padding: 10px;
max-height: 200px;
overflow-y: auto;
}
#sceneContainer {
width: 80%; /* Adjust the width as needed */
height: 80vh; /* Adjust the height as needed */
margin: auto;
}
</style>
</head>
<body>
<h1>Simple chat GPT example</h1>
<p>This example takes in a user input and give responses. We are catching empty responses to ensure that we do not have funny output.
You will need to provide your API key obtained from open AI to use this platfrom. For security purposes we do not store the key in the code</p>
<div>
<label for="userInput">Api Key:</label>
<input type="text" id="apiKey">
</div>
<div>
<label for="userInput">User:</label>
<textarea id="userInput"></textarea>
<button onclick="generateResponse()">Send</button>
</div>
<div class="chat-log" id="chatLog">
<!-- Chat log will be displayed here -->
</div>
<div id="sceneContainer"></div>
</body>
</html>
` );
function generateResponse() {
const userInput = document.getElementById('userInput').value;
const apiKey = document.getElementById('apiKey').value;
const chatLog = document.getElementById('chatLog');
if (!apiKey.trim()) {
chatLog.innerHTML += '<div>ERROR: Please provide an API key</div>';
} else {
if (!userInput.trim()) {
chatLog.innerHTML += '<div>AI: Please ask me something. Your input is empty.</div>';
} else {
chatLog.innerHTML += `<div>User: ${userInput}</div>`;
fetch('https://api.openai.com/v1/images/generations', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ${userInput}',
},
body: JSON.stringify({
prompt: userInput,
max_tokens: 150,
temperature: 1
}),
})
.then(response => response.json())
.then(data => {
const generatedResponse = data.choices[0].text;
chatLog.innerHTML += `<div>AI: ${generatedResponse}</div>`;
})
.catch(error => {
console.error('Error:', error);
});
}
}
document.getElementById('userInput').value = '';
}
//--- Mind can pick one of these actions -----------------
const ACTION_LEFT = 0;
const ACTION_RIGHT = 1;
const ACTION_UP = 2;
const ACTION_DOWN = 3;
const ACTION_STAYSTILL = 4;
// in initial view, (smaller-larger) on i axis is aligned with (left-right)
// in initial view, (smaller-larger) on j axis is aligned with (away from you - towards you)
// contents of a grid square
const GRID_BLANK = 0;
const GRID_WALL = 1;
const GRID_MAZE = 2;
var BOXHEIGHT; // 3d or 2d box height
var GRID = new Array(gridsize); // can query GRID about whether squares are occupied, will in fact be initialised as a 2D array
var theagent, theenemy;
var wall_texture, agent_texture, enemy_texture, maze_texture;
// enemy and agent position on squares
var ei, ej, ai, aj;
var badsteps;
var goodsteps;
function loadResources() // asynchronous file loads - call initScene() when all finished
{
var loader1 = new THREE.TextureLoader();
var loader2 = new THREE.TextureLoader();
var loader3 = new THREE.TextureLoader();
var loader4 = new THREE.TextureLoader();
loader1.load ( TEXTURE_WALL, function ( thetexture )
{
thetexture.minFilter = THREE.LinearFilter;
wall_texture = thetexture;
if ( asynchFinished() ) { initScene(); document.addEventListener('DOMContentLoaded', initScene); } // if all file loads have returned
});
loader2.load ( TEXTURE_AGENT, function ( thetexture )
{
thetexture.minFilter = THREE.LinearFilter;
agent_texture = thetexture;
if ( asynchFinished() ) { initScene(); document.addEventListener('DOMContentLoaded', initScene);}
});
loader3.load ( TEXTURE_ENEMY, function ( thetexture )
{
thetexture.minFilter = THREE.LinearFilter;
enemy_texture = thetexture;
if ( asynchFinished() ) { initScene(); document.addEventListener('DOMContentLoaded', initScene);}
});
loader4.load ( TEXTURE_MAZE, function ( thetexture )
{
thetexture.minFilter = THREE.LinearFilter;
maze_texture = thetexture;
if ( asynchFinished() ) { initScene(); document.addEventListener('DOMContentLoaded', initScene);
}
});
}
function asynchFinished() // all file loads returned
{
if ( wall_texture && agent_texture && enemy_texture && maze_texture ) return true;
else return false;
}
//--- grid system -------------------------------------------------------------------------------
// my numbering is 0 to gridsize-1
function occupied ( i, j ) // is this square occupied
{
if ( ( ei == i ) && ( ej == j ) ) return true; // variable objects
if ( ( ai == i ) && ( aj == j ) ) return true;
if ( GRID[i][j] == GRID_WALL ) return true; // fixed objects
if ( GRID[i][j] == GRID_MAZE ) return true;
return false;
}
// translate my (i,j) grid coordinates to three.js (x,y,z) coordinates
// logically, coordinates are: y=0, x and z all positive (no negative)
// logically my dimensions are all positive 0 to MAXPOS
// to centre everything on origin, subtract (MAXPOS/2) from all dimensions
function translate ( i, j )
{
var v = new THREE.Vector3();
v.y = 0;
v.x = ( i * squaresize ) - ( MAXPOS/2 );
v.z = ( j * squaresize ) - ( MAXPOS/2 );
return v;
}
function initScene() // all file loads have returned
{
var i,j, shape, thecube;
// set up GRID as 2D array
for ( i = 0; i < gridsize ; i++ )
GRID[i] = new Array(gridsize);
// set up walls
for ( i = 0; i < gridsize ; i++ )
for ( j = 0; j < gridsize ; j++ )
if ( ( i==0 ) || ( i==gridsize-1 ) || ( j==0 ) || ( j==gridsize-1 ) )
{
GRID[i][j] = GRID_WALL;
shape = new THREE.BoxGeometry ( squaresize, BOXHEIGHT, squaresize );
thecube = new THREE.Mesh( shape );
thecube.material = new THREE.MeshBasicMaterial( { map: wall_texture } );
thecube.position.copy ( translate(i,j) ); // translate my (i,j) grid coordinates to three.js (x,y,z) coordinates
ABWorld.scene.add(thecube);
}
else
GRID[i][j] = GRID_BLANK;
// set up maze
// for ( var c=1 ; c <= NOBOXES ; c++ )
// {
// i = AB.randomIntAtoB(1,gridsize-2); // inner squares are 1 to gridsize-2
// j = AB.randomIntAtoB(1,gridsize-2);
// GRID[i][j] = GRID_MAZE ;
// shape = new THREE.BoxGeometry ( squaresize, BOXHEIGHT, squaresize );
// thecube = new THREE.Mesh( shape );
// thecube.material = new THREE.MeshBasicMaterial( { map: maze_texture } );
// thecube.position.copy ( translate(i,j) ); // translate my (i,j) grid coordinates to three.js (x,y,z) coordinates
// ABWorld.scene.add(thecube);
// }
// set up enemy
// start in random location
do
{
i = AB.randomIntAtoB(1,gridsize-2);
j = AB.randomIntAtoB(1,gridsize-2);
}
while ( occupied(i,j) ); // search for empty square
ei = i;
ej = j;
shape = new THREE.BoxGeometry ( squaresize, BOXHEIGHT, squaresize );
theenemy = new THREE.Mesh( shape );
theenemy.material = new THREE.MeshBasicMaterial( { map: enemy_texture } );
ABWorld.scene.add(theenemy);
//drawEnemy();
// set up agent
// start in random location
do
{
i = AB.randomIntAtoB(1,gridsize-2);
j = AB.randomIntAtoB(1,gridsize-2);
}
while ( occupied(i,j) ); // search for empty square
ai = i;
aj = j;
shape = new THREE.BoxGeometry ( squaresize, BOXHEIGHT, squaresize );
theagent = new THREE.Mesh( shape );
theagent.material = new THREE.MeshBasicMaterial( { map: agent_texture } );
ABWorld.scene.add(theagent);
//drawAgent();
// var container = document.getElementById('sceneContainer');
// var containerWidth = container.clientWidth;
// var containerHeight = container.clientHeight;
// ABWorld.renderer.setSize(containerWidth, containerHeight);
var container = document.getElementById('sceneContainer');
var containerWidth = container.clientWidth;
var containerHeight = container.clientHeight;
ABWorld.renderer.setSize(containerWidth, containerHeight);
// // Listen for window resize events
// window.addEventListener('resize', onWindowResize);
// // Call onWindowResize initially
// onWindowResize();
// console.log('Renderer size:', ABWorld.renderer.getSize());
// finally skybox
// setting up skybox is simple
// just pass it array of 6 URLs and it does the asych load
ABWorld.scene.background = new THREE.CubeTextureLoader().load ( SKYBOX_ARRAY, function()
{
ABWorld.render();
AB.removeLoading();
AB.runReady = true; // start the run loop
});
}
// --- draw moving objects -----------------------------------
function drawEnemy() // given ei, ej, draw it
{
theenemy.position.copy ( translate(ei,ej) ); // translate my (i,j) grid coordinates to three.js (x,y,z) coordinates
ABWorld.lookat.copy ( theenemy.position ); // if camera moving, look back at where the enemy is
}
function drawAgent() // given ai, aj, draw it
{
theagent.position.copy ( translate(ai,aj) ); // translate my (i,j) grid coordinates to three.js (x,y,z) coordinates
ABWorld.follow.copy ( theagent.position ); // follow vector = agent position (for camera following agent)
}
var OURKEYS = [ 37, 38, 39, 40 ];
function ourKeys ( event ) { return ( OURKEYS.includes ( event.keyCode ) ); }
function keyHandler ( event )
{
if ( ! AB.runReady ) return true; // not ready yet
// if not one of our special keys, send it to default key handling:
if ( ! ourKeys ( event ) ) return true;
// else handle key and prevent default handling:
if ( event.keyCode == 37 ) moveLogicalAgent ( ACTION_LEFT );
if ( event.keyCode == 38 ) moveLogicalAgent ( ACTION_DOWN );
if ( event.keyCode == 39 ) moveLogicalAgent ( ACTION_RIGHT );
if ( event.keyCode == 40 ) moveLogicalAgent ( ACTION_UP );
// when the World is embedded in an iframe in a page, we want arrow key events handled by World and not passed up to parent
event.stopPropagation(); event.preventDefault(); return false;
}
AB.world.newRun = function()
{
AB.loadingScreen();
AB.runReady = false;
badsteps = 0;
goodsteps = 0;
if ( show3d )
{
BOXHEIGHT = squaresize;
ABWorld.init3d ( startRadiusConst, maxRadiusConst, SKYCOLOR );
}
else
{
BOXHEIGHT = 1;
ABWorld.init2d ( startRadiusConst, maxRadiusConst, SKYCOLOR );
}
loadResources(); // aynch file loads
// calls initScene() when it returns
// document.onkeydown = keyHandler;
};
AB.world.takeAction = function ( a )
{
// updateStatusBefore(a); // show status line before moves
};
// AB.world.endRun = function()
// {
// musicPause();
// if ( AB.abortRun ) AB.msg ( " <br> <font color=red> <B> Agent trapped. Final score zero. </B> </font> ", 3 );
// else AB.msg ( " <br> <font color=green> <B> Run over. </B> </font> ", 3 );
// };