Ignore:
Timestamp:
08/25/24 01:56:48 (4 months ago)
Author:
Maciej Komosinski
Message:

Updated standard.expdef animated demo: uses the most recent Framsticks SDK, supports 6 genetic encodings, adjustable mutation and crossover probabilities, shows colored genotypes, allows user to manually increase/decrease fitness of the current individual, displays its neural network

File:
1 edited

Legend:

Unmodified
Added
Removed

  • js/standard_expdef_demo/index.html

    r880 r1326  
    55    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    66    <link rel="stylesheet" type="text/css" href="static/styles.css">
    7                 <title>Standard.expdef Animation</title>
     7                <title>Standard.expdef demo animation</title>
     8        <script type="importmap">
     9                {
     10                        "imports": {
     11                                "three": "./node_modules/three/build/three.module.js",
     12                                "three/addons/OrbitControls.js": "./node_modules/three/examples/jsm/controls/OrbitControls.js",
     13                                "three/addons/CSS3DRenderer.js": "./node_modules/three/examples/jsm/renderers/CSS3DRenderer.js",
     14                                "three/addons/Sky.js": "./node_modules/three/examples/jsm/objects/Sky.js",
     15                                "tween": "./node_modules/three/examples/jsm/libs/tween.module.js"
     16                        }
     17                }
     18        </script>
     19        <script type="module">
     20                import * as TWEEN from 'tween';
     21                import * as THREE from 'three';
     22                import {OrbitControls} from "three/addons/OrbitControls.js";
     23                import {CSS3DObject, CSS3DSprite, CSS3DRenderer} from "three/addons/CSS3DRenderer.js";
     24                import {Sky} from "three/addons/Sky.js";
     25
     26                // this trick is done to avoid refactoring the entire app
     27                window.THREE = THREE;
     28                window.Sky = Sky;
     29                window.OrbitControls = OrbitControls;
     30                window.CSS3DRenderer = CSS3DRenderer;
     31                window.CSS3DObject = CSS3DObject;
     32                window.CSS3DSprite = CSS3DSprite;
     33                window.TWEEN = TWEEN;
     34        </script>
     35
     36
     37   
     38               
    839        </head>
    940        <body style="margin: 0; overflow: hidden;">
    10     <!--External dependencies-->
    11                 <script src="js/external/threejs/three.min.js"></script>
    12     <script src="js/external/threejs/CSS3DRenderer.js"></script>
    13     <script src="js/external/threejs/OrbitControls.js"></script>
    14     <script src="js/external/threejs/Sky.js"></script>
    15     <script src="js/external/tweenjs/tween.min.js"></script>
    16     <script src="../sdk/frams-sdk.js"></script>
    17     <script src="js/external/framsjs/visualization/jointmeshfactory.js"></script>
    18     <script src="js/external/framsjs/visualization/partmeshfactory.js"></script>
    19     <script src="js/external/framsjs/visualization/transformations.js"></script>
    20     <!--Project sources-->
    21     <script src="js/config.js"></script>
    22     <script src="js/world/core.js"></script>
    23     <script src="js/world/object/framstick.js"></script>
    24     <script src="js/world/object/table.js"></script>
    25     <script src="js/world/object/text.js"></script>
    26     <script src="js/world/object/arrow.js"></script>
    27     <script src="js/simulation/core.js"></script>
    28                 <script src="js/app.js"></script>
     41                <div class="column controls">
     42                        <div class="row control-container" id="fitness-rater">
     43                                <span>Rate creature:</span>
     44                        </div>
     45                        <div class="row control-container">
     46                                <span>Genotype: </span>
     47                                <select id="genotype-selector">
     48                                </select>
     49                        </div>
     50                       
     51                </div>
     52                <!--External dependencies-->
     53               
     54                <!-- <script src="js/external/threejs/three.min.js"></script>
     55                <script src="js/external/threejs/CSS3DRenderer.js"></script>
     56                <script src="js/external/threejs/OrbitControls.js"></script>
     57                <script src="js/external/threejs/Sky.js"></script> -->
     58                <!-- <script src="js/external/tweenjs/tween.min.js"></script> -->
     59                <script src="sdk/frams-sdk.js"></script>
     60                <script src="js/external/framsjs/visualization/jointmeshfactory.js" defer></script>
     61                <script src="js/external/framsjs/visualization/partmeshfactory.js" defer></script>
     62                <script src="js/external/framsjs/visualization/transformations.js" defer></script>
     63                <!--Project sources-->
     64                <script src="js/config.js" defer></script>
     65                <script src="js/utils.js" defer></script>
     66                <script src="js/world/core.js" defer></script>
     67                <script src="js/world/object/framstick.js" defer></script>
     68                <script src="js/world/object/table.js"></script>
     69                <script src="js/world/object/text.js" defer></script>
     70                <script src="js/world/object/arrow.js" defer></script>
     71                <script src="js/neuroviewer/view.js" defer></script>
     72                <script src="js/neuroviewer/neurofactory.js" defer></script>
     73                <script src="js/neuroviewer/neurons/basedrawableneuron.js" defer></script>
     74                <script src="js/neuroviewer/neurons/genericdrawableneuron.js" defer></script>
     75                <script src="js/neuroviewer/neurons/receptordrawableneuron.js" defer></script>
     76                <script src="js/components/slider.js" defer></script>
     77                <script src="js/components/option.js" defer></script>
     78                <script src="js/components/button.js" defer></script>
     79                <script src="js/simulation/core.js" defer></script>
     80                <script src="js/app.js" defer></script>
    2981        </body>
    3082</html>
Note: See TracChangeset for help on using the changeset viewer.