Jacob Hunwick

Animating Bezier Curves for an A.I. Interface

In 2023, I collaborated with a team of 5 at the ArtSciLab to create a visual interface for the Lab’s A.I. assistant. The assistant was named “Asli”, and was intended to aid in institutional memory. For this project I wanted to achieve 3 things with my visual interface:

  1. Light Processing Load
  2. Scalable
  3. Interactive

Goal One: Light Processing Load

Right away I knew that video and images were not going to be of use to me. All video and image formats are very processor dependent. That is why, after all, that gaming video graphics cards have pushed the limits of computation power. So instead, I decided to create my interface with SVG graphics, then convert the graphics into JavaScript. This way, instead of loading pixels, the visual interface is generated within the webpage by a JavaScript file. This is the lowest possible processing load for the maximum amount of visual information.

Goal Two: Scalable

Utilizing p5.js, it is possible to input the maximum width of an element, and the CSS class or ID when generating the visual inside a webpage. This allows the visual to be scalable. I was able to implement an interactive and scalable JavaScript illustration in a digital magazine concept I created for the ArtSciLab.

Goal Three: Interactive

With realtime listeners, users get immediate feedback. Whatever they do in the browser: click, move the mouse around, move a slider, click buttons, can be coded into the interactive elements of the visual.

With all off this in mind, please now take a look at the visual I created:

https://thehunwicks.com/Asli-Prototype/index.html

To give an example of how it is now possible to animate the characteristics of each individual point, here is a snippet from the code:

function drawAsliHead(v0) {
  stroke(39, 53, 64);
  strokeWeight(12);
  fill(255);
  
  beginShape();
  
  let v1 = { x: v0.x, y: v0.y };
  vertex(v1.x, v1.y);
  
  let v1c1 = { x:(v1.x + 21.69), y:(v1.y - 47.13) };
  let v1c2 = { x:(v1.x + 237.13), y:(v1.y - 154.85) };
  let v2 = { x:(v1.x + 362.07), y:(v1.y) };
  bezierVertex(v1c1.x, v1c1.y, v1c2.x, v1c2.y, v2.x, v2.y);
  
  let v2c1 = { x:(v2.x + 29.89), y:(v2.y + 65.19) };
  let v2c2 = { x:(v2.x - 13.46), y:(v2.y + 343.77) };
  let v3 = { x:(v2.x - 166.66), y:(v2.y + 343.77)};
  bezierVertex(v2c1.x, v2c1.y, v2c2.x, v2c2.y, v3.x, v3.y);
  
  let v3c1 = { x:(v3.x - 126.66), y:(v3.y)};
  let v3c2 = { x:(v1.x - 18.09), y:(v1.y + 242.58)};
  bezierVertex(v3c1.x, v3c1.y, v3c2.x, v3c2.y, v1.x, v1.y);
  
  endShape();
}

This function defines the shape of the head, and each point is define sequentially. This opens the door for the shape to be modified with user input alone. In the future, I intend to make animations that leverage this capability to make interactive icons that react to user input.

This could, for example, be used to indicate:

  1. Completion of tasks,
  2. Modification of records,
  3. Or adding complex morphing animations to webpages including medical illustrations or technical diagrams.

One could in theory load in an object and have it be capable of rotating with the simple movement of the mouse. This approach is much lighter weight than loading 3D objects or videos, it just requires a detailed understanding of the image you are trying to convey.