The project, Bot Party, is an interactive game relying on sound and physical contact with another person.This game is made up of a bunch of cubes which are called bots, which communicate with other users but only when you touch someone else who is holding another Bot. This project was created to help break the ice between strangers. It requires a secret message from each bot that can only be revealed through holding hands with people and experimenting until the message is revealed. The secret messages are randomly generated through software on the main part of the game. I admire how this game uses technology to aid human connection in a playful, lighthearted way. I also think it is really interesting that this software was built to receive human touch inputs from a sensor, this is something I would like to explore with code. This project was created by Pheonix Perry. She works primarily as a game designer, but also founded the Code Liberation Foundation which teaches women between ages 16-60 how to code.
I had a rough week and was unable to complete this code 🙁 It was supposed to be a rocket traveling through space with stars generating in the background and asteroids randomly generating to travel parallel to the ship to give the impression of speed. The two static objects were the rocket and the earth. I drew them myself, trying to get a laugh. But since the code doesn’t work, it just seems overwhelmingly pathetic.
//jubbies
var stars = [];
var asteroids = [];
var rocket;
var counter = 0;
function preload() {
rocket = loadImage("https://i.imgur.com/YMS5MRv.png");
earth = loadImage("https://i.imgur.com/7N4avKI.png");
}
function setup() {
createCanvas(400, 250);
frameRate(12);
//setting up the stars - priming the array
for (var i = 0; i < 140; i++) {
var sx = random(width);
var sy = random(height);
var sWidth = random(20);
stars[i] = makeStars(rx, ry, 2, sWidth);
}
//setting up the asteroids - priming the array
for (var i = 0; i < 4; i++) {
var rx = random(width);
var ry = random(150);
asteroids[i] = makeAsteroids(rx, ry);
}
}
function draw() {
background('black');
//EARTH (BEHIND ALL)
image(earth, 270, 40, 50, 50);
//STARS
updateAndDisplayStars();
removeStarsOutOfView();
addNewStars();
//ASTEROIDS
updateAndDisplayAsteroid();
removeAsteroidsOutOfView();
addNewAsteroids();
//ROCKET
image(rocket, 30, 140, 150, 80);
counter++;
}
//STARS- ALL FUNCTIONS
function updateAndDisplayStars(){
for (var i = 0; i < stars.length; i++){
stars[i].stepFunction();
stars[i].drawFunction();
}
}
function removeStarsOutOfView(){
//dropping off old stars
var starsToKeep = [];
for (var i = 0; i < stars.length; i++){
if (stars[i].x + stars[i].width > 0) {
starsToKeep.push(stars[i]);
}
}
stars = starsToKeep;
}
function addNewStars(){
var newstars = 0.455
if (random(0, 1) < newstars) {
stars.push(makeStars(255, 255, 3, random(1, 10));
}
}
function starsStep() {
this.x -= this.dx;
}
function starsDraw() {
stroke(this.c);
strokeWeight(this.size);
point(this.x, this.y);
}
function makeStars(sx, sy, sdx, sWidth) {
var s = {x: sx, y: sy, dx: sdx,
width: sWidth,
c: fill(255),
drawFunction: starsDraw, stepFunction: starsStep
}
return s
}
While I was brainstorming for this assignment, I kept thinking about one of my favorite poems from my childhood – ‘Early Bird’ by Shel Silverstein. He puts life in perspective in only a few lines. I decided I wanted to capture the lighthearted yet powerful impact of this poem in this assignment, hopefully bringing more life to the words.
I love Silverstein’s illustrations so I wanted to tell this story in the same visual language. I used the illustrations that are typically paired with this poem as a starting off point.
After drawing the worm in Procreate and recording some snores from local talent (within the confines of my house, that is.. #2020), I used a DAW to boost some up some of the low end of the snore recording as well reduce the ear-piercing frequencies of the original bird tweeting. I began assembling the final composition.
Sleepy worm
A pretty blatant Easter egg I included was the giving tree (from the book rattling the hearts of children since 1964, The Giving Tree). I figured it was a fun inclusion that helped make my scene feel more Shel Silverstein-y.
I am so excited that we are discussing sound synthesis in this class, since in my free time I produce music (for fun). Recently, I have been fascinated by sound synthesis and how computers can collaborate with a musician to make new sounds possible. In brainstorming what to write about for this LO, I thought of Andrew Huang, a Canadian YouTuber and music producer who is particularly well-known for taking samples of everything and making unexpectedly delightful compositions with these samples. His YouTube channel provides a wealth of entertaining information about production techniques and cool new gear he discovers, so it was hard for me to select a single thing to discuss in this blog. That being said, his most recent video about the Dubler microphone from Vochlea absolutely fascinated me.
This microphone ‘instantly’ turns audio input into MIDI information. The coolest thing about this is that you train the software to recognize the different sounds you sing into it, so you can beatbox into the mic and hear live playback of a full drum set. This is absolutely INSANE because this can transform the way a musician performs and records music. For example, a beatboxer could change the sound of their instrument (their mouth) in live performance by using this mic to control an 80s style drum kit or Skrillex style drum kit with a click of a button. Or you could record a virtual guitar solo with your voice if you don’t like playing a keyboard. I absolutely love how this invention uses technology to change the way people can manipulate sound in a way that has seemed like a fantasy until only recently. I think this relies heavily on the software’s ability to differentiate between different syllables and vowels. With recent development in audio controlled experiences like Alexa and Siri, it makes sense to me that technology is more capable than ever to precisely distinguish and interpret audio information.
Some honorable mentions for this blog post that showcase other musicians using electronics to challenge traditional music practices (some of my favorite videos of all time):
Electronic Music for ORCHESTRA – Composer David Bruce interprets electronic composition for an orchestra, challenging the way sound for orchestra is typically conceptualized and performed. BEAUTIFUL!!!
Jubbies Steinweh-Adler In Response to Holly Liu’s LO #4, September 26, 2020
In response to Holly Liu’s Looking Outward’s about Christina Kubisch’s Cloud, I have to say, I wish I could experience this interactive art installation myself. This piece reminds me of a theremin, an instrument that also uses electromagnetic field generation but instead of curly wire, it uses two antennae. I find it interesting how Kubisch’s cloud seems so much more inviting to me than a theremin, which I believe is a result of the use of bright color and whimsical arrangement of wire.
I explored some other works of Christina Kubisch, who apparently is well-known for her explorations of sound art using electromagnetism. I really appreciate how she has taken a simple mechanical principle and used it to inspire so many different experiences. My favorite of her work so far is Electrical Walks, which again makes use of wireless headphones responding to electromagnetic fields. The interesting distinction of this project is that the headphones make audible the sounds of above- and underground fields generated by everyday objects from light fixtures to streetcar cables. I absolutely love how this project allows people, for perhaps the first time, question what unassuming objects like security cameras sound like.
For my portrait, I wanted to replicate my experience of using this program, which was one that was filled with awe. I tried inserting many different phraseI used the text “oooh” and “ahhhh” to paint the face depending on if the mouse is clicked or not. I wanted to use variation of text size, spread, and density in order to give the user some variability in how they paint the face. I am using a portrait of myself for this assignment.
//JSTEINWE - 09 - PROJECT (October 31st, 2020)
//JUBBIES STEINWEH-ADLER
//SECTION D
//FACE GENERATION
var tSize; // size of words
var tSpread; //spread of words from one another
var tWord; //word written
var tn; // number of words in one cluster
function preload() {
var faceLink = "https://i.imgur.com/Q0Fw6fr.png";
faceImage = loadImage(faceLink);
}
function setup() {
createCanvas(480, 500);
background(120, 180, 255); //background
textSize(20);
fill('green');
textAlign(CENTER);
text("[click and hover mouse to paint]", width/2, 400); //click instructions
}
function draw() {
if (mouseIsPressed) {
tn = 5;
tSpread = 30;
tSize = random(30, 50);
tWord = "ooh";
} else {
tn = 3;
tSpread = 10;
tSize = random(1, 20);
tWord = "ahh";
}
typing(mouseX, mouseY); // words written at X and Y coords
}
function typing(x, y) {
//COLOR OF MOUSE ON CANVAS
var xColor = constrain(mouseX, 0, width); // coords of mouse X on canvas
var yColor = constrain(mouseY, 0, height); // coords of mouse Y on canvas
var mouseColor = faceImage.get(xColor, yColor); // gets color
fill(mouseColor); //fills the type with specified color
//TYPE PROPERTIES
for (i = 0; i < tn; i += 1) { // determines spacing and density for each cluster
var t = random(0, 30); //random angle to create natural cluster
var typingX = x + cos(t)*(i*(tSpread));
var typingY = y + sin(t)*(i*(tSpread));
textSize(tSize);
text(tWord, typingX, typingY); //click instructions
}
}
Lauren McCarthy is a computer programmer and artist who often uses her knowledge of coding and computers to pose interesting interactions with both entities as they intersect. I admire the way that she uses her knowledge of two different worlds to create a valuable commentary on both of them. She actually created P5.JS, which I didn’t know until after that I watched her lecture. I found her work very admirable because she knows enough about both human behavior and computer behavior to push both to their boundaries of discomfort. I love how with her project ‘Follower’, she creates an almost-normal service that has just enough dissonance from an acceptable service to allow for unexpected discoveries.
Her work always depends heavily on the pragmatism of computers in order to contrast the fickle nature of humans. I admire how there seems to be a whimsical element to her work, it is almost as if her experience with computers has taught her to embrace her human volatility. Ultimately, I admire how she uses technology to create socially, emotionally, and even physically uncomfortable situations that challenge conventional ideas of how computers and humans exist beside one another.
Although a disappointingly small amount of code to show for it, this assignment was a huge challenge. Interpreting the math formulas in order to take intentional creative liberties required a lot of guess work and experimentation. I made many iterations of interactions involving different curves until I came across the epicycloid plane curve and figured I would try to work with it. This whole project for me was just about experimenting which in the end I found really rewarding, I was able to make an almost 3D feeling interactive shape with pretty streamlined code.
// Assignment 07 - PROJECT
// Name: Jubbies Steinweh-Adler
// Email: jsteinwe@andrew.cmu.edu
// Class: Section D
var ns = 60; //rotation
var nm = 0.4; //sensitivity of wrarotation
var size = 3;
function setup(){
createCanvas(600,400);
}
function draw(){
background(0);
translate(width/2,height/2);
stroke(250, 230, 0);
strokeWeight(5);
fill(0);
var t = 3;
var a = map(mouseX, 0, width, 1, 7);
var b = map(mouseY, 0, height, 1, 100);
var offsetX = width/2 - mouseX;
var offsetY = height/2 - mouseY;
//DRAW SHAPES
for(let i = 0;i < 60; i++) {
circle(x1(t+i, a, b) + offsetX, y1(t+i, a, b) + offsetY, 7);
square(x1(t-i, a, b), y1(t-i, a, b), map(mouseY, 0, height, 0, 30), 3);
}
}
function x1(t, a, b) {
return (a + b) * cos(t/ns) - b * cos((a + b) /b * (t/nm));
}
function y1(t, a, b) {
return (a + b) * sin(t/ns) - b * sin((a + b)/b * (t/nm));
}
the x and y functions respectively from the Mathworld website (https://mathworld.wolfram.com/Epicycloid.html)
Notice how the columns in the spiral meld into a new column when the shape rotates beyond the rotation capacity! It’s fun to play with : ^)
According to Wikipedia, “Wikiracing is a game using the online encyclopedia Wikipedia which focuses on traversing links from one page to another”. I used to play Wikiracing in high school due to school-provided computer restrictions which severely limited entertainment websites, (3-Clicks-To-Jesus was a popular variation of this game requiring the player to start at a random word and try to reach ‘Jesus’ in – you guessed it – three clicks). When I saw Chris Harrison’s Wikipedia data visualization project, ‘Cluster Ball’, I was immediately reminded of Wikiracing and the intricately woven nature of the Wiki universe. This graphic elegantly depicts the interrelations of wikipedia articles that have a common denominator. As stated in the project description, links between category pages are illustrated by edges, which are color coded to represent their depth from the parent node. Not only would this graphic serve as a handy aid in an intense round of WIkiracing, but it uses simple means to demonstrate how humans communicate and organize language. I admire this work because I think it is surprisingly moving to see how organically the structures of interrelation seem to develop and how every word contributes to and depends upon a greater system of words. The, overwhelming, intricate, and organic architecture and relationships of a single word to a system of words reminds me of ants working together in clearly systematic ways that I don’t quite understand, but can’t help but appreciate the intricacy of.
A piece of random art that I admire is “Arc“ by Marius Watz. This piece is interesting to me because it uses ‘pseudo- random numbers’ to generate a 2-D depiction of a 3-D Design. After this initial translate of 3D to 2D, this piece is translated yet again from digital means to physical means as it is screen-printed by hand onto a canvas. The piece uses very vibrant colors which draw the eye into the piece. The artist has created depth by simulating a 3-D shape, which works again with the colors to keep the eye engaged. I think this piece is a very successful example of how random numbers can lead to organic and engaging pieces of tangible art.
![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](../../wp-content/uploads/2021/08/cropped-notcurrentsemester.jpg){kind=small}
![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](../../wp-content/uploads/2021/09/stop-banner.png)
