# Three.js visualization on the nqueen solution

**URL:** <https://discourse.threejs.org/t/three-js-visualization-on-the-nqueen-solution/1521>\
**Category:** Showcase\
**Created:** [December 26, 2017, 1:34pm UTC](https://discourse.threejs.org/t/three-js-visualization-on-the-nqueen-solution/1521 "2017-12-26T13:34:52Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![yjovian](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yjovian/32/849_2.png) [@yjovian](https://discourse.threejs.org/u/yjovian)\
**Post date:** [December 26, 2017, 1:34pm UTC](https://discourse.threejs.org/t/three-js-visualization-on-the-nqueen-solution/1521/1 "2017-12-26T13:34:52Z")

</div>

So, the goto is here: [http://yjovian.com/outbound/](http://yjovian.com/outbound/)

A visualisation on the N-Queen problem. As announced via [http://www.claymath.org/](http://www.claymath.org/)

Solves any N in a few seconds or less. Currently set at 30x30 (easy on your (and mine’s) pathetic computer system… lol).

There are 5 systems running in this simul.

1. Icosahedrons - (shoot them if you want, WASD/Shift/Space for 6dof, M1 shoots, Wheel changes speed)
2. Bullets - (pooled for efficiency. I see max 26)
3. Squares - The visuals of the squares of the NxN chessboard.
4. Explosions - Shoot Icos, they will react
5. Clouds - random environment coupled to nav

All done so far with Three and javascript.  
Font comes from open squirrel and Json converter, Open Sans Semibold.  
Sounds created from FL Studio, with FM.

Bottom line… (tldr)  
A Three.js powered visualisation on the N-queen problem coupled with a fps shooter. Aim is to be functional, beautiful, fun.

---

<div class="post-metadata">

**Author:** ![yjovian](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yjovian/32/849_2.png) [@yjovian](https://discourse.threejs.org/u/yjovian)\
**Post date:** [December 26, 2017, 1:57pm UTC](https://discourse.threejs.org/t/three-js-visualization-on-the-nqueen-solution/1521/2 "2017-12-26T13:57:16Z")

</div>

A couple cool things I learned from this project and community…

1. How to create a Z based Screen. - The N in the system is sides to a chessboard. So, I want them to fill the screen. I do a Max on Y or X and use this amazing equation:  
var DISPLAY\_HEIGHT = distance \* Math.tan(fov / 2 \* (Math.PI / 180));  
This is the basis of my 3d text/hud system. It is amazing, just sorta saying, I need these params.

2. HSL - Basic to anything related to humans. What color is your car? ummmm… it’s fiery orange. ok. it’s about .06 hue. (on a 0-1 scale of hue, 21.6 on 360 degrees). That gets translated to RGB (ugg), but yeah, your monitor. No problem, I’m throttling at 15% cpu and figuring 225k squares.

3. GPU? it’s at like 4%. I really need to tax this more. And Cpu is 15%. Like, what is Chrome doing?

4. Next step is completely unobvious. Tie it into the Cloud Database. i.e. I don’t need to code in Notepad (omg), all variables are cloud atomic.

5. Work, Stay stable, Love my friends/family, Carry on

---

<div class="post-metadata">

**Author:** ![yjovian](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yjovian/32/849_2.png) [@yjovian](https://discourse.threejs.org/u/yjovian)\
**Post date:** [December 26, 2017, 2:13pm UTC](https://discourse.threejs.org/t/three-js-visualization-on-the-nqueen-solution/1521/3 "2017-12-26T14:13:55Z")

</div>

Things you should do:

1. Press S. (moves you back). Roll up your mousewheel for faster travel. See everything.

or

1. Aim and shoot the obvious targets.

or

1. Just fly around. Hit that space for upwards and shift for down. Gimbal lock? you’re kidding me

---

<div class="post-metadata">

**Author:** ![yjovian](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yjovian/32/849_2.png) [@yjovian](https://discourse.threejs.org/u/yjovian)\
**Post date:** [December 26, 2017, 2:59pm UTC](https://discourse.threejs.org/t/three-js-visualization-on-the-nqueen-solution/1521/4 "2017-12-26T14:59:23Z")

</div>

These are the basics I expect from any 3D environment.

6DOF Navigation  
Eventually Consistent View  
Instantiated (server or cloud based)