p5实现裂缝干涩背景效果
代码语言:html
所属分类:背景
代码描述:p5实现裂缝干涩背景效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /* Make the canvas element fill the screen. */ canvas { display: block; position: absolute; top: 0; left: 0; border: none; margin: 0; z-index: -1; } </style> </head> <body translate="no" > <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/p5-0.5.1.js"></script> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/d3-delaunay.min.js"></script> <script> //// ---- DAT.GUI CODE ---- //// let params = { horizontalVoronoiDivisions: 7, verticalVoronoiDivisions: 9, voronoiIrregularity: 0.2, innerShapes: 6, innerShapeAngle: 0.02, shadeVariance: 0.07, lineThickness: 0.6, hueStart: 0, hueEnd: 90, brightness: 95, saturation: 100, offset: -80, animationSpeed: 500, animate: false, hideText: false, createNew: function(){ resetVoronoiDesign(); }, } let gui = new dat.GUI(); let voronoiFolder = gui.addFolder("Voronoi Diagram"); let sketchFolder = gui.addFolder("Sketch Overlay"); let colourFolder = gui.addFolder("Colours"); voronoiFolder.add(params, "horizontalVoronoiDivisions", 1, 20, 1).name("Horiz. Divisions").onChange(function() { resetVoronoiDesign(); }); voronoiFolder.add(params, "verticalVoronoiDivisions", 1, 20, 1).name("Vert. Divisions").onChange(function() { resetVoronoiDesign(); }); voronoiFolder.add(params, "voronoiIrregularity", 0, 0.5).name("Irregularity").onChange(function() { resetVoronoiDesign(); }); sketchFolder.add(params, "innerShapes", 0, 30, 1).name("Inner Shapes").onChange(function() { renderVoronoiDesign(); }); sketchFolder.add(params, "innerShapeAngle", 0, 1).name("Inner Angle").onChange(function() { renderVoronoiDesign(); }); sketchFolder.add(params, "lineThickness", 0, 5).name("Thickness").onChange(function() { renderVoronoiDesign(); }); colourFolder.add(params, "shadeVariance", 0, 0.99).name("Hue Variance").onChange(function() { renderVoronoiDesign(); }); colourFolder.add(params, "hueStart", -30, 360, 1).name("Hue Start").onChange(function() { renderVoronoiDesign(); }); colourFolder.add(params, "hueEnd", 0, 390, 1).name("Hue End").onChange(function() { renderVoronoiDesign(); }); colourFolder.add(params, "saturation", 0, 100, 1).name("Saturation").onChange(function() { renderVoronoiDesign(); }); colourFolder.add(params, "brightness", 0, 100, 1).name("Brightness").onChange(function() { renderVoronoiDesign(); }); colourFolder.add(params, "offset", -100, 100, 1).name("Edge Offset").onChange(function() { renderVoronoiDesign(); }); gui.add(params, "hideText").name("Hide Text").onChange(function() { renderVoronoiDesign(); }); gui.add(params, "animate").name("Animate"); gui.add(params, "createNew").name("Generate New Design"); let delaunay, voronoi, polygons, voronoiPoints, scaledVoronoiPoints, shapes; function setup(){ createCanvas(windowWidth, windowHeight); colorMode(HSB, 360, 100, 100, 1); rectMode(CENTER); textSize(22); textAlign(CENTER); textStyle(BOLD); textFont('Courier New'); resetVoronoiDesign(); } function windowResized() { resizeCanvas(windowWidth, windowHeight); renderVoronoiDesign(); } function renderVoronoiDesign(){ scaleVoronoiPoints(); createVoronoiPolygons(); createShapes(); drawShapes(); if (params.hideText == false){ drawText(); } } function resetVoronoiDesign(){ noiseSeed(frameCount); createVoronoiPoints(); renderVoronoiDesign(); } function createVoronoiPoints(){ voronoiPoints = []; //The following code is derived from this StackOverflow answer //https://stackoverflow.com/questions/3667927/do-randomly-generated-2d-points-clump-together-and-how-do-i-st.........完整代码请登录后点击上方下载按钮下载查看
网友评论0