Class: Clicking, Feeling

Time: March 29 & 31, 9:30 am - 12:15 pm

Place: Park in Gather

Instructor: Mengyi Qian ([email protected])

Topic: JS, Event Listener, MouseEvents

Reading: Mark Wigley – The Architecture of the Mouse

Additional Reading: Flat Journal Issue 02: Touch & Call for Proposals – Touch

<aside> ⚪ Unseen and unfelt, the mouse has to disappear in order to work. It has to be both part of my body and part of the computer, binding two organisms into one, allowing the electrical signals in the nervous system to stimulate and be stimulated by the electrical signals in the computer.

–– The Architecture of the Mouse

</aside>

<aside> ⚪ The unassuming yet ever present mouse is a remarkable prosthesis, radically extending the capacity of the body. More precisely, it sustains a new body able to move in new ways, in new spaces, starting with the sense that one is moving through the seemingly virtual space of the computer.

–– The Architecture of the Mouse

</aside>

<aside> ⚪ In working through the theme of TOUCH we asked if it is possible to understand Touch as Language, and how to make sense of the loss of that language during COVID? What is the syntax or grammar of touch? Can touch be learned? Is it possible to get better at touching and perceiving touch? Can touch be mediated and transmitted?

–– Call for Proposals – Touch

</aside>

Day 1

→ Introduction

→ Projects to discover (see also in this are.na channel)

• https://otheroffice.net – symmetrical mouse
• http://pointtothepointer.com/b3/index.html – still mouse and moving background
• http://sculpture2021.yaleschoolofart.org – break the edge of the browser + text hovering
• https://bridget.pictures – trace / tail
• https://round.is – zoom in & out
• https://pointerpointer.com – mouse position
• http://www.bo-en.info – shaping lines
• http://lanteri.studiovedet.com – customized cursor & navigation
• https://clickclickclick.click – detect all mouse events
• https://studiomoniker.com/projects/do-not-touch – gathered mouse movement

→ Code to Learn

• Mouse Events (Listen to these events using [EventTarget.addEventListener()](<https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener>))

  • Move: mousemove
  • Click: mouseup mousedown
  • Hover: mouseover mouseout mouseenter mouseleave

• Mouse Event Methods (Returns a read only value)

  • event.offsetX & event.offsetY (mouse position relative to the target edge)
  • event.clientX & event.clientY (mouse position/coordinate on the page)
  • event.movementX & event.movementY (shows the moving direction, relative to the last position)
  • event.target (the target element of the event)

• Element Dimension and Location ****(Returns a read only value)

  • Size: Element.offsetWidth & Element.offsetHeight
  • Position: Element.offsetTop & Element.offsetLeft
  • Read More: https://docs.microsoft.com/en-us/previous-versions/hh781509(v=vs.85)

• Sample Code

  myDiv.addEventListener('mousemove', (e) => {
    let coordX = e.offsetX;
    let coordY = e.offsetY;
  	console.log("X: " + coordX + ", Y: " + coordY)
  });
  

→ Starter-Kit & Examples

• https://glitch.com/edit/#!/touching-feeling-workshop
• https://touching-feeling-workshop.glitch.me

→ Instruction

Imagine the mouse is your hand or finger, and create two (or more) toching experiences on a webpage.

The first one can be inspired by the examples or other projects you’ve seen.

The second one should come from your own prompt (think of a verb).

Day 2

→ Free coding + Q&A

→ Presentation 🎉 start at 11 am