I knew immediately that I wanted to do a cat patterned wallpaper. First I tried to break down what shapes I needed to represent a cat. Everything went well and I was able to draw it with p5js. I felt like it was missing something, so I added a fish for the cat to snack on. Once I drew the first cat and fish combo, put it in a nested for loop and changed the coordinates for each iteration. This quickly drew all of my cats for the complete wallpaper.
I am continuously amazed by the scale of Google Maps Street View / Google Earth. The fact that I can pick almost any road in the world and get a view as though I am there is insane. I love using it to look around my neighborhood and pretend that I’m taking a bike ride. Street View is also helpful when I’m going somewhere new. I appreciate that this compilation of images has been organized so that I can get a 3D view of so many places. I hope to encounter someone taking pictures to update the database. I know they are continuously retaking photos to ensure that Street View is up to date. I have no idea what specific methods they use to generate the 3D imaging, but I assume it’s all/mostly done by computers, since it would be a huge pain for humans to do it for the entire world. It is funny to see how some cars/trees/other objects in the environment are sometimes rendered badly. The computers are not perfect, but they do an amazing job.
/*
Yanina Shavialenka
Section B
yshavial@andrew.cmu.edu
Project 5: Wallpaper
*/
var x = 100;
var y = 45;
var s = 8;
var xS1 = 193;
var yS1 = 60;
var xS2 = 193;
var yS2 = 115;
function setup() {
createCanvas(600, 600);
background(0, 0, 51);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
background(0, 0, 51);
//Hexagonal background
for(var xH = 0; xH <= 600; xH += 15){
for (var yH = 0; yH <= 600; yH += 2*s*sqrt(3)/2){
fill(0, 0, 51);
hexagon(xH, yH);
}
}
for (var xH = 10; xH <= 600; xH += 15){
for (var yH = s*sqrt(3)/2; yH <= 600; yH += 2*s*sqrt(3)/2){
fill(0, 0, 95)
hexagon(xH, yH);
}
}
//Solar Systems
for(x = 100; x <= width; x += 200){
for(y = 85; y <=height; y += 300){
solarSystem();
}
}
for(x = 0; x <= width; x += 200){
for(y = 235; y <= height; y += 300){
solarSystem();
}
}
//Yellow Stars
for(xS1 = -7; xS1 <= width; xS1 += 200){
for(yS1 = 45; yS1 <=height; yS1 += 300){
star();
}
}
for(xS1 = 93; xS1 <= width; xS1 += 200){
for(yS1 = 195; yS1 <= height; yS1 += 300){
star();
}
}
//Pink Stars
for(xS2 = -7; xS2 <= width; xS2 += 200){
for(yS2 = 115; yS2 <=height; yS2 += 300){
star();
}
}
for(xS2 = 93; xS2 <= width; xS2 += 200){
for(yS2 = 265; yS2 <= height; yS2 += 300){
star();
}
}
}
function star() {
/*
This function draws yellow and pink stars.
The star is made out of a square in the middle and 4
triangles that surround that square.
*/
//Yellow Star
noStroke();
fill(255, 255, 102);
rect(xS1, yS1, 13, 13);
triangle(xS1, yS1, xS1+6.5, yS1-13, xS1+13, yS1);
triangle(xS1, yS1, xS1-13, yS1+6.5, xS1, yS1+13);
triangle(xS1, yS1+13, xS1+6.5, yS1+26, xS1+13, yS1+13);
triangle(xS1+13, yS1, xS1+26, yS1+6.5, xS1+13, yS1+13);
//Pink Star
noStroke();
fill(255, 178, 153);
rect(xS2, yS2, 13, 13);
triangle(xS2, yS2, xS2+6.5, yS2-13, xS2+13, yS2);
triangle(xS2, yS2, xS2-13, yS2+6.5, xS2, yS2+13);
triangle(xS2, yS2+13, xS2+6.5, yS2+26, xS2+13, yS2+13);
triangle(xS2+13, yS2, xS2+26, yS2+6.5, xS2+13, yS2+13);
}
function solarSystem() {
/*
This function draws Solar System with sun in the middle
and planets rotating around the sun on their orbits.
*/
//Orbits
stroke(255);
fill(0, 0, 0, 0);
ellipse(x, y, 25, 25);
ellipse(x, y, 45, 45);
ellipse(x, y, 65, 65);
push();
strokeWeight(3);
stroke(180);
ellipse(x, y, 85, 85);
pop();
ellipse(x, y, 105, 105);
ellipse(x, y, 125, 125);
ellipse(x, y, 145, 145);
ellipse(x, y, 165, 165);
//Sun
noStroke();
fill(255, 255, 0);
ellipse(x, y, 12, 12);
//Venus
noStroke();
fill(160, 160, 160);
ellipse(x+8, y+10, 8, 8);
//Earth
noStroke();
fill(0, 102, 204);
ellipse(x+10, y-20, 13, 13);
fill(0,220,0);
ellipse(x+11, y-22, 8, 4);
ellipse(x+11, y-17, 4, 2.5);
ellipse(x+7, y-19, 5, 2);
//Mars
noStroke();
fill(204, 65, 0);
ellipse(x-30, y-10, 12, 12);
//Jupiter
noStroke();
fill(255, 155, 0);
ellipse(x+40, y+35, 18, 18);
stroke(195, 0, 0);
line(x+35, y+28, x+48, y+34);
stroke(205, 50, 0);
line(x+32, y+33, x+46, y+40);
//Saturn
stroke(255);
fill(0, 0, 0, 0);
ellipse(x+37, y-50, 30, 9);
noStroke();
fill(190, 190, 190);
ellipse(x+37, y-50, 16.5, 16.5);
//Uranus
noStroke();
fill(153, 204, 255);
ellipse(x-53, y+50, 15, 15);
//Neptune
noStroke();
fill(10, 76, 153);
ellipse(x-45, y-70, 15, 15);
}
function hexagon(xH,yH){
/*
This function draws one hexagon with a side of 8 pixels
that is made out of 8 triangles.
*/
push();
translate(xH,yH)
noStroke();
triangle(0,0,-s,0,-s/2,-s*sqrt(3)/2)
triangle(0,0,-s/2,-s*sqrt(3)/2,s/2,-s*sqrt(3)/2)
triangle(0,0,s,0,s/2,-s*sqrt(3)/2)
triangle(0,0,-s,0,-s/2,s*sqrt(3)/2)
triangle(0,0,-s/2,s*sqrt(3)/2,s/2,s*sqrt(3)/2)
triangle(0,0,s,0,s/2,s*sqrt(3)/2)
pop();
}
|
This project was very interesting in the fact that I get to design whatever I want which also made this project hard as if it was hard to stop on one idea only. I came up with the idea of Solar system with planets surrounding a sun in the middle. All of the systems are identical and are separated by yellow and pink stars.
For this Week’s Looking Outwards, I will talk Romain Lemaire’s Color Project – Blue 01 Oily Paint Stroke (Early 2021).
Lemaire is a French “Freelance Material Artist” – as per his ArtStation Profile. He created this artwork as he sees his ability to work with color as a weakness. Hence, by working more with color, he will improve his abilities.
The Work itself was made using rendering techniques from what I could find. As for guesses on what algorithms were used, I would say ones that depend on where the strokes of the mouse are. I admit I am unknowledgeable of the process of creating 3D art other than the common terms like “rendering” that are used.
Other than that, I like the Work because of how different it is from everything else I saw. When Professor Cortina told us not to do Video Games, I was kind of dreading writing this LO up. That dread increased as I was trying to find 3d Computer Graphic Artwork that was not Video Game related. I originally used google images, but after clicking on one of the links for this Week LO’s writeup, I began searching on ArtStation instead. After searching the tags of #Digital 3D and #Abstract, I found Lemaire’s Work.
Besides the Work’s originality, I liked how warm it made me feel and a weird sort of peace that it instilled. Finally, it just looks good in all honesty – which I know I say for all of my LOs.
//cbtruong;
//Section B;
function setup() {
createCanvas(600, 600);
//cream background color that goes with the wallpaper-esque idea;
background(248, 241, 196);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
background(248, 241, 196);
//two for loops to draw repeated versions of pattern 1;
//inner loop is the x coordinate while the outer is the y coordinate;
//both i and j are initialized as width/height /4 to allow for centering;
for (var j = height/4; j < height*2; j += 300){
for (var i = width/4; i < width*2; i += 300){
pattern1(i, j);
}
}
//two for loops to draw repeated versions of pattern 2;
//inner loop is the x coordinate while the outer is the y coordinate;
//both l and m are intialized as width/height /2 to allow for centering;
//between pattern 1;
for (var m = height/2; m < height*2; m += 300){
for (var l = width/2; l < width*2; l += 300){
pattern2(l, m);
}
}
}
function pattern1 (x, y) {
//scaled it down by 0.5 by encasing;
//the entire pattern in a push/pop;
push();
scale(0.5);
strokeWeight(1);
noFill();
//connecting lines;
line(x, y, x - 50, y);
line(x, y, x + 50, y);
curve(x + 50, y, x - 50, y, x - 50, y - 50, x + 50 , y);
curve(x - 50, y, x + 50, y, x + 50, y + 50, x - 50, y);
//white circle;
fill(255);
circle(x, y, 15);
//muted blue color rectangle;
fill(92, 143, 191);
rect(x - 50, y - 70, 20, 40);
//muted red color rectangle;
fill(182, 30, 40);
rect(x + 30, y + 30, 20, 40);
//reddish lines;
fill(196, 59, 62);
strokeWeight(4);
line(x - 40, y - 10, x - 5, y - 40);
line(x - 35, y - 5, x, y - 35);
line(x + 5, y + 40, x + 40, y + 10);
line(x, y + 35, x + 35, y + 5);
//muted green triangles;
strokeWeight(1);
fill(62, 167, 32);
triangle(x + 45, y + 50, x + 25, y + 70, x - 15, y + 60);
triangle(x - 45, y - 50, x - 25, y - 70, x + 15, y - 60);
//second set of connecting lines;
line(x, y, y - 40, y + 40);
line(x, y, y + 40, y - 40);
noFill();
curve(x, y, x - 40, y + 40, x - 50, y, x, y);
curve(x, y, x + 40, y - 40, x + 50, y, x, y);
//yellow ellipse tilted using push/pop;
push();
translate(x - 30, y + 50);
rotate(radians(45));
fill(217, 227, 10);
ellipse(0, 0, 20, 50);
pop();
//orange ellipse tilted using push/pop;
push();
translate(x + 30, y - 50);
rotate(radians(45));
fill(226, 160, 29);
ellipse(0, 0, 20, 50);
pop();
pop();
noLoop();
}
function pattern2 (x, y){
//scaled it down by 0.5 as well;
//also encased it in a push/pop to allow scaling;
push();
scale(0.5);
//draws aquamarine rectangle;
fill(69, 166, 159);
rectMode(CENTER);
rect(x, y, 30, 30);
//draws connecting lines;
line(x - 20, y + 15, x - 35, y + 35);
line(x + 20, y - 15, x + 35, y - 35);
line(x + 35, y - 35, x - 15, y - 35);
line(x - 35, y + 35, x + 15, y + 35);
line(x - 20, y + 15, x - 20, y - 15);
line(x + 20, y - 15, x + 20, y + 15);
//draws muted pink circles;
fill(153, 139, 102);
circle(x - 35, y - 35, 40);
circle(x + 35, y + 35, 40);
//draws muted reddish triangles;
fill(196, 59, 62);
triangle(x - 20, y - 15, x - 30, y + 20, x - 60, y);
triangle(x + 20, y + 15, x + 30, y - 20, x + 60, y);
//draws tilted muted yellow rectangles;
fill(187, 164, 91);
push();
translate(x - 10, y + 40);
rotate(radians(315));
rect(0, 0, 20, 30);
pop();
push();
translate(x + 10, y - 40);
rotate(radians(315));
rect(0, 0, 20, 30);
pop();
pop();
}
I based it off of the early 20th Century Russian Art Movement known as Suprematism. I had the most fun so far creating this Program. Overall, it is very simple in terms of its creation. I just used pre-defined shapes and muted colors. I also used push/pop transformations to angle somethings and to make the main two patterns fit better on the 600×600 canvas.
“Unexpected Growth” is an augmented reality installation by Tamiko Thiel in 2018 and part of Whitney Museum’s exhibition “Programmed: Rules, Codes, and Choreographies in Art, 1965-2018.” Viewers were able to experience the installation directly through their smartphones on the Whitney Museum’s terrace. After opening the video, viewers can walk through the balcony and see it crawling with unchartered growths and plants that create an oceanic alternative to the New York high rise. I find most interesting how the futuristic, fictional visuals essentially occupies and invades the viewer’s very physical location, which to some degree closes the typical perception gap between such type of futuristic art and the viewer. Personally this digital installation epitomizes the title of the class for it is enabled by technology to bridge reality and another space, in this case the artist’s creation of a submerged New York in some undated future, into coexisting as one dimension. It allows a degree of inclusion and interaction for viewers that is not usually provided by more traditional art mediums.
When I was a little girl, I grew fond of one animated Pixar movie called “WALL-E”. I loved it because it showed people that even robots can learn how to love, how to feel and express emotions for those around them and be more human than many humans on this earth.
I chose a 3D Graphic Project by Dong Liang called “Cambot”. Dong Liang created a touching story where a “Cambot, short for Camera Robot, is a type of robot that will go around and shoot photos under its owner’s command.” However, there was one abandoned Cambot, NO. 406, who encountered a glitch during its production and now doesn’t follow the commands of its owner and only wanders around taking pictures of things he finds interesting, attractive and fascinating. How cute is that? I admire this project because the creator didn’t just create a 3D image, no, he gave this image its own life by having a story behind it. This so-called glitch made this robot have its own personality, look for beautiful things in the world on its own – this glitch made NO. 406 be alive.
The first step in this project that Dong Liang has done was playing around with sketches of the robot to find the right design. Texturing of the image was done in Mari – 3D Texture Painting Software: “I exported a neutral-pose mesh for painting the generic maps such as dif, bmp, spc, and spc roughness, and then I also exported a posed mesh for the rain mask because I want the water trails to follow the gravity.” The rain in the image was done in Maya, a 3D computer graphics application, using the nParticle; for example, to create the rain streak, Dong Liang randomly instanced 5 different streak models to a nParticle system to generate random rain drops as if it was in real life. To set up the lighting, Dog Liand used aHDRI provided by sIBL which also gave him a good bokeh effect when turning on the lens blur. Lastly, “the rain streaks and splashes were rendered as separate pass and were comped into the beauty pass in Nuke.”
The creator’s artistic sensibilities played the biggest role in the final form because, as I’ve already mentioned before, Dong Liang made his work be alive by having a story about it, by giving his robot characteristics of a human being and also, by creating a short clip of NO. 406 which brought that 3D image to life in literal sense. This project radiates warmth, happiness and truth – you might have a glitch yet you’re unique and beautiful in its own way. Maybe having a glitch is an advantage? That’s something to think about.
var size = 40; //variable that determines the size of the indvidiual flowers
var ypos = size;
var xpos = size;
var oDist = size * 1.4 //distance between two origins for the rings
var storedY; //variable to store previous ypos
function setup() {
createCanvas(600, 600);
background(231,227,210);
}
function draw() {
for(ypos = size; ypos <= height; ypos +=(2*size)+oDist) { //loop that increases the ypos and repeats the x loops
for(var xpos = size; xpos <= width + size; xpos += 2*size){ //loop to draw the line of flowers
storedY = ypos; //stores ypos
fill(0);
push();
translate(xpos,ypos);
flower(0,0);
pop();
}
ypos += oDist + (7*size/24);
for(var xpos = oDist/2; xpos <= width + size; xpos += oDist){ //loop to draw the line of rings
push();
fill(230,192,71);
translate(xpos,ypos);
criss(0,0);
pop();
}
ypos = storedY; //sets ypos back to what it was when the loop began so the loop iteration works properly and fills the screen
}
noLoop();
}
function criss(x,y){ //function that draws the ring shaps by drawing rotated flowers
push();
rotate(radians(45));
flower(x,y);
pop();
}
function flower(a,b){ //function that draws the flower by drawing a petal and then rotating 90 degrees and repeating
petal(a,b);
push();
rotate(radians(90));
petal(a,b);
pop();
push();
rotate(radians(180));
petal(a,b);
pop();
push();
rotate(radians(270));
petal(a,b);
pop();
}
function petal(x,y) { //function that draws an idvidual petal composed of two triangles and a square
noStroke();
var side = size/(1+sqrt(3)); //variable that determins the length of the side of the square and equilateral triangle
var triHigh = side*(sqrt(3)/2); //variable that determins the height of the triangle based on the length of the side
triangle(x,y,x-(side/2),y+triHigh,x+(side/2),y+triHigh);
square(x-(side/2),y+triHigh,side);
triangle(x,y+size,x-(side/2),y+size-triHigh,x+(side/2),y+size-triHigh);
}
I loved this project. I had a really great time breaking down the steps of drawing into individual functions to make the process easier. Additionally, it was very satisfying to get the loops working properly because I had to iterate on that a few times. The patterns would either be too far apart or on top of one another.
For 3D computer art, I looked at the artist known as Chaotic Atmospheres from Switzerland. They have made digital art since 2012. As their name implies, Chaotic Atmospheres makes atmospheres and landscapes but alters them in a surrealist way. Specifically, for their project “Shapes in Nature”, their environments will often be large in scale, have exaggerated features of the environment being depicted, and some large geometric shape in the middle that is reflective. The reason I find their work so impressive is their attention to detail. They make both art from scratch and art made from imported textures, both of which are laborious tasks, either writing code to create the images or writing code to take the textures and create realistic environments out of them. Additionally, creating the reflection must be difficult, whether it be algorithmic like ray tracing or hard-coded into the work.
![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2023/09/stop-banner.png)
