Initial release

scripts/icons/render.swift

@@ -0,0 +1,183 @@
+// swift scripts/icons/render.swift <out-dir>; run via scripts/make-icons.sh.
+import AppKit
+import CoreGraphics
+import ImageIO
+import UniformTypeIdentifiers
+
+struct Knot: Decodable {
+    let icon: [[[Double]]]
+    let iconStroke: Double
+}
+
+let args = CommandLine.arguments
+let here = URL(fileURLWithPath: #filePath).deletingLastPathComponent()
+let knot = try JSONDecoder().decode(Knot.self, from: Data(contentsOf: here.appendingPathComponent("knot.json")))
+let out = URL(fileURLWithPath: args.count > 1 ? args[1] : ".")
+
+func color(_ hex: UInt32, _ alpha: CGFloat = 1) -> CGColor {
+    CGColor(srgbRed: CGFloat(hex >> 16 & 0xFF) / 255, green: CGFloat(hex >> 8 & 0xFF) / 255,
+            blue: CGFloat(hex & 0xFF) / 255, alpha: alpha)
+}
+
+/// Apple's icon shape is close to a superellipse with exponent 5.
+func squircle(_ r: CGRect) -> CGPath {
+    let path = CGMutablePath()
+    let steps = 720
+    for i in 0...steps {
+        let t = Double(i) / Double(steps) * 2 * .pi
+        let c = cos(t), s = sin(t)
+        let x = r.midX + r.width / 2 * CGFloat(copysign(pow(abs(c), 2.0 / 5), c))
+        let y = r.midY + r.height / 2 * CGFloat(copysign(pow(abs(s), 2.0 / 5), s))
+        if i == 0 { path.move(to: CGPoint(x: x, y: y)) } else { path.addLine(to: CGPoint(x: x, y: y)) }
+    }
+    path.closeSubpath()
+    return path
+}
+
+func verticalGradient(_ ctx: CGContext, in rect: CGRect, top: CGColor, bottom: CGColor) {
+    let gradient = CGGradient(colorsSpace: CGColorSpace(name: CGColorSpace.sRGB), colors: [top, bottom] as CFArray, locations: [0, 1])!
+    ctx.drawLinearGradient(gradient, start: CGPoint(x: rect.midX, y: rect.minY), end: CGPoint(x: rect.midX, y: rect.maxY), options: [])
+}
+
+/// The knot as drawn on the icon: `box` is the icon's body, and the knot keeps the icon's margins inside it.
+func drawKnot(_ ctx: CGContext, in box: CGRect) {
+    let scale = box.width / 100
+    let width = knot.iconStroke * scale
+    for strand in knot.icon {
+        let line = CGMutablePath()
+        for (i, p) in strand.enumerated() {
+            let point = CGPoint(x: box.minX + p[0] * scale, y: box.minY + p[1] * scale)
+            if i == 0 { line.move(to: point) } else { line.addLine(to: point) }
+        }
+        let stroked = line.copy(strokingWithWidth: width, lineCap: .round, lineJoin: .round, miterLimit: 4)
+        ctx.saveGState()
+        ctx.addPath(stroked)
+        ctx.clip()
+        verticalGradient(ctx, in: box, top: color(0xFFA37A), bottom: color(0xFF7345))
+        ctx.restoreGState()
+    }
+}
+
+func render(size: Int, body: CGRect, shadow: Bool, to url: URL) {
+    let s = CGFloat(size)
+    let ctx = CGContext(data: nil, width: size, height: size, bitsPerComponent: 8, bytesPerRow: 0,
+                        space: CGColorSpace(name: CGColorSpace.sRGB)!, bitmapInfo: CGImageAlphaInfo.premultipliedLast.rawValue)!
+    ctx.translateBy(x: 0, y: s)
+    ctx.scaleBy(x: 1, y: -1)
+    ctx.setShouldAntialias(true)
+    ctx.interpolationQuality = .high
+    let shape = squircle(body)
+
+    if shadow {
+        ctx.saveGState()
+        ctx.setShadow(offset: CGSize(width: 0, height: s * 0.012), blur: s * 0.028, color: color(0x000000, 0.32))
+        ctx.addPath(shape)
+        ctx.setFillColor(color(0x132441))
+        ctx.fillPath()
+        ctx.restoreGState()
+    }
+
+    ctx.saveGState()
+    ctx.addPath(shape)
+    ctx.clip()
+    verticalGradient(ctx, in: body, top: color(0x1C3563), bottom: color(0x0D1A33))
+    drawKnot(ctx, in: body)
+    ctx.restoreGState()
+
+    let image = ctx.makeImage()!
+    let dest = CGImageDestinationCreateWithURL(url as CFURL, UTType.png.identifier as CFString, 1, nil)!
+    CGImageDestinationAddImage(dest, image, nil)
+    CGImageDestinationFinalize(dest)
+}
+
+// Apple's grid: an 824-point body on a 1024-point canvas.
+let iconset = out.appendingPathComponent("AppIcon.iconset")
+try FileManager.default.createDirectory(at: iconset, withIntermediateDirectories: true)
+for (points, scale) in [(16, 1), (16, 2), (32, 1), (32, 2), (128, 1), (128, 2), (256, 1), (256, 2), (512, 1), (512, 2)] {
+    let size = points * scale
+    let inset = CGFloat(size) * 100 / 1024
+    let body = CGRect(x: inset, y: inset, width: CGFloat(size) - 2 * inset, height: CGFloat(size) - 2 * inset)
+    let name = scale == 1 ? "icon_\(points)x\(points).png" : "icon_\(points)x\(points)@2x.png"
+    render(size: size, body: body, shadow: size >= 64, to: iconset.appendingPathComponent(name))
+}
+
+// The Chrome Web Store wants 96 points of art with 16 of padding at 128.
+for (size, pad) in [(128, 16.0), (48, 2.0), (32, 1.0), (16, 0.0)] {
+    let body = CGRect(x: pad, y: pad, width: Double(size) - 2 * pad, height: Double(size) - 2 * pad)
+    render(size: size, body: body, shadow: false, to: out.appendingPathComponent("chrome-\(size).png"))
+}
+// The disk image window: Finder puts Knotchy at (180, 175) and Applications at (460, 175).
+// It's drawn taller than the 400-point window so a slightly taller window never shows an edge, and it's light
+// because Finder always draws the file names in black over a background picture, even in dark mode.
+func renderBackground(scale: Int, to url: URL) {
+    let width = 640, height = 440
+    let ctx = CGContext(data: nil, width: width * scale, height: height * scale, bitsPerComponent: 8, bytesPerRow: 0,
+                        space: CGColorSpace(name: CGColorSpace.sRGB)!, bitmapInfo: CGImageAlphaInfo.premultipliedLast.rawValue)!
+    ctx.scaleBy(x: CGFloat(scale), y: CGFloat(scale))
+    ctx.translateBy(x: 0, y: CGFloat(height))
+    ctx.scaleBy(x: 1, y: -1)
+    ctx.setFillColor(color(0xF5F5F7))
+    ctx.fill(CGRect(x: 0, y: 0, width: width, height: height))
+
+    let arrow = CGMutablePath()
+    arrow.move(to: CGPoint(x: 272, y: 175))
+    arrow.addLine(to: CGPoint(x: 366, y: 175))
+    arrow.move(to: CGPoint(x: 356, y: 165))
+    arrow.addLine(to: CGPoint(x: 368, y: 175))
+    arrow.addLine(to: CGPoint(x: 356, y: 185))
+    ctx.addPath(arrow)
+    ctx.setStrokeColor(color(0xFF8456))
+    ctx.setLineWidth(3)
+    ctx.setLineCap(.round)
+    ctx.setLineJoin(.round)
+    ctx.strokePath()
+
+    NSGraphicsContext.current = NSGraphicsContext(cgContext: ctx, flipped: true)
+    let caption = NSAttributedString(string: "Drag Knotchy to Applications", attributes: [
+        .font: NSFont.systemFont(ofSize: 12, weight: .medium),
+        .foregroundColor: NSColor(cgColor: color(0x86868B))!,
+    ])
+    let size = caption.size()
+    caption.draw(at: CGPoint(x: (CGFloat(width) - size.width) / 2, y: 300))
+    NSGraphicsContext.current = nil
+
+    let dest = CGImageDestinationCreateWithURL(url as CFURL, UTType.png.identifier as CFString, 1, nil)!
+    CGImageDestinationAddImage(dest, ctx.makeImage()!, [kCGImagePropertyDPIWidth: 72 * scale, kCGImagePropertyDPIHeight: 72 * scale] as CFDictionary)
+    CGImageDestinationFinalize(dest)
+}
+renderBackground(scale: 1, to: out.appendingPathComponent("dmg-background.png"))
+renderBackground(scale: 2, to: out.appendingPathComponent("dmg-background@2x.png"))
+// Chrome Web Store promo images. The store takes 24-bit PNGs only, hence no alpha.
+func renderPromo(width: Int, height: Int, to url: URL) {
+    let w = CGFloat(width), h = CGFloat(height), unit = h / 280
+    let ctx = CGContext(data: nil, width: width, height: height, bitsPerComponent: 8, bytesPerRow: 0,
+                        space: CGColorSpace(name: CGColorSpace.sRGB)!, bitmapInfo: CGImageAlphaInfo.noneSkipLast.rawValue)!
+    ctx.translateBy(x: 0, y: h)
+    ctx.scaleBy(x: 1, y: -1)
+    verticalGradient(ctx, in: CGRect(x: 0, y: 0, width: w, height: h), top: color(0x1C3563), bottom: color(0x0D1A33))
+
+    let title = NSAttributedString(string: "Open in Knotchy", attributes: [
+        .font: NSFont.systemFont(ofSize: 28 * unit, weight: .bold),
+        .foregroundColor: NSColor.white,
+    ])
+    let subtitle = NSAttributedString(string: "Open suspicious links in a\ndisposable, isolated browser.", attributes: [
+        .font: NSFont.systemFont(ofSize: 14 * unit, weight: .medium),
+        .foregroundColor: NSColor(white: 1, alpha: 0.72),
+    ])
+    let knotSide = 140 * unit, gap = 14 * unit, lineGap = 8 * unit
+    let left = (w - knotSide - gap - max(title.size().width, subtitle.size().width)) / 2
+    drawKnot(ctx, in: CGRect(x: left, y: (h - knotSide) / 2, width: knotSide, height: knotSide))
+
+    let top = (h - title.size().height - lineGap - subtitle.size().height) / 2
+    NSGraphicsContext.current = NSGraphicsContext(cgContext: ctx, flipped: true)
+    title.draw(at: CGPoint(x: left + knotSide + gap, y: top))
+    subtitle.draw(at: CGPoint(x: left + knotSide + gap, y: top + title.size().height + lineGap))
+    NSGraphicsContext.current = nil
+
+    let dest = CGImageDestinationCreateWithURL(url as CFURL, UTType.png.identifier as CFString, 1, nil)!
+    CGImageDestinationAddImage(dest, ctx.makeImage()!, nil)
+    CGImageDestinationFinalize(dest)
+}
+renderPromo(width: 440, height: 280, to: out.appendingPathComponent("promo-440x280.png"))
+renderPromo(width: 1400, height: 560, to: out.appendingPathComponent("marquee-1400x560.png"))
+print("rendered AppIcon.iconset, chrome-{16,32,48,128}.png, dmg-background{,@2x}.png and the store promos into \(out.path)")