canvas行星小插图

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

/*INIT*/
  window.addEventListener("resize", onWindowResize, false);
  generateOptions(true, false);
  if(canvas.width<360) gui.close();
  draw();
  autoClick();
  /*END INIT*/

var timeoutID;
  function autoClick() {
    if (myoptions.demoMode) {
      generateOptions(false, Math.random() > .75);
    }
    if (timeoutID) window.clearInterval(timeoutID);
    timeoutID = setInterval(autoClick, myoptions.demoInterval * 1000);
  }

function onWindowResize() {
    canvas.width = Math.min(window.innerHeight, window.innerWidth);
    canvas.height = canvas.width;

gl.viewport(0, 0, canvas.width, canvas.height);
    gl.uniform1f(widthHandle, canvas.width);
    gl.uniform1f(heightHandle, canvas.height);
  }
  
  function DefaultOptions(){

this.theme = "Generated";
    this.demoMode = demoMode;
    this.demoInterval = demoInterval;
  }

/*random options*/
  function RandomOptions(randomMode) {

this.theme = "Generated";
    this.demoMode = demoMode;
    this.demoInterval = demoInterval;

let preset = pick(presets);
    let preset2 = pick(presets);
    this.numerator = randomMode ? combinator(getRandomInt(1, 5)) : preset.numerator;
    this.denominator = randomMode ? combinator(getRandomInt(1, 5)) : preset.denominator;
    this.numerator2 = randomMode ? combinator(getRandomInt(1, 5)) : preset2.numerator;
    this.denominator2 = randomMode ? combinator(getRandomInt(1, 5)) : preset2.denominator;
    this.panel = pick(panelExpressions);

this.colorMode = pick(modes);

this.color1 = tinycolor.random().toHexString();
    /*(if we're using a randomly generated color expression, use only random colors (safer, less zeros)):*/
    this.color2 = !randomMode && Math.random() > 0.75 ? pick(hueColors) : tinycolor.random().toHexString();
    this.color3 = !randomMode && Math.random() > 0.75 ? pick(primaryColors) : tinycolor.random().toHexString();
    this.rotation = getRandomInt(-10, 10);
    this.rotFactor1 = getRandomInt(-2, 2);
    this.rotFactor2 = getRandomInt(-2, 2);

this.theta = getRandomInt(-12, 12);
    this.time = Math.random() * 0.03 - 0.015;
    this.timeFunc = Math.random() > 0.33 ? "none" : pick(timeFunctions);
    this.distanceModifier = getRandomFloat(-2, 2);

this.periodicMultiplier = Math.random() < 0.25 ? 0 : getRandomInt(0, 10);
    this.motionIterations = getRandomInt(0, 2);
    this.motionMultiplier = getRandomFloat(0, 2);
    this.iterationMotion1 = Math.random() > 0.5;
    this.iterationMotion2 = Math.random() > 0.5;

this.colorOperator1 = pick(operators);
    this.colorOperator2 = pick(operators);

this.motionOperator1 = pick(operators);
    this.motionOperator2 = pick(operators);

this.thetaFunc = Math.random() > 0.25 ? pick(["none", "sine"]) : pick(functions); /*tangent only sometimes*/
    this.pixelation = Math.random() > 0.75 ? getRandomInt(10, 300) : 0;

this.useTwo = Math.random() > .5;
    this.useDifferent = Math.random() > .66;
    this.innerRadius = getRandomFloat(.05, .4);

//interlace mode: both positions are same size and they rotate opposite
    if (Math.random() > .5) {
      this.useTwo = true;
      this.useDifferent = false;
      this.innerRadius = .4;
      this.rotFactor1 = 1.0;
      this.rotFactor2 = (-1.0);
    }
  }

var wasClosed;

