Planetscape?
//tjchen
// project landscape
var stars=[]; // array for circles
var streaks=[]; // array for streaks
var speed = 3; // change for how zoom
// color initialization
var r;
var g;
var b;
// rate of change fo color
var dr;
var dg;
var db;
function setup() {
createCanvas(480, 480);
//initalize objects
for(i=0; i<=500; i++ ){
var s =makeStar();
var st=makeStreak();
stars.push(s);
streaks.push(st);
}
//background color setup
r = (random(255));
g = (random(255));
b = (random(255));
dr = (random(-5,5));
db = (random(-5,5));
dg = (random(-5,5));
}
function draw() {
background(r,g,b);
//set it up from the middle
translate(width/2,height/2);
//draw the stars and streaks
for(i=0; i<500; i++){
var s = stars[i];
s.drawstar();
s.updatestar()
var st = streaks[i];
st.drawstreak();
st.updatestreak();
}
// color update
if (r>255 || r<0){
dr= -dr;
}
if (g>255 || g<0){
dg= -dg;
}
if (b>255 || b<0){
db= -db;
}
r+=dr;
g+=dg;
b+=db;
}
//star construction
function makeStar(){
var star={
x:random(-width,width),
y:random(-height,height),
z:random(width), // constant ratio for zoom
c:color(random(255),random(255),random(255)),
drawstar: stardraw,
updatestar: starupdate,
}
return star;
}
function stardraw(){
noStroke();
fill(this.c);
// draw stars but mapped to z
var dx = map(this.x/this.z,0,1,0,width);
var dy = map(this.y/this.z,0,1,0,width);
// map it for sizze increase
var r = map(this.z,0,width,20,0);
ellipse(dx,dy,r);
}
function starupdate(){
this.z-=speed;
// reset
if (this.z<1){
this.z = width;
this.x = (random(-width,width));
this.y = (random(-height,height));
}
}
// streak construction
function makeStreak(){
var streak={
x:random(-width,width),
y:random(-height,height),
z:random(width),
c:color(random(255),random(255),random(255),50),
pz: this.z, // previous location of z
drawstreak: streakdraw,
updatestreak: streakupdate,
}
return streak;
}
function streakdraw(){
strokeWeight(5);
stroke(this.c);
var dx = map(this.x/this.z,0,1,0,width);
var dy = map(this.y/this.z,0,1,0,width);
var px = map(this.x/this.pz,0,1,0,width);
var py = map(this.y/this.pz,0,1,0,width);
//draw line
line(dx,dy,px,py);
}
function streakupdate(){
this.z-=speed;
// reset
if (this.z<1){
this.z = width;
this.x = (random(-width,width));
this.y = (random(-height,height));
this.pz = this.z;
}
}
Jenny Wu is a co-founder at the architectural design firm Oyler Wu collaborative and Her own jewelry design company Lace by Jenny Wu. The firm is a highly experimental architectural practice that engages architecture and design with a hyper critical lens that focuses on research and fabrication. Their work crosses a variety of scales, from furniture detailing to large scale institutional buildings. Jenny Wu a classically trained architect received her alma mater from Columbia University and then Harvard graduate school of design, is currently a faculty member at the Southern California Institute of Architecture. What’s interesting about her work is that there’s a strong sense of connection between the jewelry she designs to the architectural work the firm produces, that engages the power of digital fabrication in relations to formal studies that relate back to the human in a variety of scales from the intimate jewelry to the inhabitable space of a building.
This project is about the life of a Balloon.
It inflates, slightly deflates while floating up, quickly deflates and shoots around the canvas, inflates again, then finally popping.
// tjchen
// hand in 10 project
// life of a balloon
var vol = 0.75 // set global volume
function preload() {
// call loadImage() and loadSound() for all media files here
deflate = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/shortdeflate.wav");
inflate = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/inflate.wav");
bpop = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/pop.wav");
slowDeflate = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/longdeflate_2.wav");
}
function soundSetup() { // setup for audio generation
deflate.setVolume(vol);
inflate.setVolume(vol);
bpop.setVolume(vol);
slowDeflate.setVolume(vol);
}
// set up balloon movement
function balloonStep(){
this.dx = random(-20,20);
this.dy = random(-20,20);
//first inflate
if (this.age > 0 & this.age <= 200){
this.size += 1;
//slow deflate
} else if (this.age > 200 & this.age <= 400){
this.y -= 1;
this.size -= 0.3
// quick deflate and fly around
} else if (this.age > 400 & this.age <= 600){
this.x += this.dx;
this.y += this.dy;
if (this.x > width) { // bounce off right wall
this.x = width - (this.x - width);
this.dx = -this.dx;
} else if (this.x < 0) { // bounce off left wall
this.x = -this.x;
this.dx = -this.dx;
}
if (this.y > height) { // bounce off bottom
this.y = height - (this.y - height);
this.dy = -this.dy;
} else if (this.y < 0) { // bounce off top
this.y = -this.y;
this.dy = -this.dy;
}
this.size -= 0.4;
//inflate again
}else if (this.age > 600 & this.age <800){
this.size += 2;
if(this.size > width){
// balloon pops
rect(0,0,width,height);
}
// resets
} else if (this.age>800) {
this.age = 0;
this.size = 20;
this.x = width/2;
this.y = height/2;
}
this.age ++;
}
function balloonDraw(){
noStroke();
fill(255,0,0);
circle(this.x,this.y,this.size);
}
function makeballoon(px,py,pdx,pdy){
balloon = {x: px, y: py, dx: pdx, dy: pdy, size: 20, stepfunction: balloonStep, drawfunction: balloonDraw, age: 0}
return balloon;
}
function setup() {
createCanvas(400, 400);
useSound();
var b = makeballoon(width/2, height/2, random(-10,10), random(-10,10));
}
function draw() {
background(0);
balloon.stepfunction();
balloon.drawfunction();
// pop! text graphic
if (balloon.size > width){
push();
textSize(150);
textAlign(CENTER);
fill(0);
text('POP!',width/2,height/2+40);
pop();
}
var bo = false;
//check balloon age and toggle sound based on it's state
if (balloon.age >= 0 & balloon.age <= 1){
bo = true
if (bo == true){
inflate.play();
}
}
if (balloon.age >= 200 & balloon.age <= 201){
bo = true
if (bo == true){
slowDeflate.play();
}
}
if (balloon.age >= 400 & balloon.age <= 401){
bo = true
if (bo == true){
deflate.play();
}
}
if (balloon.age >= 600 & balloon.age <= 601){
bo = true
if (bo == true){
inflate.play();
}
}
if (balloon.age >= 750 & balloon.age <= 751){
bo = true
if (bo == true){
bpop.play();
}
}
}Pixelh8 is a well known musician and digital music researcher that really pioneered the digital music field early in the 2000’s developing a software calle dMusic tech for the nintendo gameboy and the Game Boy Advance as well as the Nintendo DS, which turned the gaming consoles in to real time synthesizers similar to the ones electronic musicians use now on live stages. What’s interesting about Chipwave is that it has evolved into a subgenre of electronic music with a group of passionate followers that delve deep into modding and making music out of early digital devices such as a Gameboy or NES. This type of music is characterized by their synthetic sounds we often associate with electronics. What’s important about their work is that it really gives us an opportunity to look into a piece of living computational history. A look into what it was like when computational music was just begining to become a thing.
Youtube user JustinThursday demo-ing Music Tech on the original GameBoy
]]>In catbug’s Looking outwards 6 post, catbug talks about Robbie Barrat’s Neural Network Balenciaga series. The series is comprised of a line of fasion items produced by and amalgamation of an AI’s interpretation of Balenciaga’s lookbook, runway shows, and published images. What is interesting about this is that it walks the fine line, like catbug says, “creativity and mimicry”. The AI’s interpretation at the same time not only allows us to analyze what makes the Balenciaga line Balenciaga, but also begins to examine the idea of a designer’s true need to design. If there is a commonality within all the design work done by this luxury fasion house, what’s the point of hiring new designers? Wouldn’t a computer algorithm be enough to generate the next season of their line? As long as the inputs for the current trend and the “Balenciaga DNA” is present, a continuity of their design legacy is sure to last.
The ephemorality of human led design is upon us.
The project uses transparency and the mouse IS Pressed function to achieve a variety of detail with the newly generated portrait. The new portrait can range from highly abstract to an almost monet like blurry vision.
Hold the mouse button to scramble the image.
Release the moue button to make the image clear
//tjchen
//hand in 9 project
var img;
var pts;// amount of divisions on the canvas
var steps;
function preload(){
//loads teh image
img= loadImage("https://i.imgur.com/68RyRgM.jpg");
}
function setup() {
background(255);
frameRate(10);
createCanvas(480, 270);
//center image on canvas
imageMode(CENTER);
noStroke();
img.loadPixels();
//generate random grid subdivision
pts = int(random(1,40));
print(pts); // for dbugging
}
function draw() {
//generate grid
for (let x = 0; x<width; x+=width/pts){
for(let y = 0; y<height; y+=height/pts){
//get color information from pixel
let c = img.get(x,y);
noStroke();
//create the subdivided pixelated image
fill(c[0],c[1],c[2],10);
square(x,y,width/pts);
}
}
//hold mouse to rescramble the image
//release to unblur
if(mouseIsPressed){
pts = int(random(1,40));
}
}
Dan Shiffman is a professor at the ITP (interactive telecommunications program) at the New York University’s Tisch school of art. He is known for his youtube channel Coding Train where his focus is trying to make coding and scripting more accecible to people. He is also known to have co-created an open source graphics library called Processing, which is based on the JAVA language but aims to teach non-programmers the fundamentals of the world of programming. To me what is most admirable of Shiffman is his approachability and down to earthness. Programmers and computer scientists are stereotypically seen as these whizzes that are unapproachable residing in the ivory towers of whatever institution they are part of. But with shiffman, his ideals and actions break that stereotype and brings code to the people. Not only are his youtube tutorials funny and engaging, he isn’t afraid of making mistakes on camera. This is evident in the intro video of his youtube channel where he has a supercut of him saying “whoops” during his live and regular tutorials.
TableTop Whale is an online blogger currently working in at the New York Times graphics department. Her work is specialized towards information design with a focus o science communication. Her PHD work was done in Biology and Data science. On her blog the tableTop whale, she posts a variety of data visualization graphics. I think what intrigues me the most is her explorations on the geology of various planets of the solar system. Mapping terrain and topography has been an interest of explorers for centuries even before the age of exploration. In the past cartographers used various analog techniques to map out the world as we know today. Now, with the avdvent of GIS data, we have the capability creating maps almost on demand with digital tools such as ARC GIS and a variety of other Geospatial data visualizer. What’s interesting about TableTop Whale’s work is that she uses USGS’s data sets for the planets, but renders them in a style that evokes maps of the age of sail. This is interesting because, the style evokes a sense of unknown and allows for out imagination to run wild about the possibilities of new uncharted territory. That’s also what’s so special about having large datasets to manipulate and visualize, it can allow for new information to emerge from things we already know about. Allowing us to dive even deeper into what we already know possibly defining the unknown.
]]>There are two hypotrochoids that are being drawn simultaneously in this program, as Mouse Y changes you can alter the pedals of the hypotrochoids., the lines redraw themselves every 3 loops around the circle so as you move Mouse Y around you begin to get an overlay of various patterns.
//tjchen
// section a
// 07 project composisiton with curves
var t = 0
var numPoints = 100;// global set up of num of points on circle
var lineX = [];
var lineY = [];
var lineX2 = [];
var lineY2= [];
function setup() {
createCanvas(480, 480);
background(0);
strokeWeight(1);
stroke(255);
noFill();
}
function draw() {
background(0);
translate(width/2,height/2)
stroke(255,0,0);
draw_hypotrochoid_1(t);
stroke(0,255,0);
draw_hypotrochoid_2(t);
t+=1;
}
function draw_hypotrochoid_1(t){
var a = 150; // radius of large circle
var b = 8; // radius of spinning circle
var h = mouseY/10; // location of fixed point
var xH= (a-b) * cos (radians(t)) + h * cos(((a-b)/b)*(radians(t)));
var yH = (a-b) * sin (radians(t)) - h * sin(((a-b)/b)*(radians(t)));
circle(xH,yH,10);;
lineX.push(xH);
lineY.push(yH);
if (radians(t)>4*PI){ // 4 trips around the circle before redrawing circle
lineX.shift();
lineY.shift();
}
strokeWeight(1);
for (i=0; i < lineX.length-1; i++){
line(lineX[i], lineY[i], lineX[i+1], lineY[i+1]);
}
}
function draw_hypotrochoid_2(t){
var a2 = 200; // radius of large circle
var b2 = 8; // radius of spinning circle
var h2 = mouseX/10; // location of fixed point
var xH2= (a2-b2) * cos (radians(t)) + h2 * cos(((a2-b2)/b2)*(radians(t)));
var yH2 = (a2-b2) * sin (radians(t)) - h2 * sin(((a2-b2)/b2)*(radians(t)));
circle(xH2,yH2,10);;
lineX2.push(xH2);
lineY2.push(yH2);
if (radians(t)>4*PI){ // 4 trips around the circle before redrawing circle
lineX2.shift();
lineY2.shift();
}
strokeWeight(1);
for (i=0; i < lineX2.length-1; i++){
line(lineX2[i], lineY2[i], lineX2[i+1], lineY2[i+1]);
}
}
curves in another composition
]]>In this project the aim was to create various patterns based on numerical operations on the values of time it self. The resulting clock behaves more like a timer, that resets every 20 seconds. There are in reality 6 different types of patterns that can be created based on manipulating the numeric value of seconds, but by overlaying two 10 second patterns, there begins to be a higher level of nuance to the resulting geometries.
//tjchen
//section a
//abstract clock
var angle = 0;
var r = 0; // distance from center
var framecount= 0;
function setup() {
createCanvas(480, 480);
background(0);
noStroke();
frameRate(60);
}
function draw() {
//map time to color
var minutecolor = map(minute(),0,59,0,255);
var secondcolor = map(second(),0,59,0,255);
//reset's stopwatch after 20 seconds
if(second()%20==0){
fill(0);
square(0,0,width);
}
//new pattern every 10 seconds
if (second()%10 === 0){
angle=0;
r = 0 ;
framecount = 0;
}
var cenX = (width/2);
var cenY = (height/2);
//draw circles
push();
translate(cenX,cenY);
x = r*cos(radians(angle));
y = r*sin(radians(angle));
fill(random(255),minutecolor,secondcolor);
circle(x,y,3);
r += 0.75;
// creates circle pattern
angle += map(second(),0,59,0,360);
pop();
framecount+=1
}