-
Shared Minds Dimensionality (performance) Thesis Video in Dumbo New Portraits Synthetic Architectures Reconstructing Lost Spaces Web Art as Site
yilin ye
About
Portfolio
GitHub
yilin ye
About
Portfolio
GitHub
Week 10— 11
[Sound] >>
interact here
Week 8— 9
[Pixels] >> Ghost Dance
interact here 👻 — by Sofia & Yilin
For our Pixel project we used createCapture(VIDEO) function to experiment with the use of motion.
WORDS USED TO DESCRIBE PROJECT:
- trippy
- trancing
- ghosting
- movement based
Staring out we set the for variables needed:
let cam;
let ghostImage;function setup() {
createCanvas(windowWidth, windowHeight);
pixelDensity(1)
cam = createCapture(VIDEO);
cam.size(width, height);
cam.hide()ghostImage = createImage(width, height);
}For this purpose, we used function Lerp for a delayed motion effect. Here, since Lerp uses the 0.0 and 1.0 range to hold values (in this case the rgb 0-255 pixel color value), we experimented with the 0.0 values for archive a delayed color effect.
lerp(start, stop, amt)
start
Number: first value.stop
Number: second value.amt
Number: number.//used in code, in draw function: ghostImage.pixels[index] = lerp(rGhost, r, 0.1);
ghostImage.pixels[index + 1] = lerp(gGhost, g, 0.5);
ghostImage.pixels[index + 2] = lerp(bGhost, b, 0.9);
ghostImage.pixels[index + 3] = 255;To archive a changing effect over time, we created a new image through the variable backImage that was essentially used to modify/overall color of the screen cam capture. This effect was companied with the variable colTime that was placed in backImage index alpha value, in addition to an if statement that increased the opacity of image over time fro visual effect.
if (colTime < 255){
colTime ++ //increments saturation
} else {
colTime = 0 //resets image
} This can be seen on this version of the sketch:
https://editor.p5js.org/spss-ssps/full/s1jHTMCIj
Ultimately, this was not incorporated in the final version since we wanted to make the movement itself to take more protagonist. Therefore, we found a way to change the tint throughout time in the Lerp function (as shown below).
ghostImage.pixels[index] = lerp(rGhost, r, 0.2);
ghostImage.pixels[index + 1] = lerp(gGhost, g, tintTime);
ghostImage.pixels[index + 2] = lerp(bGhost, b, 0.8);
ghostImage.pixels[index + 3] = 255;
...
if (tintTime < 1){
tintTime += 0.005//increments saturation
} else {
tintTime = 0//resets image
} We also want to experiment with this “ghost effect”, showcasing what is moving and what’s not:
logic:
if the pixel value is not changing, then don't show the colored tint, keep the color the same; if the pixel value has changed/the people things have changed, then add the tint
so we put it in code:
if (r == rGhost && g == gGhost && b == bGhost){
//bakground
backImage.pixels[index] = 255
backImage.pixels[index + 1] = random(0,100);
backImage.pixels[index + 2] = 255;
backImage.pixels[index + 3] = colTime;
} else
backImage.pixels[index] = r
backImage.pixels[index + 1] = g
backImage.pixels[index + 2] = b
// backImage.pixels[index + 3] = colTime;
}This can be seen on this version of the sketch:
https://editor.p5js.org/yy4724/sketches/6ilnjw-y0
Final Version:
https://editor.p5js.org/spss-ssps/full/Xk5sxuU8N
with old version of p5 library (not laggy):
<script src="<https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js>"></script>
<script src="<https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js>"></script>
<!-- <script src="<https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/p5.js>"></script> -->https://editor.p5js.org/spss-ssps/full/b8KLXyQuM
full final code:
let cam;
let ghostImage;
let tintTime = 0function setup() {
createCanvas(windowWidth, windowHeight);
pixelDensity(1)
//the video from webcam
cam = createCapture(VIDEO);
cam.size(width, height);
cam.hide();
ghostImage = createImage(width, height);
}function draw() {
cam.loadPixels();
ghostImage.loadPixels();
// backImage.loadPixels(); for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
let index = (x + y * width) * 4;
//holds cam color values
let r = cam.pixels[index];
let g = cam.pixels[index + 1];
let b = cam.pixels[index + 2]; //holds color values of the "ghost image"
let rGhost = ghostImage.pixels[index];
let gGhost = ghostImage.pixels[index + 1];
let bGhost = ghostImage.pixels[index + 2]; //combines and interpolates ghost and color values with lerp function for motion effect
ghostImage.pixels[index] = lerp(rGhost, r, 0.2);
ghostImage.pixels[index + 1] = lerp(gGhost, g, tintTime);
ghostImage.pixels[index + 2] = lerp(bGhost, b, 0.8);
ghostImage.pixels[index + 3] = 255;
}
} if (tintTime < 1){
tintTime += 0.005 //changes color
} else {
tintTime = 0//resets image
}
ghostImage.updatePixels();
image(ghostImage, 0, 0, width, height);
}Week 5 — 6
[functions, arrays, and objects] > > ocean and sea // refined!!
For this past two weeks, I refined the orignal mountains or sea sketch with the functions, array & objects that we learned!
I defined 3 functions, for the first scrolling screen as seen on the side:
function drawbg
function drawText
function calculateNewXPosition
in function drawText, I draw the text on the screen
in function calculateNewXPosition, I calculate the new x position of the text
Week 4
[loops] > > patterns: star, star; kira; kira
interact here ✨
This week’s idea came from making a favorite shape — I chose the star shape that appeared in my self-protrait previously.
when drawing the shape of the stars, at first I did not calculate the width & height accordingly to the canvas, so that it wouldn’t look like a proper star shape. I learned that the porportion really matters in drawing the shapes (which I achived using four ellipses covering the background, to accentuate the star- ish shape in the middle).
Continuing on, I tried to make it interactive : both change the size of the star, as well as the color, when mouse hover over.
Week 3
[conditional logic] >> it’s all about decisions, the mountains or the sea
interact and make a decision here ⛰️🌊— where you wanna go, 山还是海。
For this week’s sketch, I started with the idea of making a scrolling text on screen visual (knowing it’s doable since we learned the bouncing ball). Loved 山海 mountain/sea— 山海经 Classic of Mountains and Seas is a classical Chinese text about the mythic animals and beats. (I’m doing a dance piece at the moment that’s also got inspired from 山海经 :) )
The design idea is simple: if you click the lines with blue texts 转身向大海走去/ turn around and walk to the ocean the visual turns into the ocean; if click on the brown texts 转身向山里走去/ turn around and walk to the mountains, the visual became the mountains.
1. design the initial screen, with the scrolling texts, in 4 different lines, and keep on repeating.
similar to the bouncing ball example, I used the if conditional statement inside the for loop. I also set variables (a -- h) and calculated with canva’s width & height for each row’s starting coordinate.
2. draw the two screens, one for the mountain, and the other for the sea. I used some shape and try to make a moving wave :0
3. make blue texts and brown texts have different visual effect when being clicked on.
My question was: how to set that when click/ pressed at certain mouseY value (0-60; 120-180; 240-300, etc) draw image 1; if click on other mouseY value, draw image 2? Eventually with help we used modulo % to solve this.
4. use logic to play between the three different screens. (ran into issue at this logic part— I tried to write pseudo-code first). After office hour, I learned that there are two ways:
- set screen as an variable, and assign 0, 1, 2 values to the screen.
click to see this version of the sketch/ code 🖱️
- use true/ false logic, and set screen 1, 2, and 3.
click to see this version of the sketch/ code 🖱️
key takeaways from the worksheet
- Write pseudo code first, then identify which variables do I need? Which ones should I set? Etc.
- where to put “let”, where to define the variable. Importantly if it’s globally or not.
Week 2
[animation] >> animated Self - Protrait
interact with the animated self-protrait here!!
In considering this week’s self-protrait animation, since I heard a friends feedback of the main body looks like a “vest”, I decided to polish the draft with another function (previously I used the blue circles with the same background blue color, to cover the pink body to create the amorphous shape)
- the curveVertex( ) function to re-draw the main body with smoother edges and adopt a slightly different color (hotter pink).
- used the translate(mouseX/10, mouseY/10) so the main body would be following the mouse and move around.
- using if (mouseIsPressed == true) and fill(random(), random(), random()) functions, so when pressing the mouse the star would change to random color, and also the mouth will open
- added the background using random function, to create random blue shining lights!
Week 1
[drawing]>> Reflection: Computation & Me
With a background in anthropology, non-fiction storytelling, and dance, I've always been intrigued by the potential of using computation to bring people and bodies together through movement.
In 2023, during ITP Camp, I co-created an interactive project called A-PARTY with Mary Jiang, aiming to explore the idea of "partying while being apart." Driven by our passion for dance, and belief in human connection through movement, we incorporated elements of language, sound, contact improvisation, and the dynamics of proximity and distance. One of our biggest inspirations during the brainstorming and prototyping phases was Body, Movement, Languae by Bill T. Jones and Google Creative Lab. Due to the limitation of time back then, we created this version that’s accessible with web-cam; but with themes of homecoming, dialect/language, body movement as language, I wish to continue explore the affordances of comptutation and its influence in therapeutic and expressive way. I’d also love to create around performance + projection mapping.
Besides the intersection of coding with art forms like dance & movement, I’m also excited for its potential in creating culturally significant yet often overlooked narratives. Whether in installations, where generative computation can enhance the experience and highlight turning points in stories, or in performances, where coding can foster participatory environments, this intersection holds endless creative possibilities.
Self - Protrait
I thought about “a hot mess” while creating this self portrait: Hot pink amorphous messy self, happily existing believing in good energy. (recently like blue more and more, so that’s my background color!)
In the process, I find having the correct starting point coordinates of each shape, as well as appropriate width & height (scaling it correctly), challenging. I retried and tested many times to put individual shapes together – e.g. five triangles for the five-pointed star, using ellipses with the same canvas color on top of a rectangle to create an “amorphous” body, etc. Hopefully in the future, I could learn other functions/ find ways to create more smooth and seamless outlines like the one I have in hand-drawn sketches.