Mini Project 2: Interactive Memories and Dreams

Project Link

https://editor.p5js.org/King-Raphael/sketches/x29e94ItF

Brief Description and Concept

In this project, I worked with my partner Nomgo to bring his dream to life through interactive visuals. Nomgo had a sweet dream about his distant girlfriend, which I interpreted in code. The visual combines beams of light extending from his eyes, symbolizing a bridge between him and his girlfriend, and a rotating hexagram inside a circle in the background to add dynamic movement.

Visual Documentation

Coding

let x = 189;
let y = 25;
let z = 25;
let angle = 0;
let particles = [];
let raD = 150;
let x1;
let y1;
let x2;
let y2;
let x3;
let y3;
let x4;
let y4;
let x5;
let y5;
let x6;
let y6;

function setup() {
  createCanvas(400,400);
}

function draw() {
  
  background(221,160,221);
  stroke(0);
  
  //symbol
  // let angle = frameCount * 0.01;
  // rotate(angle);

  stroke(0);
  strokeWeight(2);
  // fill(0,0,0,0);
  x1 = width/2 + cos(angle) * 150;
  y1 = height/2 + sin(angle) * 150;
  x2 =  width/2 + cos(angle+2/3*PI) * 150;
  y2 = height/2 + sin(angle+2/3*PI) * 150;
  x3 =  width/2 + cos(angle+4/3*PI) * 150;
  y3 = height/2 + sin(angle+4/3*PI) * 150;
  triangle(x1,y1,x2,y2,x3,y3);
  
  x1 = width/2 + cos(angle+1/3*PI) * 150;
  y1 = height/2 + sin(angle+1/3*PI) * 150;
  x2 =  width/2 + cos(angle+PI) * 150;
  y2 = height/2 + sin(angle+PI) * 150;
  x3 =  width/2 + cos(angle+5/3*PI) * 150;
  y3 = height/2 + sin(angle+5/3*PI) * 150;
  triangle(x1,y1,x2,y2,x3,y3);
  
  angle += 0.05;
  
  circle(200,200,300)
  // triangle(80,290,200,50,320,290)
  // triangle(80,110,200,350,320,110)
  
  strokeWeight(1);
  fill(142,58,89,);
  bezier(258,219,125,332,279,332,142,219);
  
  
  //face
  beginShape();
  vertex(142,219);
  vertex(139,156);
  vertex(258,219);
  vertex(261,156);
  vertex(142,219);
  endShape();
  
  
  //moustache
  fill(100,65,23);
  triangle(170,215,200,200,230,215);
  triangle(175,215,200,200,225,215);
  triangle(180,215,200,200,220,215);
  triangle(185,215,200,200,215,215);
  triangle(190,215,200,200,210,215);
  triangle(195,215,200,200,205,215);
  
  //eyes
  fill(188,143,143);
  ellipse(170,189,25,12.5);
  
  fill(250,128,114);
  ellipse(170,189,25,6);
  
  point(170,189);
  
  fill(188,143,143);
  ellipse(230,189,25,12.5);
  
  fill(250,128,114)
  ellipse(230,189,25,6);
  
  fill(0);
  point(230,189);
  
  
  //third eye ong
  fill(210);
  ellipse(200,170,12,20);
  
  point(200,170);
  
  stroke(0);
  line(142,219,261,156);
  
  noFill();
  bezier(227,179,221,163,262,200,259,165);
  
  noFill();
  bezier(173,179,179,163,138,200,141,165);
  
  //hair
  stroke(100,65,23);
  fill(100,65,23);
  triangle(140,155,180,110,260,155);
  triangle(140,155,160,120,260,155);
  triangle(140,155,140,130,260,155);
  triangle(140,155,130,140,260,155);
  triangle(140,155,200,100,260,155);
  triangle(140,155,220,110,260,155);
  triangle(140,155,240,120,260,155);
  triangle(140,155,260,130,260,155);
  triangle(140,155,270,140,260,155);
  
  
  //beam
  noStroke();
  fill(255,0,0,127);
  triangle(300+z,x,230,189,350-y,x);
  
  noStroke();
  fill(255,0,0,127);
  triangle(100-y,x,170,189,50+z,x);
  //triangle(100,400,170,189,50,400);
  
  x = x + 1;
  y = y - 0.1184;
  z = z - 0.1184;
  if (x >= 400){
    x = 189;
    y = 25;
    z = 25;
  }
  
  //yellow beam
  noStroke();
  fill(255,255,0,40);
  triangle(0,0,200,170,400,0);
  
  
}

1. Initial Setup and Variable Declaration

Variables x, y, z: Control the positions and motion of the red beams.
Variable angle: Used for rotating the hexagram symbol dynamically.
Variables x1, y1, x2, y2,...: Store coordinates for the vertices of the rotating triangles in the hexagram.
Function setup(): Initializes the canvas with a size of 400×400 pixels.

2. Dynamic Hexagram Symbol

Rotating Hexagram: The code draws two equilateral triangles that rotate around the center of the canvas, creating a hexagram-like shape. The cos() and sin() functions calculate the vertices based on the angle variable, which changes over time to produce rotation.

3. Two Beams

Red Beams: Two red beams extend from the eyes and move outward. The variables x, y, and z control their positions, and they reset when reaching the canvas edge.
Yellow Beam: A large, transparent yellow triangle extends from the top, adding another layer to the visual dynamic.

Findings / Lessons Learned

The project taught me how to integrate motion in a visual sketch without overwhelming the original concept. Besides, Experimenting with variables and conditionals helped me control complex movements smoothly.

Reflection Prompts

Design Process

Partner’s Name: Nomgo
Memory/Dream: Nomgo shared a memory of longing for his girlfriend, and I represented this visually by using laser beams as a metaphorical bridge.
Feedback: Nomgo appreciated the visual interpretation, particularly the way the beams emphasized distance and connection.

Interpretation Using Code

Nomgo’s description of his dream involved distance, connection, and emotion. By using beams of light and a rotating symbol, I aimed to represent the emotional distance and the bridge he imagines between himself and his girlfriend.

Digital vs. Real-World Interactions

After working with mouse and keyboard interactions, I imagined an interactive device, like a pair of gloves, that could translate the emotional intensity of memories into digital representations, allowing more nuanced interactions in p5.js. This could deepen the connection between digital art and emotional experience.