Commit db246529 authored by i❤computers's avatar i❤computers

Parameterized BinarySphere...

...and provided a GUI to control those parameters
parent 306eda7e
......@@ -12,17 +12,37 @@
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>
<script src="https://cdn.rawgit.com/bitcraftlab/p5.gui/08ac86b7/libraries/quicksettings.js"></script>
<script src="https://cdn.rawgit.com/bitcraftlab/p5.gui/08ac86b7/libraries/p5.gui.js"></script>
<script src="BinarySphere.js"></script>
<script>
let binary;
var scaleBinary = 1,
scaleBinaryMin = 1,
scaleBinaryMax = 5,
scaleBinaryStep = 0.1,
deltaRotate = 0.07,
deltaRotateMin = 0,
deltaRotateMax = 0.2,
deltaRotateStep = 0.001,
binaryDistance = 99,
binaryDistanceMin = 0,
binaryDistanceStep = 1;
let gui;
function setup() {
createCanvas(windowWidth, windowHeight, WEBGL);
binary = new BinarySphere();
gui = createGui('BinarySphere');
gui.addGlobals('deltaRotate', 'binaryDistance', 'scaleBinary');
// noLoop();
}
function draw() {
background(175);
binary.deltaRotate = deltaRotate;
binary.binaryDistance = binaryDistance;
binary.scale = scaleBinary;
binary.rotate();
binary.draw();
}
......
class BinarySphere {
constructor() {
this._angle = 0;
this._deltaRotate = 0.07;
this._binaryDistance = 200;
this.deltaRotate = 0.07;
this.binaryDistance = 99;
this.scale = 1;
this._radius = 100;
this._angle = 0;
}
rotate() {
this._angle += this._deltaRotate;
this._angle += this.deltaRotate;
}
draw() {
......@@ -15,15 +16,16 @@ class BinarySphere {
push();
rotateY(this._angle);
scale(this.scale);
push();
translate(this._binaryDistance / 2, 0);
sphere(this._radius);
translate(this.binaryDistance / 2, 0);
sphere(this.radius);
pop();
push();
translate(-(this._binaryDistance / 2), 0);
sphere(this._radius);
translate(-(this.binaryDistance / 2), 0);
sphere(this.radius);
pop();
pop();
}
......
## Mon May 28 2018
* Decided to follow the wonderful [Daniel Shiffman's WebGL tutorial](https://www.youtube.com/playlist?list=PLRqwX-V7Uu6bPhi8sS1hHJ77n3zRO9FR_)
* [ ] Decided to follow the wonderful [Daniel Shiffman's WebGL tutorial](https://www.youtube.com/playlist?list=PLRqwX-V7Uu6bPhi8sS1hHJ77n3zRO9FR_) (left off at 18.3)
- This means I'll utilize P5.js
- I want to have [those three.js sliders](http://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage), so I can fiddle around some parameters to fine tune the artwork. P5js has [it's own version](https://github.com/bitcraftlab/p5.gui)
- [x] I want to have [those three.js sliders](http://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage), so I can fiddle around some parameters to fine tune the artwork. P5js has [it's own version](https://github.com/bitcraftlab/p5.gui)
* [ ] Read [The Book of Shaders](https://thebookofshaders.com/)
- I imagine I'll be creating galaxy effects with shaders
- P5.js provides a way to [input shader fragments](https://p5js.org/reference/#/p5/loadShader)
......@@ -16,9 +16,12 @@
* [ ] Have bunched up black spheres zipping around center
- Hoping that'll create a bubbling/swarm effect
- [ ] Create BinarySphere class
- [x] Create BinarySphere class
+ Draws a pair of spheres orbiting around each other
+ [ ] Decide on parameters to give it
+ [x] Decide on parameters to give it
* The rate of spin changes based on binary distance and sphere radius. To keep variables as little as possible, I will keep the radius of the spheres at 100, since I can scale the binary.
- With that, the distance will max at 99 to prevent a gap between the spheres.
- [ ] Create BubblingCluster class
+ A large group of BinarySpheres
+ A large group of randomly generated BinarySpheres
+ [ ] Orbiting around each other?
+ [ ] How can I prevent gaps from appearing inside the cluster?
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment