~nasser/lospec-2

732e7c37f646cf604e53ce6662cd64ee997b4a14 — Ramsey Nasser 6 months ago 63cd26a
Progress
3 files changed, 96 insertions(+), 16 deletions(-)

M gizmos.js
A kitty.png
M main.js
M gizmos.js => gizmos.js +1 -0
@@ 20,6 20,7 @@ export default class {
        this.index = 0

        this.object3d = new THREE.LineSegments(geometry, material)
        this.object3d.name = 'gizmos'
        this.object3d.renderOrder = 1 // hack
    }


A kitty.png => kitty.png +0 -0
M main.js => main.js +95 -16
@@ 16,6 16,8 @@ import 'reset-css/reset.css'
import './style.css'
import palettePass from "./palette-pass"

import kitty from './kitty.png?url'

const SCHED = new coro.Schedule()
const scene = new THREE.Scene()



@@ 81,8 83,8 @@ const INPUT = new Input([
    axes
])

scene.add(new THREE.GridHelper(500, 8))
// new OrbitControls(camera, renderer.domElement)
// scene.add(new THREE.GridHelper(500, 8))
new OrbitControls(camera, renderer.domElement)

const GIZMOS = new Gizmos()
scene.add(GIZMOS.object3d)


@@ 112,11 114,25 @@ function drawPeg(position, color = 'white', size = 2) {
    GIZMOS.line(v, v.clone().add(new THREE.Vector3(0, size, 0)), new THREE.Color(color))
}

