title: Create an analogue clock

text:
# Question
Title: Create an analogue clock
# Create an analogue clock

Goal: To create a working analogue clock using any programming language.

Requirements:

* Your clock should feature at least the hour and minute pointers.
* The produced clock could be in the form of an image, an animation or ASCII-art.
* It is expected that the clock shows local time.

Optional:

* You might make your clock to show the seconds pointer in addition to the minutes and hours pointers.
* You might also make the timezone to be configurable if you wish.
* You are free to choose if you may either neglect or handle issues about leap seconds.
* You might think about what happens to your program if the user adjusts the system clock or if a daylight change occurs.

Since this is a , please be creative and draw some nice and beautiful clocks to deserve the upvotes. **Most upvoted answer wins**, with the exception that I will not accept my own answer.

Finally, it is recommended (but not required) that you post at least one screenshot (or text output in case of ASCII-art) of your clock in your answer. This way, people will not need to compile and run it to see what it is.

---

This question is intended to be a revival of a deleted question.

Note that it is not a duplicate of this other question. That question was a asking for ASCII-art. This one is not restricted to ASCII-art and is a instead, so the answers are expected to be very different.

# Answer
> 32 votes
# SVG + Javascript

**▶▶▶ Live demo here ◀◀◀**

This uses SVG's built-in animation functions to turn the hands, with a bit of additional Javascript to fetch the local time and set the initial hand positions. It works OK in Chrome and Safari, and should be compatible with most modern browsers as it doesn't use any filter effects.

```
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" width="400" height="400" version="1.0">
  <defs>
    <linearGradient id="a" x1="0%" y1="100%" x2="0%" y2="0%">
      <stop offset="0%" style="stop-color:#777799"/>
      <stop offset="100%" style="stop-color:#ffffff"/>
    </linearGradient>
    <linearGradient id="b" x1="0%" y1="100%" x2="0%" y2="0%">
      <stop offset="0%" style="stop-color:#ffffff"/>
      <stop offset="25%" style="stop-color:#b6b6cc"/>
      <stop offset="40%" style="stop-color:#515177"/>
      <stop offset="48%" style="stop-color:#ffffff"/>
      <stop offset="56%" style="stop-color:#ffffff"/>
      <stop offset="75%" style="stop-color:#8b8baa"/>
      <stop offset="98%" style="stop-color:#efeff4"/>
      <stop offset="100%" style="stop-color:#fbfbfc"/>
    </linearGradient>
    <linearGradient id="c" x1="0%" y1="100%" x2="0%" y2="0%">
      <stop offset="0%" style="stop-color:#ffffff"/>
      <stop offset="100%" style="stop-color:#777799"/>
    </linearGradient>
    <radialGradient id="d" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:#ffffff"/>
      <stop offset="40%" style="stop-color:#ffffff"/>
      <stop offset="70%" style="stop-color:#e6e6ee"/>
      <stop offset="92%" style="stop-color:#b6b6cc"/>
      <stop offset="100%" style="stop-color:#636388"/>
    </radialGradient>
    <radialGradient id="e" cx="50%" cy="150%" r="200%" fx="50%" fy="150%">
      <stop offset="0%" style="stop-color:#ffffff;stop-opacity:0"/>
      <stop offset="59%" style="stop-color:#ffffff;stop-opacity:0"/>
      <stop offset="60%" style="stop-color:#ffffff;stop-opacity:0.6"/>
      <stop offset="70%" style="stop-color:#ffffff;stop-opacity:0.3"/>
      <stop offset="100%" style="stop-color:#ffffff;stop-opacity:0.0"/>
    </radialGradient>
  </defs>
  <g transform="translate(200 200)">
    <circle cx="0" cy="0" r="200" fill="#cecedd"/>
    <circle cx="0" cy="0" r="196" stroke="url(#a)" stroke-width="5" fill="url(#b)"/>
    <circle cx="0" cy="0" r="170" stroke="url(#c)" stroke-width="4" fill="url(#d)"/>
    <circle cx="0" cy="0" r="172" stroke="#ffffff" stroke-width="0.5" fill="none"/>
    <circle cx="0" cy="0" r="193.5" stroke="#ffffff" stroke-width="0.5" fill="none"/>
    <g id="O">
      <polygon points="4,155 4,130 -4,130 -4,155" style="fill:#777799;stroke:#313155;stroke-width:1"/>
      <polygon points="4,-155 4,-130 -4,-130 -4,-155" style="fill:#777799;stroke:#313155;stroke-width:1"/>
    </g>
    <g transform="rotate(30)"><use xlink:href="#O"/></g>
    <g transform="rotate(60)"><use xlink:href="#O"/></g>
    <g transform="rotate(90)"><use xlink:href="#O"/></g>
    <g transform="rotate(120)"><use xlink:href="#O"/></g>
    <g transform="rotate(150)"><use xlink:href="#O"/></g>
    <polygon id="h" points="6,-80 6,18 -6,18 -6,-80" style="fill:#232344">
      <animateTransform id="ht" attributeType="xml" attributeName="transform" type="rotate" from="000" to="000" begin="0" dur="86400s" repeatCount="indefinite"/>
    </polygon>
    <polygon id="m" points="3.5,-140 3.5,23 -3.5,23 -3.5,-140" style="fill:#232344">
      <animateTransform id="mt" attributeType="xml" attributeName="transform" type="rotate" from="000" to="000" begin="0" dur="3600s" repeatCount="indefinite"/>
    </polygon>
    <polygon id="s" points="2,-143 2,25 -2,25 -2,-143" style="fill:#232344">
      <animateTransform id="st" attributeType="xml" attributeName="transform" type="rotate" from="000" to="000" begin="0" dur="60s" repeatCount="indefinite"/>
    </polygon>
    <circle cx="0" cy="0" r="163" fill="url(#e)"/>
  </g>
  <script type="text/javascript"><![CDATA[
    var d = new Date();
    var s = d.getSeconds();
    var m = d.getMinutes() + s/60;
    var h = (d.getHours() % 12) + m/60 + s/3600;
    document.getElementById('st').setAttribute('from',s*6);
    document.getElementById('mt').setAttribute('from',m*6);
    document.getElementById('ht').setAttribute('from',h*30);
    document.getElementById('st').setAttribute('to',360+s*6);
    document.getElementById('mt').setAttribute('to',360+m*6);
    document.getElementById('ht').setAttribute('to',360+h*30);
  ]]></script>
</svg>

```

# Answer
> 18 votes
# Java 8

I made a clock that changes its colors accordingly to the hour of day, showing local time. As the time passes, it will slowly change it colors, using brighter colors at day and darker colors at night.

The window is resizable and the clock will resize automatically to whatever size you choose.

Further, if the user adjusts the system clock or if a daylight time change happens, the clock will automatically reflect that.

There are two forms to run it:

1. Running the `ClockDemo` file, i.e. `java clock.ClockDemo`. This will open a window and you will see the clock there.
2. Running the `ClockSave` file, i.e. `java clock.ClockSave filename width height [HH:mm:ss]`. This will just save the clock in a PNG file with the given file name, width and height. The clock will be draw with the given time, or if that is omitted, with current time. For example, if you run it as `java clock.ClockSave clock.png 600 500 12:38:24` it will save the clock in a 600x500 image in a `clock.png` file and the clock will be showing 12:38:24 AM. Use hours in the 00-23 interval.

---

## Screenshots

Here are some screenshots and generated files:

### 00:36:50 AM:

### 02:38:51 AM:

### 06:42:13 AM:

### 11:15:28 AM:

### 05:02:37 PM:

### 07:11:30 PM:

### 09:29:34 PM:

---

## Source code

I separated the source in five different files in a package called `clock`.

Also available at **GitHub**.

### ClockDemo.java

```
package clock;

import java.awt.EventQueue;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
import javax.swing.JFrame;

public class ClockDemo {
    public static void main(String[] args) {
        EventQueue.invokeLater(ClockDemo::runIt);
    }

    private static void runIt() {
        final JFrame j = new JFrame();
        j.setTitle("JClock");
        final JClock clock = new JClock(new CoolPaint());

        j.addWindowListener(new WindowAdapter() {
            @Override
            public void windowClosing(WindowEvent e) {
                clock.stop();
                j.dispose();
            }
        });

        j.add(clock);
        j.setBounds(20, 20, 600, 500);
        j.setVisible(true);
        clock.start();
    }
}

```

### ClockSave.java

```
package clock;

import java.io.IOException;
import java.time.LocalTime;
import java.time.format.DateTimeFormatter;
import java.time.format.DateTimeParseException;

public class ClockSave {
    public static void main(String[] args) {

        // Too much arguments.
        if (args.length < 3 || args.length > 4) {
            System.out.println("Bad usage: Should be java clock.ClockSave filename width height [HH:mm:ss]");
            return;
        }

        // Parse the image size.
        int h, w;
        try {
            w = Integer.parseInt(args[1]);
            h = Integer.parseInt(args[2]);
        } catch (NumberFormatException e) {
            System.out.println("Bad usage: Should be java clock.ClockSave filename width height [HH:mm:ss]");
            return;
        }

        // Parse the intended time.
        LocalTime time;
        if (args.length == 4) {
            try {
                DateTimeFormatter df = DateTimeFormatter.ofPattern("HH:mm:ss");
                time = LocalTime.parse(args[3], df);
            } catch (DateTimeParseException e) {
                System.out.println("Bad usage: Should be java clock.ClockSave filename width height [HH:mm:ss]");
                return;
            }
        } else {
            time = LocalTime.now();
        }

        // Save to an image.
        try {
            new CoolPaint().saveClock(w, h, time, args[0]);
        } catch (IOException e) {
            System.out.println("Error on image output: " + e.getMessage());
        }
    }
}

```

### JClock.java

```
package clock;

import java.awt.Graphics;
import java.awt.Graphics2D;
import java.time.LocalTime;
import java.time.temporal.ChronoField;
import javax.swing.JComponent;

public class JClock extends JComponent {
    private static final long serialVersionUID = 1L;

    private final CoolPaint paint;
    private final Object lock;
    private Thread updater;

    public JClock(CoolPaint paint) {
        this.paint = paint;
        this.lock = new Object();
    }

    private void runClock() {
        int lastTime = -1;
        try {
            while (isRunning()) {
                Thread.sleep(10);
                int t = time();
                if (t != lastTime) {
                    lastTime = t;
                    repaint();
                }
            }
        } catch (InterruptedException e) {
            // Do nothing, the thread will die naturally.
        }
    }

    private int time() {
        return LocalTime.now().get(ChronoField.SECOND_OF_DAY);
    }

    private boolean isRunning() {
        synchronized (lock) {
            return updater == Thread.currentThread();
        }
    }

    public void start() {
        synchronized (lock) {
            if (updater != null) return;
            updater = new Thread(this::runClock);
            updater.start();
        }
    }

    public void stop() {
        synchronized (lock) {
            updater = null;
        }
    }

    @Override
    public void paintComponent(Graphics g) {
        paint.paintClock(getWidth(), getHeight(), time(), (Graphics2D) g);
    }
}

```

### ClockPaint.java

```
package clock;

import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.time.LocalTime;
import java.time.temporal.ChronoField;
import javax.imageio.ImageIO;

public interface ClockPaint {

    public void paintClock(int width, int height, int seconds, Graphics2D g2);

    public default void paintClock(int width, int height, LocalTime time, Graphics2D g2) {
        paintClock(width, height, time.get(ChronoField.SECOND_OF_DAY), g2);
    }

    public default void paintClock(int width, int height, Graphics2D g2) {
        paintClock(width, height, LocalTime.now(), g2);
    }

    public default void saveClock(int width, int height, String fileName) throws IOException {
        saveClock(width, height, LocalTime.now(), fileName);
    }

    public default void saveClock(int width, int height, LocalTime time, String fileName) throws IOException {
        saveClock(width, height, time.get(ChronoField.SECOND_OF_DAY), fileName);
    }

    public default void saveClock(int width, int height, int seconds, String fileName) throws IOException {
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB);
        paintClock(width, height, seconds, (Graphics2D) image.getGraphics());
        String f = fileName.endsWith(".png") ? fileName : fileName + ".png";
        ImageIO.write(image, "png", new File(f));
    }
}

```

