let shape;
function setup() {
createCanvas(640, 480);
//shape randomly assumes Y position each time page is refreshed
shape = random(255);
}
function draw() {
background(shape, mouseX, 0);
//size of ellipse is dependent on location of mouseX
var m = max(min(mouseX, 640), 0);
var size = m * 350.0 / 400.0;
ellipse(size, shape, 50, mouseX);
}
For this project I wanted to experiment with basic dynamic principles that varied based on mouse position including color, position, size, and distance.
My project was pretty tricky to make. Trying to get the ellipses to expand and stop at different points took a while, and I had to settle for them all moving at once, and there was a lot of trial and error. My end result is a Day to Night transition.
function setup() {
createCanvas(640, 480);
}
function draw() {
background(158, 189, 204);
// makes the ellipse size depend on the position of the mouse
var w = mouseX / 5;
var h = mouseY / 5;
// makes blue of ellipse depend on mouseX and be at least 140
// makes red of ellipse depend on mouseY and be at least 180
var colorX = mouseX / 10 + 140;
var colorY = mouseY / 5 + 180;
// square rotation depends on mouseX, rows alternate between
// clockwise and counter clockwise
var cwR = mouseX / 5;
var ccwR = 360 - mouseX / 5;
// square sides are at least 50 and depend on mouseY
var squareSide = 50 + mouseY / 10;
var squareMove = mouseX / 10 - 60
// squares
fill(255);
stroke(255);
// row 1
push();
rectMode(CENTER);
translate(160 + squareMove, 120);
rotate(radians(cwR));
rect(0, 0, squareSide, squareSide);
pop();
push();
rectMode(CENTER);
translate(320 + squareMove, 120);
rotate(radians(ccwR));
rect(0, 0, squareSide, squareSide);
pop();
push();
rectMode(CENTER);
translate(480 + squareMove, 120);
rotate(radians(ccwR));
rect(0, 0, squareSide, squareSide);
pop();
// row 2
push();
rectMode(CENTER);
translate(160 - squareMove, 240);
rotate(radians(ccwR));
rect(0, 0, squareSide, squareSide);
pop();
push();
rectMode(CENTER);
translate(320 - squareMove, 240);
rotate(radians(cwR));
rect(0, 0, squareSide, squareSide);
pop();
push();
rectMode(CENTER);
translate(480 - squareMove, 240);
rotate(radians(ccwR));
rect(0, 0, squareSide, squareSide);
pop();
// row 3
push();
rectMode(CENTER);
translate(160 + squareMove, 360);
rotate(radians(cwR));
rect(0, 0, squareSide, squareSide);
pop();
push();
rectMode(CENTER);
translate(320 + squareMove, 360);
rotate(radians(ccwR));
rect(0, 0, squareSide, squareSide);
pop();
push();
rectMode(CENTER);
translate(480 + squareMove, 360);
rotate(radians(ccwR));
rect(0, 0, squareSide, squareSide);
pop();
// ellipse colors
fill(colorY, 240, colorX);
stroke(colorY, 240, colorX);
// ellipses
// row 1
ellipse(64, 0, h, w);
ellipse(192, 0, h, w);
ellipse(320, 0, h, w);
ellipse(448, 0, h, w);
ellipse(576, 0, h, w);
// row 2
ellipse(0, 120, w, h);
ellipse(128, 120, w, h);
ellipse(256, 120, w, h);
ellipse(384, 120, w, h);
ellipse(512, 120, w, h);
ellipse(640, 120, w, h);
// row 3
ellipse(64, 240, h, w);
ellipse(192, 240, h, w);
ellipse(320, 240, h, w);
ellipse(448, 240, h, w);
ellipse(576, 240, h, w);
// row 4
ellipse(0, 360, w, h);
ellipse(128, 360, w, h);
ellipse(256, 360, w, h);
ellipse(384, 360, w, h);
ellipse(512, 360, w, h);
ellipse(640, 360, w, h);
// row 5
ellipse(64, 480, h, w);
ellipse(192, 480, h, w);
ellipse(320, 480, h, w);
ellipse(448, 480, h, w);
ellipse(576, 480, h, w);
}
I wanted to capture a few common movements with my dynamic drawing (rotation, translation, growth/shrinking, color change). I also wanted to create a repetitive pattern that changed depending on what row it was in. My initial inspirations were a pattern with dots.
This week, I chose to explore the world of parametric design and crafting by looking into artist Jimmy Jian‘s ceramic pieces. He creates a variety of ceramic containers through 3D modeling. Using Grasshopper (a Rhinoceros 3D plugin), he is able to produce many iterations of whichever design he is working on at the moment. What I appreciate most about his pieces are the elegant, repeating qualities they have, simplistic in form but complex by nature.
A few of Jian’s recent ceramic pieces, demonstrating the variety of patterns he is able to produce.
Jian’s process involves first modeling the forms using Grasshopper. Then, using a 3D printer, he is able to print out the forms to a very high degree of accuracy. Those forms are then inserted into plaster to create molds, which are then used to slip-cast the ceramic pieces. The resulting pieces are then glazed in various colors and fired. This workflow allows Jian to replicate the pieces in any number he wishes, as long as he keeps the mold intact. The artist’s sensibilities show in the color of the glazes he uses, keeping to shades of blue and blue-green. He also seems partial to subtle, repetitive patterns.
Iterations tested by Jian, created using Grasshopper’s parametric tools.Different shapes/sizes of ceramics are paired up with a set number of patterns.A few of Jian’s finished pieces.
Nervous System is a design studio that focuses on the intersection of science, art and technology. Their primary interest is creating forms inspired by natural phenomena, and they have created some really amazing structures by generating algorithms inspired by nature. One really neat project that I found was Floraforms.
Floraform is a generative design system that they created using inspiration from the way that leaves and flowers grow. They first created a simulation that they could observe growing, and that information was used to translate into 3D forms. The studio calls it a kind of digital gardening where they are cultivating algorithms.
This is a super cool project to me. The sculptural forms really catch my attention, but it is also really interesting to see the different ways that they are exploring growth through computational models.
In addition to this specific project, the studio has a lot of really cool research happening around these topic areas, and it is exciting to see so many different forms being generated around the idea of exploring natural forms through technological advances.
Sonic Playgroundis an outdoor sound installation that was created by Yuri Suzuki in 2018. This project was made for the High Museum of Art in Atlanta. It features 6 interactive, playful and colorful sculptures that modify and transmit sounds depending on where the participant is standing, listening or speaking. Using horns and pipes the computed acoustics travel from one end to the other in a playful way and by kneeling down or sitting between two pipes one can hear the that sounds are transported from different parts of the sculptures, which creates a fun and unique listening experience.
Children engaging with Sonic Playground
I find this project interesting because it made use of a software that I am learning now – Grasshopper (as a parametric plug-in for Rhino). The code that was written for this is a 3D raytracing tool that allows the user to select a sound source and send sound in a certain direction or towards a certain geometry, in this case the shape of the acoustic mirrors or the bells at the start and end of the pipes to see how the sound is reflected and what is the interaction with the object.
Grasshopper/Rhinoceros 3DThe pipes transfer sounds depending on where the person is situated
I tried many different ways to create mountains and alter them somehow with the mouse. I first attempted to create a gradient on the shapes to give a sense of the sun shining on them from different angles. Eventually, I had to settle for drawing lines along the yellow mountains to give the sense of fog crawling across them. Click the canvas then drag your mouse along it.
For this project I combined the two mouse feature to make the eyes move on way and the body move another so that when the mouse is positioned just right, it creats a pengiun.
I am really interested in the Polymorph project by the artist Jenny Sabin. This project is especially interesting because of how she combined form and function. The structure is made of clay and was digitally fabricated. The sculpture is rooted an algorithmic process that formulates the way that the ceramics are formed, fired and connected.
This piece of work is also interesting in how it uses natural structured in order to build it own structure, that this work could only be created aided with technology. As Jenny Sabin writes: Biology provides useful systems-based models for architects to study and understand how context specifies form, function, and structure. While the first phase of this design work resides within the spirit of research and discovery, the current phase engages design-oriented applications in experimental ceramic material systems ranging from new concepts of materiality to adaptive structures and complex geometries. Key to this design research is the exploration of new tectonic organizations for application at the architectural scale.
//Julia Nishizaki
//Section B
//jnishiza@andrew.cmu.edu
//Project-03
var oceanY = 480;
var oceanSpeed = 0.05;
var diffocean = 0;
var diffwaves = 1;
var deg = 0;
var brightness = 0;
function setup() {
createCanvas(640, 480);
}
function draw() {
background(220);
noStroke();
fill(34, 110, 148);
rectMode(CORNERS);
//ocean rising and falling
diffocean = mouseY - oceanY;
oceanY = oceanY + oceanSpeed * diffocean;
let conocean = constrain(oceanY, 200, 400)
rect(0, conocean, width, height);
//rain
let rainWeight = constrain(((height - mouseY) / 48), 0, 10);
strokeWeight(rainWeight);
stroke(50, 120, 147, 20);
var cloudsX = width - mouseX;
line(cloudsX + 25, 100, cloudsX + 25, conocean);
line(cloudsX + 50, 100, cloudsX + 50, conocean);
line(cloudsX + 75, 100, cloudsX + 75, conocean);
line(cloudsX + 100, 100, cloudsX + 100, conocean);
line(cloudsX + 125, 100, cloudsX + 125, conocean);
//clouds
noStroke();
rectMode(CORNER);
fill(constrain(mouseY, 50, 255));
rect(cloudsX, 50, 150, 50, 30, 30, 30);
//boat and boat variables
//bmX and bmY are boat middle X and Y
var bmX = 0;
var bmY = 0;
//bw and bh are boat height and width
var bw = 75;
var bh = 40;
//bd is displacement of left and right boat corners above bmY
var bd = 10;
//bblX and bbrX are boat base left and right X
var bblX = bmX - bw / 2;
var bbrX = bmX + bw / 2;
//boat stroke and fill
stroke('black');
strokeWeight(5);
strokeJoin(ROUND);
fill('white');
//rotation of the boat
push();
translate(width / 2, conocean);
rotate(radians(deg), bmX, bmY);
triangle(bblX, bmY, bmX, bmY, bmX, bmY - bh);
triangle(bbrX, bmY, bmX, bmY, bmX, bmY - bh);
triangle(bblX - bw / 2, bmY - bd, bblX, bmY + bh, bmX, bmY);
triangle(bblX, bmY + bh, bbrX, bmY + bh, bmX, bmY);
triangle(bbrX + bw / 2, bmY - bd, bbrX, bmY + bh, bmX, bmY);
pop();
var waves = ((height - mouseY) * 0.05);
deg += (waves / 8) * diffwaves;
if (deg > waves || deg < -waves) {
diffwaves = -diffwaves;
}
//water in front of boat
fill(34, 110, 148);
noStroke();
rect(0, conocean + 25, width, height);
//stormy filter, makes things darker
brightness = height - mouseY;
let conbrightness = constrain(brightness, 0, 100);
fill(12, 52, 68, conbrightness);
rect(0, 0, width, height);
}
For this project, I wanted to play with the idea of a boat at sea that gets caught in a storm. While I ended up simplifying the project as I went along, I still was able to experiment a little with changing position, color, stroke weight, size, and rotation. However, I struggled a lot with getting the rotation to work, and I still wasn’t able to get it to function without occasionally glitching if your mouse goes too low on the canvas.
![[OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
