p5 Clock (HUMANS SINCE 1982) 2×3

I saw this a little while back so this week I coded it using p5:

A nice bit of modular JS too, so it was:

Clock.js

export class Clock {

  constructor(p5, x, y, width, multiplier) {
    this.degrees = 8 * multiplier
    this.ticker = false
    this.p5 = p5
    this.x = x
    this.y = y
    this.width = width
    this.arm = 0.85
    this.minute = 0
    this.hour = 0
    this.pg = p5.createGraphics(width, width)
  }

  update(minute, hour) {
    if(this.minute !== minute) {
      if(this.minute + 1 === this.degrees){
        this.minute = 0
      } else {
        this.minute++
      }
    }
    if(this.hour !== hour) {
      if(this.hour - 1 < 0){
        this.hour = this.degrees
      } else {
        this.hour--
      }
    }
    return this.draw()
  }

  draw() {
    this.pg.noStroke()
    this.pg.fill(255)
    this.pg.rect(0, 0, this.width, this.width)
    this.pg.stroke(0)
    this.pg.strokeWeight(this.width * 0.1)
    let m = this.p5.map(
      this.minute, 
      0, 
      this.degrees, 
      0, 
      this.p5.TWO_PI
    ) - this.p5.HALF_PI
    let h = this.p5.map(
      this.hour,
      0,
      this.degrees,
      0,
      this.p5.TWO_PI
    ) - this.p5.HALF_PI
    this.pg.line(
      this.width / 2, 
      this.width / 2, 
      (this.width / 2) + this.p5.cos(m) * ((this.width / 2) * this.arm), 
      (this.width / 2) + this.p5.sin(m) * ((this.width / 2) * this.arm)
    )
    this.pg.line(
      this.width / 2, 
      this.width / 2, 
      (this.width / 2) + this.p5.cos(h) * ((this.width / 2) * this.arm), 
      (this.width / 2) + this.p5.sin(h) * ((this.width / 2) * this.arm)
    )
    return this.pg
  }
}

Numeral.js

import { Clock } from "./Clock.js"

export class Numeral {

  constructor(p5, x, y, unitWidth = 30, degreeMuliplier = 5) {
    this.num = 0
    this.p5 = p5
    this.x = x
    this.y = y
    this.unitWidth = unitWidth
    this.degreeMuliplier = degreeMuliplier
    this.Clocks = [
      new Clock(p5, x, y, unitWidth, degreeMuliplier),
      new Clock(p5, x + unitWidth, y, unitWidth, degreeMuliplier),
      new Clock(p5, x, y + unitWidth, unitWidth, degreeMuliplier),
      new Clock(p5, x + unitWidth, y + unitWidth, unitWidth, degreeMuliplier),
      new Clock(p5, x, y + (unitWidth * 2), unitWidth, degreeMuliplier),
      new Clock(p5, x + unitWidth, y + (unitWidth * 2), unitWidth, degreeMuliplier)
    ]
    this.Numbers = [
      [[2,4],[4,6],[0,4],[0,4],[0,2],[0,6]],
      [[5,5],[4,4],[5,5],[0,4],[5,5],[0,0]],
      [[2,2],[4,6],[2,4],[0,6],[0,2],[6,6]],
      [[2,2],[4,6],[2,2],[0,6],[2,2],[0,6]],
      [[4,4],[4,4],[0,2],[0,4],[5,5],[0,0]],
      [[2,4],[6,6],[0,2],[4,6],[2,2],[0,6]],
      [[2,4],[6,6],[0,4],[4,6],[0,2],[0,6]],
      [[2,2],[4,6],[5,5],[0,4],[5,5],[0,0]],
      [[2,4],[4,6],[0,2],[0,6],[0,2],[0,6]],
      [[2,4],[4,6],[0,2],[0,4],[2,2],[0,6]]
    ]
  }

  draw(){
    this.Clocks.forEach((c, i) => this.p5.image(c.update(...this.Numbers[this.num][i].map(e => e * this.degreeMuliplier)), c.x, c.y))
  }
}

script.js

import { Numeral } from "./Numeral.js"

