200521 Tornado

​

​

function setup() {

  createCanvas(800,800);

  background(100);

  overAllTexture=createGraphics(width,height)

  overAllTexture.loadPixels()

  // noStroke()

  for(var i=0;i<width+50;i++){

    for(var o=0;o<height+50;o++){

      overAllTexture.set(i,o,color(100,noise(i/3,o/3,i*o/50)*random([0,30,50])))

    }

  }

  overAllTexture.updatePixels()

}

let overAllTexture

function drawCow(x,y){

  push()

    translate(x,y)

    fill(255)

    noStroke()

    rect(0,0,50,25,5)

    fill(0)

    rect(5,0,12,15,5)

    rect(25,10,10,10,5)

    rect(45,5,5,10,5)

    fill(255)

    push()

      translate(3,20)

      push()

        rotate(sin(frameCount/35))

        rect(0,0,5,20,5)

      pop()

      push()

        translate(5,0)

        rotate(sin(frameCount/20+PI))

        rect(0,0,5,20,5)

      pop()

      // rect(3,20,5,20)

    pop()

    push()

      translate(40,20)

      push()

        rotate(sin(frameCount/35))

        rect(0,0,5,20,5)

      pop()

      push()

        translate(5,0)

        rotate(sin(frameCount/20+PI))

        rect(0,0,5,20,5)

      pop()

      // rect(3,20,5,20)

    pop()

    translate(-22,-5)

    rect(0,0,20,25,5)

    fill(255, 179, 160)

    rect(0,15,20,10,5)

    fill(0,60)

    ellipse(6,20,6)

    ellipse(14,20,6)

    fill(0)

    ellipse(5,8,3)

    ellipse(15,8,3)

    fill(247, 216, 150)

    rect(0,-8,3,10,10)

    rect(16,-8,3,10,10)

  pop()

}

function drawHouse(x,y){

  push()

    translate(x,y)

    // rect(0,0,100,50)

    fill(199, 77, 93)

    rect(20,0,80,40)

    fill(219, 77, 93)

    rect(0,0,80,40)

    fill(255,50)

    rect(0,0,80,6)

    stroke(255,100)

    strokeWeight(2)

    noFill()

    rect(40,10,20,10)

    rect(40,20,20,10)

    rect(40,10,10,20)

    noStroke()

    //屋頂

    shearX(PI/12)

    fill(68, 61, 63)

    rect(20,0,80,-20)

    shearX(-PI/6)

    fill(58, 51, 53)

    rect(0,0,80,-20)

  pop()

}

​

function draw() {

  let cc = color("#6AD5CB")

  cc.setAlpha(100)

  noStroke()

  push()

    push()

      rectMode(CENTER)

      for(var i=0;i<height;i+=100){

        push()

          cc.setBlue(cc._getBlue()+5)

          fill(cc)

          rotate(random(-1,1)/10)

          rect(width/2,i,width*1.2,100)

        pop()

      }

    pop()

​

          // drawingContext.shadowBlur =30;

    noStroke()

    // rect(0,0,width,height)

    // fill("#85877C")

    // rect(0,height-50,width,50)

    translate(width/2 + cos(frameCount/20 + mouseX/50)*50,0)

    // stroke(255,100)

    noFill()

    drawingContext.shadowColor = color(0,30);

    drawingContext.shadowOffsetY = 0

    drawingContext.shadowOffsetX = 0

    for(var i=0;i<height;i+=10){

      strokeWeight(random(1)+3)

      fill(255,random(40,70))

      if (random()<0.1){

        stroke(255)

      }else{

        noStroke()

      }

      let nn = noise(i/10,frameCount/100)*20+(height-i)/9

      let stAng = sin(i+frameCount/5)

      arc(0,i-100,nn*8,nn*3,stAng,stAng+PI*1.5)

​

    }

    noStroke()

    drawingContext.shadowColor = color(0,30);

    drawingContext.shadowOffsetY = 2

    drawingContext.shadowOffsetX = 2

    for(var o=0;o<15;o++){

      let ang = o*5+frameCount/40+ mouseX/100

      let nn = noise(i/10,frameCount/100)*20+(height-i)/9

      let r = nn*(20+noise(o,frameCount/50)*5)

      let rot = noise(o,frameCount/100)*10

      fill('blue')

      push()

        translate(cos(ang)*r,sin(ang)*r+o*50)

        rotate(rot)

        if (o%6!=0){

          drawCow(0,0)

        }else{

          drawHouse(0,0)

        }

      pop()

    }

    pop()

  push()

    blendMode(MULTIPLY)

    image(overAllTexture,0,0)

  pop()

  drawHouse(50,height-50)

  // ellipse(mouseX, mouseY, 20, 20);

}