xxxxxxxxxx
function setup() {
createCanvas(windowWidth, windowHeight);
background(100);
}
function draw() {
circle(mouseX, mouseY, 20);
}
let sphereRotation = 0;
let spheres = [];
function setup() {
createCanvas(600, 600, WEBGL);
angleMode(DEGREES);
colorMode(HSB, 360, 100, 100);
// create smaller spheres
for (let i = 0; i < 50; i++) {
let x = random(-300, 300);
let y = random(-300, 300);
let z = random(-300, 300);
let r = random(5, 20);
let c = color(random(360), 100, 100);
spheres.push(new Sphere3D(x, y, z, r, c));
}
}
function draw() {
background(0);
rotateX(60);
// draw grid
stroke(255, 50);
for (let i = -300; i <= 300; i += 20) {
line(i, -300, 0, i, 300, 0);
line(-300, i, 0, 300, i, 0);
}
// draw rotating rainbow sphere
push();
translate(0, 0, -100);
rotateY(sphereRotation);
noStroke();
for (let i = 0; i < 360; i += 10) {
fill(i, 100, 100);
rotateZ(i);
sphere(100);
}
pop();
// draw smaller spheres
for (let i = 0; i < spheres.length; i++) {
spheres[i].update();
spheres[i].display();
}
sphereRotation += 0.5;
}
class Sphere3D {
constructor(x, y, z, r, c) {
this.pos = createVector(x, y, z);
this.r = r;
this.c = c;
this.speed = createVector(random(-1, 1), random(-1, 1), random(-1, 1));
}
update() {
this.pos.add(this.speed);
// bounce off edges
if (this.pos.x < -300 || this.pos.x > 300) {
this.speed.x *= -1;
}
if (this.pos.y < -300 || this.pos.y > 300) {
this.speed.y *= -1;
}
if (this.pos.z < -300 || this.pos.z > 300) {
this.speed.z *= -1;
}
}
display() {
push();
translate(this.pos.x, this.pos.y, this.pos.z);
noStroke();
fill(this.c);
sphere(this.r);
pop();
}
}