new p5(p5 => {
  const style = window.getComputedStyle(document.querySelector("body"), null)
  const bodyWidth = parseInt(style.getPropertyValue("width"), 10)
  const Numerals = []
  
  p5.setup = () => {
    p5.createCanvas(bodyWidth, bodyWidth)
    Numerals.push(new Numeral(p5, 0, 0, 50))
    Numerals.push(new Numeral(p5, 100, 0, 50))
    Numerals.push(new Numeral(p5, 200, 0, 50))
    Numerals.push(new Numeral(p5, 300, 0, 50))
    Numerals.push(new Numeral(p5, 400, 0, 50))
    Numerals.push(new Numeral(p5, 500, 0, 50))
  }

  p5.draw = () => {
    const date = new Date
    const hour = date.getHours().toString().split('')
    const minutes = date.getMinutes().toString().split('')
    const seconds = date.getSeconds().toString().split('')
    Numerals[0].num = hour.length === 1 ? 0 : hour[0]
    Numerals[1].num = hour.length === 1 ? hour[0] : hour[1]
    Numerals[2].num = minutes.length === 1 ? 0 :minutes[0]
    Numerals[3].num = minutes.length === 1 ? minutes[0] : minutes[1]
    Numerals[4].num = seconds.length === 1 ? 0 :seconds[0]
    Numerals[5].num = seconds.length === 1 ? seconds[0] : seconds[1]

    Numerals.forEach(numeral => numeral.draw())
  }

})

Is he alright?

By Alessandra Aghilar

We're doing a steps challenge at work, and I'm not doing all that bad really. Having Ankolysing Spondylitis is one of the worst conditions to have if you're lazy - the treatment regime involves lots of exercise. Not just exercise but the odd bit of Yoga (which I've written about before) and a massage, when I can afford it.

So this past Saturday, I suggested walking into Ely to she-who-must-be-obeyed, and we discussed routes. Witchford is connected directly to Ely by a continuation of the A142 called, unsurprisingly, Witchfrod Road. It's a busy old road and noisy as anything, but it is paralleled by a track called St. John's Road. St. John's Road is not used by anything other than farm traffic, the odd cyclist (myself included), walkers and the odd trail bike. As you can imagine, on a cold and wet Saturday afternoon, it's muddy - so I decided to wear the new wellies I got last week from Ely, and off we set along the "back way".

We set off in the early morning and immediately started bickering - so a good start really. The thing is, I knew something wasn't working quite right in my right foot... things seemed to be going adrift and my footing wasn't quite as sure as it needed to be. It sort of felt as though the sole wasn't quite fixed and was floating around under my foot. I had visions of some soggy bit of cardboard slowly dissolving around my foot and felt increasingly discombobulated. Upon getting to Lancaster Way, I called a halt and, sitting at the bus shelter, worked my right wellie off to see what I could see.

Sure enough, the thin rubber inner soul had made it halfway up the heel of my right foot. I peeled it off my sock and replaced it in the wellie. I knew I'd have to do it again as we approached town, but it held up well enough all along St. John's Road until we reached the corner with West End.

There are some bollards on the corner there, so I plumped myself down and tried to extract my foot from the wellie. The AS means I'm not overly flexible, so I sat there grunting to myself. Wedging my right foot beneath my left wellie-shod foot, I tried to pull it out, only to get a cramp and let out a cry. While stretching my leg, she-who-must-be-obeyed offered to get behind me, so I'd have something to lean against while trying to take my wellie off. We tried this, and I fair knocked her over, all the while grunting, moaning and failing to remove by wellie. I think that the soul had worked its way up my ankle, meaning that the upper foot was now wider than it had started. It all felt a little like trying to such a golf ball through a hosepipe, or something like that.

There's a drystone wall there, with all sorts of interesting protuberances which looked ideal for wedging a wellie into. So I staggered to my feet and went across the footpath. At which point, an old fella shouted from across the road, "Is he alright?". She-who-must-be-obeyed answered to the affirmative. I, finally able to relocate the rubber inner soul of the wellie, looked up and asked what he'd said. I guess the various grunts and groans and kerfuffle might've looked as though I were in some distress, but it was just a normal, chaotic, day for me. Bless him, though he really should've asked me first I think, though I guess he might've thought I was dangerous, so fair enough.

Update it's now 2 days later and my calves are aching like anything. Still, at least I'll look good in heels!