const zones = []
zones.push({
const goalZones = []
goalZones.push({
    box: new THREE.Box2(new THREE.Vector2(-190, -240), new THREE.Vector2(190, -60)),
    complete: false
})

const velocityZones = []
velocityZones.push({
    box: new THREE.Box2(new THREE.Vector2(-40, -100), new THREE.Vector2(40, -20)),
    velocity: new THREE.Vector2(0, -1).normalize()
})
velocityZones.push({
    box: new THREE.Box2(new THREE.Vector2(-80, -50), new THREE.Vector2(-40, -20)),
    velocity: new THREE.Vector2(1, 0).normalize()
})
velocityZones.push({
    box: new THREE.Box2(new THREE.Vector2(-80 + 120, -50), new THREE.Vector2(-40 + 120, -20)),
    velocity: new THREE.Vector2(-1, 0).normalize()
})

const terrain = []
function makeTerrainPath(path) {


@@ 143,18 159,27 @@ makeTerrainPath([
SCHED.add(function* () {
    const blue = new THREE.Color(0x2929ff)
    const green = new THREE.Color(0x0aff0a)
    const darkGreen = new THREE.Color(0x007062)
    const orange = new THREE.Color(0xff8f00)
    const center = new THREE.Vector2()
    while (true) {
        for (const segment of terrain)
            GIZMOS.line(toVector3(segment.from), toVector3(segment.to), blue)
        for (const zone of zones) {
            GIZMOS.line(toVector3(zone.box.min), toVector3(new THREE.Vector2(zone.box.min.x, zone.box.max.y)), green)
            GIZMOS.line(toVector3(new THREE.Vector2(zone.box.min.x, zone.box.max.y)), toVector3(zone.box.max), green)
            GIZMOS.line(toVector3(zone.box.max), toVector3(new THREE.Vector2(zone.box.max.x, zone.box.min.y)), green)
            GIZMOS.line(toVector3(new THREE.Vector2(zone.box.max.x, zone.box.min.y)), toVector3(zone.box.min), green)
            zone.box.getCenter(center)
            GIZMOS.line(toVector3(center), toVector3(center.clone().addScaledVector(zone.velocity, 20)), green)
        }
        // for (const zone of velocityZones) {
        //     GIZMOS.line(toVector3(zone.box.min), toVector3(new THREE.Vector2(zone.box.min.x, zone.box.max.y)), orange)
        //     GIZMOS.line(toVector3(new THREE.Vector2(zone.box.min.x, zone.box.max.y)), toVector3(zone.box.max), orange)
        //     GIZMOS.line(toVector3(zone.box.max), toVector3(new THREE.Vector2(zone.box.max.x, zone.box.min.y)), orange)
        //     GIZMOS.line(toVector3(new THREE.Vector2(zone.box.max.x, zone.box.min.y)), toVector3(zone.box.min), orange)
        //     zone.box.getCenter(center)
        //     GIZMOS.line(toVector3(center), toVector3(center.clone().addScaledVector(zone.velocity, 20)), orange)
        // }
        // for (const zone of goalZones) {
        //     const color = zone.complete ? green : darkGreen
        //     GIZMOS.line(toVector3(zone.box.min), toVector3(new THREE.Vector2(zone.box.min.x, zone.box.max.y)), color)
        //     GIZMOS.line(toVector3(new THREE.Vector2(zone.box.min.x, zone.box.max.y)), toVector3(zone.box.max), color)
        //     GIZMOS.line(toVector3(zone.box.max), toVector3(new THREE.Vector2(zone.box.max.x, zone.box.min.y)), color)
        //     GIZMOS.line(toVector3(new THREE.Vector2(zone.box.max.x, zone.box.min.y)), toVector3(zone.box.min), color)
        // }
        yield
    }
})


@@ 187,7 212,7 @@ function getSheepNear(p, except = null, threshold = 10) {
SCHED.add(function* sheep() {
    while (true) {
        for (const sheep of sheepies) {
            let color = 'gray'
            let color = 'white'
            // flocking
            const neighborhood = getSheepNear(sheep.position, sheep, 20)
            if (neighborhood.length > 0) {


@@ 216,14 241,14 @@ SCHED.add(function* sheep() {
                const avoidDog = new THREE.Vector2()
                avoidDog.add(sheep.position.clone().sub(dog.position).multiplyScalar(1 / dogDistance))
                sheep.velocity.add(avoidDog.multiplyScalar(1))
                color = 'yellow'
                // color = 'yellow'
            }

            // zone
            for (const zone of zones) {
            for (const zone of velocityZones) {
                if (zone.box.containsPoint(sheep.position)) {
                    sheep.velocity.addScaledVector(zone.velocity, 2)
                    color = 0x007062
                    // color = 0x007062
                }
            }



@@ 250,6 275,60 @@ SCHED.add(function* sheep() {
    }
})

SCHED.add(function* sheep() {
    while (true) {
        for (const zone of goalZones) {
            zone.complete = true
            for (const sheep of sheepies) {
                if (!zone.box.containsPoint(sheep.position)) {
                    zone.complete = false
                    break
                }
            }
        }
        yield
    }
})

const map = new THREE.TextureLoader().load(kitty)
map.colorSpace = THREE.SRGBColorSpace
map.magFilter = THREE.NearestFilter
map.minFilter = THREE.NearestFilter
// const geometry = new THREE.BoxGeometry(1, 1, 1);
// const material = new THREE.MeshBasicMaterial({ map });
// const sprite = new THREE.Mesh(geometry, material);

const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.Float32BufferAttribute([0, 0, 0], 3));
const material = new THREE.PointsMaterial({ size: 100, map });
const sprite = new THREE.Points(geometry, material);

// const sprite = new THREE.Sprite(
//     new THREE.SpriteMaterial(
//         {
//             // transparent: false,
//             // sizeAttenuation: false,
//             map
//         }
//     )
// )


// sprite.center.set(0.5, 0.5)
// sprite.position.set(15, 0, -55)
sprite.scale.set(200, 200, 200)
sprite.renderOrder = 2
// sprite.material.map.colorSpace = THREE.SRGBColorSpace
// scene.add(sprite)

SCHED.add(function* () {
    const origin = new THREE.Vector3()
    while (true) {
        GIZMOS.line(origin, sprite.position)
        yield
    }
})

SCHED.add(function* dogMovement() {
    while (true) {
        cursor.position.x += INPUT.now.axes.horizontal