function genGui() {
    setValue();
    myoptions.theme = currentTheme || "Generated";
    wasClosed = gui && gui.closed;
    gui && gui.destroy();
    gui = new dat.GUI();
    if (wasClosed) gui.close();

gui.add(myoptions, "theme", themes.map(th=>th.name)).onChange(presetChange);
    gui.add(myoptions, "demoMode").onChange(demoModeChange);
    gui.add(myoptions, "demoInterval", 1, 30, 1).onChange(demoIntervalChange);

var f1 = gui.addFolder("advanced");
    f1.addColor(myoptions, "color1").onChange(setValue);
    f1.addColor(myoptions, "color2").onChange(setValue);
    f1.addColor(myoptions, "color3").onChange(setValue);

f1.add(myoptions, "numerator").onFinishChange(numeratorChanged);
    f1.add(myoptions, "denominator").onFinishChange(numeratorChanged);
    f1.add(myoptions, "numerator2").onFinishChange(numeratorChanged);
    f1.add(myoptions, "denominator2").onFinishChange(numeratorChanged);
    f1.add(myoptions, "colorMode", modes).onChange(setValue);
    f1.add(myoptions, "panel").onFinishChange(setValue);

f1.add(myoptions, "colorOperator1", operators).onChange(setValue);
    f1.add(myoptions, "colorOperator2", operators).onChange(setValue);

f1.add(myoptions, "time", -0.015, 0.015).onChange(setValue);
    f1.add(myoptions, "timeFunc", timeFunctions).onChange(setValue);
    f1.add(myoptions, "distanceModifier", -2, 2).onChange(setValue);

f1.add(myoptions, "rotation", -10, 10).onChange(setValue); /*overall rotation factor*/
    f1.add(myoptions, "rotFactor1", -2, 2, .5).onChange(setValue); /*per position rotation factors*/
    f1.add(myoptions, "rotFactor2", -2, 2, .5).onChange(setValue);

f1.add(myoptions, "theta", -12, 12).onChange(setValue);
    f1.add(myoptions, "thetaFunc", functions).onChange(setValue);
    f1.add(myoptions, "periodicMultiplier", 0, 20).onChange(setValue);

f1.add(myoptions, "motionMultiplier", 0.0, 2.0).onChange(setValue);
    f1.add(myoptions, "motionIterations", 0, 10).onChange(setValue);
    f1.add(myoptions, "iterationMotion1").onChange(setValue);
    f1.add(myoptions, "iterationMotion2").onChange(setValue);
    f1.add(myoptions, "motionOperator1", operators).onChange(setValue);
    f1.add(myoptions, "motionOperator2", operators).onChange(setValue);

f1.add(myoptions, "pixelation", 0, 300).onChange(setValue);
    f1.add(myoptions, "useTwo").onChange(setValue);
    f1.add(myoptions, "innerRadius", 0, 1).onChange(setValue);
    f1.add(myoptions, "useDifferent").onChange(setValue);

function demoIntervalChange() {
      demoInterval = myoptions.demoInterval;
    }

function demoModeChange() {
      demoMode = myoptions.demoMode;
    }

function numeratorChanged() {
      generateWEBGL();
      genGui();
    }

function presetChange() {
      currentTheme = myoptions.theme;
      generateOptions(false, false, myoptions.theme);
    }
  }

