Pixelbits

Hi, I'm @jasonlong. I'm trying to make a small creative coding sketch every day(ish) to learn new things. All code is available in the GitHub repo.

I thought the Bang & Olufsen BeoSound Moment was pretty slick looking and tried to make something similar. This required manually creating an angular gradient since paper.js only supports linear and radial.

<script type="text/paperscript" canvas="canvas-0021">
view.element.style.backgroundColor = '#111';

var color = new Color('#ead839');
var inc = 0.2;
var circle = new Group();
var radius = view.size.width * 0.25;

for (a=360; a>0; a-=inc) {
    color.hue += inc;
    var line = Path.Line({
        from: [0, 0],
        to: [radius, radius],
        strokeColor: color
    });
    line.rotate(a, [0, 0]);
    circle.addChild(line);
}

circle.opacity = 0.75;
circle.rotate(220);

var circleMid = new Shape.Circle([0, 0], radius * 1.41 * 0.75);

circleMid.fillColor = "#fff";
circleMid.opacity = 0.1;
circleMid.blendMode = 'color-dodge';

var circleInner = new Shape.Circle([0, 0], radius * 1.41 * 0.48);
circleInner.fillColor = "#fff";
circleInner.opacity = 0.15;
circleInner.blendMode = 'color-dodge';

var hole = new Shape.Circle([0, 0], radius * 1.41 * 0.2);
hole.fillColor = "#111";

project.activeLayer.position = view.center;
</script>

<canvas id="canvas-0021" height="300"></canvas>