/*Rachel Park
rsp1@andrew.cmu.edu
Section B @ 10:30AM
Project 07: Composition with Curves*/
function setup() {
createCanvas(480, 480);
}
function draw() {
background(240);
translate (width/2,height/2);
noStroke();
stroke(100);
noFill();
drawHypotrocloid();
}
function drawHypotrocloid() {;
//initializing the x and y variables
var x;
var y;
//setting the variables for the hypotrocloid equation
var a = 200;
var h = map(mouseX, 0,width, 0, 480);
var b = a/map(mouseY, 0, height, 0, 480);
//drawing the hypotrocloid
beginShape();
for (var i = 0; i < 550; i++) {
var angle = map(i, 0, 550, 0, TWO_PI);
var x = (a - b) * cos(angle) + h * cos (((a - b)/b)*angle);
var y = (a - b) * sin(angle) - h * sin (((a - b)/b)*angle);
vertex(x, y);
}
endShape();
}
For this project I decided to use the hypotrocloid.
Like the screencaps of my code below, I found that I could generate very interesting shapes and patterns just from the one type of curve, and had fun moving around the mouse to try out different configurations.
These screencaps of my code above represent the patterns generated as the mouse if moved from the left to the right side of the canvas.
These following screencaps represent the patterns generated as the mouse is moved from the top to the bottom of the canvas.
As stated on their official website, “the Reactable was conceived and developed since 2003 by a research team at the Pompeu Fabra University in Barcelona.”
This project really intrigued me because I have a big interest in electronic music. The Reactable works similarly like the launchpad that many DJs use to create their sounds, but it differs in that it works on a flat interactive table. On a typical launchpad, the DJ presses stationary buttons on an electrical box, but with the Reactable, the DJ is able to place the small key boxes anywhere on the table itself to create sounds. Twisting and sliding the key boxes around the table alters the sounds and in turn creates new and unique music.
The video above shows a demonstration of the project itself.
I thought it was cool how technology is also evolving in the music industry in order to make new sounds in new ways that is also serving as new entertainment as the DJ performs with this device.
/*Rachel Park
rsp1@andrew.cmu.edu
Section B @ 10:30AM
Project 06: Abstract Clock*/
var prevSec;
var millisRolloverTime;
function setup() {
createCanvas(620, 620);
noStroke();
millisRolloverTime = 0;
}
function draw() {
background(17,76,98);
// Fetch the current time
var H = hour();
var X = (H%12);//so that the clock becomes a 12hr clock instead of 24 hr
var M = minute();
var S = second();
if (prevSec != S) {
millisRolloverTime = millis();
}
prevSec = S;
var mils = floor(millis() - millisRolloverTime);
//showing text of time
fill(255);
text(nf(X,2,0) + ':' + nf(M,2,0) + ':' + nf(S,2,0),width/2-30,15);
var hourBarWidth = map(H, 0, 23, 0, width);
var minuteBarWidth = map(M, 0, 59, 0, width);
var secondBarWidth = map(S, 0, 59, 0, width);
// Making the seconds into a smoother transition
var secondsWithFraction = S + (mils / 1000.0);
var secondsWithNoFraction = S;
var secondBarWidthChunky = map(secondsWithNoFraction, 0, 60, 0, width);
var secondBarWidthSmooth = map(secondsWithFraction, 0, 60, 0, width);
//floorbed
fill(250,247,196);
rect(0,height-115,width,200);
//drawing the snail (hour)
noStroke();
fill(207,230,239);
rect(0, 500, hourBarWidth, 10);
fill(234,207,239);
ellipse(hourBarWidth,484,45,45);
fill(155,124,161);
ellipse(hourBarWidth,505,70,10);
fill(155,124,161);
ellipse(hourBarWidth+20,483,5,45);
fill(155,124,161);
ellipse(hourBarWidth+30,483,5,45);
fill(255);
ellipse(hourBarWidth+20,465,15,15);
fill(255);
ellipse(hourBarWidth+30,465,15,15);
fill(25);
ellipse(hourBarWidth+20,465,8,8);
fill(25);
ellipse(hourBarWidth+30,465,8,8);
//drawing fish hook (seconds)
push();
noFill();
strokeWeight(10);
stroke(160);
arc(100,secondBarWidthSmooth,70,70,0,PI);
strokeWeight(5);
arc(135,secondBarWidthSmooth-110,10,10,0,TWO_PI);
strokeWeight(6);
rect(133,secondBarWidthSmooth-100,5,100,10);
stroke(50);
rect(133,0,2,secondBarWidthSmooth-110,5);
pop();
//drawing the fish (minute)
fill(94,229,239);
ellipse(minuteBarWidth,275,100,80);
fill(255);
ellipse(minuteBarWidth+25,250,40,40);
fill(0);
ellipse(minuteBarWidth+35,250,20,20);
fill(94,191,239);
triangle(minuteBarWidth-80,255,minuteBarWidth-80,295,minuteBarWidth-40,270);
//and exclamation point
fill(255);
rect(minuteBarWidth-5,130,10,60,10);
ellipse(minuteBarWidth,210,10,10);
}
For my project, I wanted to make a clock but visually represented in a unique way. Here, I decided to make an instance/ scene of a fish underwater. The snail on the floorbed represents the hours (bc snails are slow anyway), the fish represents the minutes, and the fish hook represents the seconds. The scene here is that the fish is swimming away from the oncoming hook while the snail is just crawling away in a leisurely pace. As seen in the sketch, I initially wanted to use bubbles to represent the seconds, but went ahead and changed my idea to the fish hook instead.
sketch of ideas
(not sure if it’s just me, but for some reason I have to refresh the page a couple times to see the code work.)
/*Rachel Park
rsp1@andrew.cmu.edu
Section B @ 10:30AM
Project 05: Wallpaper Art*/
var SIZE = 25;
function setup() {
createCanvas(480, 480);
noStroke();
}
function draw() {
drawGrid();
drawPetal1();
drawPetal2();
drawPetal3();
drawPetal4();
drawMiddle();
drawSquare();
noLoop();
}
function drawGrid() {
for (var y = 0; y < height + SIZE; y += SIZE) {
for (var x = 0; x < width + SIZE; x += SIZE) {
fill('lightblue');
ellipse(x,y,SIZE, SIZE);
}
}
}
function drawPetal1() {
for (var y = 0; y < height + SIZE; y += SIZE) {
for (var x = 0; x < width + SIZE; x += SIZE) {
fill(255,178,178);
rectMode(CENTER);
rect(x+5,y,7,7);
}
}
}
function drawPetal2() {
for (var y = 0; y < height + SIZE; y += SIZE) {
for (var x = 0; x < width + SIZE; x += SIZE) {
fill(255,178,178);
rectMode(CENTER);
rect(x-5,y,7,7);
}
}
}
function drawPetal3() {
for (var y = 0; y < height + SIZE; y += SIZE) {
for (var x = 0; x < width + SIZE; x += SIZE) {
fill(255,178,178);
rectMode(CENTER);
rect(x,y+5,7,7);
}
}
}
function drawPetal4() {
for (var y = 0; y < height + SIZE; y += SIZE) {
for (var x = 0; x < width + SIZE; x += SIZE) {
fill(255,178,178);
rectMode(CENTER);
rect(x,y-5,7,7);
}
}
}
function drawMiddle() {
for (var y = 0; y < height + SIZE; y += SIZE) {
for (var x = 0; x < width + SIZE; x += SIZE) {
fill(255);
rectMode(CENTER);
rect(x,y,4,4);
}
}
}
function drawSquare() {
for (var y = 0; y < height + SIZE; y += 50) {
for (var x = 0; x < width + SIZE; x += 50) {
fill(178);
rectMode(CENTER);
rect(x,y,SIZE,height);
}
}
}
sketch of design
For my design, I wanted something simple and to the point. So as I was looking for inspiration, I noticed a lot of wall designs with stripes and such. To add a bit more, I added in flowers into the design as well.
This project is a fully immersive interactive augmented reality environment made ‘real’ by using light as a physical material, the aim is to structure participation and build trust between people who must sometimes suspend disbelief in order to cooperate and co-exist.
According to the artist, “Drawing on our backgrounds in architecture and design of networked urban infrastructure, Assemblance uses light to construct a semblance of physicality in which people that don’t know each other gain enough trust to collaborate on building delicate, ephemeral, luminescent structures, where intimate and hyperlocal participation becomes even more important, and the question of our responsibility and culpability towards each other is thrown up in challenging ways.”
I personally liked how interactive these artists have made the lasers used in the project. Instead of being projected onto a flat surface, the users are able to physically interact and play with the lasers in 3D. The lasers, although not completely tangible, now have the capabilities of becoming more tangible and object-like.
image of person interaction with lasersplay of light and interactivity with the lasers
Prismverse is an art installation created by XEX for Dr. Jart+. It’s inspiration draws from the light rays that move through a diamond and its reflections that result from the multifaceted faces of the diamond structure. In short, it is inspired by Brilliant Cut, which according to the article linked above, is “a form that produces highest brilliance with maximized light return through its top.” The installation itself consists of a surrounding of complex geometrical tessellated mirror walls that produce visually pleasing reflections on the floor that is made of LED lights itself. It also produces unique omnidirectional sound qualities for the visitor.
With the use of software programs such as C4D, Redshift, Adobe Aftereffect, openFrameworks, Ableton Live, Reaktor, Arduino, and Capacitive Sensors, the artists were able to achieve a breathtaking visual. The project itself illustrates an expertly executed installation of technology and art.
I personally liked this project because although it is similar to many other installations such a mirror maze, but it incorporates so many more complex elements, logic, and technology. Instead of a static installation where you see just your reflection, the installation now is something interactive and changeable. I thought it was interesting how the geometries were shaped as well. Its psychedelic qualities make it hard to look away and keep the visual interest of the viewer. I wonder now what the experience would be like to actually be within the installation itself.
Below is a video of the experience by the artists:
/*Rachel Park
rsp1@andrew.cmu.edu
Section B @ 10:30AM
Project 04: String Art*/
function setup() {
createCanvas(400,300);
}
function draw() {
background(100);
//defines limit to how many lines are drawn
for (var i = 0; i < 600; i++) {
//variables determine location of the lines
var x1 = 0;
var x2 = i*width/35;
var y1 = i*height/60;
var y2 = height;
strokeWeight(0.5); //setting thickness of the line
//red
stroke(255,0,0);
line(x1, y1, x2+100, y2);
//orange
stroke(255,119,0);
line(x2, 0, x1, height-y1);
//yellow
stroke(247,255,0);
line(width, height-y1, x2, y2);
//green
stroke(3,156,64);
line(x2, 0, width, y1);
//purple
stroke(147,0,192);
line(width+200, height-200, x2-1000, height);
//blue
stroke(49,75,243);
line(width/2,height/2, x2+width, y1);
}
}
When the project called for a “string project” I immediately thought of the string art that stands in the Renwick Gallery location in Washington, D.C. I liked how the colors of the rainbow just bleed together seemlessly.
I tried to emulate that style within my project, but with little tweaks to the location of the lines themselves.
According to the project’s official page, “is an installation consisting of around 64 head-size mirror objects. Each object moves its head in a particular way to give it different characteristics of human behaviour. Some chat amongst themselves, some shy away and others confidently move to grab your attention.” (http://www.chrisoshea.org/audience)
Close up of the mirrors.
By giving life to inanimate objects, this project reverses the roles of the viewer and viewed in that the people become the viewed in this case. The people have no control over the reactions of the mirrors, so the project itself plays with eliciting certain reactions from the the viewers, whether it may be discomfort or intrigue as all people react differently. It seeks to establish a different kind of relationship between viewer and technology but by using the most simplest of means.
I personally thought that this project was interesting because instead of creating projections or sounds, this project uses mirrors to reflect the world back on itself. It uses programming and calibration to set each mirror at a certain angle. Each mirror is controlled by two motors that give it tilt and pan rotations. The other interesting point is that each mirrors do not move randomly– they actually have a scripted code which allows them to achieve thoughtful movements and processes. According O’Shea, the software was developed in C++ using openFrameworks and OpenCV.
In my opinion, real world application of this project could be used in perhaps security and protection of closed official buildings. I feel like more elements such as face recognition could be applied to this project in order to be used as a filter for going through authorized and unauthorized people. Because it plays on the psychology of the individual, it could affect intruders in a building, such as making them feel uncomfortable to the point of leaving.
//Rachel Park
//Section B @ 10:30 AM
//rsp1@andrew.cmu.edu
//Project-03-Dynamic-Drawing
var c = 70;
var triX1 = 307;
var triX2 = 320;
var triX3 = 333;
var triX4 = 305;
var triX5 = 290;
var triX6 = 335;
var triX7 = 350;
var triX8 = 313;
var triX9 = 327;
var triY1 = 230;
var triY2 = 210;
var triY3 = 253;
var triY4 = 235;
var triY5 = 260;
var triY6 = 280;
var triY7 = 268;
function setup() {
createCanvas(640, 480);
}
function draw() {
background(c,60);
//modifying the background fill color
if (mouseX < 640) {
c = mouseX * 0.5;
}
if (mouseX < 0) {
c = mouseX;
}
var m = max(min(mouseX,400),0);
var size = m * (7/8);
var starsize = c;
var n = max(min(400,mouseY),0);
var moonlocation = n * (7/8);
//making the moon
push();
noStroke();
translate(width/4,height/4);
fill(254,255,182);
ellipse(0,moonlocation,50,50);
fill(c);
ellipse(10,moonlocation,45,45);
pop();
//constructing the rocketship + fire blast
push();
noStroke();
fill(255,4,4);
triangle(309 + m * (1/8),triY1-5, 320 + m * (1/8),triY2,
331 + m * (1/8),triY1-5);
fill(215);
triangle(305 + m * (1/8),triY3,305 + m * (1/8),triY4,292 + m * (1/8),triY5);
triangle(335 + m * (1/8),triY3,335 + m * (1/8),triY4,350 + m * (1/8),triY5);
fill(255,80,16);
ellipse(width/2 + m * (1/8),265,15,15);
triangle(320 + m * (1/8),triY6,313 + m * (1/8),triY7,327 + m * (1/8),triY7);
scale(0.5);
fill(255,248,16);
translate(width/2 + m * (1/8),260);
ellipse(width/2 + m * (1/8),265,15,15);
triangle(320 + m * (1/8),triY6,313 + m * (1/8),triY7,327 + m * (1/8),triY7);
pop();
noStroke();
fill(188);
translate(width/2,height/2);
scale(0.25);
rectMode(CENTER);
rect(m * (1/2),0,100,100,10);
// rect(m * (1/2),0,100,100,10);
push();
//rotation of the stars
rotate(frameCount / 90.0);
//small star
push();
noStroke();
fill(mouseX/4, mouseY,mouseX/2);
/*changing the color of the stars
using the mouse movement*/
translate(width-100,height/2);
rotate(frameCount / 100.0);
scale(0.5);
star(0,0,30,50,5);
pop();
//construction of mid-size star
push();
noStroke();
fill(mouseX/8, mouseY,mouseX/2);
translate(width-400, height/2);
rotate(frameCount / -120.0);
star(0,0,30,50,5);
pop();
}
//definition and utilization of variable for the stars
function star(x, y, radius1, radius2, npoints) {
var angle = TWO_PI / npoints;
var halfAngle = angle/2.0;
beginShape();
for (var a = 0; a < TWO_PI; a += angle) {
var sx = x + cos(a) * radius2;
var sy = y + sin(a) * radius2;
vertex(sx, sy);
sx = x + cos(a+halfAngle) * radius1;
sy = y + sin(a+halfAngle) * radius1;
vertex(sx, sy);
}
endShape(CLOSE);
}
This project was actually more difficult than the other projects that we have done this far, at least for me. I started with a simple idea of wanting to create a drawing of a rocket because it allowed for so many different options for using variables that move with the mouse. For this project, I decided to manipulate the movement of the rocket itself, the background color, the location of the moon, and the colors for the stars that are continually rotating around the rocket itself.
In the image below, I show some of the design ideas for the rocket itself, and which directions I initially wanted it to move.
Move the mouse up and down to move the moon, and move the mouse side to side to move the rocket and change the star colors.
What drew me to this project was the fact that it integrate nature with technology. I was intrigued with the beginning title of “interactive garden”, because it was something that I have not heard of until now. My initial thoughts were that an interactive garden just required people to just be in the space, maybe even walk through it, and experience the greenery that is essentially just static. However, with further research, I found that the trees themselves are actually interactive.
Created by duo Scenocosme for the Parisian Airports Company, this interactive garden “questions sensitivity, artistic, and musical relationships with the plants and the environment” according to its official website. The subtle electrostatic induction from the human body activates a soft light that illuminates the plant itself while its leaves are being caressed. The closer the proximity of the touch, the brighter the lights become.
Below is a video visually documenting the process of this artwork.
I found it a refreshing find because it was an idea that was very unique and unusual. I believe that this artwork can be developed even further and be used for a greater purpose such as public installation that would help to improve life in and around dark and uninteresting occupied spaces.
![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2020/08/stop-banner.png)
