rigatoni – clock

let measure = 10
let size = 150
 
var sWave
var mWave
var hWave
 
var sChunks
var mChunks
 
function setup() {
  createCanvas(720, 720);
  sWave = new p5.Oscillator()
  mWave = new p5.Oscillator()
  hWave = new p5.Oscillator()
 
  sWave.setType("sin")
  sWave.amp(0.2)
  sWave.freq(second()*25)
 
  mWave.setType("triangle")
  mWave.amp(0.3)
  mWave.freq(minute()*20)
 
  hWave.setType("saw")
  hWave.amp(0.5)
  hWave.freq(hour()*5)
 
  sChunks = new SlimeChunks(0, 0)
  mChunks = new SlimeChunks(0, 0)
  hChunks = new SlimeChunks(0, 0)
  sWave.start()
  mWave.start()
  hWave.start()
}
 
function draw() {
  sWave.freq(second()*25)
  mWave.freq(minute()*10)
  hWave.freq(hour()*5)
 
  var s = second()
  var m = minute()
  var h = hour()
  background(0, 30)
  DrawTallyYear()
 
  var sPeriod = measure/second()
  var mPeriod = measure/minute()
  var hPeriod = measure/hour()
  var angle = map(millis()%(1000*measure), 0, 1000, 0, TWO_PI)
 
  var sXPos = map(millis()%(measure*1000), 0, measure*1000, -85, width+85)
  var mXPos = map(millis()%(measure*1000), 0, measure*1000, -85, width+85)
  var hXPos = map(millis()%(measure*1000), 0, measure*1000, -85, width+85)
 
  var sYPos = height/2 + 25*sin(angle/sPeriod)+(2*size)
  var mYPos = height/2 + 25*sin(angle/mPeriod)+0
  var hYPos = height/2 + 25*sin(angle/hPeriod)-(2*size)
 
 
 
  noStroke()
 
  fill(0, 255, 20)
  ellipse(sXPos, sYPos*1.5-390, size, size)
  fill(0, 155, 20)
  ellipse(mXPos, mYPos*1.5-170, size, size)
  fill(0, 135, 20)
  ellipse(hXPos, hYPos*1.5+30, size, size)
  fill(40)
  blendMode(HARD_LIGHT)
  ellipse(width/2, height/2-190, size*0.8, size*0.8)
  ellipse(width/2, height/2, size*0.8, size*0.8)
  ellipse(width/2, height/2+210, size*0.8, size*0.8)
 
	if(sYPos<=(height/2 + -25+(2.01*size)) ) {
		sChunks.AddChunk()
  }
  if(mYPos<=(height/2-24.9) ) {
		mChunks.AddChunk()
  }
 
  sChunks.DrawChunks()
  sChunks.UpdatePos(sXPos, sYPos)
  sChunks.UpdateChunks()
 
  mChunks.DrawChunks()
  mChunks.UpdatePos(mXPos, mYPos+75)
  mChunks.UpdateChunks()
}
 
function DrawTallyYear() {
	var tallies = floor(2018/5)
  var rem = 2018%5
  var cellSize = 100
  push()
  translate(-60, 40)
  for(var i=0; i<width; i+=cellSize) {
		for(var j=0; j<height; j+=cellSize) {
			DrawTallyMark(i, j, 5, 10)
    }
  }
  pop()
}
 
function DrawTallyMark(x, y, c, w) {
	for(var i=0; i<c*w; i+=w) {
    stroke(135)
		line(x+i+map(random(), 0, 1, -2, 2), y+map(random(), 0, 1, -2, 2), 
        x+i+map(random(), 0, 1, -2, 2), y+c*w+map(random(), 0, 1, -2, 2))
  }
  line(x-w+map(random(), 0, 1, -2, 2), y-w+map(random(), 0, 1, -2, 2), 
    	 x+c*w+map(random(), 0, 1, -2, 2), y+c*w+map(random(), 0, 1, -2, 2))
}
 
function SlimeChunks(x, y, amount=1) {
	this.x = x
  this.y = y
  this.amount = amount
  this.chunks = []
 
  this.AddChunk = function() {
		this.chunks.push([this.x+round(random()*25), this.y]) 
  }
 
  this.DrawChunks = function() {
		for(i=0; i<this.chunks.length; i++) {
      fill(0, 140, 0)
			ellipse(this.chunks[i][0], this.chunks[i][1], 10, 10) 
    }
  }
 
  this.UpdatePos = function(x, y) {
		this.x = x
    this.y = y
  }
 
  this.UpdateChunks = function() {
		for(i=0; i<this.chunks.length; i++) {
      this.chunks[i][0] -= noise(this.chunks[i][0])
      this.chunks[i][1] += 3
    }
  }
}

For my interpretation of the Clocks I wanted to create a sonic representation of time. Time is almost exclusively expressed visually, through clocks, sundials, or some other perpetual accumulation of visual data. In the context of sound though, even in a simple interpretation like mine, there's a tension of evolving dissonance and harmony; some points in time are pleasing to experience while others are unsettling and strange. In retrospect, this project would have been stronger had I left the visual component out altogether. In my rush to explore how far I could push different representations of oscillation I undermined my original idea, that being the audio representation of time.