![[OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
The haunting and eerie image, Golden Skull, was created by CG director and environment artist Hirokazu Yokohara within 5 days. The article states that the project was created with Blender add-on Graswald, EEVEE, and Cinema 4D. I admired this particular project because it incorporates a variety of lighting, shading, and layering abilities to create such a realistic image to be 3D printed. Such techniques are crucial when it comes to CG projects in movies. The realistic aspect of such meticulously designed items in movies give the wow factor to audience members. I suppose that the image was created by a variety of layering skills with shading and lighting changes implemented to create the realistic factor. The creator’s artistic sensibilities are manifested in the final form by using all his techniques and abilities to produce a realistic CG. As someone who is interested in film producing, I appreciate all the CG artists out there who take the time to give life to inanimate images.
Category: SectionB
Xiaoyu Kang – Project 05 – Wallpaper
//Xiaoyu Kang
//xkang@andrew.cmu.edu
//Section B
//Project-05
var s1 = 20;
var s2 = 15;
var s3 = 10;
function setup(){
createCanvas(620, 620);
noStroke();
}
function draw() {
background(172,198,253);
//lines
for (var a = 0; a < 620; a += 80){
fill(235,226,158);
rect(a + 65,0,10,620);
}
//clouds
for (var y = 0; y < 620; y += 4) {
for (var x = 0; x < 620; x += 4) {
fill("white");
ellipse(y * s1 + (s1 / 20) + 30, x * s1 + (s1 / 20) + 30,s1,s1);
ellipse(y * s1 + (s1 / 20) + 15, x * s1+ (s1 / 20) + 30,s1,s1);
ellipse(y * s1 + (s1 / 20) + 35, x * s1 + (s1 / 20) + 35,s1,s1);
ellipse(y * s1 + (s1 / 20) + 25, x * s1 + (s1 / 20) + 38,s2,s2);
ellipse(y * s1 + (s1 / 20) + 45, x * s1 + (s1 / 20) + 32,s2,s2);
}
}
//yellow stars
for (var y = 0; y < 620; y += 4) {
for (var x = 0; x < 620; x += 4) {
fill(243,246,202);
quad(y * s1 + (s1 / 20) + 25, x * s1 + (s1 / 20) + 72, y * s1 + (s1 / 20) + 29, x * s1 + (s1 / 20) + 66, y * s1 + (s1 / 20) + 33, x * s1 + (s1 / 20) + 72, y * s1 + (s1 / 20) + 29, x * s1 + (s1 / 20) + 78)
}
}
}
For this project, I was inspired by the wallpaper in my bedroom when I was young. I remembered that it consists of many white clouds printed over a blue canvas. So I tried to recreate that with some additional decorations to make the drawing look more diverse.
Xu Xu -Project 05 – Wallpaper
//Claire Xu
//xux1@andrew.cmu.edu
//Section B
//Project 05
var diameter = 8;
var spacing = 600/12;
var distance = 600/40;
var diam = 4;
function setup() {
createCanvas(570, 570);
}
function draw() {
background("black");
//love
for (var y = 0; y < 20; y += 1) {
for (var x = 0; x < 15; x += 1) {
noStroke();
fill("white");
circle(x*spacing + (diameter/2) + 5, y* spacing * 3 + (diameter), diameter);
circle(x*spacing + (diameter*1.5) +5 , y* spacing * 3 + (diameter), diameter);
triangle(x*spacing +5, y* spacing * 3 + (diameter), x*spacing + (diameter)+5, y*spacing *3 + 2.5*diameter, x*spacing + (diameter*2) +5, y* spacing *3 + (diameter));
}
}
//death
for (var y = 0; y < 20; y += 1) {
for (var x = 0; x < 15; x += 1) {
strokeWeight(4);
stroke("white");
strokeCap(PROJECT);
line(x*spacing + 5*diameter, y* spacing * 3 + 7.5*diameter,x*spacing + 3.5*diameter, y* spacing * 3 + 6*diameter);
strokeCap(ROUND);
line(x*spacing + 5*diameter, y* spacing * 3 + 6*diameter,x*spacing + 3.5*diameter, y* spacing * 3 + 7.5*diameter);
}
}
//robots
for (var y = 0; y < 20; y += 1) {
for (var x = 0; x < 15; x += 1) {
noStroke();
fill("white");
rect(x*spacing + 0.5*diameter+3, y* spacing * 3 + 12*diameter, diameter*2, diameter*2);
fill("black");
circle(x*spacing + diameter+3, y* spacing * 3 + 12.5*diameter, diam);
circle(x*spacing + 2*diameter+3, y* spacing * 3 + 12.5*diameter, diam);
}
}
noLoop();
}
For this project, I was inspired by the patterns of the Netflix show “Love, Death + Robots”, which I wanted to incorporate as part of my wallpaper design. Therefore I used the black and white logo colours, and organized the logos onto the wallpaper. I included details such as the different stroke caps of the “death” symbol, but to me organizing the logos using code was the most challenging part.
Crystal-Xue-Project-05
//Crystal Xue
//15104-section B
//luyaox@andrew.cmu.edu
//project-05
var vA = 10; //vertical coordinate change of shorter edge
var hA = 17.32;//horizontal coordinate change of the shorter edge = √3 * vA
var vB = 40; //vertical coordinate change of the longer edge
var hB = 69.28;//vertical coordinate change of the longer edge = √3 * vB
function setup() {
createCanvas(375, 600);
}
function draw() {
background(0);
noStroke();
scale(0.7);
for (var x = 0; x < 600 ; x += hB + 2 * hA) {
for (var y = 0; y < 1200 ; y += 2 * vB + 4 * vA) {
if (x % (2 * (hB + 2 * hA)) == 0) {
push();
translate(-85, 0);
fill(200);
//top side
beginShape();
vertex(x, y); //pt1
vertex(hA + x, -vA + y);//pt2
vertex(hA + hB + x, vB - vA + y);//pt3
vertex(hA + 2 * hB + x, -vA + y);//pt4
vertex(2 * hA + 2 * hB + x, y);//pt5
vertex(hA + hB + x, vA + vB + y);//pt6
endShape(CLOSE);
//left side
beginShape();
fill(120);
vertex(x, y);//pt1
vertex(x, 2 * vA + y);//pt7
vertex(hB + x, 2 * vA + vB + y);//pt8
vertex(hB + x, 3 * vA + 3 * vB + y);//pt9
vertex(hB + hA + x, 4 * vA + 3 * vB + y);//pt10
vertex(hA + hB + x, vA + vB + y);//pt6
endShape(CLOSE);
// right side
beginShape();
fill(50);
vertex(hB + hA + x, 4 * vA + 3 * vB + y);//pt10
vertex(hB + 2 * hA + x, 3 * vA + 3 * vB + y); //pt11
vertex(hB + 2 * hA + x, 2 * vA + vB + y);//pt12
vertex(2 * hB + 2 * hA + x, 2 * vA + y);//pt13
vertex(2 * hA + 2 * hB + x, y);//pt5
vertex(hA + hB + x, vA + vB + y);//pt6
endShape(CLOSE);
pop();
}
else {
push();
translate(-85, -vB - 2 * vA);
//top side
fill(200);
beginShape();
vertex(x, y); //pt1
vertex(hA + x, -vA + y);//pt2
vertex(hA + hB + x, vB - vA + y);//pt3
vertex(hA + 2 * hB + x, -vA + y);//pt4
vertex(2 * hA + 2 * hB + x, y);//pt5
vertex(hA + hB + x, vA + vB + y);//pt6
endShape(CLOSE);
//left side
beginShape();
fill(120);
vertex(x, y);//pt1
vertex(x, 2 * vA + y);//pt7
vertex(hB + x, 2 * vA + vB + y);//pt8
vertex(hB + x, 3 * vA + 3 * vB + y);//pt9
vertex(hB + hA + x, 4 * vA + 3 * vB + y);//pt10
vertex(hA + hB + x, vA + vB + y);//pt6
endShape(CLOSE);
//right side
beginShape();
fill(50);
vertex(hB + hA + x, 4 * vA + 3 * vB + y);//pt10
vertex(hB + 2 * hA + x, 3 * vA + 3 * vB + y); //pt11
vertex(hB + 2 * hA + x, 2 * vA + vB + y);//pt12
vertex(2 * hB + 2 * hA + x, 2 * vA + y);//pt13
vertex(2 * hA + 2 * hB + x, y);//pt5
vertex(hA + hB + x, vA + vB + y);//pt6
endShape(CLOSE);
pop();
}
}
}
}
Using trigonometry of 30-degree triangles, I dissected this single unit piece into two sizes of triangles. I nested the units with each other and created this interlocking pattern.
Crystal Xue-LookingOutwards-05
Alexey Kashpersky is a visual artist originally from Poltava, Ukraine. He has created a series of work for fantasies world and medical use. He has a youtube channel dedicated to all the 3D generated art and microbiology videos.
This cancer cell microenvironment video is particularly interesting to me. He presented the cells in such a delicate fantasy way that has unrealistic lightings and colors. We always depict that cancer is evil. However, through his 3D video visualization, it becomes a whole another world.
On the other hand, I wish the videos produced can be more educational instead of being purely aesthetic pleasing.
Rachel Shin – Project 05 – Wallpaper
/*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();
}
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.
Ankitha Vasudev – Project 05 – Wallpaper
For this project I wanted to create a geometric pattern and was inspired by the designs on the antique wallpaper website. I experimented with various shapes, variables and colors before arriving at a final result. I particularly focused on creating quadrangles through diagonal lines.
//Ankitha Vasudev
//ankithav@andrew.cmu.edu
//Section B
//Project 05
//global variables
var l = 25;
var diameter = 10;
var spacing = 50;
function setup() {
createCanvas(400, 400);
noLoop();
}
function draw() {
background(210, 140, 190);
//command to draw wallpaper
drawWallPaper();
}
function drawWallPaper() {
//thin yellow lines
stroke(255, 215, 50);
strokeWeight(8);
for (var x = 0; x<=width; x += spacing) {
for (var y = 0; y <= height; y+=spacing) {
line(x-l, y+l, x+l, y-l);
line(x+l, y+l, x-l, y-l);
line(x-l, y+l, x+l, y-l);
line(x+l, y+l, x-l, y-l);
}
}
//thick blue diagonal lines
stroke(130, 190, 230);
strokeWeight(4);
for (var x = 0; x<=width; x += spacing) {
for (var y = 0; y <= height; y+=spacing) {
line(x-l, y+l, x+l, y-l);
line(x+l, y+l, x-l, y-l);
line(x-l, y+l, x+l, y-l);
line(x+l, y+l, x-l, y-l);
}
}
//inner squares
strokeWeight(2);
stroke(255, 215, 50);
fill(255, 70, 160);
for (var x = 0; x<=width; x += spacing/2) {
for (var y = 0; y <= height; y+=spacing) {
rectMode(CENTER);
rect(x, y, l/4, l/4);
}
}
//circles
strokeWeight(4);
stroke(130, 190, 230);
fill(220);
for (var x = 0; x<=width; x += spacing) {
for (var y = 0; y <= height; y+=spacing) {
ellipse(x, y, diameter);
}
}
}
Julia Nishizaki – Project 05 – Wallpaper
//Julia Nishizaki
//Section B
//jnishiza@andrew.cmu.edu
//Project-05-Wallpaper
function setup() {
createCanvas(600, 600);
background(18, 120, 161);
noLoop();
}
function draw() {
//grid background
for (var y = 0; y < height + 25; y += 50) {
for (var x = 0; x < width + 25; x += 50) {
//diagonal lines
var linelength = 25;
strokeWeight(5);
stroke(63, 159, 188);
line(x - linelength, y - linelength, x + linelength, y + linelength);
line(x - linelength, y + linelength, x + linelength, y - linelength);
//short crosses that break up the diagonal lines
var linelengthHorizon = 5;
stroke(18, 120, 161);
strokeCap(ROUND);
line(x - linelengthHorizon, y, x + linelengthHorizon, y);
line(x, y - linelengthHorizon, x, y + linelengthHorizon);
}
}
//normal bird layer
for (var y = 0; y < height + 100; y += 100) {
for (var x = 0; x < width + 100; x += 100) {
bird(x, y);
}
}
//offset bird layer
for (var y = 50; y < height + 100; y += 100) {
for (var x = 50; x < width + 100; x += 100) {
bird(x, y);
}
}
}
function bird(x, y) {
push();
translate(x, y);
noStroke();
//bird variables:
var birdHeadS = 20;
var birdHeadX = -25;
var birdHeadY = -33;
var birdBodyW = 40;
var birdBodyH = 30;
var birdBodyX = -35;
var birdBodyY = -25;
var birdDisplacement = 12;
//left bird: beak, head, body
fill(255, 197, 67);
triangle(birdHeadX - birdDisplacement, birdHeadY + 6, birdHeadX - birdDisplacement, birdHeadY - 6, (birdHeadX - birdDisplacement) - 15, birdHeadY);
fill('white');
ellipse(birdHeadX - birdDisplacement, birdHeadY, birdHeadS, birdHeadS);
arc(birdBodyX - birdDisplacement, birdBodyY, birdBodyW, birdBodyH, PI * 7/4, PI * 3/4);
//right bird: beak, head, body
fill(255, 197, 67);
triangle(birdHeadX + birdDisplacement, birdHeadY + 6, birdHeadX + birdDisplacement, birdHeadY - 6, (birdHeadX + birdDisplacement) + 15, birdHeadY - 5);
fill('white');
ellipse(birdHeadX + birdDisplacement, birdHeadY, birdHeadS, birdHeadS);
arc(birdBodyX + birdDisplacement + 20, birdBodyY - 5, birdBodyW, birdBodyW, 0, PI);
//eyes
fill(6, 73, 112);
ellipse(birdHeadX - birdDisplacement - 3, birdHeadY - 2, 3, 3);
ellipse(birdHeadX + birdDisplacement + 3, birdHeadY - 2, 3, 3);
pop();
}
For this project, I wanted to create something that was fairly simple and geometric, but also playful and fun. I started with some sketches, and developed the idea that I wanted to use a grid of some sort, along with pigeons. When I started to create the wall paper, I ended up deviating from my drawing, and I instead tried to explore different elements. For example, I decided to create generic birds, rather than pigeons, and I ended up rotating the grid, moving the birds, and playing with what they looked like.
Claire Lee – Project 05 – Wallpaper
function setup() {
createCanvas(600, 600);
}
function draw() {
background(140, 180, 155, 200);
for (x = 0; x < 10; x ++) {
stroke(30, 70, 45, 200);
strokeWeight(2);
line((x*60) + 30, 0, (x*60) + 30, height);
//stem
}
for (x = 0; x < 15; x ++) {
for (y = 0; y < 62; y += 3) {
noStroke();
fill(30, 70, 45, 200);
quad((x*60) + 30, y*10 - 5, (x*60) + 40, y*10 - 5, (x*60) + 50, y*10 - 15, (x*60) + 40, y*10 - 15);
quad((x*60) + 30, y*10 - 5, (x*60) + 20, y*10 - 5, (x*60) + 10, y*10 - 15, (x*60) + 20, y*10 - 15);
//leaves
}
}
for (x = 0; x < 10; x ++){
for (y = 0; y < 30; y += 3) {
noStroke();
fill(255, 250, 220);
ellipse((x*120) + 40, y*40 + 4.5, 5, 5);
ellipse((x*120) + 37, y*40 + 10, 5, 5);
ellipse((x*120) + 43, y*40 + 10, 5, 5);
//flowers (odd)
ellipse((x*120) + 20, (y*40 + 60) + 4.5, 5, 5);
ellipse((x*120) + 23, (y*40 + 60) + 10, 5, 5);
ellipse((x*120) + 17, (y*40 + 60) + 10, 5, 5);
//flowers (even)
}
}
noLoop();
}
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.
Ghalya Alsanea – Looking Outwards – 05
“Computation is typically a prompt to the illusion of determinacy.”
Dana Cupkova
This topographical flow is color coded according to each line’s unique identifier in the software. This is part of a research project led by Dana Cupkove, a professor here at CMU in the School of Architecture. Making the underlying data an argument for visual exploration, Cupkova operates on the munerical structure of the image as an aesthetic device. I am inspired by how the layering of lines of varying tones work to hightlight the drawing’s analytical value, and its geographical accuracy, while making a new landscape visible.
Find more of her work here.