p5实现彩绘动画效果代码

代码语言:html

所属分类:动画

代码描述:p5实现彩绘动画效果代码,按i键重绘

代码标签: p5 彩绘 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        body {
          margin: 0;
          padding: 0;
          height: 100vh;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: center;
          background: black;
        }
    </style>



</head>

<body>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.4.0.js"></script>
    <script>
      //press i to randomize keystroke
//input image URLs for variety - If URL doesn't load, permissions may not be granted or the file may be too big
let strokeMax, varRot, varw;
let input1, button1;
let cnt = 200;
let img;
function preload() {
  img = loadImage(
    "https://assets.codepen.io/4559259/F9506DF4-C5FD-4B1F-B3A7-FDD76B76A460.jpeg"
  );
}
function setup() {
  c = min(windowWidth, windowHeight);
  cnv = createCanvas(
    (c * img.width) / img.height,
    (c * img.height) / img.width
  ); //canvas creation
  background(0);
  buttons();
  noStroke(); //no lines
  strokeMax = random(0.5, 40);
  varRot = random(0, PI);
  varW = random(0.5, 10);
}
function draw() {
  for (let i = 0; i < cnt; i++) {
.........完整代码请登录后点击上方下载按钮下载查看

网友评论0