/*
Victoria Reiter
Section B
vreiter@andrew.cmu.edu
Project-07-Curves
*/
// initial angle of rotation for the shape
var angle = 0;
function setup() {
// establishes canvas size
createCanvas(480, 480);
}
function draw() {
// sets background color
// the same one as from my ptoject 3... I really like it:)
// the opacity gives it a cool fading effect!
background('rgba(255,187,203,0.05)');
// C's get DEGREES
angleMode(DEGREES);
// declares variables that will be used in the mathy-math later on
var x;
var y;
var radius1;
var radius2;
var ratio1;
var ratio2;
// center x and center y points
var cx = width / 2;
var cy = height / 2;
// color of shape's line will change as mouse moves from right to left
var strokeColor = map(mouseX, 0, width, 0, 255);
// color of shape's fill will change as mouse moves from right to left
var fillColor = map(mouseX, 0, width, 255, 0);
// makes that angle of rotation will change as mouse moves up and down
var increment = map(mouseY, 0, height, 0, 7);
beginShape();
stroke(strokeColor);
fill(fillColor);
push();
// draws at center of canvas
translate(cx, cy);
rotate(angle);
// math *bows*
for (var theta = 0; theta < 360; theta +=1) {
radius1 = 70;
radius2 = 30;
ratio1 = map(mouseX, 0, width, 10, 200);
x = (radius1 * cos(theta) + radius2 * cos(theta * ratio1));
y = (radius1 * sin(theta) + radius2 * cos(theta * ratio1));
vertex(x, y);
}
// makes the shape rotate
angle = angle + increment;
endShape(CLOSE);
pop();
}
So doing this project, I struggled a bit because, uh, I haven’t had to use cos or sin since highschool….
Anyway. I got inspiration from Spirographs, since I think they’re cool and vintage-y and nostalgic and remind me of being little and stories my parents have told me. But how does one draw a Spirograph??? I took to the internet to find out. I found many very unhelpful resources, and one most-helpful one, here. It listed the equations x = cx + radius1 × cos(θ) + radius2 × cos(θ) and y = cy + radius1 × sin(θ) + radius2 × cos(θ), which I used to design my curve.
I have interactive elements for the shape fill, shape color, density(?) of curves comprising the shape, and speed of rotation.
And I made the background pretty pink with the opacity toyed with for a cool effect, stolen from my own Project 3 assignment because I like this effect so much.
Computational interaction between humans and plants
Disney Research Pittsburgh has developed a project which uses a touch sensor to create an electromagnetic field around plants. The sensor detects minute disturbances in the field, and responds by creating a shapes and colors around the plant, in a type of aura, reacting to different forms of touch, movement, and proximity to the plant.
Orchid emitting an “aura” from the electromagnetic field
The video below demonstrates some interactions with the plants.
Video of interactions with plants
I think that this project is beautiful. It combines nature with technology, and although nature is already alive, it manages to animate it even further, giving these plants personalities, and making the interaction seem almost mutual rather than simply one-dimensional.
Furthermore, I thought it was fascinating that this project pertains to Pittsburgh, and in particular Disney Research Pittsburgh. Not sure how much the facts connect but shout-out to Randy Pausch just in case they do:) Just like how Randy Pausch combined technology and the arts, two “unlike forces,” so does this project combine technology and nature, another “unlikely” pair.
/*
Victoria Reiter
Section B
vreiter@andrew.cmu.edu
Project-06-Abstract Clocks
*/
function setup() {
createCanvas(480, 260);
// declares variables later used for time
var h;
var m;
var s;
// declares value for opacity
var alphaValue;
}
function draw() {
// describes appearance of text
textFont('Colonna MT');
textAlign(CENTER);
// sets background color
background(209, 252, 235);
// variables for time
h = hour();
m = minute();
s = second();
// sizes for the images that will represent time aspects
var hourShapeWidth = width / 36;
var minuteShapeWidth = width / 200;
var secondShapeWidth = width / 170;
// makes a loop to count the hours, drawing forks, highlighting
// the fork that represents the current hour
for (var i = 0; i < 24; i++) {
if (i !== h) {
fill(25, 125, 75);
fork(i * (hourShapeWidth + 6) + 7, 65);
} else {
fill(255, 255, 0);
fork(i * (hourShapeWidth + 6) + 7, 65);
}
}
// makes a loop to count the minutes, drawing dining glasses
// and highlighting the glass that represents the current minute
var glassX = k * (minuteShapeWidth + 5.5) + 6
var glassY = height / 20;
angle = 0;
increment = 5;
for (var k = 0; k < 60; k++) {
if (k !== m) {
fill(150, 150, 255);
glass(k * (minuteShapeWidth + 5.5) + 6, 35);
} else {
fill(255, 255, 0);
glass(k * (minuteShapeWidth + 5.5) + 6, 35);
}
}
// makes a loop to count the seconds, drawing spoons and highlighting
// the spoon that represents the current minute
for (var j = 0; j < 60; j++) {
if (j !== s) {
fill(150, 155, 155);
spoon(j * (secondShapeWidth + 5) + 5, 15);
} else {
fill(255, 255, 0);
spoon(j * (secondShapeWidth + 5) + 5, 15);
}
}
// lines that divide the clock into representative "time zones" for meals
stroke(203, 158, 255, 150);
line(width / 4 + 1, 0, width / 4 + 1, height);
line(width / 2 - 3, 0, width / 2 - 3, height);
line(3 * width / 4 - 7, 0, 3 * width / 4 - 7, height);
// if the time is between midnight and 6am, it is breakfast time
if (h >= 0 & h < 6) {
noStroke();
alphaValue = 255;
fill(226, 140, 59, alphaValue);
textSize(17);
textStyle(BOLD);
text("Breakfast Time!", 60, 230);
scale(.5);
breakfast(57, 255);
} else {
noStroke();
alphaValue = 110;
fill(226, 140, 59, alphaValue);
textSize(17);
textStyle(NORMAL);
text("Breakfast Time!", 60, 230);
scale(.5);
breakfast(57, 255);
}
// if the time is between 6am and noon, it is lunch time
if (h >= 6 & h < 12) {
alphaValue = 255;
fill(48, 155, 24, alphaValue);
textSize(40);
textStyle(BOLD);
text("Lunch Time!", 357, 462);
scale(1.2, 1.5);
lunch(250, 180);
} else {
alphaValue = 110;
fill(48, 155, 24, alphaValue);
textSize(40);
textStyle(NORMAL);
text("Lunch Time!", 357, 462);
scale(1.2, 1.5);
lunch(250, 180);
}
// if the time is between noon and 6pm, it is dinner time
if (h >= 12 & h < 18) {
alphaValue = 255;
fill(204, 89, 71, alphaValue);
textStyle(BOLD);
textSize(30);
text("Dinner Time!", 495, 310);
scale(.8);
dinner(550, 225);
} else {
alphaValue = 110;
fill(204, 89, 71, alphaValue);
textSize(30);
textStyle(NORMAL);
text("Dinner Time!", 495, 310);
scale(.8);
dinner(550, 225);
}
// if the time is between 6pm and midnight, it is time for dessert !!
if (h >= 18 & h < 24) {
alphaValue = 255;
fill(224, 0, 160, alphaValue);
textStyle(BOLD);
text("Time for Dessert!!!", 870, 387);
scale(.575, .5);
dessert(1500, 468);
} else {
alphaValue = 110;
fill(224, 0, 160, alphaValue);
textStyle(NORMAL);
text("Time for Dessert!!!", 870, 387);
scale(.575, .5);
dessert(1500, 468);
}
}
// draws a spoon
function spoon(x, y) {
ellipse(x, y, 6, 8);
rect(x - 1, y, 2, 12);
}
// draws a drinking glass
function glass(x, y) {
arc(x, y, 8, 8, - 3 * PI / 16, PI + 3 * PI / 16, CHORD);
rect(x - 1, y, 2, 10);
rect(x - 2, y + 10, 5, 1);
}
// draws a fork
function fork(x, y) {
rect(x, y, 16, 5);
rect(x, y - 10, 2, 10);
rect(x + 5, y - 10, 2, 10);
rect(x + 10, y - 10, 2, 10);
rect(x + 14, y - 10, 2, 10);
triangle(x, y + 5, x + 16, y + 5, x + 8, y + 10);
rect(x + 6, y + 7, 4, 15);
}
// draws breakfast foods
function breakfast(x, y) {
eggs(x, y);
bacon(x + 75, y - 50);
}
// draws lunch foods
function lunch(x, y) {
sandwich(x, y);
apple(x + 95, y);
}
// draws dinner foods
function dinner(x, y) {
mashedPotatoes(x + 80, y + 90);
chicken(x, y);
}
// draws dessert
// function iceCream is put into this function just for ease of naming,
// since "dessert" better represents the meal of this specific time zone
// than does simply "ice cream"
function dessert (x, y) {
iceCream(x, y);
}
// draws two sunny-side up eggs
function eggs(x, y) {
noStroke();
fill(255, 255, 255, alphaValue);
ellipse(x, y, 100);
ellipse(x + 20, y + 75, 100);
fill(255, 155, 0, alphaValue);
ellipse(x + 15, y, 35);
ellipse(x + 45, y + 85, 35);
}
// draws two strips of bacon
function bacon(x, y) {
fill(255, 50, 50, alphaValue);
rect(x, y, 40, 180);
rect(x + 60, y, 40, 180);
fill(255, 150, 150, alphaValue);
rect(x + 25, y, 8, 180);
rect(x + 85, y, 8, 180);
}
// draws a sammich/sammie
function sandwich(x, y) {
fill(165, 130, 41, alphaValue);
ellipse(x - 5, y, 50);
ellipse(x + 35, y, 50);
rect(x - 20, y, 65, 75, 10);
fill(0, 255, 0, alphaValue);
quad(x - 25, y - 25, x + 15, y - 35, x + 20, y + 10, x - 10, y + 7);
quad(x - 20, y, x - 33, y + 25, x + 5, y + 45, x + 5, y);
quad(x - 20, y + 30, x - 14, y + 70, x + 20, y + 55, x + 10, y)
fill(255, 255, 0, alphaValue);
rect(x - 6, y - 22, 60, 95);
fill(255, 0, 0, alphaValue);
ellipse(x + 15, y + 15, 45, 85)
fill(165, 130, 41, alphaValue);
ellipse(x + 20, y - 5, 50);
ellipse(x + 55, y - 5, 50);
rect(x + 5, y - 5, 65, 75, 10);
}
// draws an apple
function apple(x, y) {
fill(102, 79, 22, alphaValue);
rect(x, y, 7, 20);
fill(230, 0, 0, alphaValue);
ellipse(x + 2, y + 55, 80, 70);
fill(0, 195, 0, alphaValue);
ellipse(x + 9, y + 17, 20, 6);
}
// draws a chicken drumstick
function chicken(x, y) {
fill(255, alphaValue);
rect(x - 10, y, 20, 125);
ellipse(x - 17, y + 120, 30);
ellipse(x + 13, y + 120, 30);
fill(165, 130, 41, alphaValue);
ellipse(x, y, 100, 125);
triangle(x, y + 40, x - 20, y + 75, x + 20, y + 75);
}
// draws a nice scoop of mashed potatoes with a slab of butter
function mashedPotatoes(x, y) {
fill(0, 0, 255, alphaValue);
ellipse(x, y, 200, 15);
fill(255, alphaValue);
arc(x, y, 100, 100, PI, 0);
fill(255, 255, 0, alphaValue);
rect(x - 15, y - 52, 50, 30, 10);
}
// draws a yummy ice cream cone
function iceCream(x, y) {
fill(25, 255, 255, alphaValue);
ellipse(x, y + 50, 150);
fill(255, 25, 235, alphaValue);
ellipse(x, y - 50, 150);
fill(191, 158, 74, alphaValue);
triangle(x - 80, y + 80, x + 80, y + 80, x, y + 220);
fill(245, 0, 0, alphaValue);
ellipse(x + 15, y - 125, 35);
fill(185, 0, 0, alphaValue);
rect(x + 15, y - 150, 2, 20);
fill(0, alphaValue);
quad(x - 20, y - 30, x - 14, y - 38, x - 12, y - 9, x - 18, y - 25);
quad(x - 40, y - 70, x - 34, y - 60, x - 30, y - 74, x - 28, y - 65);
quad(x + 20, y - 50, x + 29, y - 60, x + 35, y - 44, x + 28, y - 55);
quad(x + 60, y - 20, x + 54, y - 25, x + 57, y - 14, x + 65, y - 25);
fill(132, 25, 255, alphaValue);
ellipse(x - 15, y + 33, 10);
ellipse(x - 55, y + 25, 15);
ellipse(x - 25, y + 55, 8);
ellipse(x + 40, y + 25, 10);
ellipse(x + 25, y + 65, 12);
}
My clock for this week reflects my own biological clock…for when to eat meals! If it were truly accurately, every time of day would be “Time for Dessert!!!,” but for the sake of the project, I’ve also included breakfast, lunch, and dinner.
At the top are spoons to count the seconds, glasses for the minutes, and forks for the hours. The opacity of the meals also change, and are fully opaque when it is time to eat them!
Initial sketch of my idea (PS I got caught in the rain the other day so the pages are now all wet and crinkly)
I assigned foods that are typical to each meal [in the US anyway], like some nice bacon and eggs, a sandwich and apple, a chicken drumstick and mashed potatoes with butter, and ice cream. If I ever feel both hungry and confused I will turn to this clock for meal suggestions!
4900 Colors is a piece by German artist Gerhard Richter, comprised of 196 square panels of 25 coloured squares each, which can be rearranged in any number of ways to constantly create a new viewing experience.
A computer program assigns a color to each square chosen randomly from a selection of 25 colors. A program can also be used to decide how to combine and hang the panels, thus making their arrangement even more distanced from the “artist’s” hands.
View of 4900 Colors at exhibition and Richter explaining his work
As is discussed in this handy article, it is important to note that randomness does not always look how we imagine it. True randomness develops some patterns, there may be the same color which happens to group itself together, which may not appear random to our human eyes trained in detecting patterns, but which reflects the true randomness of nature.
This piece was interesting to me because it makes me question at what point do humans cease being the “artists”, and must instead pass the credit for art pieces off to the computers which make them? This was a statement Gerhard alluded to, when he said discussed “eradicating any hierarchy of subject or representational intent, and focusing on color to create an egalitarian language of art” (full information available here). While perhaps his intentions are noble, what is the point of art if it does not reflect someone’s intentions? Is there a truly objective art? And is this art we as humans are able to value?
This week I got inspiration for my Looking Outwards post by viewing the 3-D art of artist Aldo Martinez Calzadilla. His work has been featured in such places as the movies Guardians of the Galaxy 2, Ant Man 2, and Black Panther.
Although this is very interesting, what truly struck me was his work reflecting realistic humans, which I thought was absolutely gorgeous.
One of Calzadilla’s 3D personal modelsCalzadilla playing with texture in this model
I didn’t really believe how this could be produced…through code…so I did some investigation.
I found that he uses software such as Maya, Mari, and Z-Brush, which allows designers to manipulate texture and draw in 3-D on the computer. Below is a video demonstrating how images can be created and edited with Z-Brush as if they were physical things that could be molded and manipulated.
Z-Brush demonstration
I was really stunned by the beauty of Calzadilla’s work, so it was interesting to watch the Z-Brush video to work through how it was he was able to create something so life-like. I usually associate coding with being very cold and unemotional, so it’s an interesting contrast to see how he was able to capture such delicacy and vulnerability in his “subjects” through such a seemingly unfeeling medium.
/*
Victoria Reiter
Section B
vreiter@andrew.cmu.edu
Project - 05
*/
function setup() {
// sets up canvas dimensions
createCanvas(600, 480);
// establishes background color
background(250, 250, 180);
}
function draw() {
// establishes initial coordinates for x and y
var x = - 50;
var y = 0;
// creates a horizontal and vertical grid using a for() loop to draw
// the flowers
for (var i = 0; i < 20; i++) {
for (var j = 0; j < 20; j++) {
flower(x + j * 60, y + i * 60);
}
}
// creates a horizontal and vertical grid using a for() loop
// to draw the butterflies
for (var k = 0; k < 200; k++) {
for (var l = 0; l < 200; l++) {
butterfly(x - 850 + l * 200, y - 50 + k * 120);
}
}
noLoop();
}
// function which draws the entirety of the flower
function flower(x, y) {
flowerStem(x, y);
flowerPetals(x, y);
stem(x, y);
leaves(x + 15, y - 15);
}
// function to draw the stem
function stem(x, y) {
strokeWeight(7);
stroke(0, 155, 0);
line(x, y, x + 85, y - 35);
}
// function to draw the leaves
function leaves(x, y) {
noStroke();
// leaf color
fill(0, 190, 0);
// actual leaves
ellipse(x, y - 1, 24, 10);
ellipse(x + 25, y + 9, 24, 10);
ellipse(x + 21, y - 10, 24, 10);
strokeWeight(2);
// leaf vein color
stroke(100, 230, 100);
// each leaf also has a little line to represent its veins
line(x - 12, y - 1, x + 12, y - 1);
line(x + 13, y + 9, x + 37, y + 9);
line(x + 9, y - 10, x + 33, y - 10);
}
// function to draw the stems branching to the petals
function flowerStem(x, y) {
strokeWeight(4);
stroke(0, 190, 0);
// actual stem
line(x + 56, y - 27, x + 46, y - 43);
// each stem also has a little bulb
ellipse(x + 46, y - 43, 7, 7);
line(x + 55, y - 18, x + 72, y + 2);
ellipse(x + 72, y + 2, 8);
line(x + 70, y - 33, x + 78, y - 60);
ellipse(x + 78, y - 60, 8);
line(x + 79, y - 28, x + 100, y - 3);
ellipse(x + 100, y - 3, 10);
line(x + 85, y - 35, x + 105, y - 57);
ellipse(x + 105, y - 57, 11);
}
// function to draw flower petals
function flowerPetals(x, y) {
noStroke();
// main petal color
fill(255, 125, 165);
// petal 1
ellipse(x + 43, y - 55, 23);
//petal 2
ellipse(x + 75, y + 12, 25);
//petal 3
ellipse(x + 74, y - 70, 20);
// petal 4
ellipse(x + 104, y + 10, 21);
// petal 5
ellipse(x + 108, y - 70, 27);
fill(255, 65, 105);
// sub-petal 1
ellipse(x + 39, y - 45, 13);
ellipse(x + 52, y - 55, 11);
// sub-petal 2
ellipse(x + 67, y + 6, 13);
ellipse(x + 81, y + 4, 10);
ellipse(x + 64, y + 15, 11);
// sub-petal 3
ellipse(x + 70, y - 61, 16);
// sub-petal 4
ellipse(x + 100, y + 5, 12);
ellipse(x + 112, y + 8, 9);
// sub-petal 5
ellipse(x + 97, y - 63, 14);
ellipse(x + 109, y - 58, 10);
ellipse(x + 119, y - 64, 13);
// detail color in petals
fill(185, 0, 25);
// sub-sub-petal 1
ellipse(x + 32, y - 50, 9);
ellipse(x + 48, y - 50, 8);
// sub-sub-petal 2
ellipse(x + 64, y + 2, 8);
ellipse(x + 74, y + 4, 10);
ellipse(x + 60, y + 9, 8);
//sub-sub-petal 3
ellipse(x + 78, y - 65, 13);
ellipse(x + 62, y - 67, 8);
// sub-sub-petal 4
ellipse(x + 92, y + 9, 8);
ellipse(x + 108, y + 5, 9);
// sub-sub-petal 5
ellipse(x + 102, y - 60, 9);
ellipse(x + 90, y - 65, 10);
// other detail color in petals
fill(255, 205, 205);
// many sub petals 1
ellipse(x + 40, y - 67, 11);
ellipse(x + 52, y - 60, 8);
// many sub petals 2
ellipse(x + 64, y + 16, 8);
ellipse(x + 77, y + 9, 10);
ellipse(x + 67, y + 23, 7);
// many sub petals 3
ellipse(x + 78, y - 79, 10);
ellipse(x + 66, y - 71, 8);
// many sub-petals 4
ellipse(x + 94, y + 18, 12);
ellipse(x + 114, y + 14, 9);
// many sub-petals 5
ellipse(x + 103, y - 69, 9);
ellipse(x + 90, y - 64, 8);
ellipse(x + 121, y - 74, 10);
}
// function to draw the entirety of the butterfly
function butterfly(x, y) {
push();
scale(.5);
butterflyBody(x, y);
butterflyWings(x, y);
pop();
}
// function to draw butterfly's thorax
function butterflyBody(x, y) {
// black but not entirely opaque body
stroke('rgba(0, 0, 0, .7)');
strokeWeight(10);
line(x -5, y + 35, x + 20, y);
}
// function to draw butterfly's wings
function butterflyWings(x, y) {
strokeWeight(2);
stroke(90, 0, 90);
// orange-ish color of wings
fill('rgba(240, 130, 40, .6)');
// top wing
ellipse(x, y, 25, 40);
// bottom wing
ellipse(x - 15, y + 20, 40, 30);
// brown color of spots in wings
fill('rgba(110, 70, 30, .5)');
// details in the wings
ellipse(x - 20, y + 15, 16, 8);
ellipse(x - 2, y + 20, 6, 8);
ellipse(x - 13, y + 25, 5, 5);
ellipse(x - 4, y - 7, 6, 9);
ellipse(x + 4, y, 6, 5);
}
My project this week was inspired by my Chinese name. My dearest friend gave me my name in Chinese, and I really cherish having it as my name. It is 孟薇 (Mèng wēi), where the name 薇 is the name of a pretty pink flower. So for this week’s project I wanted to recreate the flower which represents my name!
Image found by typing the flower “myrtle” into Google
Image found by typing the flower “薇” into Baidu, the Chinese search engine
I first drew out a sketch of what I wanted to recreate, then listed the elements I would need to recreate it.
My preliminary sketch alongside my Chinese name 孟薇
I used the technique we saw in lecture where we create one large function composed of multiple smaller functions, each handling a particular aspect of the larger one. So for example I made “leaf” “petals” etc. their own function, then called them all under the broader “flower” function.
When I was finished, I really liked the product, but wanted to add the butterflies to make it more complex and practice layering for() loops.
I actually sew my own clothes, and the idea of having a skirt I sewed made out of fabric I designed/coded sounds really cool! I think I may take out the butterflies if I ever ordered it but I should look into that!
/*
Victoria Reiter
Section B
vreiter@andrew.cmu.edu
Project-04
*/
// establishes canvas dimensions
function setup() {
createCanvas(400, 300);
}
function draw() {
// background color
background(65);
// gives values to some variables
var x1 = 0;
var x2 = 0;
var y1 = 0;
var y2 = 0;
var g = 40;
// angle for sin function
var a = 0;
// value of increment for angle in sin function
var inc = PI / 32;
// draws sin function
for (var x1 = 0; x1 < width; x1 += 2) {
// color blue
stroke(0, 0, 255);
line(x1 * 1.5, g, x1 * 1.5, g + sin(a + PI / 2) * 50);
// calculates growth of angle
a = a + inc;
x1 += 1;
g += 2.5;
}
// draws bottom left curve, the pretty lilac colored one
for (x1 = 0; x1 < width; x1++) {
x1 += 5;
y2 += 5;
// color lilac
stroke(165, 125, 235);
// draws curve
line(x1, height, x2, y2);
}
// draws sunset-colored curve on right side of screen
for (x1 = 0; x1 < width; x1++) {
x1 = x1 + 4;
y2 += 5;
// draws sunset-color
stroke(244, 66, 0);
// draws curve
line(x1, y1, width, y2 - 75);
}
// draws maroon-colored lines in middle of screen
for (var i = 30; i < width; i += 10) {
i += 8;
// color maroon
stroke(130, 9, 41);
// draws curve
line(width - i, height, i * .25, 0);
}
}
Was able to create several curved lines, including using the sin function to draw a sin curve in blue. Able to draw the bottom left and the right curves as, well, curves, and the center cross of lines in maroon.
Vapor-Space creates an interactive Soundscape that reacts to data collected from the human body
People place their fingers on sensors to collect biological data from their skin
Vapor-Space is an interactive soundspace installation, whose name reflects how the data which feeds the soundscape is collected. Soundscape collects data on the humidity of the room, the temperature of the participant’s skin which touches the sensor, and calculates a vaporization rate which is translated into sound.
The creators at Vapor-Space highlight that the micro-workings of the body are themselves “an orchestra,” so in a way their soundscape seeks to amplify this symphony to a degree audible to the human ear.
What interests me about this project is how it brings together two seemingly opposing elements– electronics and water (hahaha if you ever drop your phone in the toilet or drop a hairdryer in the bathtub while you’re in it you’d understand)– and makes them collaborate together to create the sound.
/*Victoria Reiter
Section B
vreiter@andrew.cmu.edu
Project-03
*/
// establishes global variables
// states amount of increase for angular rotation
var increment = 5;
// states angle of rotation
var angle = 0;
// states sizes of rectangles
var sizeA = 25;
var sizeB = 75;
// states center points of rectangles
var rect1X;
var rect2X;
var rect3X;
// states colors
var colorA = 255;
var colorB = 0;
var colorYellow = 'rgb(255, 251, 155)';
var colorBlue = 'rgb(181, 243, 255)';
var colorGreen = 'rgb(201, 255, 165)';
function setup() {
// creates canvas dimensions
createCanvas(640, 480);
// defines positions of central points
// for the drawing of rectangles
rect1X = width / 6;
rect2X = width / 2;
rect3X = (5 * width) / 6;
}
function draw() {
// sets background color to be pink
// and a little opaque
background('rgba(255,187,203,0.05)');
// left most rectangle rotation
push();
translate(rect1X, height - mouseY);
rotate(radians(angle));
// draws rectangle from center point
rectMode(CENTER);
// sets visual aspects of rectangle
strokeWeight(4);
stroke(colorA);
fill(colorB);
rect(0, 0, sizeA, sizeA);
pop();
angle = angle + increment;
// center rect rotation
push();
translate(rect2X, mouseY);
rotate(radians(angle));
// draws center rect
rectMode(CENTER);
strokeWeight(10);
stroke(colorB);
fill(colorA);
rect(0, 0, sizeB, sizeB);
pop();
angle = angle - increment;
// rightmost rect rotation
push();
translate(rect3X, height - mouseY);
rotate(radians(angle));
// draws right most rect
rectMode(CENTER);
strokeWeight(4);
stroke(colorA);
fill(colorB);
rect(0, 0, sizeA, sizeA);
pop();
angle = angle + increment;
// if mouse is located on bottom half of canvas
// then rectangles change size and direction of rotation
if (mouseY > height / 2) {
sizeA = 75;
sizeB = 25;
increment = 5;
}
// if mouse is located on top half of canvas
// then rectangles change size and direction of rotation
if (mouseY < height / 2) {
sizeA = 25;
sizeB = 75;
increment = -5;
}
// defines visual characteristics for when mouse is
// in upper left section of canvas
if ((mouseX < width / 3) & (mouseY < height / 2)) {
colorA = colorYellow;
colorB = 0;
}
// defines visual characteristics for when mouse is
// in bottom left section of canvas
if ((mouseX < width / 3) & (mouseY > height / 2)) {
colorA = 0;
colorB = colorYellow;
}
// defines visual characteristics for when mouse is
// in upper middle section of canvas
if ((mouseX > width / 3) & (mouseX < (2 * width) / 3) && (mouseY < height / 2)) {
colorA = 0;
colorB = colorBlue;
}
// defines visual characteristics for when mouse is
// in bottom middle section of canvas
if ((mouseX > width / 3) & (mouseX < (2 * width) / 3) && (mouseY > height / 2)) {
colorA = colorBlue;
colorB = 0;
}
// defines visual characteristics for when mouse is
// in upper right section of canvas
if ((mouseX > (2 * width) / 3) & (mouseY < height / 2)) {
colorA = colorGreen;
colorB = 0;
}
// defines visual characteristics for when mouse is
// in bottom right section of canvas
if ((mouseX > (2 * width) / 3) & (mouseY > height / 2)) {
colorA = 0;
colorB = colorGreen;
}
// defines visual characteristics for when mouse is
// on the left section of the canvas
if (mouseX < width / 3) {
fill('rgb(187, 4, 131)');
textAlign(CENTER);
textSize(25);
textFont('Georgia');
textStyle(BOLD);
text("YOU", rect1X, mouseY);
} else {
noStroke();
}
// defines visual characteristics for when mouse is
// on the middle section of the canvas
if ((mouseX > width / 3) & (mouseX < (5 * width) / 6)) {
fill('rgb(187, 4, 131)');
textAlign(CENTER);
textSize(25);
textFont('Georgia');
textStyle(BOLD);
text("ARE", rect2X, height - mouseY);
} else {
noStroke();
}
// defines visual characteristics for when mouse is
// on the right section of the canvas
if (mouseX > (5 * width) / 6) {
fill('rgb(187, 4, 131)');
textAlign(CENTER);
textSize(25);
textFont('Georgia');
textStyle(BOLD);
text("BEAUTIFUL", rect3X, mouseY);
} else {
noStroke();
}
}
Here is the design I made! As the mouse moves from left to right, the colors of the rectangles, as well as their outline, changes, and different words appear depending on where the mouse is located. Two squares move in opposite direction of the y-value of the mouse, and one moves along with the mouse’s y-value, and opposite for the words. As the mouse moves from top to bottom of the screen, the squares also change size and direction of rotation. Also, the background is not completely opaque, allowing you to see the outlines of the shapes as they move, which I think creates a kind of soothing echo-effect that adds to the aesthetics of the graphic.
Ultimately, the factors that change are: position, size, color, and angle.
I think it is a pretty little interactive image with a good message that can cheer you up if you’re ever feeling gloomy. :’)
Product design studio uses CAD software to craft stone architecture inspired by nature
Anoma, a product design studio, combines seemingly un-like forces to technologically create natural masterpieces. The studio takes inspiration from nature, such as the delicate and often overlooked vein structure on leaves, and amplifies it to create large-scale works of sculpture and structure on slabs of materials such as granite, marble, and limestone. Designs are first etched out by hand, then drawn using CAD software, amplifying the patterns, charting out where lines will be deeper, until it is sent to a CNC machine to be cut out before ultimately being finished by hand.
What I find inspiring about this is how it combines unlike forces: inspiration from nature, execution by technology; large machines cutting through hard rock, with delicate finishes by human hands; utilitarian and heavy building materials like rock, being used for delicate art.
Inspired by xylemInspired by maple
Furthermore, growing up my dad always told me how he operated CNC machines for the better part of his life. Since I was a kid when he did this, I never really thought about what this meant. So, seeing a video of a CNC machine operating gave me insight into what it is he did for 28 years.
![[OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
