p5实现彩色点和加号组成的艺术画作代码
代码语言:html
所属分类:其他
代码描述:p5实现彩色点和加号组成的艺术画作代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Unica+One&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle, #f0f0f0, #bdbdbd 70%); } .container { width: 100%; height: 100%; display: grid; place-items: center; position: relative; } #canvas_sketch { padding: 1em; } #canvas_title { position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); } #canvas_title h1 { text-transform: uppercase; font-weight: 200; font-size: 3rem; font-family: "Unica One", sans-serif; cursor: pointer; color: #1c1919; user-select: none; transition: color 0.3s; } #canvas_title h1:hover { color: #d80368; } .credit { position: absolute; top: 5%; left: 50%; transform: translateX(-50%); font-family: "Unica One", sans-serif; text-transform: uppercase; font-size: 0.8rem; color: #1c1919; } .credit a { color: #d80368; text-decoration: none; } </style> </head> <body> <div class="container"> <div id="canvas_sketch"></div> <div id="canvas_title"> <h1>Inspiration</h1> </div> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.4.0.js"></script> <script> const canvas_sketch = (p) => { let moons = []; let crosses = []; // red | green | purple | yellow | black | blue let mainColors = [ "#D80368", "#04A677", "#6E2594", "#FA8B25", "#1C1919", "#6699CC" ]; // SETUP p.setup = function () { p.createCanvas(600, 700); p.rectMode(p.C.........完整代码请登录后点击上方下载按钮下载查看
网友评论0