### CoolPaint.java

```
package clock;

import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Font;
import java.awt.FontMetrics;
import java.awt.GradientPaint;
import java.awt.Graphics2D;
import java.awt.RadialGradientPaint;
import java.awt.RenderingHints;
import java.awt.geom.AffineTransform;
import java.awt.geom.Point2D;

public class CoolPaint implements ClockPaint {

    private static final int SECONDS_IN_MINUTE = 60;
    private static final int SECONDS_IN_HALF_HOUR = 30 * SECONDS_IN_MINUTE;
    private static final int SECONDS_IN_HOUR = 60 * SECONDS_IN_MINUTE;
    private static final int SECONDS_IN_12_HOURS = 12 * SECONDS_IN_HOUR;

    private static final int AM_0_00 = 0;
    private static final int AM_3_00 = 3 * SECONDS_IN_HOUR;
    private static final int AM_4_30 = 4 * SECONDS_IN_HOUR + SECONDS_IN_HALF_HOUR;
    private static final int AM_7_30 = 7 * SECONDS_IN_HOUR + SECONDS_IN_HALF_HOUR;
    private static final int AM_12_00 = 12 * SECONDS_IN_HOUR;
    private static final int PM_4_30 = 16 * SECONDS_IN_HOUR + SECONDS_IN_HALF_HOUR;
    private static final int PM_7_30 = 19 * SECONDS_IN_HOUR + SECONDS_IN_HALF_HOUR;
    private static final int PM_9_00 = 21 * SECONDS_IN_HOUR;
    private static final int PM_12_00 = 24 * SECONDS_IN_HOUR;

    private static final Color BLACK = new Color(0, 0, 0);
    private static final Color DARK_GRAY = new Color(32, 32, 32);
    private static final Color DARK_BLUE = new Color(0, 0, 128);
    private static final Color PURPLE = new Color(128, 0, 128);
    private static final Color CYAN = new Color(0, 255, 255);
    private static final Color YELLOW = new Color(225, 225, 0);
    private static final Color PALE_YELLOW = new Color(224, 224, 64);
    private static final Color RED = new Color(255, 0, 0);
    private static final Color GREEN = new Color(0, 255, 0);
    private static final Color LIGHT_BLUE = new Color(128, 128, 255);
    private static final Color SKY_CYAN = new Color(48, 224, 224);

    private static final Color[] COLOR_CYCLE = {
        DARK_GRAY, LIGHT_BLUE, RED, PALE_YELLOW, GREEN, SKY_CYAN, LIGHT_BLUE, DARK_GRAY
    };

    private static final int RADIAL_PERIOD_LENGTH = PM_12_00 / COLOR_CYCLE.length;
    private static final String[] ROMAN = {"", "I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX", "X", "XI", "XII"};

    private static class Painter {
        private final int width;
        private final int height;
        private final int seconds;
        private final int radius;
        private final Graphics2D g2;
        private final int cx;
        private final int cy;
        private final int secondColorIndex;
        private final int secondsInPeriod;
        private final Color pointersAndNumbersColor;

        public Painter(int width, int height, int seconds, Graphics2D g2) {
            this.width = width;
            this.height = height;
            this.seconds = seconds;
            this.radius = Math.min(width / 2, height / 2);
            this.cx = width / 2;
            this.cy = height / 2;
            this.g2 = g2;
            g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
            this.secondColorIndex = seconds / RADIAL_PERIOD_LENGTH;
            this.secondsInPeriod = seconds % RADIAL_PERIOD_LENGTH;

            int startIndex = (secondColorIndex + COLOR_CYCLE.length + 5) % COLOR_CYCLE.length;
            int endIndex = (secondColorIndex + COLOR_CYCLE.length + 6) % COLOR_CYCLE.length;
            Color color1 = COLOR_CYCLE[startIndex];
            Color color2 = COLOR_CYCLE[endIndex];
            this.pointersAndNumbersColor = mixColors(color1, color2, 0, RADIAL_PERIOD_LENGTH, secondsInPeriod);
        }

        private int mixColorComponent(int startComponent, int endComponent, double position) {
            int difference = endComponent - startComponent;
            return startComponent + (int) (difference * position);
        }

        private Color mixColors(Color startColor, Color endColor, int startTime, int endTime, int currentTime) {
            double normalized = (currentTime - startTime) / (double) (endTime - startTime);
            return new Color(
                    mixColorComponent(startColor.getRed(), endColor.getRed(), normalized),
                    mixColorComponent(startColor.getGreen(), endColor.getGreen(), normalized),
                    mixColorComponent(startColor.getBlue(), endColor.getBlue(), normalized));
        }

        private Color upperBackgroundColor() {
            if (seconds < 0) throw new IllegalArgumentException();
            if (seconds <= AM_3_00) return BLACK;
            if (seconds <= AM_4_30) return mixColors(BLACK, DARK_BLUE, AM_3_00, AM_4_30, seconds);
            if (seconds <= AM_7_30) return mixColors(DARK_BLUE, CYAN, AM_4_30, AM_7_30, seconds);
            if (seconds <= AM_12_00) return CYAN;
            if (seconds <= PM_4_30) return CYAN;
            if (seconds <= PM_7_30) return mixColors(CYAN, DARK_BLUE, PM_4_30, PM_7_30, seconds);
            if (seconds <= PM_9_00) return mixColors(DARK_BLUE, BLACK, PM_7_30, PM_9_00, seconds);
            if (seconds <= PM_12_00) return BLACK;
            throw new IllegalArgumentException();
        }

        private Color lowerBackgroundColor() {
            if (seconds < 0) throw new IllegalArgumentException();
            if (seconds <= AM_3_00) return mixColors(BLACK, DARK_BLUE, AM_0_00, AM_3_00, seconds);
            if (seconds <= AM_4_30) return mixColors(DARK_BLUE, PURPLE, AM_3_00, AM_4_30, seconds);
            if (seconds <= AM_7_30) return mixColors(PURPLE, YELLOW, AM_4_30, AM_7_30, seconds);
            if (seconds <= AM_12_00) return mixColors(YELLOW, CYAN, AM_7_30, AM_12_00, seconds);
            if (seconds <= PM_4_30) return mixColors(CYAN, YELLOW, AM_12_00, PM_4_30, seconds);
            if (seconds <= PM_7_30) return mixColors(YELLOW, PURPLE, PM_4_30, PM_7_30, seconds);
            if (seconds <= PM_9_00) return mixColors(PURPLE, DARK_BLUE, PM_7_30, PM_9_00, seconds);
            if (seconds <= PM_12_00) return mixColors(DARK_BLUE, BLACK, PM_9_00, PM_12_00, seconds);
            throw new IllegalArgumentException();
        }

        private void paintBackground() {
            Point2D p1 = new Point2D.Double(width / 2, 0);
            Point2D p2 = new Point2D.Double(width / 2, height);
            g2.setPaint(new GradientPaint(p1, upperBackgroundColor(), p2, lowerBackgroundColor()));
            g2.fillRect(0, 0, width, height);
        }

        private RadialGradientPaint colorOnCycle(Point2D center, float radius) {
            Color baseColor1 = COLOR_CYCLE[(secondColorIndex + COLOR_CYCLE.length - 1) % COLOR_CYCLE.length];
            Color baseColor2 = COLOR_CYCLE[secondColorIndex];
            Color baseColor3 = COLOR_CYCLE[(secondColorIndex + COLOR_CYCLE.length + 1) % COLOR_CYCLE.length];
            Color baseColor4 = COLOR_CYCLE[(secondColorIndex + COLOR_CYCLE.length + 2) % COLOR_CYCLE.length];

            Color start = mixColors(baseColor1, baseColor2, 0, RADIAL_PERIOD_LENGTH, secondsInPeriod);
            Color end = mixColors(baseColor3, baseColor4, 0, RADIAL_PERIOD_LENGTH, secondsInPeriod);
            float index2 = (RADIAL_PERIOD_LENGTH - secondsInPeriod) / (float) RADIAL_PERIOD_LENGTH / 2;
            float index3 = 0.5f + index2;
            float[] positions = index3 == 1.0 ? new float[] {0.0f, index2, 1.0f}
                    : new float[] {0.0f, index2, index3, 1.0f};
            Color[] colors = index3 == 1.0 ? new Color[] {start, baseColor2, end}
                    : new Color[] {start, baseColor2, baseColor3, end};

            return new RadialGradientPaint(center, radius, positions, colors);
        }

        private void paintClockArea() {
            Point2D center = new Point2D.Double(width / 2, height / 2);
            g2.setPaint(colorOnCycle(center, radius));
            g2.fillOval(width / 2 - radius, height / 2 - radius, radius * 2, radius * 2);
        }

        private double pointerRevolutionsToRadians(double angle) {
            return Math.toRadians((450 + angle * -360) % 360.0);
        }

        private void paintPointers() {
            double hAngle = pointerRevolutionsToRadians(seconds % SECONDS_IN_12_HOURS / (double) SECONDS_IN_12_HOURS);
            double mAngle = pointerRevolutionsToRadians(seconds % SECONDS_IN_HOUR / (double) SECONDS_IN_HOUR);
            double sAngle = pointerRevolutionsToRadians(seconds % SECONDS_IN_MINUTE / (double) SECONDS_IN_MINUTE);

            g2.setStroke(new BasicStroke(4.0f, BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND));
            g2.drawLine(cx, cy, (int) (cx + Math.cos(hAngle) * radius * 0.55), (int) (cy - Math.sin(hAngle) * radius * 0.55));
            g2.drawLine(cx, cy, (int) (cx + Math.cos(mAngle) * radius * 0.85), (int) (cy - Math.sin(mAngle) * radius * 0.85));
            g2.setStroke(new BasicStroke(1.0f, BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND));
            g2.drawLine(cx, cy, (int) (cx + Math.cos(sAngle) * radius * 0.85), (int) (cy - Math.sin(sAngle) * radius * 0.85));
        }

        private void paintNumbers() {
            Font originalFont = g2.getFont();
            double amplification = (int) Math.max(radius * 0.08, originalFont.getSize()) / (double) originalFont.getSize();
            AffineTransform at0 = AffineTransform.getScaleInstance(amplification, amplification);
            Font amplifiedFont = originalFont.deriveFont(at0);
            g2.setFont(amplifiedFont);
            FontMetrics fm = g2.getFontMetrics();

            for (int i = 1; i <= 12; i++) {
                double angle = pointerRevolutionsToRadians(i / 12.0);
                double textInclination = Math.toRadians(30 * i);
                AffineTransform at = AffineTransform.getRotateInstance(textInclination);
                at.scale(amplification, amplification);
                Font derivedFont = originalFont.deriveFont(at);
                g2.setFont(derivedFont);
                int pixelsOffset = fm.stringWidth(ROMAN[i]) / 2;
                int xPlot = (int) (cx + Math.cos(angle) * radius * 0.9 - pixelsOffset * Math.cos(textInclination));
                int yPlot = (int) (cy - Math.sin(angle) * radius * 0.9 - pixelsOffset * Math.sin(textInclination));
                g2.drawString(ROMAN[i], xPlot, yPlot);
            }
            g2.setFont(originalFont);
        }

        private void paintDots() {
            for (int i = 1; i < 60; i++) {
                if (i % 5 == 0) continue;
                double angle = pointerRevolutionsToRadians(i / 60.0);
                g2.fillRect((int) (cx + Math.cos(angle) * radius * 0.9) - 1, (int) (cy - Math.sin(angle) * radius * 0.9) - 1, 3, 3);
            }
        }

        public void paintClock() {
            paintBackground();
            paintClockArea();

            g2.setColor(pointersAndNumbersColor);
            g2.setPaint(pointersAndNumbersColor);
            paintNumbers();
            paintDots();
            paintPointers();
        }
    }

    @Override
    public void paintClock(int width, int height, int seconds, Graphics2D g2) {
        new Painter(width, height, seconds, g2).paintClock();
    }
}

```

# Answer
> 17 votes
# Freepascal

This clock displays the time, date and phase of the moon. However unlike mechanical clocks that have a small window for displaying the phase of the moon, in my clock the whole face is used to display it. Today Feb 14 is a full moon. You can see the expected output over the next few days below.

```
uses graph,sysutils;

const hemisphere=-1; {-1=north,1=south}
MonthStr : array[1..12] of string [3] =
('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep ','Oct','Nov','Dec');

var yy,dd,mm,hh,mn,ss,ms: word;
var s: string; d2fullmoon,hour,min:real; sec:word;

var gd, gm, n : integer;
var right, left, centre: word;

begin

  gd := D4bit;
  gm := m640x480;
  initgraph(gd,gm,'');
  setbkcolor(blue);cleardevice; setbkcolor(black);
  setlinestyle(0,0,3);
  settextjustify(centertext,centertext);
  settextstyle(defaultfont,horizdir,2);

  while true do begin

    {output to console}

    DecodeDate(Date,YY,MM,DD);
    Writeln (Format ('Today is %d/%d/%d',[dd,mm,yy]));

    DecodeTime(Time,HH,Mn,SS,MS);
    Writeln (format('The time is %d:%d:%d.%d',[hh,mm,ss,ms]));

    d2fullmoon:=yy*(365*3+366)/4+mm*365/12+dd-2014*(365*3+366)/4-2*365/12-14;
    writeln ('days since full moon 14 feb 2014 ',d2fullmoon);

    if ss mod 15=0 then begin {Refresh display every 15 sec. Only the second hand is refreshed every sec.}

      {Draw circle and 180deg pie in yellow/black. Draw yellow or black ellipse on top. Add boxes for date}

      if sin(d2fullmoon/29.530588853*2*pi)*hemisphere>0 then right:=yellow else right:=black;
      left:=yellow-right;

      setcolor(right);setfillstyle(solidfill,right);
      fillellipse(320,240,200,200);

      setfillstyle(solidfill,left);setcolor(left);
      pieslice(320,240,90,270,200);

      if cos(d2fullmoon/29.530588853*2*pi)>0 then centre:=yellow else centre:=black;
      setcolor(centre); setfillstyle(solidfill,centre);
      fillellipse(320,240,abs(trunc(200*cos(d2fullmoon/29.530588853*2*pi))),200);

      setcolor (blue); setfillstyle(solidfill,blue);
      bar (270,135,370,165); bar (270,345,370,315);

      {fill in numbers}

      for n:=1 to 12 do begin
        setcolor(blue); setfillstyle(solidfill,blue);
        fillellipse(319+trunc(170*sin(n*pi/6)),240-trunc(170*cos(n*pi/6)),15,15);
        fillellipse(320+trunc(170*sin(n*pi/6)),240-trunc(170*cos(n*pi/6)),15,15);

        moveto(322+trunc(170*sin(n*pi/6)),240-trunc(170*cos(n*pi/6)));
        setcolor(white);
        str(n,s);outtext(s);
      end;

      {fill in date}

      str(yy,s);
      moveto(320,330);outtext(s);
      str(dd,s);
      moveto(320,150);outtext(s+monthstr[mm]);

      {draw hour and minute hands}

      hour:=hh+mn/60; min:=mn+ss/60;
      setcolor(cyan) ;setfillstyle(solidfill,cyan);
      moveto(320,240);
      linerel(trunc(140*sin(min*pi/30)),trunc(-140*cos(min*pi/30)));
      fillellipse(320+trunc(140*sin(min*pi/30)),240+trunc(-140*cos(min*pi/30)),7,7);
      moveto(320,240);
      linerel(trunc(100*sin(hour*pi/6)),trunc(-100*cos(hour*pi/6)));
      fillellipse(320+trunc(100*sin(hour*pi/6)),240+trunc(-100*cos(hour*pi/6)),7,7);
      fillellipse(320,240,10,10);

    end;

    {draw second hand in XOR mode, sleep for a second, then repeat to undraw}

    sec:=ss;
    setwritemode(xorput); setcolor(white);
    moveto(320+trunc(12*sin(sec*pi/30)),240+trunc(-12*cos(sec*pi/30)));
    linerel(trunc(150*sin(sec*pi/30)),trunc(-150*cos(sec*pi/30)));

    Sleep(1000);

    moveto(320+trunc(12*sin(sec*pi/30)),240+trunc(-12*cos(sec*pi/30)));
    linerel(trunc(150*sin(sec*pi/30)),trunc(-150*cos(sec*pi/30)));
    setwritemode(copyput);

  end;
  closegraph;
end.

```

# Answer
> 12 votes
A simple one my friend wrote in TI 84 BASIC:

```
StoreGDB 0
CoordOff
GridOff
AxesOff
LabelOff
ExprOff
ClrDraw
62->Ymax
0->Ymin
94->Xmax
0->Xmin
Func
FnOff 0,1,2,3,4,5,6,7,8,9
PlotsOff 1,2,3
Full
Xmax/2->Xmax
Ymax/2->Ymax
~Xmax->Xmin
~Ymax->Ymin
Degree

15->H
18->M
20->S

Circle(36,~22,7)
Circle(0,0,30)
For(X,1,12)
Text(28-int(cos(X*30)*25),46+int(sin(30*X)*25),X)
End

{0,0,0}->|LANG

While getKey=0
getTime->|LTIME
getDate->|LDATE

Text(0,0,"12 HR")
Text(50,0,"24 HR")
If |LTIME(1)>12:Then
Text(6,7,(|LTIME(1)-12))
Else
Text(6,7,|LTIME(1))
End

If |LTIME(1)<=9
Then
Text(56,4,"O")
Text(56,8,|LTIME(1))
Else
Text(56,4,|LTIME(1))
End

Text(29,4,|LTIME(2))

If |LDATE(2)=1
Text(0,70,"JAN")

If |LDATE(2)=2
Text(0,70,"FEB")

If |LDATE(2)=3
Text(0,70,"MAR")

If |LDATE(2)=4
Text(0,70,"APR")

If |LDATE(2)=5
Text(0,70,"MAY")

If |LDATE(2)=6
Text(0,70,"JUN")

If |LDATE(2)=7
Text(0,70,"JUL")

If |LDATE(2)=8
Text(0,70,"AUG")

If |LDATE(2)=9
Text(0,70,"SEP")

If |LDATE(2)=10
Text(0,70,"OCT")

If |LDATE(2)=11
Text(0,70,"NOV")

If |LDATE(2)=12
Text(0,70,"DEC"
Text(2,81,",")
Text(0,85,|LDATE(3))
Text(8,75,|LDATE(1))

If |LTIME(1)>=12
Then
Text(50,80,"PM")
Else
Text(50,80,"AM")
End

If |LTIME(3)!=|LANG(3)/6
Line(0,0,sin(|LANG(3))*S,cos(|LANG(3))*S,0)

If |LTIME(2)!=|LANG(2)/6
Then
Line(0,0,sin(|LANG(2))*M,cos(|LANG(2))*M,0)
Line(0,0,sin(|LANG(1))*H,cos(|LANG(1))*H,0)
End

|LTIME(1)*30+|LTIME(2)/2->|LANG(1)
|LTIME(2)*6->|LANG(2)
|LTIME(3)*6->|LANG(3)

Line(0,0,sin(|LANG(1))*H,cos(|LANG(1))*H
Line(0,0,sin(|LANG(2))*M,cos(|LANG(2))*M
Line(0,0,sin(|LANG(3))*S,cos(|LANG(3))*S
End

```

# Answer
> 9 votes
# Mathematica

A plain-vanilla, functioning clock that displays local time:

```
Dynamic@Refresh[ClockGauge@AbsoluteTime[], UpdateInterval -> 1]

```

---

**Standard Options**

---

**Hand-drawn clock gauge**

There are alternatives to the built-in clock gauge. Here is one.

Continuous sweep has been implemented for the hour and minute hands. They update together with the second hand.

```
u[i_, k_] := {Sin[2 \[Pi] i/k], Cos[2 \[Pi] i/k]};
Dynamic[{f = Date[], Clock[{1, 1}, 1]}]
Graphics[Dynamic@{Circle[{0, 0}, 1.175], Circle[{0, 0}, 1.2],

   (* tick marks at minutes *)
   Table[Text[".", u[i, 60]], {i, 60}],

   (* hour labels *)
   Table[Text[i, u[i, 12]], {i, 12}],

   (* hour hand *)
   {Darker@Red, Arrowheads[.12], Thickness[.0175], Arrow[{{0, 0}, .6 u[f[[4]]+f[[5]]/60, 12]}]},

   (*minute hand *)
   {Blue, Arrowheads[.08], Thickness[.0085], Arrow[{{0, 0}, .85 u[f[[5]]+f[[6]]/60, 60]}]},

   (*second hand *)
   {Thickness[.005], Arrow[{{0, 0}, .9 u[f[[6]], 60]}]}},
   BaseStyle -> 25]

```

# Answer
> 8 votes
Postscript - originally written to help my children to learn to tell the time. Page 1 shows the current time, pages 2-4 are pages for learners. The pages for learners use `rand` to make random times, so they are different each time you process it. Use Ghostscript to make a PDF version if you want to show the current time. Sized for A4 paper.

```
%!PS-Adobe-3.0
%%Creator: Toby Thurston
%%Title: (Pages of pedagogical clocks)
%%CreationDate: (2014-02-14)
%%BoundingBox: 12 12 583 828
%%Pages: 1
%%EndComments
<< /PageSize [595 842] >> setpagedevice
%%BeginSetup
/clock {
  /mins exch def
  /hour exch def
  /r exch def % radius
  /cr r 100 div def
  % draw the minute marks
  12 { .5 setlinewidth 4 { 6 rotate r 0 moveto r 20 div 0 rlineto stroke } repeat
        2 setlinewidth     6 rotate r 0 moveto r 20 div 0 rlineto stroke } repeat
  % numbers
  /fontsize r 0.14 mul def
  /Helvetica findfont fontsize scalefont setfont
  /s 2 string def
  /rr r 0.9 mul def
  1 1 12 { /n exch def /theta 90 30 n mul sub def
  /st n s cvs def st stringwidth pop /dx exch 2 div neg def
  rr theta cos mul rr theta sin mul moveto dx fontsize 3 div neg rmoveto st show
  } for

  % draw hands (unless hour is negative)
  -1 hour lt {
      gsave % hour hand first
      90 60 hour mul mins add 2 div sub rotate
      newpath
      0 2 moveto
      15 cr mul  3 cr mul 33 cr mul   0 cr mul 50 cr mul  3 cr mul curveto
      55 cr mul 15 cr mul 60 cr mul   0 cr mul 76 cr mul  0 cr mul curveto
      60 cr mul  0 cr mul 55 cr mul -15 cr mul 50 cr mul -3 cr mul curveto
      33 cr mul  0 cr mul 15 cr mul  -3 cr mul  0 cr mul -2 cr mul curveto
      closepath 0 0 .677 setrgbcolor fill
      grestore
      gsave % minute hand on top
      90 6 mins mul sub rotate
      newpath
      0 2 moveto
      15 cr mul 3 cr mul 33 cr mul 0         50 cr mul  1 cr mul curveto
      65 cr mul 3 cr mul 83 cr mul 0         97 cr mul  0        curveto
      83 cr mul 0        65 cr mul -3 cr mul 50 cr mul -1 cr mul curveto
      33 cr mul 0        15 cr mul -3 cr mul 0         -2 cr mul curveto
      closepath .635 0 0 setrgbcolor fill
      grestore
  } if

  % finally do central dot (to cover starts of hands) and outer band
  .5 setlinewidth
  0 0 moveto 0 0 r 20 div   0 360 arc fill
             0 0 r 1.07 mul 0 360 arc stroke

} def
%%EndSetup
%%Page: 1 1
%%BeginPageSetup
/pgsave save def
%%EndPageSetup
  297 480 translate
  120

  (%Calendar%) /IODevice resourcestatus {
   pop pop (%Calendar%) currentdevparams
   dup /Running get { dup /Hour get exch /Minute get }{ 0 0 } ifelse } { -1 -1 } ifelse

  clock
pgsave restore
showpage
%%Page: 2 2
%%BeginPageSetup
/pgsave save def
%%EndPageSetup
  75 -55 translate
  4 {
     5 { 0 165 translate % a page of clocks for learners
         50 rand 12 mod rand 60 mod clock
         % line underneath
         gsave [1 3] 0 setdash 50 neg dup 1.8 mul moveto 50 2 mul 0 rlineto stroke grestore
     } repeat
     146 5 165 mul neg translate
  } repeat
pgsave restore
showpage
%%Page: 3 3
%%BeginPageSetup
/pgsave save def
%%EndPageSetup
  75 -55 translate
  4 {
     5 { 0 165 translate    % whole multiple of five minutes only
         50 rand 12 mod rand 12 mod 5 mul clock
         gsave [1 3] 0 setdash 50 neg dup 1.8 mul moveto 50 2 mul 0 rlineto stroke grestore
     } repeat
     146 5 165 mul neg translate
  } repeat
pgsave restore
showpage
%%Page: 4 4
%%BeginPageSetup
/pgsave save def
%%EndPageSetup
  75 -55 translate
  4 {
     5 { 0 165 translate    % quarter hours only
         50 rand 12 mod rand 4 mod 15 mul clock
         gsave [1 3] 0 setdash 50 neg dup 1.8 mul moveto 50 2 mul 0 rlineto stroke grestore
     } repeat
     146 5 165 mul neg translate
  } repeat
pgsave restore
showpage
%%EOF

```

# Answer
> 4 votes
Demo: http://jsfiddle.net/kelunik/Vuuq8/7/embedded/result/

```
var h = document.getElementById('h');
var m = document.getElementById('m');
var s = document.getElementById('s');

setInterval(function () {
    refreshClock();
}, 1000);

function refreshClock() {
    var time = new Date;

    deg = time.getSeconds() * 6 - 90;
    s.style.webkitTransform = s.style.MozTransform = s.style.msTransform = s.style.transform = "rotate(" + deg + "deg)";

    deg = time.getMinutes() * 6 - 90;
    m.style.webkitTransform = m.style.MozTransform = m.style.msTransform = m.style.transform = "rotate(" + deg + "deg)";

    deg = time.getHours() % 12 * 30 - 90;
    h.style.webkitTransform = h.style.MozTransform = h.style.msTransform = h.style.transform = "rotate(" + deg + "deg)";
}

window.onload = function () {
    refreshClock();
};
```

```
html, body {
    margin: 0;
    padding: 0;
    text-align: center;
}
#clock {
    width: 100vmin;
    height: 100vmin;
    border-radius: 50%;
    border: 1vmin solid #333;
    position: relative;
    box-shadow: 0 0 5vmin rgba(0, 0, 0, .3);
    box-sizing: border-box;
    margin: 0 auto;
    transform: scale(.8);
}
#h, #m, #s {
    top: 50vmin;
    left: 50vmin;
    position: absolute;
}
#h:before, #m:before, #s:before {
    content:"";
    position: absolute;
    left: 100%;
    height: 0;
    box-shadow: 0 0 2vmin rgba(0,0,0,.2);
    border-radius: 50%;
}
#h:before {
    width: 25vmin;
}
#m:before {
    width: 35vmin;
}
#s:before {
    width: 45vmin;
}
#h:before {
    background: black;
    height: 4vmin;
    transform: translateY(-2vmin);
}
#m:before {
    background: black;
    height: 2vmin;
    transform: translateY(-1vmin);
}
#s:before {
    background: red;
    height: 2vmin;
    transform: translateY(-1vmin);
}
```

```
<div id="clock">
    <div id="h"></div>
    <div id="m"></div>
    <div id="s"></div>
</div>
```

# Answer
> 4 votes
Here is one in processing:

```
int ax,ay,bx,by,cx,cy,dx,dy,last;
int q = 1;
float c = 0;
float h = 0;
float m = 0;

void setup() {
  size(displayWidth, displayHeight);
  background(0);
}

boolean sketchFullScreen() {
  return true;
}

void draw() {
  colorMode(HSB);
  fill(c,255,255,4);
  noStroke();
  rect(0,0,width,height);

  c+=0.4;
  if (c > 255) c = 0;

  colorMode(RGB);

  ax = int(random(displayWidth));
  ay = int(random(displayHeight));
  bx = ax + int(random(-50,50));
  by = ay + int(random(0,50));

  strokeWeight(1);

  if (random(0,1)>0.5) {
    fill(random(255),random(255),random(255));
    stroke(random(255),random(255),random(255));
  }
  else {
    noFill();
    stroke(random(255),random(255),random(255));
  }

  switch(int(random(6))) {
    case 0: // line
    line(ax,ay,bx,by);

    break;
    case 1: // bezier (arc)
    cx = int(random(ax-20,bx+20));
    cy = int(random(ay-20,by+20));
    dx = int(random(ax-20,bx+20));
    dy = int(random(ay-20,by+20));
    bezier(ax,ay,cx,cy,dx,dy,bx,by);

    break;
    case 2: // box
    quad(ax,ay,ax,by,bx,by,bx,ay);

    break;
    case 3: // ellipse
    ellipse(ax,ay,random(15,50),random(15,50));

    break;
    case 4: // triangle
    cx = int(random(ax-20,bx+20));
    cy = int(random(ay-20,by+20));
    dx = int(random(ax-20,bx+20));
    dy = int(random(ay-20,by+20));
    triangle(cx,cy,bx,by,dx,dy);

    break;
    case 5: // arc
    arc(ax,ay,random(15,50),random(15,50),random(2)*PI,random(2)*PI);

    break;
  }

  float s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
  float m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI) - HALF_PI;
  float h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2) - HALF_PI;

  cx = width/2;
  cy = height/2;

  // Draw the hands of the clock
  stroke(255);
  strokeWeight(1);
  line(cx, cy, cx + cos(s) * 500, cy + sin(s) * 500);
  strokeWeight(2);
  line(cx, cy, cx + cos(m) * 400, cy + sin(m) * 400);
  strokeWeight(4);
  line(cx, cy, cx + cos(h) * 300, cy + sin(h) * 300);

}

void mouseMoved() {
  exit();
}
void keyPressed() {
  background(0);
}

```

# Answer
> 4 votes
Simple MATLAB code, written mostly to appreciate 24-hr dial at work.

while 1 runWatch() pause(0.6); end

```
% 20160829 :: grapesh@gmail.com
function runWatch()
cla;

dialHours  = 24;   % You can set it to 12 but why?
midnightUp = true; % defines position of midnight

col.hr = 'k';
col.mn = 'b';
col.sc = 'r';

logoStr = ['Perpetuum'];

xo = 0; yo = 0;
RH  = 0.7;   RM  = 0.95; Rb = 0.5*(RH+RM);
RarrH = RH; RarrM = Rb; RarrS = RM;

fig_handle = findobj(allchild(0), 'flat', 'type', 'figure');

if isempty(fig_handle), set(gcf,'Position',[100 100 500 500]); end
hoursPhase = 3*pi/2; if midnightUp == true, hoursPhase = pi/2; end

hold on;
circle(xo, yo, RH,col.hr);
circle(xo, yo, RM,col.mn);% ,'b');
circle(xo, yo, (RH+RM)/2,col.mn); %0.5*[1 1 1]);

text (xo - 2.5*RH/8+0.003, yo - RH/2-0.003, logoStr,'Color',0.5*[1 1 1],'FontAngle','italic');
text (xo - 2.5*RH/8,       yo - RH/2,       logoStr, 'FontAngle','italic')
axis equal; axis off;

% Hour dial
dh = pi/dialHours; h = 0:-dh:-pi+dh;
xH = RH*cos(2*h+hoursPhase); yH = RH*sin(2*h+hoursPhase);
xHb= Rb*cos(2*h+hoursPhase); yHb= Rb*sin(2*h+hoursPhase);
for n=1:length(xH)
    plot([xH(n),xHb(n)],[yH(n),yHb(n)],col.hr);
end
% Minute dial
dm = pi/60; m = 0:-dm:-pi+dm;
xM = RM*cos(2*m+pi/2); yM = RM*sin(2*m+pi/2);
xMb= Rb*cos(2*m+pi/2); yMb= Rb*sin(2*m+pi/2);
for n=1:length(xM)
    plot([xM(n),xMb(n)],[yM(n),yMb(n)],'Color',col.mn);
end

% Labels Hour
dhl = pi/dialHours; hl = 0:-dhl:-pi+dhl;  ratioH = -dialHours/180;
xHl= 0.5*(Rb+RH)*cos(2*hl+hoursPhase);
yHl= 0.5*(Rb+RH)*sin(2*hl+hoursPhase);
for n=1:length(xHl)
    octagon (xHl(n), yHl(n), 0.3*(RH-Rb), 'w');
    text (xHl(n),yHl(n), num2str( rad2deg(hl(n)*ratioH) ),...
        'HorizontalAlignment','center','Rotation',rad2deg(2*hl(n)+hoursPhase-pi/2),...
        'FontWeight','b','FontSize',13,'Color',col.hr);

end

% Labels Minute
dml = pi/12; ml=0:-dml:-pi+dml;  ratioM = -60/180;
xMl= 0.5*(Rb+RM)*cos(2*ml+pi/2); yMl= 0.5*(Rb+RM)*sin(2*ml+pi/2);
for n=1:length(xMl)
    octagon (xMl(n), yMl(n), 0.3*(RM-Rb), 'w');
    text (xMl(n),yMl(n), num2str( rad2deg(ml(n)*ratioM) ),...
        'HorizontalAlignment','center','Rotation',rad2deg(2*ml(n)), ...
        'FontWeight','b','Color',col.mn);
end

octagon (xo, yo-0.5*(RH+Rb), 0.04, col.hr);
octagon (xo, yo-0.5*(RH+Rb), 0.03, col.mn);

[now_year, now_month, now_day, ...
    now_hour, now_minute, now_second] = datevec(now);

% Arrows
K = -2*pi/dialHours; D = hoursPhase;
now_hour = now_hour + now_minute/60;
xarrowh = RarrH*cos(K*now_hour+D);
yarrowh = RarrH*sin(K*now_hour+D);
plot([0,xarrowh],[0,yarrowh],'Color',col.hr,'LineWidth',6);
plot([0,xarrowh],[0,yarrowh],'Color',0.5*[1 1 1],'LineWidth',3);
arrowhead (xarrowh,yarrowh,0.02,atan2(yarrowh,xarrowh),col.hr);

K = -2*pi/60; D = pi/2;
now_minute = now_minute + now_second/60;
xarrowm  = RarrH*cos(K*now_minute+D);
yarrowm  = RarrH*sin(K*now_minute+D);
xarrowml = RarrM*cos(K*now_minute+D);
yarrowml = RarrM*sin(K*now_minute+D);
plot([0,xarrowml],[0,yarrowml],'Color','k', 'LineWidth',4);
plot([0,xarrowml],[0,yarrowml],'Color',col.mn, 'LineWidth',2);
arrowhead (xarrowml,yarrowml,0.02,atan2(yarrowml,xarrowml),col.mn);

K = -2*pi/60; D = pi/2;
now_second = round(now_second);
xarrows = RarrH*cos(K*now_second+D);
yarrows = RarrH*sin(K*now_second+D);
xarrowsl = RarrS*cos(K*now_second+D);
yarrowsl = RarrS*sin(K*now_second+D);
plot([0,xarrowsl],[0,yarrowsl],'Color',col.sc,'LineWidth',1);
arrowhead (xarrowsl,yarrowsl,0.02,atan2(yarrows,xarrows)-pi,col.sc);

text(0.7,1,...
    [pad_with(floor(now_hour),2,'0'), ':', pad_with(floor(now_minute),2,'0'), ':', pad_with(now_second,2,'0')],...
    'FontSize',8,'FontWeight','n','BackgroundColor','w');

% Dial center
plot(xo, yo, 'ko','MarkerSize',10,'MarkerFaceColor','k');
plot(xo, yo, 'ko','MarkerSize',8,'MarkerFaceColor',0.5*[0 1 1]);

end

function [XX,YY] = circle(varargin)
%x and y are the coordinates of the center of the circle
%r is the radius of the circle
%0.01 is the angle step, bigger values will draw the circle faster but
%you might notice imperfections (not very smooth)

col = 'k';
x = varargin{1};
y = varargin{2};
r = varargin{3};
if length(varargin) > 3
    col = varargin{4};
end

ang=0:0.01:2*pi;
xp=r*cos(ang);
yp=r*sin(ang);
XX = x+xp; YY = y+yp;
plot(XX,YY,'Color',col);
end

function octagon (xo, yo, R, col)

t = (1/16:1/8:1)'*2*pi;
x = R*cos(t);
y = R*sin(t);
fill(xo+x, yo+y,col,'EdgeColor','none')
end

% 20151001 :: grapesh@gmail.com
% Use :: str = pad_with (num, L, pad)
% function creates a string of L length
% padded with leading 'pad' symbol
% e.g., num=23,    L=4, pad='.' --> '..23';
% e.g., num='23W', L=4, pad=' ' --> ' 23W';
%
function str = pad_with (num, L, pad)

if ~ischar(num)
    num = num2str(num);
end
strL = length(num);
if L<strL, L = strL; end;
for n=1:L-strL, str(n) = pad; end;
c = 0;
for n=L-strL+1:L
    c = c+1; str(n) = num(c);
end
end

function [x, y] = arrowhead (xo, yo, height, alpha, col)

x(1) = xo + height*sin(alpha);
y(1) = yo - height*cos(alpha);

x(2) = xo - height*sin(alpha);
y(2) = yo + height*cos(alpha);

x(3) = xo + 2*height*cos(alpha);
y(3) = yo + 2*height*sin(alpha);

fill(x, y,col,'EdgeColor','none')
end

```

# Answer
> 3 votes
# HTML + CSS3 + JS

I've used mostly CSS for this clock. There is a JS component that updates the attributes on the clock div with the current time, but outside of that the entire clock is CSS.

live demo here: http://jsbin.com/nuvag/3

source code over here: http://jsbin.com/nuvag/3/edit

# Answer
> 3 votes
GNUPLOT

```
unset clip points
set clip one
unset clip two
set bar 1.000000
unset border
set xdata
set ydata
set zdata
set x2data
set y2data
set timefmt x "%d/%m/%y,%H:%M"
set timefmt y "%d/%m/%y,%H:%M"
set timefmt z "%d/%m/%y,%H:%M"
set timefmt x2 "%d/%m/%y,%H:%M"
set timefmt y2 "%d/%m/%y,%H:%M"
set timefmt cb "%d/%m/%y,%H:%M"
set boxwidth
set style fill  empty border
set dummy t,y
set format x "% g"
set format y "% g"
set format x2 "% g"
set format y2 "% g"
set format z "% g"
set format cb "% g"
set angles radians
unset grid
set key title ""
unset key
unset label
unset arrow
unset style line
unset style arrow
set style histogram clustered gap 2 title  offset 0, 0, 0
unset logscale
set offsets 0, 0, 0, 0
set pointsize 1
set encoding default
unset polar
set parametric
unset decimalsign
set view 60, 30, 1, 1
set samples 100, 100
set isosamples 10, 10
set surface
unset contour
set clabel '%8.3g'
set mapping cartesian
set datafile separator whitespace
unset hidden3d
set cntrparam order 4
set cntrparam linear
set cntrparam levels auto 5
set cntrparam points 5
set size ratio 0 1,1
set origin 0,0
set style data points
set style function lines
set xzeroaxis linetype -2 linewidth 1.000
set yzeroaxis linetype -2 linewidth 1.000
set zzeroaxis linetype -2 linewidth 1.000
set x2zeroaxis linetype -2 linewidth 1.000
set y2zeroaxis linetype -2 linewidth 1.000
set ticslevel 0.5
set mxtics default
set mytics default
set mztics default
set mx2tics default
set my2tics default
set mcbtics default
set noxtics
set noytics
set noztics
set nox2tics
set noy2tics
set nocbtics
set title ""  offset character 0, 0, 0 font "" norotate
set timestamp bottom
set timestamp ""  offset character 0, 0, 0 font "" norotate
set rrange [ * : * ] noreverse nowriteback  # (currently [0.000000:10.0000] )
set trange [ * : * ] noreverse nowriteback  # (currently [-5.00000:5.00000] )
set urange [ * : * ] noreverse nowriteback  # (currently [-5.00000:5.00000] )
set vrange [ * : * ] noreverse nowriteback  # (currently [-5.00000:5.00000] )
set xlabel ""  offset character 0, 0, 0 font "" textcolor lt -1 norotate
set x2label ""  offset character 0, 0, 0 font "" textcolor lt -1 norotate
set xrange [ * : * ] noreverse nowriteback  # (currently [-10.0000:10.0000] )
set x2range [ * : * ] noreverse nowriteback  # (currently [-10.0000:10.0000] )
set ylabel ""  offset character 0, 0, 0 font "" textcolor lt -1 rotate by 90
set y2label ""  offset character 0, 0, 0 font "" textcolor lt -1 rotate by 90
set yrange [ * : * ] noreverse nowriteback  # (currently [-10.0000:10.0000] )
set y2range [ * : * ] noreverse nowriteback  # (currently [-10.0000:10.0000] )
set zlabel ""  offset character 0, 0, 0 font "" textcolor lt -1 norotate
set zrange [ * : * ] noreverse nowriteback  # (currently [-10.0000:10.0000] )
set cblabel ""  offset character 0, 0, 0 font "" textcolor lt -1 norotate
set cbrange [ * : * ] noreverse nowriteback  # (currently [-10.0000:10.0000] )
set zero 1e-008
set lmargin -1
set bmargin -1
set rmargin -1
set tmargin -1
set locale "C"
set pm3d explicit at s
set pm3d scansautomatic
set pm3d interpolate 1,1 flush begin noftriangles nohidden3d corners2color mean
set palette positive nops_allcF maxcolors 0 gamma 1.5 color model RGB
set palette rgbformulae 7, 5, 15
set colorbox default
set colorbox vertical origin screen 0.9, 0.2, 0 size screen 0.05, 0.6, 0 bdefault
set loadpath
set fontpath
set fit noerrorvariables
set arrow from 0,0 to sin(`date +%M`*3.1416/30),cos(`date +%M`*3.1416/30)
set arrow from 0,0 to sin((`date +%H`%12)*3.1416/6)/2,cos((`date +%H`%12)*3.1416/6)/2
plot sin(t),cos(t)
reread

```

# Answer
> 3 votes
Click run. It displays only in increments of 30 minutes because the clock is a single emoji.

```
function updateTick(){let e=new Date,t=e.getSeconds()+60*e.getMinutes()+e.getHours()%12*60*60,n=parseInt(t/3600*2)+1;document.documentElement.style.setProperty("--tick",n)}let d=new Date;setTimeout(()=>{setInterval(updateTick,18e5)},1e3*(d.getMinutes()+d.getSeconds())%30),updateTick();
```

```
@counter-style item{system:cyclic;symbols:"" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""}span.tik-terk-clerk::before{content:counters(item, "", item);counter-reset:item calc(var(--tick,1))}span.tik-terk-clerk::before{font-size:72pt}
```

```
<span class="tik-terk-clerk"></span>
```

# Answer
> 2 votes
**Python** *(with matplotlib)*

Here's a very basic clock that runs on the desktop. Change `interval` in the 2nd to last line to `1` for continuous motion instead of one tick per second.

```
import numpy as np
import matplotlib.pyplot as plt
import matplotlib.animation as animation
import datetime

plt.rcParams['toolbar'] = 'None'
fig = plt.figure(figsize=(4,4),facecolor='w')
ax = plt.subplot(111, polar=True)
plt.axes().get_yaxis().set_visible(False)

#12 labels, clockwise
marks = np.linspace(360./12,360,12, endpoint=True)
ax.set_thetagrids(marks,map(lambda m: int(m/30),marks),frac=.85,size='x-large')
ax.set_theta_direction(-1)
ax.set_theta_offset(np.pi/2)
ax.grid(None)

#hands
wids  = [.2,.03,.01]
lens  = [.75,.9,1]
clrs = plt.cm.winter(np.linspace(0, 1, 3))
factor = [12,60,60,1]

#convert time to radians
def timedata():
    x =  str(datetime.datetime.now().time())
    fig.canvas.set_window_title(x[:8])
    data = map(lambda n: float(n), x.split(':'))+[0]
    for i in range(3):
        data[i]=2*np.pi*(data[i]/factor[i]+data[i+1]/factor[i+1]/factor[i])
        data[i]-=(wids[i]/2)
    return data[:3]

#create hands
bars = ax.bar(timedata(), lens, width=wids, bottom=0.0, color=clrs, linewidth=0)
map(lambda b: b.set_alpha(0.5), bars)

#tick
def animate(i):
    map(lambda bt: bt[0].set_x(bt[1]), zip(bars,timedata()))
    return bars

ani = animation.FuncAnimation(fig, animate, np.arange(1, 200), interval=1000)
plt.show()

```

# Answer
> 2 votes
## Mathematica

Using more demo code from the Mathematica help browser than I probably should, I get

with

```
Voltmeter3[v_, label_] :=
  Graphics[{{(*case*){EdgeForm[{Thickness[.007], GrayLevel[0]}],
      GrayLevel[.2],
      Rectangle[{-1.2, -1.1}, {1.2, 1.3},
       RoundingRadius -> .2]},(*case holes*){White,
      Disk[{-1, -.9}, .05], Disk[{1, -.9}, .05], Disk[{1, 1.1}, .05],
      Disk[{-1, 1.1}, .05]},(*case outer rim*){Black,
      Disk[{0, .1}, 1.15], GrayLevel[.5], Disk[{-.02, .12}, 1.13],
      GrayLevel[.2], Disk[{0, .1}, 1.11]},(*face highlight*)
     EdgeForm[{CapForm["Round"], Thickness[.02], Hue[.125, .7, .6]}],
     Hue[.125, 1, 1],
     Disk[{.02, .1},
      1, {1.1 Pi, -.1 Pi}],(*face shadow*){EdgeForm[{CapForm["Round"],
         Thickness[.01], Hue[.125, 1, 1]}], Hue[.125, 1, 1],
      Disk[{-.02, .12}, 1, {1.1 Pi, -.1 Pi}]},(*face*){EdgeForm[],
      Hue[.125, .5, 1],
      Rotate[Polygon[({.1, -.04} + # &) /@
         Flatten[{{{0, 0}, {0, 1}},
           Array[{Sin[2 Pi*(#/50)], Cos[2 Pi*(#/50)]} &, 30]}, 1],
        VertexColors ->
         Flatten[{Hue[.125, 0, 1],
           Array[Hue[.125, .5, 1] &, 50 + 1]}]],
       30/50 Pi, {0,
        0}]},(*case mid line highlight*){Hue[.125, .7, .6],
      Thickness[.025], CapForm["Round"],
      Line[{{-.95, -.2}, {0, .1}, {.95, -.2}}]},(*case mid disk \
highlight*){Hue[.125, .7, .6], Disk[{0, 0}, .25, {.95 Pi, .05 Pi}]}},
    Inset[
     AngularGauge[v, {0, 100}, GaugeFaceStyle -> None,
      GaugeFrameStyle -> None,
      GaugeMarkers ->
       Graphics[{Hue[0, 1, .7],
         Polygon[{{.1, .03}, {.1, -.03}, {.95, -.03}, {1,
            0}, {.95, .03}}]}],
      GaugeLabels -> {Placed[
         Style[label, FontFamily -> "Helvetica", Bold,
          FontSize -> Scaled[.08], White], {.5, .35}]},
      LabelStyle ->
       Directive[FontFamily -> "Helvetica", FontSize -> Scaled[.06]],
      ScaleOrigin -> {{.85 Pi, .15 Pi}, .9},
      ScaleDivisions -> {2, 10},
      ScaleRanges -> {{Scaled[.75], Scaled[1]}},
      ScaleRangeStyle -> Hue[0, 1, .7, .7], AxesStyle -> Opacity[0],
      TicksStyle -> {Thickness[.01], Thickness[.005]},
      ImageSize -> Automatic, ImagePadding -> None], {0, 0}, {0,
      0}, {1.75, Automatic}], {(*case mid disk*)GrayLevel[.2],
     Disk[{0, 0}, .2], GrayLevel[0], Disk[{0, 0}, .075],
     Disk[{-.85, -.4}, .05], Disk[{.85, -.4}, .05]}},
   PlotRangeClipping -> True];

Dynamic@Refresh[
  GraphicsRow[{Voltmeter3[DateList[][[4]], "Hour"],
    Voltmeter3[DateList[][[5]], "Minute"],
    Voltmeter3[DateList[][[6]], "Second"]}], UpdateInterval -> 1]

```

# Answer
> 2 votes
# C+Cairo+xcb

Basically ripped-off the postscript solution and translated to Cairo. :)

Some gotchas in doing this: ps uses degrees, Cairo uses radians; ps orients the window with +y *up*, xcb orients it with +y *down*.

```
//xclock.c
//cc $(pkg-config --cflags --libs cairo xcb xcb-icccm) -o xclock xclock.c -lcairo -lxcb -lxcb-icccm
#include <math.h>
#include <signal.h>
#include <stdlib.h>
#include <stdio.h>
#include <string.h>
#include <time.h>
#include <unistd.h>
#include <cairo.h>
#include <cairo-xcb.h>
#include <xcb/xcb.h>
#include <xcb/xcb_image.h>
#include <xcb/xcb_aux.h>
#include <xcb/xcb_icccm.h>

double deg_rad (double rad){
    return rad * (180.0/M_PI);
}

double rad_deg (double deg){
    return deg * (M_PI/180.0);
}

typedef struct {
    int width, height;
    int scrno;
    xcb_screen_t *scr;
    xcb_connection_t *connection;
    xcb_drawable_t win;
    unsigned int white;
    xcb_visualtype_t *visual_type;

    cairo_surface_t *surface;
    cairo_t *cr;
} Window;
Window window;

int makewindow()
{
    xcb_screen_iterator_t iter;
    xcb_depth_iterator_t depth_iter;
    uint32_t mask=0;
    uint32_t values[2];

    window.connection = xcb_connect(NULL,&window.scrno);
    iter = xcb_setup_roots_iterator(xcb_get_setup(window.connection));
    for (; iter.rem; --window.scrno, xcb_screen_next(&iter))
        if (window.scrno == 0)
        {
            window.scr = iter.data;
            break;
        }
    window.win = xcb_generate_id(window.connection);
    window.white = window.scr->white_pixel;
    mask = XCB_CW_BACK_PIXEL | XCB_CW_EVENT_MASK;
    values[0] = window.white;
    values[1] = XCB_EVENT_MASK_EXPOSURE;
    xcb_create_window(window.connection, XCB_COPY_FROM_PARENT,
            window.win, window.scr->root,
            0, 0,
            window.width, window.height,
            5,
            XCB_WINDOW_CLASS_INPUT_OUTPUT,
            window.scr->root_visual,
            mask,
            values);
    xcb_icccm_set_wm_name(window.connection, window.win, XCB_ATOM_STRING, 8, strlen("xcr"), "xcr");
    xcb_map_window(window.connection, window.win);
    xcb_flush(window.connection);

    depth_iter = xcb_screen_allowed_depths_iterator(window.scr);
    for (; depth_iter.rem; xcb_depth_next(&depth_iter)) {
        xcb_visualtype_iterator_t visual_iter;

        visual_iter = xcb_depth_visuals_iterator(depth_iter.data);
        for (; visual_iter.rem; xcb_visualtype_next(&visual_iter)) {
            if (window.scr->root_visual == visual_iter.data->visual_id) {
                window.visual_type = visual_iter.data;
                goto visual_found;
            }
        }
    }
visual_found: ;

    {
        window.surface = cairo_xcb_surface_create (window.connection,
                window.win, window.visual_type, window.width, window.height);
        window.cr = cairo_create (window.surface);

        //cairo_select_font_face (window.cr, "serif", CAIRO_FONT_SLANT_NORMAL, CAIRO_FONT_WEIGHT_BOLD);
        //cairo_set_font_size (window.cr, 32.0);
        cairo_set_source_rgb (window.cr, 0.0, 0.0, 0.0);
        cairo_translate(window.cr, window.width / 2, window.width / 2);
        cairo_scale(window.cr, 1, -1);
        //cairo_move_to (window.cr, 10.0, 50.0);
        //cairo_show_text (window.cr, "Hello, world");

        //cairo_surface_flush(window.surface);
        //xcb_flush(window.connection);
    }
    return 0;
}

int destroywindow() {
    cairo_destroy (window.cr);
    cairo_surface_destroy (window.surface);
    xcb_disconnect(window.connection);
    return 0;
}

int gettime(int *hour, int *min, int *sec) {
    time_t t;
    struct tm *tm;
    time(&t);
    tm = localtime(&t);
    *hour = tm->tm_hour;
    *min = tm->tm_min;
    *sec = tm->tm_sec;
    return 0;
}

void drawclock(int x) {
    int hour, min, sec;
    double radius, centradius;
    int i, j;

    (void)x;
    signal(SIGALRM, drawclock);
    //hour = 0; min = 30; sec = 30;
    gettime(&hour, &min, &sec);
    hour %= 12;
    //printf("%02d:%02d:%02d\n", hour, min, sec);
    radius = (double)window.width / 2.0;
    radius -= 10.0;
    centradius = radius / 100.0;

    // Erase
    cairo_set_source_rgb(window.cr, 1.0, 1.0, 1.0);
    cairo_paint(window.cr);
    cairo_set_source_rgb(window.cr, 0.0, 0.0, 0.0);

    // Ticks
    for (i = 0; i < 12; i++){
        cairo_set_line_width(window.cr, 1);
        for (j = 0; j < 4; j++){
            cairo_rotate(window.cr, rad_deg(6));
            cairo_move_to(window.cr, radius, 0);
            cairo_rel_line_to(window.cr, (double)radius / 20.0, 0);
            cairo_stroke(window.cr);
        }
        cairo_set_line_width(window.cr, 3);
        cairo_rotate(window.cr, rad_deg(6));
        cairo_move_to(window.cr, radius, 0);
        cairo_rel_line_to(window.cr, (double)radius / 20.0, 0);
        cairo_stroke(window.cr);
    }

    // Hour hand
    cairo_save(window.cr);
        cairo_rotate(window.cr, rad_deg(90.0 - (60.0 * (double)hour + (double)min)/2));
        cairo_new_path(window.cr);
        cairo_move_to(window.cr, 0, 2);
        cairo_curve_to(window.cr, 15.0 * centradius, 3.0 * centradius,
                                  33.0 * centradius, 0,
                                  50.0 * centradius, 3.0 * centradius);
        cairo_curve_to(window.cr, 55.0 * centradius, 15.0 * centradius,
                                  60.0 * centradius, 0,
                                  76.0 * centradius, 0);
        cairo_curve_to(window.cr, 60.0 * centradius, 0,
                                  55.0 * centradius, -15.0 * centradius,
                                  50.0 * centradius, -3.0 * centradius);
        cairo_curve_to(window.cr, 33.0 * centradius, 0,
                                  15.0 * centradius, -3.0 * centradius,
                                  0, -2.0 * centradius);
        cairo_close_path(window.cr);
        cairo_set_source_rgb (window.cr, 0.0, 0.0, 0.677);
        cairo_fill(window.cr);
    cairo_restore(window.cr);

    // Minute hand
    cairo_save(window.cr);
        cairo_rotate(window.cr, rad_deg(90.0 - 6.0 * (double)min));
        cairo_new_path(window.cr);
        cairo_move_to(window.cr, 0, 2);
        cairo_curve_to(window.cr, 15.0 * centradius, 3.0 * centradius,
                                  33.0 * centradius, 0,
                                  50.0 * centradius, centradius);
        cairo_curve_to(window.cr, 65.0 * centradius, 3.0 * centradius,
                                  83.0 * centradius, 0,
                                  97.0 * centradius, 0);
        cairo_curve_to(window.cr, 83.0 * centradius, 0,
                                  65.0 * centradius, -3.0 * centradius,
                                  50.0 * centradius, -1.0 * centradius);
        cairo_curve_to(window.cr, 33.0 * centradius, 0,
                                  15.0 * centradius, -3.0 * centradius,
                                  0, -2.0 * centradius);
        cairo_close_path(window.cr);
        cairo_set_source_rgb (window.cr, 0.635, 0.0, 0.0);
        cairo_fill(window.cr);
    cairo_restore(window.cr);

    cairo_surface_flush(window.surface);
    xcb_flush(window.connection);

    //printf("alarm in %d\n", 60 - sec);
    alarm(60 - sec);
}

int main(int argc, char **argv)
{
    xcb_generic_event_t *e;
    window.width = window.height = 200;
    signal(SIGALRM, drawclock);

    makewindow();
    while (e = xcb_wait_for_event(window.connection)){
        switch(e->response_type & ~0x80){
        case XCB_EXPOSE:
            drawclock(0);
        }
        free(e);
        //sleep(1);
    }
    destroywindow();

    return 0;
}

```

# Answer
> 0 votes
Creating analog clocks has some sort of attractions with people learning programming. As a matter of fact I teach a JavaScript class this year and my students had ton of fun when we implemented an analog clock using p5.js...

The source code for the analog clock is available at https://github.com/mveteanu/JSCourse

---
Tags: popularity-contest, graphical-output, animation
---


title: Weigh your words!

text:
# Question
Title: Weigh your words!
## The challenge

Given two strings, each of length up to 30, consisting of printable ASCII characters (codes \\$\[32, 126\]\\$), put them onto a balance scale in the fewest bytes of code! This consists of the following steps:

1. Calculate and compare the weights of the strings
2. Choose the appropriately tilted ASCII-art scale
3. Place the two strings onto the scale

The strings may be passed as an array, two arguments, or any other reasonable method.

---

The **weight of a string** is defined as the sum of the weights of that string's characters, where:

