Genuary 6: Make a landscape using only primitive shapes.

let storyHeight= 60

let treeStamp, pondStamp

let waterColors=['#76bdce','#c2eccf','#c0e5c3','#ccf2ea','#66a5a4']

let treeColors= ["#3d575d","#577774","#596a60","#6b938c","#96b49c","#7e8839","#989aa4","#573d24"]

​

​

function preload(){

font= loadFont('FamiljenGrotesk-VariableFont_wght.ttf')

}

​

function setup() {

  createCanvas(400, 400); 

  background('#f4f1de') 

  imageMode(CENTER)

  treeStamp= createGraphics(75, 100)

  pondStamp= createGraphics(200, 200)

  for(let i=0; i<600; i++){

    treeStamp.fill(255)

    treeStamp.noStroke();

    treeStamp.ellipse(random(0, 100), random(0, 100), random(9))

  }

  treeStamp.erase()

  treeStamp.triangle(0, 0, 0, 100, 37, 0)

  treeStamp.triangle(75, 0, 75, 100, 39, 0)

  treeStamp.noErase()

  for(let i=0; i<500; i++){

    pondStamp.fill(255)

    pondStamp.noStroke();

    let d=random(10)

    let a=random(TAU)

    let r= random(100-(d*0.5))

    pondStamp.ellipse(100+cos(a)*r, 100+sin(a)*r, d)

  }

  fill("#AADEF4")

  rect(40, 40, 320, 320)

}

​

function draw(){

  noStroke()  

if(frameCount<200){ 

  for(let i=0; i<10; i++){

    let a= random(PI, TAU)

    let r=  map(frameCount, 0, 200, 300, 150)+ random(-10, 10)

    let s= map(r, 200, 300, 80, 20)

    tint(colorMixer(a, treeColors, 255))

    image(treeStamp, width/2+cos(a)*r, 380+sin(a)*r, s, s)

    // tint(colorMixer(a+0.2, treeColors, 255))

    // image(treeStamp, width/2+cos(a)*r, 370+sin(a)*r+(s*0.1), s, s)

  }

}

  if(frameCount<400){

push()

  imageMode(CENTER)

  translate(width/2, 380)

  strokeWeight(3)

  //rotate(random(TAU))

  stroke(colorMixer(width/2, waterColors, 100))

  //let scaler= (noise(frameCount)*0.6) + 0.5

  noFill()

  ellipse(0, 0, frameCount, frameCount*0.5) 

pop()

  }

  if(frameCount==400){

    for(let a=PI; a<TAU; a+=TAU/50){

      push()

      imageMode(CENTER) 

      let r=200

      let s= random(100)

      translate(width/2+cos(a)*(r-s*0.5), 380+sin(a)*(r*0.5-s*0.5))

      rotate(a+HALF_PI+PI)

    //  blendMode(MULTIPLY)

      tint(colorMixer(a, treeColors, 50))

      image(treeStamp, 0, 0, s, s)

      pop()

    }

    noLoop()

  }

  fill('#f4f1de')

  noStroke()

  rect(0, 0, width, 60)

  rect(0, 0, 60, height)

  rect(340, 0, 60, height)

  rect(0, 340, width, 60)

  noFill()

  stroke(100)

  textFont(font)

   fill(100)

  strokeWeight(1)

  stroke(100)

  text('1.6', 20, 380)  

}

​

function colorMixer(x, colorArray, alpha) {

  let c = noise(x*10, frameCount) * colorArray.length

  let c1 = floor(c)

  let c2 = floor(c + 1) % colorArray.length

  let color1 = colorArray[c1]

  let color2 = colorArray[c2]

  let mix = fract(c)

  let coloring = color(spectral.mix(color1, color2, mix))

  coloring.setAlpha(alpha)

  return coloring

}

​