p5实现立春春天剪纸动画效果代码

代码语言:html

所属分类:动画

代码描述:p5实现立春春天剪纸动画效果代码

代码标签: 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: white;
}
</style>




</head>

<body>
  


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.js"></script>
      <script >
//With the prompt of minimalism for , I am going to rebel with scandinavian art to commit an ornamental crime
//https://www.nytimes.com/2016/07/31/magazine/the-oppressive-gospel-of-minimalism.html
//reference: https://uxdesign.cc/how-minimalism-is-rooted-in-fascism-7204b15482a8

//this code is a mess - complete flow of conciousness with no planning

//press any key to pause and click to mix
let playB=true;
let w;
let t=0;
let t2=0;
let vdelta;//vinethetas
let vstep;
let vangle;
let c1,c2
let rA=[]
let cnt=0
function setup(){
  randomizer()
  w=min(windowWidth,windowHeight)*0.95;
  createCanvas(w,w);
}
function draw(){
  background(c2)
  translate(w/2,w/2);
  if(playB){
    t=PI/9*sin(cnt/50)-PI/10;
    t2=cnt/50
    cnt++
  }
  vine()
  if(rA[0]%2===0){
    push()
    scale(1.1,1.1)
    vine()
    pop()
  }
  side1()
  push()
  scale(-1,1)
  side1()
  pop()
  push()
  translate(0,w/5)
  tulip()
  pop()
  
  circle(0,-w/10,w/9)
  
  for(let i=0;i<rA[3];i++){
    push()
    translate(0,-w/10)
    rotate(TWO_PI/rA[3]*i)
    translate(w/20,0)
    leaf(w/10+t*40)
    pop()
  }
  fill(c2)
  circle(0,-w/10,w/25)
}

function leaf(r){
  noStroke();
  arc(0,0,r,r/5,0,PI)
  arc(0,0,r,r/5,PI,TWO_PI)
}
function vine(){
  noFill();
  stroke(c1);
  strokeWeight(3);
  arc(0,0,w*0.8,w*0.8,PI/2+vdelta,3*PI/2-vdelta);
  arc(0,0,w*0.8,w*0.8,3*PI/2+vdelta,PI/2-vdelta);
  fill(c1)
  for(let i=PI/2+vdelta;i<3*PI/2-vdelta;i+=vstep){
    x=w*0.41*cos(i);
    y=w*0.41*sin(i);
    push()
      translate(x,y);
      rotate(i+vangle-t/3)
      leaf(w/40);
    pop()
    x=w*0.39*cos(i+vshift);
    y=w*0.39*sin(i+vshift);
    push()
      translate(x,y);
      rotate(i-vangle+t/3)
      leaf(w/40);
    pop()
    x=-w*0.41*cos(i);
    y=w*0.41*sin(i);
    push()
      translate(x,y);
      rotate(-i-vangle+t/3)
      leaf(w/40);
    pop()
    x=-w*0.39*cos(i+vshift);
    y=w*0.39*sin(i+vshift);
    push()
      translate(x,y);
      rotate(-i+vangle-t/3)
      leaf(w/40);
    pop()
  }
}

function randomizer(){
  vdelta = random(0.1,0.6)
  vstep=random(0.03,0.2)
  vangle=random(PI/3,PI/5)
  vshift=random(0,0.1)
  c1=color(random(0,100),random(0,100),random(0,100));
  c2=color(random(200,250),random(200,250),random(200,250));
  rA=[int(random(3,10)),int(random(4,9)),int(random(5,11)),int(random(9,13)*2)]
}

function birb(r) {
  noStroke()
  push()
    rotate(t)
	beginShape();
	for (let i = 3*PI/2; i > PI/2; i-=0.1) {
		a = r * sin(i);
		b = r * cos(i);
		vertex(-a, -b);
	}
	for (let i = 3*PI/2; i < 3*PI; i+=0.1) {
		a = 2 * r + r * sin(i);
		b = r * cos(i);
		vertex(-a, -b);
	}
	for (let i = PI/2; i < 3*PI/2; i+=0.1) {
		a = r + 2 * r * sin(i);
		b = 2 * .........完整代码请登录后点击上方下载按钮下载查看

网友评论0