This project was a great way to keep playing around with for() loops. I wanted to go for something simple and plant-inspired, so this is what I came up with. I think if I were to make this a little more complex, I’d try using bezier curves instead of straight lines, and implement a little more randomness. However, since it was supposed to be a “wallpaper” type project, I decided to keep it basic.
Onboarding process to generate 3d rock sculptures.
Building hopes is an augmented reality generative art experience that allows users to visualize their hopes for certain topics powered by Google Trends data. This project was created by Giorgia Lupi and her team at Accurat for Google in 2018. Based on personal hopes by selected by the user, the algorithm develops a 3D hope sculpture. The user selects different Google Trend data topics and is asked how important they feel about the topic. Digital rocks are auto-generated and vary in size and color depending on the user’s desired intensity on the topic. The artistic license by Lupi is reflected in bold rock colors and a simple white interface. What I admire about this project by Lupi is how it’s inspired by traditional balancing rock art. Through the use of generative 3d art, her team is able to humanize data trends rooted in tradition.
// Timothy Liu
// 15-104 Section C
// tcliu@andrew.cmu.edu
// OpenEnded-05
var yStart = 60; // y coord of first flower's origin; a reference spot for other petals
var xStart = 60; // x coord of first flower's origin; a reference spot for other petals
function setup() {
createCanvas(600, 600);
noLoop(); // making the image static
}
function draw() {
noStroke(); // no strokes for a cleaner, more geometric feel
for (var dx = 0; dx < width; dx++) {
for (var dy = 0; dy < height; dy += 60) { // setting the spacing between lines to 60; 10 total stripes on canvas
if (dy % (60 * 2) === 0) { // odd # stripes
fill(235, 251, 255);
rect(dx, dy, width, 60); // stripes are a pale pastel blue
} else { // for even # stripes
fill(210, 239, 247);
rect(dx, dy, width, 60); // stripes are a slightly darker pastel blue
}
}
}
fill(171, 215, 235); // making the flowers dark blue
for (var y = 0; y < 10; y++) { // this for statement dictates the 5 rows of flowers that appear on the canvas
if (y % 2 === 0 || y === 0) { // this conditional ensures that a blank row is left between rows of flowers
for (var x = 0; x < 10; x += 2) { // the upper left petal on each flower
var py = (yStart - 10) + y * yStart; // variable that determines starting y coord of this petal
var px = (xStart - 10) + x * xStart; // variable that determines tarting x coord of this petal
quad(px - 10, py - 10, px + 10, py, px, py - 20, px - 20, py - 30); // actual petal shape (quadrilateral)
}
for (var a = 0; a < 10; a += 2) { // the upper right petal on each flower
var py2 = (yStart - 10) + y * yStart;
var pa = (xStart - 10) + a * xStart;
quad(pa + 20, py2, pa + 40, py2 - 10, pa + 50, py2 - 30, pa + 30, py2 - 20);
}
for (var b = 0; b < 10; b += 2) { // the lower right petal on each flower
var py3 = (yStart - 10) + y * yStart;
var pb = (xStart - 10) + b * xStart;
quad(pb + 20, py3 + 10, pb + 30, py3 + 30, pb + 50, py3 + 40, pb + 40, py3 + 20);
}
for (var c = 0; c < 10; c += 2) { // the lower left petal on each flower
var py4 = (yStart - 10) + y * yStart;
var pc = (xStart - 10) + c * xStart;
quad(pc - 20, py4 + 40, pc, py4 + 30, pc + 10, py4 + 10, pc - 10, py4 + 20);
}
for (var d = 0; d < 10; d += 2) { // the center of each flower
var py5 = (yStart - 10) + y * yStart;
var pd = (xStart - 10) + d * xStart;
ellipse(pd + 15, py5 + 5, 5, 5);
}
}
}
}
I enjoyed this project because it allowed me to work with tessellations and arrays, patterns I don’t usually utilize often in my design work. My piece is meant to offer a geometric interpretation of the classic floral wallpaper found in homes. To me, wallpaper should feel warm, inviting, and interesting — all foundations of a fun home environment. In my piece, each flower is comprised of quadrilateral petals and an ellipse center, giving the wallpaper the desired modernistic yet comforting feeling. I also utilized a pastel blue analogous color scheme; I personally really like pastel colors (similar to the ones utilized in the Pixas movie Up), and I think my color scheme added to the feeling of comfort. Interestingly, although blue is typically a “cold” color, I think the pastel nature makes it feel more cozy than cold.
In terms of actual designing, it took me a long time to figure out the exact coordinate needed for each petal. The quad() function in p5.js requires all 4 endpoints to be mapped out, so that took me ample time and trial-and-error to nail down. As seen in my sketchbook below, I actually mapped out the coordinate plane to make sure all my petals were symmetrical and congruent. In the end, it was worth it and I was very happy with my piece.
Some of the ideation sketches I did in my notebook. The bottom section depicts the slope calculations and mapping I had to do to place the endpoints of quad() in the right place in each for loop!
I really like the way computer graphics were used here in this magazine. The vibrant and playful colors are not just limited to the image, but also extend beyond to the area where text is placed. This enhances the “3-dimensional” concept by the way the graphic elements are placed beyond the edge of the main image.
The artist probably used 3D graphics software to create the models of the image before adding the details and vibrant colors. Typically, there is also a rendering algorithm that makes the image look 3-dimensional.
The artist(s) have a unique style throughout their work, which is also reflected in this work. Their style is playful, colorful, and bold with a consistent smooth 3d texture throughout the images.
The computer-generated Gollum (above, seen in 2012’s The Hobbit: An Unexpected Journey) CG Gollum is based on performances by actor Andy Serkis (below). Image: NEW LINE PRODUCTIONS
I chose Joe Letteri who is the senior visual effects supervisor at Weta Digital in New Zealand and the Oscar-winning co-creator of Gollum on screen The Hobbit. I admire films where actors interact with CG characters because the process incorporates using motion capture on the actor, that will be playing the computer generated character, and uses VFX techniques to bring the character into life. Since the Lord of the Rings trilogy in 2002, the CG looks of Gollum’s character has been constantly analyzed and applied with more technical progression on CG tools, as in the Hobbit, 2012, Gollum looks more realistic in terms of his skin texture and muscle movement. To achieve more realistic CG character that is no different to a real actor, Joe Letteri and Weta Digital focused in depth on how muscles and skeleton joints work in an actual human body. One of the techniques that they developed was a tissue simulation and subsurface-scattering technique to render Gollum’s skin texture to give more translucency.
//Sean Meng
//Section C
//hmeng@andrew.cmu.edu
//Project-05-Wall paper
var xS = 55;//define x spacing for each feather
var yS = 65;//define y spacing for each feather
function setup() {
createCanvas(600, 600);
}
function draw() {
background(0);
for(var x = 1; x <= 8; x += 1){
for(var y = 1; y <= 7; y += 1){
//draw feathers on the even number rows
if(y % 2 == 0){
stroke(255);
strokeWeight(0.5);
//the branches of the feather
line(x * xS, y * yS + 30, x * xS, y * yS + 500)
//outter green part of the feather
fill(31, y * 30, 111);//color gradiant from blue to green
ellipse(x * xS, y * yS, 30, 60);
//inner yellow layer of the feather
fill(242, 250, 130);
ellipse(x * xS, y * yS + 8, 20, 40);
//inner orange layer of the feather
fill(255, 163, 51);
ellipse(x * xS, y * yS + 8, 15, 30);
//inner light blue layer of the feather
fill(51, 228, 255);
ellipse(x * xS, y * yS + 14, 10, 10);
//inner dark blue layer of the feather
fill(17, 24, 214);
ellipse(x * xS, y * yS + 12, 7, 7);
}
//draw feathers on the odd number rows
else if(x <= 9){
stroke(255);
strokeWeight(0.5);
//the branches of the feather
line(x * xS + xS / 2, y * yS - 20, x * xS + xS / 2, y * yS - 500)
fill(y * 50, 196, 111);//color gradiant from green to orange
ellipse(x * xS + xS / 2, y * yS, 20, 40);
}
}
}
}
The drawing is inspired by the repeating pattern of peacock feather. By adding layers of color, gradient and shape, the form of the feather can be abstracted as wall paper
//Sammie Kim
//Section D
//sammiek@andrew.cmu.edu
//Project 05 - Wallpaper
function setup() {
createCanvas(600, 480);
background("black");
}
//Calling pattern function in consistent intervals by using for loop
function draw() {
for (var x = 0; x < width + 50; x += 100) {
for (var y = 0; y < height + 50; y += 70) {
pattern(x + 50, y + 30);
}
}
}
function pattern(x, y){
//variables controlling each shape's size
var size = 50;
var smallSize = 15;
var rectSize = 30;
noStroke();
//pink ellipse
fill("pink");
ellipse(x, y, size, size);
rectMode(CENTER);
//rotated center black square to make diamond shape
push();
translate(x, y)
rotate(radians(45));
fill("black");
rect(0, 0, rectSize, rectSize);
pop();
//inner red diamond inside the black diamond
push();
translate(x, y)
rotate(radians(45));
fill(255, 125, 122);
rect(0, 0, size * 0.3, size * 0.3);
pop();
//tiny left black ellipse
fill("black");
ellipse(x - 20, y, smallSize, smallSize);
//tiny top black ellipse
fill("black");
ellipse(x, y - 20, smallSize, smallSize);
//tiny right black ellipse
fill("black");
ellipse(x + 20, y, smallSize, smallSize);
//tiny bottom black ellipse
fill("black");
ellipse(x, y + 20, smallSize, smallSize);
//vertical white lines
stroke("white");
line(x + 50, 0, x + 50, height);
}
Brief Sketch of Initial idea
This project combined the materials I have learned so far in lecture regarding for loop and calling a function. I first created the pattern drawing of circles and squares as function “pattern” which I then embedded in the for loop to create repetition. Once again I realized how much more efficient it is to use this for loop rather than drawing all these elements numerous times.
/* Kimberlyn Cho
Section C
ycho2@andrew.cmu.edu
Project 5 */
function setup() {
createCanvas(500, 400);
background(255);
noLoop();
}
function draw() {
var ex = 50 // x position of first pupil
var ey = 40 // y position of first pupil
var ew = 15 // size of pupil
for (var y = 0; y < 8; y++) {
for (var x = 0; x < 6; x++) {
var eyex = ex + x * 80 // x position of arrayed pupils
var eyey = ey + y * 45 // y position of arrayed pupils
//eyeballs
fill(0, x * 50 + 50, y * 30 + 100);
strokeWeight(0);
ellipse(eyex, eyey, ew * 2, ew * 2);
//pupils
fill(0);
ellipse(eyex, eyey, ew, ew);
//reflection on pupils
fill(255);
ellipse(eyex + 3, eyey - 3, ew / 2, ew / 2);
//eye
noFill();
stroke(0, x * 30 + 50, y * 50 + 100);
strokeWeight(3);
arc(eyex, eyey + 22, ew * 5, ew * 5, PI + QUARTER_PI, -QUARTER_PI, OPEN);
arc(eyex, eyey - 22, ew * 5, ew * 5, QUARTER_PI, PI - QUARTER_PI, OPEN);
};
};
};
I was inspired by the static yet varied nature of human eyes for this project. While every eye in the pattern has the same elements (pupil, reflection, etc.), each eye has its own combination of colors that make it unique, as do humans.
var sx = 100; // Horizontal position of first column center
var dH = 50; // Height of diamonds
var dW = 50; // Width from center of diamond to outside edge
function setup(){
createCanvas(600, 600);
}
function draw() {
background(250, 230, 230);
noStroke();
fill(230, 100, 100);
for (var a = 0; a < 3; a ++) { // Creates small circles behind the diamonds
for (var b = 0; b < 12; b ++) {
ellipse(sx + 200 * a, (dH / 2) + (dH * b), dW, dH);
}
}
// This creates 3 columns of diamonds
for (var x = 0; x < 3; x ++) {
for (var y = 0; y < 12; y ++) {
fill(25 * y, 150, 220);
quad(sx + 200 * x, dH * y, sx - dW + (200 * x),
dH / 2 + dH * y, sx + 200 * x, dH + dH * y,
sx + dW + (200 * x), dH / 2 + dH * y);
}
}
rectMode(CENTER);
for (var z = 0; z < 4; z ++) { // 4 pink stripes
rect(z * 200, 0, 50, height * 2);
}
for (var c = 0; c < 4; c ++) { // This creates the lumpy bubble pattern
for (var d = 0; d < 30; d ++) {
fill(220, 100, 15 * d);
circle(c * 200, d * 25, 30);
}
}
noLoop();
}
For this project I was very inspired by the colors of the vaporwave backgrounds. I wanted to keep my design very vertical in nature, so I opted out of creating anything that draws the eyes horizontally. While the background color stays the same, the gradient of the diamonds can sometimes trick the eyes into seeing the lower half of the design as lighter.
![[OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
