//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.
Roman Bratschi specializes in creating organic 3D graphics. I was drawn to his style due to the juxtaposition between the shiny computer-graphic quality and the natural forms present in his work. Through working both with form as well lighting and texture, Bratschi is able to achieve an impressive, surrealistic quality with his work.
/* Austin Garcia
Section C
aegarcia@andrew.cmu.edu
Project-05
*/
var s = 20
function setup() {
createCanvas(600, 600);
}
function draw() {
background(100)
strokeWeight(10)
fill(50)
//background
for (var i = 0; i <= width; i += width / 20) {
for (var l = 0; l <= height; l += 40) {
rect(i, l, width / 20, height)
}
}
// base circles
for (var x = 0; x <= width; x += s * 2) {
for (var y = 50; y <= height; y += s * 4) {
ellipse (x, y, 40, 40)
fill(y / 2, x / 2, y * 3)
}
}
//blue circles
for (var x = 20; x <= width; x += s * 2) {
for (var y = 50; y <= height; y += s * 4) {
ellipse(x - 5, y - 5, 10, 20)
}
}
for (var x = 20; x <= width; x += s * 2) {
for (var y = 50; y <= height; y += s * 4) {
ellipse(x + 5, y - 5, 10, 20)
}
}
//inner circles creating curves of 'potions'
for (var x = 20; x <= width; x += s * 2) {
for (var y = 50; y <= height; y += s * 4) {
ellipse(x - 5, y - 5, 5, 10)
}
}
for (var x = 20; x <= width; x += s * 2) {
for (var y = 50; y <= height; y += s * 4) {
ellipse(x + 5, y - 5, 5, 10)
}
}
for (var x = 20; x <= width; x += s * 2) {
for (var y = 50; y <= height; y += s * 4) {
ellipse(x, y + 10, 15, 10)
}
}
//shelves
for (var i = 0; i <= width / 20; i += width / 20 * 2) {
for (var l = 0; l <= height; l += 40 * 2) {
rect(i, l - 15, width, 20)
fill(101, 67, 33)
strokeWeight(0)
}
}
//bubbles
for (var x = 4; x <= width; x += s * 2) {
for (var y = 20; y <= height -100; y += s * 4) {
ellipse (x, y, 5, 5)
fill(225)
strokeWeight(0)
}
}
for (var x = -2; x <= width; x += s * 2) {
for (var y = 15; y <= height -100; y += s * 4) {
ellipse (x, y, 4, 4)
fill(225)
strokeWeight(0)
}
}
for (var x = 0; x <= width; x += s * 2) {
for (var y = 25; y <= height - 50; y += s * 4) {
ellipse (x, y, 6, 6)
fill(225)
strokeWeight(0)
}
}
}
I was playing around with patterns and realized I had created a potion looking form by layering circles. I decided to add a background and bubbles coming up from the potions as well as potion racks to finish off the pattern
//Jasmine Lee
//jasmine4@andrew.cmu.edu
//Section C
//Project 5 (Sky)
function setup(){
createCanvas(600, 600);
//dark-blue background
background(17, 35, 94);
//short star trail
for(var a = 0; a < 701; a += 100){
for(var b = 0; b < 701; b += 100){
noStroke();
fill(255, 255, 255);
ellipse(a, b, 3, 3);
ellipse(a + 4, b + 4, 1, 1);
}
}
for(var c = 25; c < 701; c += 100){
for(var d = 25; d < 701; d += 100){
//long star trail
fill(255, 255, 255);
ellipse(c, d, 3, 3);
ellipse(c + 20, d + 10, 2, 2);
ellipse(c + 25, d + 15, 1, 1);
ellipse(c + 30, d + 15, 1, 1);
ellipse(c + 10, d + 20, 1, 1);
ellipse(c + 5, d + 10, 2, 2);
//ufo ship glass
fill(255, 255, 255, 100);
ellipse(c + 15, d + 20, 30, 30);
fill(208, 255, 161, 200);
//ufo ship beam
triangle(c + 15, d + 22, c + 5, d + 70, c + 25, d + 70)
fill(161, 222, 255);
//ufo ship body
ellipse(c + 15, d + 22, 40, 15);
//alien
fill (122, 39, 163);
ellipse(c + 15, d + 20, 12, 17);
ellipse(c + 10, d + 10, 4, 4);
ellipse(c + 20, d + 10, 4, 4);
fill (0);
ellipse(c + 12, d + 17, 3, 3);
ellipse(c + 17, d + 17, 3, 3);
//ufo ship lights
fill(245, 205, 73);
ellipse(c, d + 23, 5, 5);
ellipse(c + 10, d + 25, 5, 5);
ellipse(c + 20, d + 25, 5, 5);
ellipse(c + 30, d + 23, 5, 5);
//small cloud
fill(255, 255, 255, 50);
ellipse(c + 30, d, 20, 10);
ellipse(c + 35, d, 20, 15);
ellipse(c + 40, d, 20, 10);
//big cloud
fill(255, 255, 255, 120);
ellipse(c + 10, d + 40, 40, 15);
ellipse(c + 15, d + 35, 30, 20);
ellipse(c + 20, d + 40, 40, 15);
}
}
}
For my wallpaper, I was inspired by classic children’s designs. I decided to create a alien-themed wallpaper and the starry sky. With this project, I enjoyed playing around with the transparency of the elements in order to depict the clouds. In my sketch, I arranged how I wanted my elements to appear before actually coding it.
A sketch, on grid paper, of the repeating pattern of ellipses.
I am really interested in 3-D computer animation used in film making. “Despicable Me,” distributed by Universal Pictures, was animated by a French animation studio-Mac Guff. Characters in the movie has smooth motions and lively facial expressions. What I admire the most is that the producers give every minion its own personality and characteristics. Minions not only have various body feature, such as height, eyes, and hair, but also have different expressions. The process from the first sketch of the minions to story-boarding, layouts, animation, and final production is complex and appealing.
//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();
}
}
}
}
diagram
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.
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.
Even though I find the visuals of this work to be less lyrical than the concept, I find this work incredibly beautiful. Especially that it could only ever be created with a computer. In this work titled Blackberry Winter by Christian Mio Loclair this year, space activated by the body is explored. He fed images of different poses of the body relating to space to a neural network, which then created these simulations of human movement . I found it very interesting how what it means to dance is to explore the spacial potential around oneself. I admire that something without a body can give a visualization of what it is to have a body.
Image of imagined body movement / dance by AI n
The creators sensibilities are present in the final form by the relationship between chaos and organization within this piece. The chaos of generated body movements and a, at times, fragmented body is pared with an orderly. background and color scheme. The color scheme itself also reveals the theme of chaos and order, as the color was chosen by the neural network (chaos) after analyzing the color schemes of different artist works (order).
I am unsure about the way this was created because I don’t know too much about how one might program an AI to generate an image. I do get the sense though that it requires a lot of Data to “train” a neural network. And I would imagine there must exist a programming language that can represent three-dimensional data/space which helps to encode the motion.
/*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.
![[OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
