环形轨迹

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

var gui = new dat.GUI();

var opacity = false;
var angle = 0;
var speed = 0.01;

var relativeSpeed = 1.6;

var innerCircles = 7;
var outerCircles = 5;
var radi = 220;

gui.add(window, 'opacity' )
var rsC = gui.add(window, 'relativeSpeed', 0, 2.4, 0.4);

rsC.onChange(() => {
  background(0);
})
function setup() {
  createCanvas(windowWidth, windowHeight);
  noStroke();
  // strokeWeight(2)
  background(0);
}

function draw() {
  var l0 = radi;
  var l1 = 60;

background(0, opacity ? 255 : 10);

translate(width / 2, height / 2);
  rotate(angle);

for (var i = 0; i < innerCircles; i++) {
    fill(color(`hsb(${round(angle * 30 * i) % 360},100%,100%)`));
    push();
    rotate(i * TWO_PI / innerCircles);
    translate(0, l0);
    ellipse(0, 0, 7);

rotate(angle * relativeSpeed);
    for (var j = 0; j < outerCircles; j++) {
      push();
      fill(color(`hsb(${round(angle * 30 * (j + i)) % 360},100%,100%)`));
      rotate(j * TWO_PI / outerCircles);
      translate(0, l1);
      ellipse(0, 0, 7);

pop();
    }

pop();
  }
  angle += speed;
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
    background(0);
}

function mousePressed() {
  background(0)
  innerCircles = random(6, 10);
  outerCircles = random(5,10);
  
  radi = map(innerCircles, 6, 10 , 200, 280);
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg