Color Picker on mobile

[ksen0]

Increasing Access

Many aspects of the editor already work well on mobile. Color picker working on mobile supports beginners and users of p5.js on more devices.

However, it's possible the color picker on mobile opens additional challenges to web accessibility that I'm not aware of - in which case I don't think it would be worth it.

Feature enhancement details

One UX challenge of using editor on mobile is that touch is less precise than clicking. The color picker button is already small. MVP version of this feature would be to make existing button touch-triggered. However, this could be a bit annoying because it conflict with using touch to navigate different lines. Maybe having a separate mode, when he editor text area is not in focus, and the whole line that contains the color picker is highlighted and clickable to open up the color picker. Maybe there are also other ideas how to do this!

[LalitNarayanYadav]

Idea for Improving the Color Picker on Mobile

Hey @ksen0 and everyone!

I love how much of the p5.js editor already works on mobile, super cool for learning and sketching on the go. Just wanted to share a few thoughts on how the color picker could work better on smaller screens without messing with the editing experience.

---

1. Make the Color Picker Button Easier to Tap

Right now, it’s pretty tiny on mobile. Increasing the touch area with some CSS should help:

@media (max-width: 768px) {
  .color-picker-button {
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 6px;
  }
}

---

2. Avoid Conflicts with the Editor (Tap Mode)

Tapping the color picker can get tricky since it might conflict with selecting lines. One idea: activate a “tap mode” when the editor isn’t focused:

if (isMobileDevice()) {
  editor.on('blur', () => enableColorTapMode());
  editor.on('focus', () => disableColorTapMode());
}

function enableColorTapMode() {
  document.querySelectorAll('.editor-line').forEach(line => {
    if (line.containsColorPicker()) {
      line.classList.add('color-tappable');
      line.addEventListener('click', openColorPickerForLine);
    }
  });
}

---

3. Highlight the Tappable Lines

Something subtle like this could help users spot where they can tap:

.color-tappable {
  background-color: rgba(255, 235, 59, 0.2);
  cursor: pointer;
}

---

4. A Quick Note on Accessibility

• Add aria-label="Color picker" for screen readers.
• Keep things keyboard-friendly.
• Avoid auto-triggering anything with a single tap.

---

This approach balances usability and accessibility, and allows touch interaction to feel intuitive without breaking editing functionality.

Would love to hear thoughts or suggestions from the team. Happy to help prototype this if needed.