Digital Counter

I'm still working with grid layouts and making sure they work properly in IE11... I'm also concerned with petrol prices at the minute at my local BP Garage... so I got to playing with digital readouts in preparation for making a CSS grid calculator and developed this. I'm using lodash merely because it helps with all the nice array functionality which we don't have in IE11.

p5 TAIL

After my last post, I got to work on another Wireframe conversion from Python to JS using p5, this one is from issue 6:

This is the code, simple eh? I did need a wee bit of help from Paweł Dawczak as I'm not totally au fait with the vagaries of Python.

const segment_size = 50;
const angle = 2.5;
const phase_step = 0.3;
const wobble_amount = 0.8;
const speed = 4.0;
const width = 600;
const height = 600;
let seconds = 0;
let tail_pieces = [];
function setup() {
    createCanvas(width, height);
    tail_pieces = Array.from({
        length: 10
    }, (_, i) => ({
        img: loadImage('images/tail_piece.png'),
        x: null,
        y: null
    }));
    tail_pieces.push({
        img: loadImage('images/tail_hook.png'),
        x: null,
        y: null
    });
}
function draw() {
    clear();
    seconds += 0.01;
    let x = width - (segment_size * 2);
    let y = height - (segment_size * 2);
    tail_pieces.forEach(function(p, index, arr) {
        p.x = x;
        p.y = y;
        const temp_angle = angle + wobble_amount * Math.sin(index * phase_step + seconds * speed);
        x += segment_size * Math.cos(temp_angle)
        y -= segment_size * Math.sin(temp_angle)
    });
    tail_pieces.filter((p,index) => index % 2 === 0 && image(p.img, p.x, p.y));
    tail_pieces.filter((p,index) => index % 2 === 1 && image(p.img, p.x, p.y));
}

p5-EXPLOSIONS

I love Wireframe magazine, mainly because it seems like a blast from the past where I eagerly bought the latest ZX Spectrum magazine for the game listing... then spent hours upon hours entering the code into the machine to play a game. I know there were often bugs, but the debugging was sometimes the best part. I know I'm not alone in this as at least Ben Collins joins me in an appreciation of debugging.

Where I'm sort of sad though is that most of the smaller listings are in Python and, while I can find my way around Python, I much prefer JS, so I've started converting the listings to JS using p5. I've translated the Parallax example from issue 3, but the one above (from issue 1) was the most challenging yet as I needed to re-architect the program to work with p5. It wasn't all that hard really, but it was fun, especially getting my head around the trigonometry.

This is the JS code, should you want to enter it yourself:

const width = 800;
const height = 400;
const drag = 0.8;
const particles = [];
const framerate = 10;
const speed = 60;

const explode = () => {
    const x = random(width);
    const y = random(height);
    for (var i = 0; i < 100; i++) {
        particles.push({
            x, 
            y, 
            vx: speed * pow(random(1), 0.5) * sin(random(2 * PI)), 
            vy: speed * pow(random(1), 0.5) * cos(random(2 * PI)), 
            age: 0, 
            birth: new Date()
        });
    }
}

function setup() {
    createCanvas(width, height);
    stroke(255, 230, 128);
    frameRate(framerate);
    explode();
}

function draw() {
    if (frameCount % 10 === 0) {
        explode();
    }
    clear();
    background(0);
    particles.forEach(function(p, index, arr) {
        if (p.age <= 2) {
            const age = new Date().getSeconds() - p.birth.getSeconds();
            point(p.x, p.y);
            p.x = p.x += p.vx * p.age;
            p.y = p.y += p.vy * p.age;
            p.vx = p.vx * Math.pow(drag, p.age);
            p.vy = p.vy * Math.pow(drag, p.age);
            p.age = age;
        }else{
            arr.splice(index, 1);
        }
    });
}