* Spaces have a weight of 0 ()
* Lowercase letters have a weight of 2 (`abcdefghijklmnopqrstuvwxyz`)
* Uppercase letters have a weight of 4 (`ABCDEFGHIJKLMNOPQRSTUVWXYZ`)
* All other symbols have a weight of 3 (`!"#$%&'()*+,-./0123456789:;<=>?@[\]^_`{|}~`)

---

The scales look like this:

```
          .     _
          |  _-*/\
          |-*  /  \
       _-*|   /    \
    _-*   |  /      \
   /\     |  *------*
  /  \    |
 /    \   |
/      \  |
*------*  |
    ______|______

```

```
    _     .
   /\*-_  |
  /  \  *-|
 /    \   |*-_
/      \  |   *-_
*------*  |     /\
          |    /  \
          |   /    \
          |  /      \
          |  *------*
    ______|______

```

```
          .
          |
    ______|______
   /\     |     /\
  /  \    |    /  \
 /    \   |   /    \
/      \  |  /      \
*------*  |  *------*
          |
          |
    ______|______

```

If the first string is heavier, use the first drawing as the base of your output; if the second string is heavier, use the second drawing; if the strings have equal weight, use the third. Trailing whitespace is allowed.

---

I will be using a segment of the third drawing as the base for all of the following examples.

The first string should be placed onto the left pan, and the second string onto the right pan.

Place a string on a pan by placing its **non-space** characters within the 6x5 area immediately above the dashes, as marked by `#`s here (you may end up overwriting part of the balance scale - that is fine):

```
 ######_
 ######
 ######
 ######
/######\
*------*

```

All of these characters should be "settled" ie. either above a `-` character or another character from the string:

```
  WRONG         WRONG        CORRECT
    ____          ____          ____
 f /\            /\            /\
  l  \          /  \          /  \
 /    \        / hov\        / s  \
/oating\      /eri ng\      /ettled\
*------*      *------*      *------*

```

Additionally, the whole stack should be as flat as possible, meaning that of the six 1-wide columns, the height of the tallest and the height of the shortest must not differ by more than 1:

```
    WRONG              WRONG             CORRECT            CORRECT
[tallest:  5]      [tallest:  4]      [tallest:  5]      [tallest:  2]
[shortest: 0]      [shortest: 2]      [shortest: 4]      [shortest: 2]
      5__5_               ____              5_5__               ____
     45445             & /\               445454               /\
     45445             $% &$@             445454              /  \
    /45445             &%@%$&             445454             %&$@%&
   / 45445\           /&$@$&%\           /445454\           /$@$%$$\
   *------*           *------*           *------*           *------*

```

The exact order/arrangement of the characters does not matter. The following are all valid arrangements for the string "Weigh your words!":

```
    ____          ____          ____          ____
   /\            /\            /\            /\
 ds! \          / owd         oe \u        !Wd \
 ourwor        Wihuos        yoiwgr        eghioo
/Weighy\      /egyrr!\      /Wrhd!s\      /rrsuwy\
*------*      *------*      *------*      *------*

```

---

## Test cases

```
INPUT: "CODE GOLF", "coding challenges"
WEIGHTS: 32, 32
EXAMPLE OUTPUT:
          .
          |
    ______|______
   /\     |     /\
  /  \    |    nge\s
 /OO  \   |   challe
/CFGLED\  |  /coding\
*------*  |  *------*
          |
          |
    ______|______

```

```
INPUT: "", "$"
WEIGHTS: 0, 3
EXAMPLE OUTPUT:
    _     .
   /\*-_  |
  /  \  *-|
 /    \   |*-_
/      \  |   *-_
*------*  |     /\
          |    /  \
          |   /    \
          |  /    $ \
          |  *------*
    ______|______

```

```
INPUT: "YOU KNOW WHAT THEY SAY!", "there's_always_a_relevant_xkcd"
WEIGHTS: 75, 65
EXAMPLE OUTPUT:
          .   tr_a_s
          |  _hekx_y
          |-* elcdta
       _-*|   revanw
    _-*   |  /e's_al\
  T/\     |  *------*
 AUYOHY   |
 A!HWYK   |
/OTSMEW\  |
*------*  |
    ______|______

```

# Answer
# Charcoal, 110 bytes

```
ＵＭθ⪫⪪ι ω≔⁰ηＦθ≦⁻ΣＥι⁻⁺³№ακ№βκηＰ-×⁷_↑χ.¶¶≔³ζ¿η«≔∨›⁰η⁵ζＭ±⁶±²_Ｆ⁴⁺¶*-§_|_ι¿›⁰η‖»Ｐ-⁺|×⁶_Ｊ±⁴±ζＦθ«←⁶↑*↗⁴↓↘⁴←↖*←⪪ι⁶Ｊ⁹⁻ζ⁶

```

Try it online! Link is to verbose version of code. Takes input as an array of two strings. Explanation:

```
ＵＭθ⪫⪪ι ω

```

Remove the spaces from both strings.

```
≔⁰η

```

Assume the weights balance.

```
Ｆθ

```

Loop over both strings.

```
≦⁻ΣＥι⁻⁺³№ακ№βκη

```

Subtract the running difference from the weight of the string.

```
Ｐ-×⁷_↑χ.¶¶

```

Print the base of the balance scale.

```
≔³ζ

```

Assume that both pans are 3 off the ground.

```
¿η«

```

If the weights didn't balance...

```
≔∨›⁰η⁵ζ

```

... calculate the height of the left pan...

```
Ｍ±⁶±²_Ｆ⁴⁺¶*-§_|_ι

```

... draw the balance leaning down to the right...

```
¿›⁰η‖»

```

... and reflect if the left pan was heavier.

```
Ｐ-⁺|×⁶_

```

Otherwise draw a level balance.

```
Ｊ±⁴±ζ

```

Jump to the first scale pan.

```
Ｆθ«

```

Loop over the inputs.

```
←⁶↑*↗⁴↓↘⁴←↖*

```

Draw the scale pan.

```
←⪪ι⁶

```

Slice the input into substrings of length 6 and print them upside-down so that they fill the pan upwards.

```
Ｊ⁹⁻ζ⁶

```

Jump to the second scale pan.
> 7 votes

# Answer
# Python 2, 1101 1071 855 837 bytes

*-216 bytes with string compression*

*-18 bytes by reducing some repetition*

```
from zlib import decompress as Z
from base64 import b64decode as D
r=range(6)
j="".join
w=lambda a:0if not a else(2+2*(a[0]<'[')if a[0].isalpha()else 3)+w(a[1:])
t=Z(D('eJxT0FKIV1BQ0AWT8SAIJsAcXTCppQAGumBSSx8MYsBAC0kCAiCySAIKEJW4ZHGpxA8AejMemQ=='))
p=lambda k,l,m:j(map(j,[(t[2*l+m::6][:30-len(k)]+k)[i::6]for i in r]))
def A(a,b):
 e=cmp(w(j(a.split())),w(j(b.split())))+1;return Z(D('eJxVUUGuhTAI3HOKWTdBW/U2SHoQ4O6ftvrMb0hLZJgZAYABFZB5KxD4zrZtNJOJMaHWIIoa0D6Ao+jrWRiHEI7kMcQg9VLBCo9O3dCbdanepOvZQztF9rRH2xUlwISehIZ96HltLFqu1IMF2p1QH/S+1Ge7CT5blIVOxqUWFudjqHPSwhitjPbzf7uZ1HaIaG2hShFTfU7Eca6J7MBr1K+3/YbRVLd2VlE5oilp7EG/gV7+DPQuSAsZPm7PZE9HBY2G+ctS/QzR+whSGlPAGz4mkkl5Sf18SMvkyL9iF6aLd2WLUm/KDVzvJu93k2tLZXlwetgLmFH4MzcKCaJnqX1Fz3iOf4//Pi7EwP4BHmyJpg=='))[e::3].format(*map(lambda c:[p(j(([a,b]*3)[c].split()),e,c)[i::5]for i in r],r))

```

Try it online!

Run as `A(string_one, string_two`.

`w` calculates the weight of the string recursively.

`t` is the compressed and interlaced text of all six possible scales, which happens to compress very nicely.

`p` takes the string (with spaces removed), the weight of the string, and the side of the balance that string is on, and creates a 5x6 block of characters.

`A` takes the strings, and builds their blocks with `p`. The giant string at the bottom is three format strings interlaced and compressed.
> 6 votes

# Answer
# JavaScript (ES6),  ~~340~~  337 bytes

Takes input as an array of 2 arrays of characters. Draws the output character by character.

```
S=>(s=Math.sign(~(g=i=>(S[i]=S[i].filter(c=>c>' '?i+=/[a-z]/gi.test(c)?c>{}?2:4:3:0),i))(0)+g(1))+1,g=x=>y>10?'':(X=(r=x>9)?20-x:x,Y=(r?2-s:s)*2+y,S[+r][X>0&&X<7&&47-Y*6+X]||`. /\\|-_*
`[~X?x-10?y>9?X>3?6:1:[x+y*3-17,2*y-4,x+~y*3][s]/2|X<4?Y<5|Y>8?Y-9|X>7?1:X%7?5:7:~X+Y?X+Y-8?1:2^r:3^r:[7-x%3,6,5+x%3][s]:y&&4:8])+g(x<21?x+1:!++y))(y=0)

```

Try it online!

### How?

We define a first helper function that removes spaces from the input string \\$S\[i\]\\$ and returns its weight:

```
g = i => (                   // i = string index
  S[i] = S[i].filter(c =>    // for each character c in S[i]:
    c > ' ' ?                //   if c is not a space:
      i +=                   //     update i:
        /[a-z]/gi.test(c) ?  //       if c is a letter:
          c > {} ?           //         if c is in lower case:
            2                //           add 2 to i
          :                  //         else:
            4                //           add 4 to i
        :                    //       else (not a letter):
          3                  //         add 3 to i
    :                        //   else (a space):
      0                      //     remove c from S[i]
  ), i                       // end of filter(); return i
)                            //

```

NB: Because we re-use \\$i\\$ to compute the weight, it is off by one for \\$S\[1\]\\$.

We compute \\$s\\$, which is equal to \\$0\\$ if \\$S\[0\]\\$ is heavier, \\$2\\$ if \\$S\[1\]\\$ is heavier, or \\$1\\$ if both strings have the same weight:

```
s = Math.sign(~g(0) + g(1)) + 1

```

We now invoke the second helper function to draw the output:

```
g = x =>                     // given x:
  y > 10 ?                   //   if we've reached the last row:
    ''                       //     stop recursion
  :                          //   else:
    ( X = (r = x > 9) ?      //     r = true if we're on the right side
        20 - x               //       X = 20 - x on the right side
      :                      //     or:
        x,                   //       X = x on the left side
      Y = (r ? 2 - s : s)    //     Y is the position of the scale tray
          * 2 + y,           //     according to s and the current side
      S[+r][                 //     we try to extract a character from S[0] or S[1]:
        X > 0 && X < 7 &&    //       provided that we're located above the tray
        47 - Y * 6 + X       //       and using an index based on (X, Y)
      ] ||                   //     if this character doesn't exist,
      `. /\\|-_*\n`[INDEX]   //     we need to draw the balance instead
    ) +                      //     (see the next part)
    g(x < 21 ? x + 1 : !++y) //     append the result of a recursive call

```

Where `INDEX` is computed as follows:

```
~X ?                         // if this is not the last character of the current row:
  x - 10 ?                   //   if this is not the central column:
    y > 9 ?                  //     if this is the last row:
      X > 3 ? 6 : 1          //       draw the base ('_' or a space)
    :                        //     else:
      [ x + y * 3 - 17,      //       attempt to draw the beam:
        2 * y - 4,           //         using an equation depending on s
        x + ~y * 3           //         whose result must be -1, 0 or 1
      ][s] / 2 | X < 4 ?     //       if it's invalid or X is less than 4:
        Y < 5 | Y > 8 ?      //         if we're not over the chains:
          Y - 9 | X > 7 ?    //           if we're not over the pan:
            1                //             draw a space
          :                  //           else:
            X % 7 ? 5 : 7    //             draw the pan ('-' or '*')
        :                    //         else:
          ~X + Y ?           //           if this is not an interior chain:
            X + Y - 8 ?      //             if this is not an exterior chain:
              1              //               draw a space
            :                //             else:
              2 ^ r          //               draw the exterior chain ('/' or '\')
          :                  //           else:
            3 ^ r            //             draw the interior chain ('/' or '\')
      :                      //       else:
        [ 7 - x % 3,         //         draw the beam, using either '_' -> '-' -> '*'
          6,                 //         or just '_'
          5 + x % 3          //         or '*' -> '-' -> '_'
        ][s]                 //         depending on s
  :                          //   else:
    y && 4                   //     draw the central pillar ('|' or '.')
:                            // else:
  8                          //   append a line feed

```
> 3 votes

# Answer
# Java 10, ~~1043~~ ~~993~~ ~~988~~ ~~983~~ ~~919~~ ~~914~~ ~~900~~ 898 bytes

```
(a,b)->{var r=new char[11][21];for(var A:r)java.util.Arrays.fill(A,' ');int A=s(a=a.replace(" ","")),B=s(b=b.replace(" ","")),i=3,j,z;for(;++i<17;r[3][i]=A==B?'_':32)r[10][i]=95;for(i=11;i-->1;)r[i][10]=i>0?'|':46;if(A==B){for(r[8][0]=r[8][13]=r[8][20]=42;++i<20;)r[8][i<8|i>13?i:1]=45;for(A=B=i=8;i-->4;r[i][7-i]=r[i][20-i]=47)r[i][i]=r[i][i+13]=92;}else{for(r[i=5][z=A<B?0:13]=r[5][z+7]=r[9][13-z]=r[9][20-z]=42;i-->1;r[i][A>B?j+1:j-1]=42)r[i][j=A>B?17-i*3:3+i*3]=45;for(;++i<20;)r[i>13^A>B?9:5][i>13|i<7?i:1]=45;for(i=9;i-->1;r[i][i>4?21-z-i:4+z-i]=47)r[i][i+3+(i>4?9-z:z)]=92;r[0][A<B?i=4:16]=r[1][A>B?13:7]=r[3][A>B?7:13]=r[4][A>B?4:16]=95;A=9-i;B=5+i;}c(r,a,A,7);c(r,b,B,20);return r;};int s(String s){int r=0;for(int i:s.getBytes())r+=i>64&i<91?4:i>96&i<123?2:3;return r;}void c(char[][]r,String s,int p,int q){for(int c=0,i=p,j;i-->p-5;)for(j=q;j-->q-6&c<s.length();)r[i][j]=s.charAt(c++);}

```

-86 bytes thanks to *@ceilingcat*.

Input are two Strings, which will result in a character-matrix as result.

Try it online.

**Explanation:**

```
// Method with two String parameters and character-matrix return-type:
(a,b)->{
  // Result matrix, with 11 rows and 21 columns:
  var r=new char[11][21];
  // Initially fill the entire matrix with spaces:
  for(var A:r)java.util.Arrays.fill(A,' ');
  // Remove all spaces from the input-Strings,
  // and call a separated method to calculate the scores of both input-Strings:
  int A=s(a=a.replace(" ","")),B=s(b=b.replace(" ","")),

  // Fill the cells for the base with '_',
  // and also fill the cells for the balance-bar with '_' when the scores are equal:
  i=3,j,z;for(;++i<17;r[3][i]=A==B?'_':32)r[10][i]=95;
  // Fill the cells for the stand with '|':
  for(i=11;i-->1;)r[i][10]=i>0?'|'
  // And the top of it with '.':
  :46;

  // If the scores are equal:
  if(A==B){
    // Fill the four appropriate cells for the sides of the scales with '*':
    for(r[8][0]=r[8][7]=r[8][13]=r[8][20]=42;
    // Fill the appropriate cells for the scales themselves with '-':
        ++i<20;)r[8][i<8|i>13?i:1]=45;
    // Set A and B both to 8 to use later on,
    // and fill the appropriate cells of the robes with '/' and '\':
    for(A=B=i=8;i-->4;r[i][7-i]=r[i][20-i]=47)r[i][i]=r[i][i+13]=92;}
  // If the scores aren't equal:
  else{
    // Fill the four appropriate cells for the sides of the scales with '*':
    for(r[i=5][z=A<B?0:13]=r[5][z+7]=r[9][13-z]=r[9][20-z]=42;
    // Fill the appropriate four cells of the balance-bar with '-':
        i-->1;r[i][A>B?j-1:j+1]=42)r[i][j=A>B?17-i*3:3+i*3]=45;
    // Fill the appropriate cells of the scales with '-':
    for(;++i<20;)r[i>13^A>B?9:5][i>13|i<7?i:1]=45;
    // Fill the appropriate cells of the robes with '/' and '\':
    for(i=9;i-->1;r[i][i>4?21-z-i:4+z-i]=47)r[i][i+3+(i>4?9-z:z)]=92;
    // Fill the four appropriate cells of the balance-bar with '_',
    // and set A and B to 9 and 5 depending on which score is higher:
    r[0][A<B?i=4:16]=r[1][A>B?13:7]=r[3][A>B?7:13]=r[4][A>B?4:16]=95;A=9-i;B=5+i;}
  // Call a separated method to fill the cells above the scales with the input-characters:
  c(r,a,A,7);c(r,b,B,20);
  // And finally return the resulting character-matrix:
  return r;}

// Separated method to calculate the score of the given String:
int s(String s){
  // Initially start the score-sum at 0:
  int r=0;
  // Loop over the characters of the given String:
  for(int i:s.getBytes())
    // Increase the sum by:
    r+=
      // 4 for uppercase letters:
      i>64&i<91?4
      // 2 for lowercase letters:
      :i>96&i<123?2
      // 3 for any other character:
      :3;
  // And return the resulting sum:
  return r;}

// Separated method to draw the strings on top of the scales:
void c(char[][]r,String s,int p,int q){
  // Keep a counter so we know when we're done drawing the given String:
  for(int c=0,
  // Loop over the appropriate rows bottom to top:
  i=p,j;i-->p-5;)
    // Inner loop over the appropriate cells of this row left to right,
    for(j=q;j-->q-6
    // as long as we're not done yet with the input-String:
        &c<s.length();)
      // And fill that appropriate cell with the next character in line of the given String:
      r[i][j]=s.charAt(c++);}

```
> 2 votes

---
Tags: code-golf, string, ascii-art
---


title: Fancy String Replace

text:
# Question
Title: Fancy String Replace
let `S`, `a` and `b` each represent a string

Goal: Write a standard string replace function where the you replace all occurrences of `a` in a string `S` with `b` so long as `a` is not already part of an instance of `b`

for example, if we have the string `S` = `My oh my that there is a big ol' that`

and we wanted to do a fancy replace with `a = that` and `b = that there` we would replace every instance of `that` with `that there` as long as the instance of `that` isn't already an instance of `that there`

So in this case the output would be: `My oh my that there is a big ol' that there`

The first `that` is not replaced because it is already part of an instance of `that there`

### Notes

* All 3 inputs must be strings containing only printable ascii characters
* Input may be given as 3 separate strings or a list of 3 strings
* Input will be in the order `S`, `a`, `b` unless otherwise specified in the answer
* In order for `a` to be considered a part of `b`, all of the instance of `a` must be part of an instance `b`

### Some Corner Cases Explained

```
Input:  ["1222", "22", "122"]
Output: "12122"

```

In the case above example the latter `22` is replaced. Even though part of it is part of an instance of `b`, the entirety of it is NOT a part of the instance of `b`. Since the entire instance of `a` is not part of an instance of `b` it is replaced.

```
Input:  ["123 ", "23", "12"]
Output: "112 "

```

This test case illustrates the same case as above but perhaps in a slightly more clear way. Again the `2` in the middle is both part of an instance of `a` as well as part of an instance of `b`, however since all of `a` is not part of the instance of `b` it is still replaced.

```
Input: ["Empty", "", "p"]
Output: "pEpmptpyp"

```

In the above test case both the empty string before and after the `p` are not replaced as the can wholly be considered part of the instance of `p`.

### Other Test Cases

```
Input:  ["aabbaa", "aa", "aabb"]
Output: "aabbaabb"

Input:  ["Hello World!", "o", " no"]
Output: "Hell no W norld!"

Input: ["Wow, oh wow, seriously WOW that's... wow", "wow", "WOW,"]
Output: "Wow, oh WOW,, seriously WOW that's... WOW,"

Input: ["Empty", "", "b"]
Output: "bEbmbpbtbyb"

Input: ["Empty", "b", "br"]
Output: "Empty"

Input: ["Empty", "pty", "Empty"]
Output: "Empty"

Input:  ["aabbaaa", "aa", "PP"]
Output: "PPbbPPa"

Input:  ["121212","1","121"]
Output: "121212"

```

---

This is a question for code-golf so the shortest answer in bytes wins.

# Answer
> 6 votes
# Perl 6, 76 bytes

```
{$^b;$^a;&{S:g/$a<?{$!=$/;all m:ex/$b/>>.&{$!.to>.to||.from>$!.from}}>/$b/}}

```

Try it online!

Anonymous code block that takes input curried, like `f(a,b)(s)`.

I'm pretty sure this matches up with the intent of the question. Basically, it only makes the substitution if the position of `a` is not within any of the *overlapping* matches of `b`.

# Answer
> 5 votes
# Charcoal, 55 bytes

```
≔⁰εＦ⌕ＡθηＦ‹‹ιε⬤⌕Ａθζ∨‹ικ›⁺ιＬη⁺κＬζ«≔⁺⁺ω✂θει¹ζω≔⁺ιＬηε»⁺ω✂θε

```

Try it online! Link is to verbose version of code. Explanation:

```
≔⁰ε

```

Initialise a variable to show where the last replaced match ended.

```
Ｆ⌕Ａθη

```

Find all overlapping matches of `a` in `S`.

```
Ｆ‹‹ιε

```

If the next match does not overlap the last successful replacement...

```
⬤⌕Ａθζ∨‹ικ›⁺ιＬη⁺κＬζ«

```

... and it also overlaps no copy of `b` in `S`...

```
≔⁺⁺ω✂θει¹ζω

```

... then concatenate the intermediate substring between the last match and this match with `b` to the output string...

```
≔⁺ιＬηε

```

... and update the last match end variable to the end of this new match.

```
»⁺ω✂θε

```

At the end, add on any remainder of `S` and output the result.

# Answer
> 3 votes
# Wolfram Language (Mathematica), ~~43~~ ~~122~~ ~~96~~ 88 bytes

```
##2~StringReplacePart~Cases[#2~P~#,{a_,b_}/;And@@(#2<b||#>a&@@@P@##2)]&
P=StringPosition

```

Try it online!

+79: should be fixed.

Call as `f[a,S,b]`.

```
                                                                      & (* a function which finds *)
                            #2~P~#,                                     (* the positions {start,end} where a occurs in S *)
                      Cases[       {a_,b_}/;And@@(#2<b||#>a&@@@     )]  (* which are not a subrange of any of the *)
                                                               P@##2    (* positions of b in S, *)
##2~StringReplacePart~                                                  (* and replaces those parts of the string with b *)
P=StringPosition

```

# Answer
> 1 votes
# Perl 5 (`-lpF/;/`), 41 bytes

```
($_,$a,$b)=@F;s/(?<!(?=$b).)(?!$b)$a/$b/g

```

TIO

---
Tags: code-golf, string
---