function setValue() {
    /*send the control panel values to webGL*/
    time = 0.0;
    var col1 = tinycolor(myoptions.color1);
    col1.red = col1._r / 255;
    col1.green = col1._g / 255;
    col1.blue = col1._b / 255;
    var col2 = tinycolor(myoptions.color2);
    col2.red = col2._r / 255;
    col2.green = col2._g / 255;
    col2.blue = col2._b / 255;
    var col3 = tinycolor(myoptions.color3);
    col3.red = col3._r / 255;
    col3.green = col3._g / 255;
    col3.blue = col3._b / 255;

gl.uniform3f(getUniformLocation(program, "color1"), col1.red, col1.green, col1.blue);
    gl.uniform3f(getUniformLocation(program, "color2"), col2.red, col2.green, col2.blue);
    gl.uniform3f(getUniformLocation(program, "color3"), col3.red, col3.green, col3.blue);
    gl.uniform1i(getUniformLocation(program, "colorMode"), modes.indexOf(myoptions.colorMode));
    gl.uniform1i(getUniformLocation(program, "colorOperator1"), operators.indexOf(myoptions.colorOperator1));
    gl.uniform1i(getUniformLocation(program, "colorOperator2"), operators.indexOf(myoptions.colorOperator2));

gl.uniform1f(getUniformLocation(program, "motionMultiplier"), myoptions.motionMultiplier);
    gl.uniform1f(getUniformLocation(program, "motionIterations"), myoptions.motionIterations);
    gl.uniform1f(getUniformLocation(program, "iterationMotion1"), myoptions.iterationMotion1);
    gl.uniform1f(getUniformLocation(program, "iterationMotion2"), myoptions.iterationMotion2);
    gl.uniform1i(getUniformLocation(program, "motionOperator1"), operators.indexOf(myoptions.motionOperator1));
    gl.uniform1i(getUniformLocation(program, "motionOperator2"), operators.indexOf(myoptions.motionOperator2));

gl.uniform1f(getUniformLocation(program, "rotation"), myoptions.rotation);
    gl.uniform1f(getUniformLocation(program, "rotFactor1"), myoptions.rotFactor1);
    gl.uniform1f(getUniformLocation(program, "rotFactor2"), myoptions.rotFactor2);

gl.uniform1f(getUniformLocation(program, "thetaM"), parseInt(myoptions.theta)); /*theta multiplier*/
    gl.uniform1i(getUniformLocation(program, "thetaFunc"), functions.indexOf(myoptions.thetaFunc));
    gl.uniform1f(getUniformLocation(program, "periodicMultiplier"), myoptions.periodicMultiplier);
    gl.uniform1i(getUniformLocation(program, "timeFunc"), timeFunctions.indexOf(myoptions.timeFunc));
    gl.uniform1f(getUniformLocation(program, "distanceModifier"), myoptions.distanceModifier);
    gl.uniform1f(getUniformLocation(program, "pixelation"), myoptions.pixelation);

gl.uniform1f(getUniformLocation(program, "useTwo"), myoptions.useTwo);
    gl.uniform1f(getUniformLocation(program, "useDifferent"), myoptions.useDifferent);
    gl.uniform1f(getUniformLocation(program, "innerRadius"), myoptions.innerRadius);
  }

//************** Shader sources **************
  function vertex() {
    return `
      attribute vec2 position;
      void main() {
        gl_Position = vec4(position, 0.0, 1.0);
      }
      `;
  }

//shapes (calculated vec3's)
      vec3 s1 = ((col1.z-col1.y))*col1.x*(cos(rot+id*abs(pos.xyx)/(col1)));
      vec3 s2 = (col2.x-col2.y)*col2.z*cos(id*abs(uv.xyx)/(col2));
      vec3 s3 = (col3.z-col3.x)*col3.y*sin(+d+rot+uv.xyx+pos.xyx);
      
      //for shapes 1 and 2, combine with distance/inverseDistance
      float dArg = smoothstep(radius,0.0, clamp(d, 0.0, 1.0));
      float surface = smoothstep(radius, radius-.02, d);
      s1 = s1/surface;
      s2 = s2/surface;
      s3 /= surface;
      col1 /= surface;
      col2 /= surface;
      col3 /= dArg;

