![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2022/wp-content/uploads/2023/09/stop-banner.png)
I don’t know if this counts as video game graphics as it’s related but not used for game purposes. The tool I’ll be looking at is an AI called Nokemon, this is an AI crated using a database of 3D Pokemon models, and tries generating a new 3D Pokemon model using filters such as Pokemon typings, the main color of the Pokemon, and if it is a rare legendary or not. I appreciate this as while I do enjoy Pokemon, I think it more comments on the sophistication of creating non-human characters. As Pokemon can be designed from an object, animal, etc, watching AI try to identify these human-designers inspirations and make their it’s own Pokemon based off those inspirations. I’m supposing that the AI uses the same engine 3D modelers use, and analyzes how each shape, color, and property of each model is related to each other, and tries to create something similar. As you can see from using the tool, the AI is’t that great at creating Pokemon, they seem heavily uninspired and nonsensical, but watching what elements the AI pulls from pre-existing models is quite interesting.
Author: Cole
Project 5 – Wallpaper
For my wallpaper, I wanted to try to replicate the “jazz” pattern seen on your typical office styrofoam cup.
csavitzv_05
//Cole Savitz-Vogel
//csavitzv
//Section A
function setup() {
createCanvas(600, 600);
background(0);
noLoop();
}
function draw() {
fill(230);
background(230);
for (var y = -60; y <= height+50; y+= 70) {
stripes(0, y);
}
for (var x = -100; x <= width+50; x += 150) {
for (var y = -10; y <= height+50; y += 70)
pastel(x, y);
}
for (var x = -80; x <= width+50; x += 100) {
for (var y = -50; y <= height+50; y += 70)
curvy(x, y);
}
for (var x = -50; x <= width+50; x += 2) {
for (var y = -50; y <= height+50; y += 10)
styro(x, y);
}
}
//Stripes - The backmost blue line
function stripes(x,y) {
push();
translate(x,y);
strokeWeight(30);
curveTightness(3);
stroke(94, 205, 255, 90);
curve(-3000, 60, 200, 36, 400, 20, 3000, 50);
pop();
}
//Curvy - The purple frontmost curves; The color varies slightly
function curvy(x, y) {
push();
noFill();
translate(x,y);
strokeWeight(5);
curveTightness(-5)
rotate(1);
stroke(random(100, 130), 10, (100, 150));
curve(-10, 16, 50, 46, 90, 34, 130, 60);
translate(10, 20);
rotate(3);
curve(-10, 6, 50, 36, 90, 24, 130, 50);
pop();
}
//Pastel - The middleground blue lines; The color varies slightly
function pastel(x,y) {
push();
translate(x,y);
strokeWeight(15);
stroke(74, 225, 255, random(90,120));
curveTightness(0)
curve(0, 16, 100, 46, 150, 34, 190, 60);
translate(40, 25);
rotate(.05);
stroke(94, 205, 255, random(90, 120));
curve(0, 6, 100, 36, 150, 24, 190, 50);
translate(30, -20);
rotate(-.05);
stroke(74, 215, 225, random(90, 120));
curve(0, 6, 100, 36, 150, 24, 190, 50);
translate(30, 15);
rotate(.05);
stroke(54, 235, 245, random(90, 120));
curve(0, 6, 100, 36, 150, 24, 190, 50);
pop();
}
//Styro - A filter-like pattern of random small lines and dots to give the underlying pattern a styrofoam feel
function styro(x, y) {
push();
translate(x, y);
noStroke();
fill(230, random(100,250));
ellipse(random(0, 100), random(0, 100), random(1, 3), random(1,3));
strokeWeight(random(.01, .1));
stroke(230, random(100,250));
line(random(0, 100), random(0, 100), random(0, 100), random(0, 100));
pop();
}Project 4 – String Art
For this project, I wanted to test the variability of how string art can generate, so I made a random string generator that creates what eventually looks like TV static. Press down the mouse to generate more and more strings until the screen is completely covered!
csavitz_4
//Cole Savitz-Vogel
//csavitzv
//Section A
var x1;
var y1;
var x2;
var y2;
var x3;
var y3;
var x4;
var y4;
var x5;
var y5;
var x6;
var y6;
function setup() {
createCanvas(500, 500);
background(0);
}
function draw() {
if (mouseIsPressed){
strokeWeight(.5);
web();
push();
translate(random(0,500),random(0,500));
web();
pop();
push();
translate(random(0,500),random(0,500));
web();
pop();
push();
}
}
function web() {
x3 = random(1, 500);
y3 = random(1, 500);
x4 = random(1, 500);
y4 = random(1, 500);
x5 = random(1, 500);
y5 = random(1, 500);
x6 = random(1, 500);
y6 = random(1, 500);
x1 = x3;
y1 = y3;
x2 = x5;
y2 = y5;
line(x3, y3, x4, y4);
line(x5, y5, x6, y6);
strokeWeight(0.5);
for (var i = 0; i < 51; i+=1) {
var xdelta1 = (x4 - x3);
var ydelta1 = (y4 - y3);
var xdelta2 = (x5 - x6);
var ydelta2 = (y5 - y6);
noFill();
stroke(random(i,200), random(i,200), random(i,200));
arc(x1, y1, x2, y2, random(0,3), random(0,3));
x1 += xdelta1;
y1 += ydelta1;
x2 += xdelta2;
y2 += ydelta2;
}
}Looking Outwards – 04
The art I’ll be reviewing today is Ryoji Ikeda’s “Datamatics”. This piece explores the how we can possibly perceive multi-substance data that though present in out world; humans otherwise cannot comprehend. The piece uses pure data as a source for generating both sounds and visuals that help present time and space. The graphics are intentionally minimal and give a natural feel that you are looking at or hearing data. I’m not entirely sure how any of the data is technically generated, though I know the technologies used to collect the data. For starters, audio data can be collected through a mic and registered through pitch, volumes, harmonics, etc., these mics can also use AI learning to detect reverberance, decay, echoes, space, timbre, etc. This can then create visuals or separate audio based on the data that is a pure translation of the data. This can mean it can make a few clicks of data points, signals, analog waves, harmonies, pitches, etc. I really admire this art process as it links how we perceive the world around us to the actual real data behind it, comparing the two perceptions and letting them exists together for a moment.
Looking Outwards – 03
I’ll be reviewing a series of kaleidoscope, high-speed camera photos by photographer Linden Glenhill. The series of photos capture water droplets reflecting against an LED Ring light, as they react to the vibration of faraday waves. What I know about the project is that the droplets create complicated oscillating patterns at half the frequency of the oscillating faraday wave, and that the higher the frequency, the more complicated the pattern, this makes sense as the droplets can be seen as a visual representation of the frequency. I really enjoys these kinds of projects as they create literal visualizers for audio, a more abstract sense for humans to comprehend opposed to visuals.
Looking Outwards – 02
The series of pieces I’m writing about is Mitchell Whitelaw’s ‘Limits to Growth’, a series of visual patterns made with a generative AI demonstrating a growth’s ability to limit itself through creating patterns that create a final piece that visually looks ‘whole’. While I know very little on how the artwork was made, I can hypothesize that a draw function creates a mass of lines that curve in certain patterns, with a constraint that if a line is too close to intercepting another line, the line will stop expanding. I enjoy how artistically, it doesn’t have to be known that AI generated this artwork, it could be a print that simply looks visually appealing, and mysteriously calculated.
Looking Outwards – 01
The piece of artwork I’ll be evaluating is an audio-reative visualizer called “Red and Blue” from Max MSP Youtuber, AmazingMaxStuff. It’s a device you can import into an audio project, in my case music, and edit parameters to make visuals that react to the audio project. I’m not sure how long it took to create, though looking into the projects code, it must have taken at least a few days of work (after years of learning Max MSP). Prior works the creator could be inspired by include visuals for sound waves, as the the project itself is very representative of how many audio devices depict sound in motion. ‘Red and Blue’ opens a lot of possibilities for Max MSP audio-reative visualizers, as it’s a complex, but easily understandable device that allows for plenty of customization for music artists to create visuals to all their audio’s work. The device itself requires a purchase, but here is a link to the Youtube video showcasing the device.
Project 3 – Dynamic Drawing
For this dynamic drawing, drag your mouse across the screen. The more left you drag the mouse, the color diagrams will expand inwards. Dragging your mouse downwards will expand the circles vertically, creating an overlap of both colors and alpha values. This will mean when you drag your mouse to the bottom right corner, there will be a large pink-white shape taking up most of the screen.
csavitzv_03
//Cole Savitz-Vogel
//csavitzv
//Section A
function setup() {
createCanvas(600, 600);
pixelDensity(2);
rectMode(RADIUS);
var morph = (dist(mouseX, mouseX, width / 2, 0))
var span = (dist(mouseY, mouseY, height / 2, 0))
}
function draw() {
background(0);
strokeWeight(3);
stroke(255, 255, 255, 25);
strokeJoin(ROUND);
noSmooth();
if (mouseIsPressed){
push();
blendMode(ADD);
fill(150, 20, 110, 50);
ellipse(300 + (morph, span, 100, 300), 75, (5 * mouseX), mouseY);
ellipse(300 - (morph, span, 100, 300), 100, (5 * mouseX), mouseY);
fill(150, 20, 30, 50);
ellipse(300 + (morph, span, 150, 300), 125, (5 * mouseX), mouseY);
ellipse(300 - (morph, span, 150, 300), 150, (5 * mouseX), mouseY);
fill(100, 50, 10, 50);
ellipse(300 + (morph, span, 200, 300), 175, (5 * mouseX), mouseY);
ellipse(300 - (morph, span, 200, 300), 200, (5 * mouseX), mouseY);
fill(100, 100, 0, 50);
ellipse(300 + (morph, span, 250, 300), 225, (5 * mouseX), mouseY);
ellipse(300 - (morph, span, 250, 300), 250, (5 * mouseX), mouseY);
fill(50, 150, 50, 50);
ellipse(300 + (morph, span, 300, 300), 275, (5 * mouseX), mouseY);
ellipse(300 - (morph, span, 300, 300), 300, (5 * mouseX), mouseY);
fill(20, 100, 150, 50);
ellipse(300 + (morph, span, 250, 300), 325, (5 * mouseX), mouseY);
ellipse(300 - (morph, span, 250, 300), 350, (5 * mouseX), mouseY);
fill(70, 50, 150, 50);
ellipse(300 + (morph, span, 200, 300), 375, (5 * mouseX), mouseY);
ellipse(300 - (morph, span, 200, 300), 400, (5 * mouseX), mouseY);
fill(110, 20, 150, 50);
ellipse(300 + (morph, span, 150, 300), 425, (5 * mouseX), mouseY);
ellipse(300 - (morph, span, 150, 300), 450, (5 * mouseX), mouseY);
fill(150, 20, 110, 50);
ellipse(300 + (morph, span, 100, 300), 475, (5 * mouseX), mouseY);
ellipse(300 - (morph, span, 100, 300), 500, (5 * mouseX), mouseY);
pop();
}
}Project 2 – Portrait Variables
For my project, I chose to make very cartoonish but expression filled “blumans”. These little characters are portraits that change face shape, expression, and proportions based on the code below.
csavitzv_02
//Cole Savitz-Vogel
//Section A
//Variability includes, Face Hight and Width, Eye Size, Eye Seperation, Eyebrow Position, Pupil Proportions, Mouth Size, Mouth Position, Smile Ratio, Skin Tone
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 100;
var eyeWidth = .25
var mouthSize = 50;
var mouthDrop = 0;
var smile = 5;
var inBrow = 0;
var outBrow = 0;
var skinR = 200;
var skinG = 200;
var skinB = 250;
function setup() {
createCanvas(640, 480);
}
function draw() {
background(255);
fill(skinR,skinG,skinB)
strokeWeight(0);
ellipse(width / 2, height / 2, faceWidth, faceHeight);
fill(0);
var mouth = width / 2 + faceWidth;
arc(width / 2, (height / 2)+mouthDrop, mouthSize, mouthSize, 0, PI, OPEN);
fill(skinR,skinG,skinB)
arc(width / 2, (height / 2) + mouthDrop - 1, mouthSize - 1, mouthSize - smile, 0, PI, OPEN);
var eyeLX = width / 2 - faceWidth * eyeWidth;
var eyeRX = width / 2 + faceWidth * eyeWidth;
fill(250);
ellipse(eyeLX, height / 2, eyeSize + 4);
ellipse(eyeRX, height / 2, eyeSize + 4);
fill(0);
ellipse(eyeLX, height / 2, eyeSize - 2);
ellipse(eyeRX, height / 2, eyeSize - 2);
strokeWeight(10);
line(eyeLX - inBrow, (height / 2) - 20, eyeLX + 20,(height / 2)- outBrow);
line(eyeRX + inBrow, (height / 2) - 20, eyeRX - 20,(height / 2)- outBrow);
}
function mousePressed() {
faceWidth = random(100, 150);
faceHeight = random(100, 160);
eyeSize = random(10, 30);
eyeWidth = random(.2,.6);
mouthSize = random(30,70);
mouthDrop = random(0,40);
smile = random(.1,50);
inBrow = random(10,25);
outBrow = random(10,25);
skinR = random(100, 200);
skinG = random(100, 200);
skinB = random(200, 250);
}Project 1 – Portrait Project
For this project, I used different shapes to make a self-portrait.
csavitzv – 1
function setup() {
}
function setup() {
createCanvas(300, 300);
background(253);
}
//Background
function draw() {
background(206, 193, 232);
strokeWeight(0)
fill(153, 134, 191,150);
circle(50,150,200);
fill(182, 139, 214,150);
circle(150,190,200);
fill(163, 116, 158,100);
circle(220,90,200);
fill(224, 112, 212,90);
circle(60,20,200);
fill(224, 112, 212,90);
circle(300,220,200);
fill(153, 134, 191,50);
circle(100,250,200);
//Face Outline
fill(242, 196, 177);
stroke(103,74,43);
strokeWeight(4);
beginShape();
vertex(95, 95);
vertex(77, 140);
vertex(80, 146);
vertex(77, 158);
vertex(95, 246);
vertex(120, 270);
vertex(155, 265);
vertex(185, 225);
vertex(197, 168);
vertex(195, 148);
vertex(175, 92);
endShape(CLOSE);
//Nose
stroke(103,74,43);
strokeWeight(4);
line(130, 160, 115, 155);
line(123, 200, 130, 160);
line(123, 200, 131, 202);
//Mouth
bezier(150, 232, 145, 235, 125, 225, 108, 234);
//Eye Sockets
stroke(255,255,255);
fill(255,255,255);
arc(107, 170, 20, 13, 0, PI + QUARTER_PI, CHORD);
fill(255,255,255);
arc(151, 164, 24, 25, 0, HALF_PI + QUARTER_PI, CHORD);
//Iris
stroke(185,143,61);
fill(185,143,61);
arc(110, 169, 8, 8, 0, PI + QUARTER_PI, CHORD);
stroke(185,143,61);
fill(185,143,61);
arc(151, 166, 9, 13, 0, HALF_PI + QUARTER_PI, CHORD);
//Eyebrows
noFill();
stroke(90,48,11);
strokeWeight(8);
curve(140, 126, 180, 136, 145, 155, 193, 121);
stroke(90,48,11);
curve(110, 136, 115, 156, 80, 140, 120, 150);
//Hair
strokeWeight(5);
fill(105, 88, 44);
stroke(79, 54, 36);
quad(195,176,185,155,162,123,190,128)
beginShape();
vertex(182,106);
vertex(190,108);
vertex(192,110);
vertex(193,112);
vertex(196,118);
vertex(197,123);
vertex(198,130);
vertex(199,135);
vertex(200,136);
vertex(201,138);
vertex(202,140);
vertex(201,140);
vertex(199,139);
vertex(190,138);
endShape();
triangle(164,101,178,119,180,75)
beginShape();
vertex(150, 113);
vertex(159, 114);
vertex(170, 108);
vertex(165, 98);
vertex(163, 94);
vertex(160, 90);
vertex(150, 85);
vertex(145, 80);
vertex(135, 76);
vertex(125, 74);
vertex(115, 70);
vertex(110, 65);
vertex(111, 70);
vertex(115, 76);
vertex(120, 84);
endShape();
beginShape();
vertex(74, 78);
quadraticVertex(180, 90, 160, 110);
quadraticVertex(180, 110, 160, 130);
endShape();
line(75,79,90,90)
beginShape();
vertex(100, 90);
quadraticVertex(180, 100, 120, 130);
quadraticVertex(20, 180, 80, 180);
vertex(80, 180);
vertex(100, 90);
quadraticVertex(10, 100, 50, 130);
quadraticVertex(20, 180, 80, 180);
vertex(80, 180);
endShape();
arc(188, 115, 45, 20, 20, PI + QUARTER_PI);
arc(165, 115, 45, 10, 160, 300, HALF_PI + QUARTER_PI);
stroke(105, 88, 44);
strokeWeight(7);
line(99,95,88,141)
}