This piece, called “Secret Ramen”, is by 3D student Laura Keuk, who used programs Brush and 3ds Max, as well as Adobe photoshop and aftereffects to create the final image of the beautiful ramen bowl. I admire the simple beauty of the image; the detail, the colors, the lighting that invoke a warm, dreamy atmosphere. A secondary source cites that she used displacement for the oily soup texture, and particle simulation to spread out the onion rings around as garnish. I love that she chose something as simple and “commonplace” as food to painstakingly detail and craft, and shows her appreciation for the small joys in life, especially the importance of having and sharing good meals.
This project, called Knight of Infinite Resignation, is a motorized sound installation by Diane Landry, an installation, video, and performance artist from France. It uses bicycle wheels to rotate sand-filled water-bottles (12 on each wheel) that align with the hour of the day and month of the year, with the sound of the sand filling the room as it moves with the motion of the bottles. Although they can be seen as a sort of clock for the human pattern of time, the cold, churring machines evoke an uncanny sense of perpetuality and vastness that also allude to eternity, space, serenity, and the unfathomable spans of time. The algorithm itself must be fairly simple; just programmed to run along a reference to the hour of the day or month of the year. However, the ingenuity of using such regular household items such as the bicycle wheel and plastic water bottle point to the artists’ ability to turn every-day, human objects into something bigger, more vast, more extensive.
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 40;
function makeStringArt(x1, y1, x2, y2, x3, y3, x4, y4) { //function to make string art from points of two lines
line(x1,y1,x2,y2);
line(x3,y3,x4,y4);
dx1 = (x2-x1)/numLines; //changes x value of first point
dy1 = (y2-y1)/numLines; //changes y value of first point
dx2 = (x4-x3)/numLines; //changes x value of second point
dy2 = (y4-y3)/numLines; //changes y value of second point
//initial points
var firstx = x1;
var firsty = y1;
var secondx = x3;
var secondy = y3;
//draws lines and adjusts points for next line
for (var i = 0; i <= numLines; i += 1) {
line(firstx, firsty, secondx, secondy);
firstx += dx1;
firsty += dy1;
secondx += dx2;
secondy += dy2;
}
}
function setup() {
createCanvas(400, 400);
background(218, 190, 229); //purple
}
function draw() {
stroke(255); //white: corner shapes
makeStringArt(0,0,200,0,0,400,0,0);
makeStringArt(200,400,400,400,400,400,400,0);
//quarters of the star shape
stroke(166, 155, 52); //gold
makeStringArt(200,0,200,200,200,200,380,200);
stroke(0, 142, 219) //blue
makeStringArt(200,400,200,200,200,200,380,200);
stroke(166, 155, 52); //gold
makeStringArt(200,400,200,200,200,200,20,200);
stroke(0, 142, 219) //blue
makeStringArt(200,0,200,200,200,200,20,200);
noLoop();
}
//Alana Wu
//ID: alanawu
//Project 05: Wallpaper
function setup()
{
createCanvas(400, 400);
background(255);
}
function draw()
{
bigGrid (.25, 0);
bigGrid(.125, 50);
bigGrid(.0625, 75);
noLoop();
}
//blue, dark red, yellow color scheme
/*function bigGrid (s, dist)
{
for (var x = 0; x < 4; x ++)
{
for (var y = 0; y < 4; y ++)
{
push();
translate (x*100 + dist, y*100 + dist);
scale (s);
grid (40, 0, 13, 78, 255, 100, 10); //blue
grid (15, 300, 100, 0, 255, 255, 30); //violet
grid (2, 150, 76, 25, 255, 120, 5); //red
grid(10, 200, 255, 0, 0, 100, 10); //mustard
grid (10, 300, 255, 236, 0, 150, 15); //yellow
pop();
}
}
}*/
//green, blue, yellow, red color scheme
function bigGrid (s, dist)
{
for (var x = 0; x < 4; x ++)
{
for (var y = 0; y < 4; y ++)
{
push();
translate (x*100 + dist, y*100 + dist);
scale (s);
grid (40, 0, 0, 255, 50, 150, 10); //green
grid (15, 300, 255, 0, 0, 255, 30); //red
grid (10, 150, 0, 0, 55, 180, 15); //blue
grid(10, 200, 255, 255, -200, 100, 10); //yellow
grid (10, 300, 180, -100, -100, 150, 15); //dark red
pop();
}
}
}
//pastels color scheme
/*function bigGrid (s, dist)
{
for (var x = 0; x < 4; x ++)
{
for (var y = 0; y < 4; y ++)
{
noStroke();
push();
translate (x*100 + dist, y*100 + dist);
scale (s);
grid (40, 0, 150, 255, 255, 100, 10); //pale blue
grid (30, 300, 150, 150, 255, 255, 30); //lavender
grid (2, 150, 255, 80, 255, 120, 5); //pale pink
grid(10, 200, 255, 200, 200, 100, 10); //pink
grid (10, 300, 250, 250, 190, 150, 15); //pale yellow
pop();
}
}
}*/
function grid (rectW, start, red, green, blue, opacity, dist)
{
for (x = start; x <= width - rectW; x += dist)
{
var count = 0;
fill (red, green, blue, opacity);
rect (x, 0, rectW, height);
rect (0, x, width/2, rectW);
red += 10;
blue += 20;
green += 10;
}
}
To generate ideas for this project, I experimented with building different functions that played with a variety of geometric shapes. I eventually decided to use a function that interwove and layered rectangles in different colors and opacities.
After building the initial function, I played around with a lot of different color schemes and opacities, a few of which are shown below (scroll down past the code). For the future, I think it’d be interesting to try and create optical illusions.
Reading about the 3d computer graphics was very intriguing. I like how the there are connections between our last weeks project (string art) and the previous looking out blog posts where we had to talk about data in nature. Most of the computer generated graphic photos looked alike to repetitive or familiar patterns. Specific projects I am highly interested in is programs such as “DALL E”, a programmed neural network that creates images from text captions for a wide range of concepts which are expressible in natural language. When a user puts in a text, the AI will generate images which correspond to such texts. DALL E’s capabilities include drawing multiple objects simultaneously, control abilities, inferring contextual details, combining unrelated concepts, animal illustrations, etc. Text to image synthesis is still an active area of research and DALL E continues to improve contemporarily.
Artist: Stephan Martiniere, a concept illustrator and artist who’s created graphics for Avenger: Age of Ultron, Ready Player One, Avatar, Star Wars, and many other acclaimed films. He’s also produced 150+ book covers, comic book covers, and editorial illustrations for clients like National Geographic, Penguin and Random House, Pyr, etc.
This piece of imagery was created for the book New York 2140 by Kim Stanley Robinson, which is set in a futuristic NYC that’s been flooded by rising sea level. I particularly like this piece of computer graphics because it helps people visualize the effects of climate change. Because the scope of climate change and its effects is so huge, for many of us, it’s hard to comprehend what the world will look like in 50, or even 10 years because of it. Not being able to comprehend the effects of climate change can result in either denying its existence, not doing anything about climate change (due to a feeling of helplessness), eco-anxiety, or taking tangible action. I think 3D computer graphics like this that depict how our world will look like with climate change will really help communicate the effects of climate change to people. This particular image is very optimistic and depicts a world in which we adapt to a changing Earth, so we could assume that the creator is optimistic about how humanity will adapt in the future. Pairing this piece with equally possible dystopian imagery would help show people what results from taking action now vs. not taking action now.
New World artwork by Stephen Martiniere
An interesting possibility would be to put together a project that exhibits an image of a current city, a produced image of how it’ll look in 50 years if we reduce carbon emissions by X amount by a certain time, and a produced image of how the city will look if we don’t reduce carbon emissions by X amount.
Environments artwork by Stephen MartiniereEnvironments artwork by Stephen Martiniere
The project Forms-string quartet is created by Playmodes. It is a live performance by a string quartet that uses randomly generated graphics as a score. The algorithm uses chance and probability to generate specific graphics that are then played by the string quartet. It is an immersive experience with both electronic music and panoramic visuals. I think that the algorithm uses a set of possible points or graphics and then picks them in random orders for each instrument. The website then says that a synthesis algorithm is used to interpret the vertical fragments of the image and transform them into different aspects of the music. I admire this project mainly because the graphics are very beautiful and to see them and hear the noise interpreted from it is very satisfying. It makes music visually digestible and understandable for the audience which I really enjoy!
var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
var dx5;
var dy5;
var dx6;
var dy6;
var dx7;
var dy7;
var dx8;
var dy8;
var numLines = 30;
var numLines2 = 40;
var numLines3 = 50;
var numLines4 = 60;
function setup() {
createCanvas(400, 300);
background(179,212,177);
line(100, 50, 150, 250);
dx1 = (150-75)/numLines;
dy1 = (70-50)/numLines;
dx2 = (250-150)/numLines;
dy2 = (300-250)/numLines;
line(400,0,400,300);
dx3 = (400-0)/numLines2;
dy3 = (0-300)/numLines2;
dx4 = (400-400)/numLines2;
dy4 = (300-0)/numLines2;
line(100, 50, 50, 125);
dx5 = (100-50)/numLines3;
dy5 = (125-50)/numLines3;
dx6 = (350-300)/numLines3;
dy6 = (200-25)/numLines3;
//line(50, 50, 50, 150);
line(400, 100, 400, 300);
dx7 = (400-50)/numLines4;
dy7 = 50/numLines4;
dx8 = (400-50)/numLines4;
dy8 = (300-150)/numLines4;
}
function draw() {
//yellow sunlight ray from upper right hand corner
var x3 = 375;
var y3 = 15;
var x4 = 0;
var y4 = 130;
for (var a = 0; a <= numLines2; a += 1) {
stroke(255,255,102);
line(x3, y3, x4, y4);
x3 += dx3;
y3 += dy3;
x4 += dx4;
y4 += dy4;
}
//green twisty shape that aligns with orange ray
var x7 = 150;
var y7 = 250;
var x8 = 250;
var y8 = 200;
for (var c = 0; c <= numLines4; c += 2) {
stroke(51,102,0);
line(x7, y7, x8, y8);
x7 -= dx7;
y7 -= dy7;
x8 += dx8;
y8 += dy8;
}
//blue "parallelogram" shaped solar panel
var x1 = 100;
var y1 = 50;
var x2 = 150;
var y2 = 250;
for (var i = 0; i <= numLines; i += 1) {
stroke(0, random(90, 105), random(195, 210));
line(x1, y1, x2, y2);
x1 += dx1;
y1 -= dy1;
x2 += dx2;
y2 -= dy2;
}
//orange ray from upper right left corner
var x5 = 0;
var y5 = 0;
var x6 = 500;
var y6 = 150;
for (var b = 0; b <= numLines3; b += 1) {
stroke(255,153,51);
line(x5, y5, x6, y6);
x5 -= dx5;
y5 += dy5;
x6 += dx6;
y6 += dy6;
}
noLoop();
}
I knew that the string “rays” reminded me of sunlight and spotlights, so from there I wanted to add in something (the panel) that would make sense. Given that a lot of solar panels are just above grass, I made the background light green and put a dark green string element just below it.
//Jacky Lococo
//jlococo
//Section C
var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
var dx5;
var dy5;
var dx6;
var dy6;
var dx7;
var dy7;
var dx8;
var dy8;
var dx9;
var dy9;
var dx10;
var dy10;
var dx11;
var dy11;
var dx12;
var dy12;
var numLines = 50;
var numLines2 = 25;
function setup() {
createCanvas(400, 400);
//peach upper shape
// line(150, 50, 50, 300); //guiding lines to help visualize
// line(250, 50, 350, 300);
dx1 = (50-150)/numLines;
dy1 = (300-50)/numLines;
dx2 = (350-250)/numLines;
dy2 = (300-50)/numLines;
//peach lower shape
// line(150, 350, 50, 100)//guiding lines
// line(250, 350, 350, 100)
dx3 = (50-150)/numLines
dy3 = (100-350)/numLines
dx4 = (350-250)/numLines
dy4 = (100-350)/numLines
//white spiral in the middle of canvas
// line(200, 70, 40, 200); //guiding lines
// line(40, 200, 200, 360);
dx5 = (40-200)/numLines;
dy5 = (200-70)/numLines;
dx6 = (200-40)/numLines;
dy6 = (360-200)/numLines
//burgundy bowtie shape in the back of comp
// line(200, 0, 400, 200) //guiding lines
// line(500, 300, 100, 400)
dx7 = (400-300)/numLines
dy7 = (100-0)/numLines
dx8 = (100-0)/numLines
dy8 = (400-300)/numLines
//top left corner lines
// line(150, 0, 0, 100) //guiding lines
dx9 = (0-150)/numLines
dy9 = (100-0)/numLines
dx10 = (0)/numLines
dy10 = (0)/numLines
//bottom right corner lines
// line(250, 400, 400, 300) //guiding lines
dx11 = (400-250)/numLines
dy11 = (300-400)/numLines
dx12 = (0)/numLines
dy12 = (0)/numLines
}
function draw() {
background(255, 63, 24);
//this is the bowtie shape in the back of the composition
var x7 = 300;
var y7 = 0;
var x8 = 100;
var y8 = 400;
for (var i = 0; i <= numLines; i += 1) {
stroke(80, 13,0)
line(x7, y7, x8, y8);
x7 += dx7;
y7 += dy7;
x8 -= dx8;
y8 -= dy8;
}
//upper peach colored upper curve
var x1 = 150;
var y1 = 50;
var x2 = 350;
var y2 = 300;
for (var i = 0; i <= numLines; i += 1) {
stroke(255, 148, 108)
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 -= dx2;
y2 -= dy2;
}
//lower peach colored curve
var x3 = 150;
var y3 = 350;
var x4 = 350;
var y4 = 100;
for (var i = 0; i <= numLines; i += 1) {
stroke(255, 148, 108)
line(x3, y3, x4, y4);
x3 += dx3;
y3 += dy3;
x4 -= dx4;
y4 -= dy4;
}
//white spiral in the middle dividing the canvas
var x5 = 200;
var y5 = 70;
var x6 = 200;
var y6 = 360;
for (var i = 0; i <= numLines; i += 1) {
stroke(255, 235, 238)
line(x5, y5, x6, y6);
x5 += dx5;
y5 += dy5;
x6 += dx6;
y6 -= dy6;
}
//upper left corner lines
var x9 = 150;
var y9 = 0;
var x10 = 0;
var y10 = 0;
for (var i = 0; i <= numLines; i += 1) {
stroke(255)
line(x9, y9, x10, y10);
x9 += dx9;
y9 += dy9;
x10 += dx10;
y10 -= dy10;
}
//bottom right corner lines
var x11 = 250;
var y11 = 400;
var x12 = 400;
var y12 = 400;
for (var i = 0; i <= numLines; i += 1) {
stroke(255)
line(x11, y11, x12, y12);
x11 += dx11;
y11 += dy11;
x12 += dx12;
y12 += dy12;
}
//Inner circles, radius decreases by 5 for each
//largest circle
stroke(255)
strokeWeight(1)
fill(80, 13, 0)
ellipse(200, 200, 50, 50)
stroke(255)
strokeWeight(1)
fill(80, 13, 0)
ellipse(200, 200, 45, 45)
stroke(255)
strokeWeight(1)
fill(80, 13, 0)
ellipse(200, 200, 40, 40)
//smallest circle
stroke(255)
strokeWeight(1)
fill(80, 13, 0)
ellipse(200, 200, 35, 35)
noLoop()
}
This project was a little bit difficult, I think I mainly approached it by trying to find patterns within the code given and use that to make any desired shapes. Once I got the hang of the process and why certain numbers were used, it became a lot easier.
The robots collaborate to create experimental electronica.
I admire how the robots in this project can together create such exciting and layered music because it’s wildly entertaining despite sounding admittedly quite choppy. I admire the rigid precision of the performances because although such precision is impossible for humans to obtain, it reminds me of what robots in this artwork can’t really obtain, portray or evoke: emotional response. I’m inspired by the innovation and attention to detail, but I must say that the music didn’t leave me feeling a certain way, which in my opinion, music should do. Of course, I don’t think the primary purpose of this endeavor was to make music specifically for people to enjoy. I know that the creators used “custom build mechanics” and Max MSP patches, which lets you connect software and objects with virtual patch cords. Squarepusher’s music interests include electronic, jazz and drum and bass. These artistic sensibilities manifested in the ASHURA (the robot drummer that plays over 20 drums). I could hear how the creator included some free jazz elements into the overall technical electronic experience.
![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2023/09/stop-banner.png)
