An image from Machine Hallucination at ARTECHOUSE in New York City.
Machine Hallucination by Refnik Anadol has recently debuted in New York City at ARTECHOUSE in New York City. This exhibit uses machine learning algorithms on a data set of images of architectural styles and movements. The result reveals the correlation between moments in architectural history. The images produced help visually represent moments in a city that may have gone unnoticed to the user prior. Fluid motions are used to represent how city movements are continuous and the images projected on them help show how complex cities are.
Refnik Anadol is a media artist, director, and entrepreneur in the aesthetics of machine learning. This project allowed him to merge his traits and compose an exhibit that was rooting in machine learning but has an artistic execution of the data collected. He presents a new way to look at images from a city by showing viewers what they’ve already seen but in a fluid, continuous memory.
// Margot Gersing - Project 5 - Section E - mgersing@andrew.cmu.edu
function setup() {
createCanvas(600,600);
}
function draw(){
background(249, 209, 99);
// blue
for (var y = height/24; y < height; y += height/6) {
for (var x = width/24; x < width; x += width/6) {
fill(61, 93, 112);
noStroke();
rect(x + 17.5, y, 15, 50);
rect(x, y + 17.5, 50, 15);
}
}
// red +
for (var y = 0; y < height + height/6; y += height/6) {
for (var x = 0; x < width + width/6; x += width/6) {
fill(213, 85, 39);
noStroke();
rect(x - 7.5, y, 15, 50);
rect(x - 25, y + 17.5, 50, 15);
}
}
// green shape
for (var y = 0; y < height + height/6; y += height/6) {
for (var x = 25; x < width + width/6; x += width/6) {
fill(139, 163, 126);
noStroke();
rect(x, y - 25, 5, 25);
rect(x, y, 25, 5);
}
}
// gray shape
for (var y = 75; y < height + height/6; y += height/6) {
for (var x = 75; x < width + width/6; x += width/6) {
fill(50);
noStroke();
rect(x, y, 5, 25);
rect(x, y, 25, 5);
}
}
// white horizontal dots
for (var y = 0; y < height + height/6; y += height/6) {
for (var x = width/12; x < width + width/6; x += width/6) {
fill(255);
ellipse(x, y + 15, 5, 5);
ellipse(x - 15, y + 15, 5, 5);
ellipse(x + 15, y + 15, 5, 5);
}
}
// white vertical dots
for (var y = height/12; y < height + height/6; y += height/6) {
for (var x = 0; x < width + width/6; x += width/6) {
ellipse(x + 15, y, 5, 5);
ellipse(x + 15, y + 15, 5, 5);
ellipse(x + 15, y + 30, 5, 5);
}
}
}
For this project I wanted to create a geometric pattern. I also wanted to use festive colors. It was fun to make a playful pattern from simple shapes.
var type;
var color;
var bigness;
function setup() {
createCanvas(600, 480);
background('#BFDDDA');
noStroke();
}
function draw() {
for (var c = 0; c < 12; c ++) {
for (var r = 0; r < 8; r ++) {
type = random([1, 2, 3]);
color = random(['#92B2C0', '#79A594', '#467E9B'])
bigness = random(20, 80)
pattern (c * 60, r * 70, bigness, type, color);
}
}
for (var col = 0; col < 8; col ++) {
for (var row = 0; row < 6; row ++) {
// draw grapes
var wide = random(7, 12);
var high = random(10, 14);
if (((col + row) % 2) === 0){
grapes(col * 85, row * 90, wide, high, '#FF5061');
} else {
grapes(col * 85, row * 90, wide, high, '#FF6A4D');
}
}
}
noLoop();
}
function grapes(x, y, h, w, color) {
// leaf and stem
fill('#4B4F4E');
push();
translate(x + w / 2, y - h * 1.5)
rotate(radians(15));
rect(0, 0, h / 3, w / 1.5);
pop();
fill('#F7CD62');
push();
translate(x, y - h)
rotate(radians(300));
ellipse(0, 0, h / 1.5, w);
pop();
// grape
fill(color);
for (var i = 0; i < 4; i++) {
// first and third row
if ((i === 0) || (i === 2)){
for (var j = 0; j < 2; j++) {
ellipse(x + w * j, y + h * i, w, h);
}
} else if (i === 1) {
for (var j = 0; j < 3; j++) {
ellipse(x + w * (j - 0.5), y + h * i, w, h);
}
} else {
ellipse(x + w * 0.5, y + h * i, w, h);
}
}
}
function pattern(x, y, s, type, color) {
fill(color);
// oval
if (type === 1) {
ellipse(x, y, s * 1.3, s);
// arc
} else if (type === 2) {
arc(x, y, s * 2, s, QUARTER_PI, PI + QUARTER_PI, CHORD);
// other arc
} else {
arc(x, y, s, s, PI + QUARTER_PI, PI * 2 + QUARTER_PI, CHORD);
}
}
some process coming up with the wall paper design
I started by thinking of a theme. I decided I wanted to do fruit and make it feel playful. Then I came up with some ideas for foreground designs and some abstract shapes for background designs. When making the fruit, the raspberries looked like grapes so I made them grapes instead.
var step = 0
function setup() {
createCanvas(400, 500);
}
function draw() {
background(255, 255, 255);
for (var y = 0; y < height+25; y += 100) {
for (var x = 0; x < width+25; x += 100) {
fill(250,180,112,40);
ellipse(x, y, 200, 200);
stroke(255,50,50);
}
}
for (var y = 0; y < height+25; y += 100) {
for (var x = 0; x < width+25; x += 100) {
fill(255,240,240);
ellipse(x, y, 10, 10);
stroke(150,70,75);
}
}
for (var y = 0; y < height+25; y += 50) {
for (var x = 0; x < width+25; x += 100) {
fill(230,255,255);
ellipse(x, y, 5, 5);
stroke(60,110,100);
}
}
for (var y = 0; y < height+25; y += 100) {
for (var x = 0; x < width+25; x += 50) {
fill(0,0,0);
line(x, y, x+50, y+50);
stroke(204, 102, 0);
}
}
}
lil sketch
I am really interested in how a simple shape like a circle can become incredibly complex, through the repetition of its form repeating. I have always loved the idea of intersections, and transparency. I wanted to experiment with these ideas, the transparency of color and harshness of the outlines.
/*Rachel Shin
reshin@andrew.cmu.edu
15-104 Section B
Project 05- Wallpaper
*/
var spacing;
function setup(){
createCanvas(400, 400);
background(235, 234, 223);
spacing = 50;
}
function draw(){
for (var y = 0; y < height - (spacing/2); y += spacing/2) { //dotted background, adjusted to fit entire circle, avoid cut offs
for (var x = 0; x < width-(spacing/2); x += spacing/2){
noStroke();
fill(255);
ellipse(x+(spacing/2), y+(spacing/2), spacing/5, spacing/5);
}
}
for (var y = 0; y < height; y += spacing){ //burgundy rounded rectangles
for (var x = 0; x < width; x += spacing) {
stroke(112, 107, 105);
noFill();
square (x + (spacing/5), y + (spacing/5), spacing/3, 2);
}
}
for (var y = 0; y < height; y += spacing) { //sky blue trapezoids across canvas
for (var x = 0; x < width; x += 70) {
noStroke();
fill(167, 200, 212);
quad(x + (spacing/5), y + (spacing/5), x + spacing, y + spacing, x + spacing, y + (spacing+10), x + (spacing/5), y + spacing);
}}
noLoop();
}
Brainstorm/Initial Sketch
While thinking of ways to code and design this project, I decided to layer various geometric shapes to create a cohesive visual of repeated patterns of circles, trapezoids, and rounded rectangles. I found it interesting how I was able to recreate this sketch by figuring out how layers of shapes interacted to create this pattern.
Then Flying the Youth, by Shang-Peng Lang, from CG Society
When I first saw the top image of the girl’s face, I didn’t even register that she was not a real human. I picked this artwork because it was so photo-realistic, but also haunting when I continued to scroll and found out that she was a 3D model rendered and processed into this image.
Shang-Peng Lang is an online graphic artist and hoped to portray an emotional expression of a young girl in a soft breeze. To create this girl, Lang used the software MARI, Maya, Photoshop and Silo, and used VRay to render and post-process the image. MARI is a 3D painting software and I assume that VRay was mostly used in the final stages for lighting and fine filter adjustments. This project is a demonstration of a collaboration between graphic art and advanced modeling/painting software; this combination can take 2D images to another level, to a point where one cannot even discern if it’s rendered or actually existing.
//Monica Chang
//Section D
//mjchang@andrew.cmu.edu
//Project-5-Wallpaper
function setup() {
createCanvas(600, 400);
}
function draw() {
background(191, 145, 45);
drawGrid();
}
function drawGrid() {
// noprotect
//base of design
for (var y = 0; y < 450; y += 10) {
for (var x = 0; x < 650; x += 10) { //repeating ellipses
fill(0, 255, 38);
noStroke();
ellipse(x, y, 6, 10);
}
// repetitive quads overlapping the ellipses
var xr = 20;
for (var b = -50; b < height + 50; b += 20) { //quad rows
for (var a = -50; a < width + 50; a += 20) { // quad columns
noStroke();
fill(0, 255, 38);
quad(a, b, b + xr, b - sqrt(3) * xr / 4, a + 2 * xr, b, a + xr, b - sqrt(3) * xr / 4); // manipulating the quads so that they for mini-waves.
}
}
}
}
For this project, I was inspired by the idea of green mesh details covering a nude fitting(design for fashion.)
It’s nice to know that loops can do so much work for us. I had a lot of trouble getting the quads to create a subtle wave but I managed to calculate the values that would help create that small detail.
Through this project, I learned to organize my code in a more efficient way by creating a new function and calling it in function draw.It was a fun experience to create my own systematic pattern and assigning colors to them.
/* Charmaine Qiu
charmaiq@andrew.cmu.edu
Section E
Wall Paper */
var spacing = 10;
function setup() {
createCanvas(600, 600);
}
function draw() {
background(240, 182, 127);
//nested loop that loops over rows and columns of pattern
for(var y = 0; y <= height; y += spacing){
for(var x = 0; x <= width; x += spacing){
//call wallPaper that draws the shapes
wallPaper(x, y);
}
}
noLoop();
}
//create a funtion for the patterns that follow the nested for loop
function wallPaper(x, y){
//set variable of sides of rectangles that becomes bigger as it goes up canvas
var rectspc = y / 80
//lightest teal rectangles
fill(214, 229, 227);
noStroke();
rect(x + spacing / 2, y, rectspc, rectspc);
//3rd lightest teal rectangles
fill(104, 216, 214);
noStroke();
rect(x, y, rectspc, rectspc);
//2nd lightest teal rectangles
fill(156, 234, 239);
noStroke();
rect(x + spacing / 2, y +spacing / 2, rectspc, rectspc);
//darkest teal rectangles
fill(7, 190, 184);
noStroke();
rect(x , y +spacing / 2, rectspc, rectspc);
}
This video is about Chris Labrooy’s project “Automobile Citroen.”
This is what he created for Citroen.
For this week, I stumbled upon Chris Labrooy. He graduated from the RCA with a MA in design products. Labrooy first started to use 3D as a simple tool to visualize ideas for furniture and products. As time passed, 3D technology and software evolved drastically, allowing Labrooy to explore CGI. He is based in Scotland. You can also see his work in UK, Europe, and the U.S.
This is a close up of his design.
Citroen asked him to create a 3D sculpture that explored the genealogy of the new Citroen C3 car. The cars featured in his design include the 2CV, Visa, AX, Saxo, C3 gen 1, C3 gen 2 and the new Citroen C3. In order to create this, he used Cinema 4D. For his rendering, he used V-Ray.
I thought his work was extremely interesting, because you usually do not see cars being ringed together. In addition, he did not change the cars completely. He keep all the elements of the cars. Though he distorted the cars, he was able to maintain key elements that the cars have. For example, if you look at the photo below, the white car has an opening at the front of its car, while the blue car next to it, has a long vent.
In order to create this, I belie that Labrooy had to make multiple layers. I feel like he had a separate file for the background so that it is easier to render. And then, he made the front undistorted car by itself. The other cars that are intertwined with each other are all rendered in a file together. I am unsure how he was able to create such a complex yet extremely detailed work. When I zoom into the work, I am always surprised at how detailed the overall piece is.
This photo is a close up of the cars, which gives viewers a better idea of how he was able to keep the elements of the car while distorting them.
![[OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