//for shapes 1 and 2, combine with distance
    s1 = colorOperator1 == 0 ? s1 : 
    colorOperator1 == 1 ? s1+dArg :
    colorOperator1 == 2 ? s1-dArg :
    colorOperator1 == 3 ? s1*dArg :
        s1/dArg; 
    s2 = colorOperator2 == 0 ? s2 :
        colorOperator2 == 1 ? s2+dArg :
        colorOperator2 == 2 ? s2-dArg :
        colorOperator2 == 3 ? s2*dArg :
        s2/dArg;
    
    
      float arg = (d+rot+uv.x);
      vec3 s4 = mix(s1, s2, col3/cos(arg*periodicMultiplier));
      s4 /= dArg;
    
      vec4 panel = vec4(((${panel})/3.0),1.0);
      vec4 thing = vec4((${numerator})/(${denominator}),1.0);
      vec4 different = vec4((${numerator2})/(${denominator2}),1.0);
      if(isDifferent) thing = different;
    
      vec4 rez = colorMode == 0 ? panel * thing : 
                     colorMode == 1 ? panel / thing : 
                     colorMode == 2 ? panel + thing :
                     colorMode == 3 ? panel - thing :
                     colorMode == 4 ? thing / panel :
                     thing - panel;
      return clamp(rez, 0.0, 1.0);
    }
    void main(){  
    
        vec4 rez1 = vec4(0.0);
        /*vec4 generatePlanetoid(float radius, bool isDifferent, float clockwise, float x, float y)*/
        /* x and y values are always .5 (center) */
        rez1 += 1.5*generatePlanetoid(.4, false, rotFactor1, .5,.5);
        vec4 rez2 = 1.5*generatePlanetoid(innerRadius, useDifferent, rotFactor2, .5,.5);
        
        if(rez2.x >= 1.0) rez2.x = 0.0;
        if(rez2.y >= 1.0) rez2.y = 0.0;
        if(rez2.z >= 1.0) rez2.z = 0.0;
        if(rez1.x >= 1.0) rez1.x = 0.0;
        if(rez1.y >= 1.0) rez1.y = 0.0;
        if(rez1.z >= 1.0) rez1.z = 0.0;
        
        vec4 result = rez1;
        if(useTwo) result += rez2;
        if(result.x >= 1.0) result.x = 0.0;
        if(result.y >= 1.0) result.y = 0.0;
        if(result.z >= 1.0) result.z = 0.0;
    
        gl_FragColor = result;
        //rez1-(rez1*rez2)
       }
    `;
    return fragmentSource;
  }

/*GENERATE AND DRAW*/
  var widthHandle, heightHandle, timeHandle, program;

/*DRAW function*/
  function draw() {

time += myoptions.time;
    gl.uniform1f(timeHandle, time);
    //Draw a triangle strip connecting vertices 0-4
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    requestAnimationFrame(draw);
  }

/*generate WEBGL*/
  function generateWEBGL() {
    //Create vertex and fragment shaders
    var vertexShader = compileShader(vertex(), gl.VERTEX_SHADER);
    var fragmentShader = compileShader(
      fragment(myoptions.numerator, myoptions.denominator, myoptions.numerator2, myoptions.denominator2, myoptions.panel),
      gl.FRAGMENT_SHADER
    );

//Create shader programs
    program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);

gl.useProgram(program);

//Set up rectangle covering entire canvas
    var vertexData = new Float32Array([
      -1.0,
      1.0, // top left
      -1.0,
      -1.0, // bottom left
      1.0,
      1.0, // top right
      1.0,
      -1.0 // bottom right
    ]);

//Create vertex buffer
    var vertexDataBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexDataBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);

// Layout of our data in the vertex buffer
    var positionHandle = getAttribLocation(program, "position");

gl.enableVertexAttribArray(positionHandle);
    gl.vertexAttribPointer(
      positionHandle,
      2, // position is a vec2 (2 values per component)
      gl.FLOAT, // each component is a float
      false, // don't normalize values
      2 * 4, // two 4 byte float components per vertex (32 bit float is 4 bytes)
      0 // how many bytes inside the buffer to start from
    );

//Set uniform handle
    timeHandle = getUniformLocation(program, "time");
    widthHandle = getUniformLocation(program, "width");
    heightHandle = getUniformLocation(program, "height");
    gl.uniform1f(widthHandle, canvas.width);
    gl.uniform1f(heightHandle, canvas.height);
  }

/*HELPERS*/
  function compileShader(shaderSource, shaderType) {
    var shader = gl.createShader(shaderType);
    gl.shaderSource(shader, shaderSource);
    gl.compileShader(shader);
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
      throw "Shader compile failed with: " + gl.getShaderInfoLog(shader);
    }
    return shader;
  }

function getAttribLocation(program, name) {
    var attributeLocation = gl.getAttribLocation(program, name);
    if (attributeLocation === -1) {
      throw "Cannot find attribute " + name + ".";
    }
    return attributeLocation;
  }

function getUniformLocation(program, name) {
    var attributeLocation = gl.getUniformLocation(program, name);
    if (attributeLocation === -1) {
      throw "Cannot find uniform " + name + ".";
    }
    return attributeLocation;
  }

function pick(arr) {
    return arr[Math.floor(Math.random() * arr.length)];
  }

function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

function getRandomFloat(min, max) {
    return Math.random() * (max - min) + min;
  }

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