[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice
Professor Tom Cortina • Fall 2022 • Introduction to Computing for Creative Practice
![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2023/09/stop-banner.png)
Alexia Forsyth
The bear, Steve, is on a hunt for the last jar of honey. He first has to run through a forest where he has to dodge falling oranges. Then he has to duck falling bricks in an abandoned city. Next, Steve has to run from a giant bat in a cavern. Lastly, the bear finds the jar of honey!
Story: One beautiful morning Steve heard there’s birds singing outside, so he went out to check for the birds that hides in the tree. He didn’t notice there is a creeper on top of his house, and the creeper follows Steve to the tree. The Steve realized creeper is behind him, but it’s too late for him to stop creeper from exploding.
Reflection: Though I was asked to use 2-3 seconds sounds for this project, I mostly able to find 4-5 second sounds that I felt fits for my story. Somehow the Audacity also does not work for the sounds I selected, so I have to use these 4-5 seconds sounds files directly. I also don’t know how to find the images that directly blends into the canvas.
/* Jiayi Chen
jiayiche Section A */
// sketch.js template for sound and DOM
//
// This is the 15104 Version 1 template for sound and Dom.
// This template prompts the user to click on the web page
// when it is first loaded.
// The function useSound() must be called in setup() if you
// use sound functions.
// The function soundSetup() is called when it is safe
// to call sound functions, so put sound initialization there.
// (But loadSound() should still be called in preload().)
/*Story:
One beautiful morning Steve heard there's birds singing outside,
so he went out to check for the birds that hides in the tree.
He didn't notice there is a creeper on top of his house, and
the creeper follows Steve to the tree. The Steve realized creeper
is behind him, but it's too late for him to stop creeper from exploding.
Reflection:
Though I was asked to use 2-3 seconds sounds for this project, I
mostly able to find 4-5 second sounds that I felt fits for my story.
Somehow the Audacity also does not works for the sounds I selected,
so I have to use these 4-5 seconds sounds files directly.I also don't
know how to find the images that directly blends into the canvas.
*/
//Stevemovements
var steve=[]; //array for stevemovement
var idle;
var walk;
var run;
var swordright;
var damaged;
//creeper
var creeperMovement =[]; //array for creeper movement
var creeper;
var glowing;
var exploasion;
//house and bird for tree
var house;
var bird;
//sounds
var walkingsound;
var exploadsound;
var hurt;
var dooropen;
var morningbirds;
// track the time
var frame=0;
var steveX=200;
var CreeperX=300;
var CreeperY=0;
function preload() {
//images
house=loadImage("https://i.imgur.com/hAeVVrM.jpeg");
exploasion=loadImage('https://i.imgur.com/u0RA0C9.png');
glowing=loadImage('https://i.imgur.com/wpqSTpR.png');
creeper=loadImage('https://i.imgur.com/oXqwDBa.png');
damaged=loadImage('https://i.imgur.com/27nSdZi.png');
swordright=loadImage('https://i.imgur.com/UgtoVei.png');
run=loadImage('https://i.imgur.com/3JwarD4.png');
walk=loadImage('https://i.imgur.com/6adTjcs.png');
idle=loadImage('https://i.imgur.com/bIFUPG3.png');
bird=loadImage('https://i.imgur.com/Ttx4W2C.png');
//sounds
walkingsound = loadSound('http://localhost:8000/walkingsound.wav');
exploadsound = loadSound('http://localhost:8000/exploadsound.wav');
hurt = loadSound('http://localhost:8000/hurt.wav');
dooropen = loadSound('http://localhost:8000/dooropen.wav');
morningbirds = loadSound('http://localhost:8000/morningbirds.wav');
}
function setup() {
// you can change the next 2 lines:
createCanvas(500, 400);
//======== call the following to use sound =========
useSound();
frameRate(1);
steve[0]=idle;
steve[1]=walk;
steve[2]=run;
steve[3]=swordright;
steve[4]=damaged;
//attribute sounds
creeperMovement[0]=creeper;
creeperMovement[1]=glowing;
creeperMovement[2]=exploasion;
}
function soundSetup() { // setup for audio generation
// you can replace any of this with your own audio code:
morningbirds.setVolume(0.3);
dooropen.setVolume(0.3);
hurt.setVolume(0.3);
exploadsound.setVolume(0.3);
walkingsound.setVolume(0.3)
}
function draw() {
background('Cyan');
grassland();
tree(0,50);
frame += 1; //track of frames
//print("Seconds = " + frame);
//end the canvas
if(frame == 28){
noLoop();
}
//house
image(house, 250, 100, 200, 200);
steveMoving();
creeperMoving();
birdsmoving();
//start the audio
if(frame == 4){
morningbirds.play();//birds chats
}if(frame==9){
dooropen.play();//door opens
}if(frame==11){
walkingsound.play();//steve walks
}if(frame==20){
exploadsound.play();//creeper exploads
}if(frame==24){
hurt.play();//steve cries
}
}
//build background grassland
function grassland(){
push();
fill('lime');
noStroke();
rect(0,height/2,width,height/2);
pop();
}
//build a tree
function tree(x,y){
push();
fill('lime');
noStroke();
rect(x,y,100,100);
fill('brown')
rect(x+25,y+50,50,125);
pop();
}
function creeperMoving(){//movement of creeper depend on framecount
var a=0;
if (frame >= 0 & frame <=11){
image(creeperMovement[a],CreeperX,CreeperY,75,125);
}else if(frame > 11 & frame <13){
CreeperX-=100;
CreeperY+=25;
image(creeperMovement[a],CreeperX,CreeperY,75,125);
}else if(frame >= 13 & frame <=15){
CreeperX-=25;
CreeperY+=50;
image(creeperMovement[a],CreeperX,CreeperY,75,125);
}else if(frame >= 16 & frame <=20){
a=1;
CreeperX-=3;
CreeperY+=3;
image(creeperMovement[a],CreeperX,CreeperY,75,125);
}else if(frame > 20 & frame <=21){
a=1;
image(creeperMovement[a],CreeperX,CreeperY,75,125);
}else if(frame >= 22 & frame <26){
a=2;
b=50;
image(creeperMovement[a],CreeperX-b,CreeperY-b,75+b,125+b);//explosion
}
}
function steveMoving(){
var a=0;
if(frame==9 ){
image(steve[a],steveX,200,75,125);//movement of steve depend on framecount
}else if(frame>9 & frame<=11){
steveX -= 10;
a=1;
image(steve[a],steveX,200,75,125);
}else if(frame>11 & frame<16){
a = 2;
steveX -=25;
if(frame==13){
steveX -=25;
}else if(frame==15){
steveX -=50;
}
image(steve[a],steveX,200,75,125);
}else if((frame>=16 & frame<20)){
a = 0;
image(steve[a],steveX,200,75,125);
}else if(frame>=20 & frame <=22){
a = 3;
image(steve[a],steveX,200,75,125);
}else if(frame >=22 & frame<= 25){ //steve hurt by the explosion
a=4;
image(steve[a],steveX,200,75,125);
}else if(frame == 26){
a=4;
image(steve[a],steveX,200+50,75,125);
}else if(frame == 27){
a=4;
image(steve[a],steveX,200+100,75,125);
}
}
function birdsmoving(){
if(frame>=4 & frame <=11){//birds scared off by steve
image(bird,0,50,50,50);
}
}Sanic make “dash” noises every now and then
Eggman has “intro” and “escape” lines
Rings make sounds when grabbed by sanic
Knuckle makes sounds in the end
/*
* Andrew J Wang
* ajw2@andrew.cmu.edu
* Section A
*
* This Program is Sanic
*/
//rotation variables for limb movements for sanic and the coins
var rot = 0;
//controls whether the limbs are moving forwards or backwards
var forward = true;
//sanic locations
var x=0;
//eggman image
var egg;
//eggman Ylocation
var eggY = -150;
//uganda knuckle's Ylocation
var ugandaY = 450;
//Green Hill Zone notes (BACKGROUND MUSIC)
var pitch = [72,69,72,71,72,71,67, 0, 69,76,74,72,71,72,71,67, 0, 72,69,72,71,72,71,67, 0, 69,69,65,69,67,69,67,60, 0];
var duration = [3,9,3,9,3,9,12, 15, 3,3,9,3,9,3,9,12, 15, 3,9,3,9,3,9,12, 15, 3,3,9,3,9,3,9,12, 15];
//counter for durations
var counter = 0;
//which note on the pitch list to play
var note = 0;
//rings' existance
var coin = [true,true,true,true,true];
//sound variables
var eggmanIntro;
var ringSound;
var dawae;
var spinDash;
var eggmanDefeat
//https://courses.ideate.cmu.edu/15-104/f2022/wp-content/uploads/2022/11/name-eggman.wav
//https://courses.ideate.cmu.edu/15-104/f2022/wp-content/uploads/2022/11/Sonic_Ring_Sound_Effect.wav
//https://courses.ideate.cmu.edu/15-104/f2022/wp-content/uploads/2022/11/do-you-know-the-way.wav
//https://courses.ideate.cmu.edu/15-104/f2022/wp-content/uploads/2022/11/Spin.wav
//https://courses.ideate.cmu.edu/15-104/f2022/wp-content/uploads/2022/11/no.wav
//loading the images and sounds
function preload() {
egg = loadImage("https://i.imgur.com/Wy46mQF.png");
uganda = loadImage ("https://i.imgur.com/HRB5kdy.png");
eggmanIntro = loadSound("https://courses.ideate.cmu.edu/15-104/f2022/wp-content/uploads/2022/11/name-eggman.wav");
ringSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2022/wp-content/uploads/2022/11/Sonic_Ring_Sound_Effect.wav");
dawae = loadSound("https://courses.ideate.cmu.edu/15-104/f2022/wp-content/uploads/2022/11/do-you-know-the-way.wav");
spinDash = loadSound("https://courses.ideate.cmu.edu/15-104/f2022/wp-content/uploads/2022/11/Spin.wav");
eggmanDefeat = loadSound ('https://courses.ideate.cmu.edu/15-104/f2022/wp-content/uploads/2022/11/no.wav');
}
//setups Don't think I need to elaborate
function setup() {
createCanvas(600,300);
useSound();
frameRate(20);
}
function soundSetup() {
osc = new p5.Oscillator();
osc.amp(0.25);
eggmanIntro.setVolume(1.0);
ringSound.setVolume(0.5);
dawae.setVolume(0.5);
spinDash.setVolume(0.5);
eggmanDefeat.setVolume(1.0);
osc.setType('square');
osc.start();
}
function draw() {
background(255);
//rotation till 1 then change directions
if (rot>=1 || rot <=-1)
{
forward = !forward;
}
if (forward)
{
rot+=0.1;
}
else
{
rot-=0.1;
}
//move sanic by 1 per frame
x+=1;
//check whether sanic ran pass through those rings or not
for (var k=0; k<5; k++)
{
if (x>(100+k*100))
{
coin[k] = false;
}
}
//if sanic is on the ring play ring sound
if (x%100==0 & x<600 && x>0)
{
ringSound.play();
}
//sanic spins every now and then if he's on the screen
if (x%100==50 & x<=600 && x>=0)
{
spinDash.play();
}
//rings
ring(100,170,rot,coin[0]);
ring(200,170,rot,coin[1]);
ring(300,170,rot,coin[2]);
ring(400,170,rot,coin[3]);
ring(500,170,rot,coin[4]);
//eggman shows up
if (eggY<50)
{eggY+=2;}
//eggman "escapes"
if (x>300 & eggY<1000)
{
eggY = 50 + (x-300) * (x-300);
}
//eggman intro right before he stops
if (eggY==48)
{
eggmanIntro.play();
}
//eggman says no moment after he's defeated
if (eggY==54)
{
eggmanDefeat.play();
}
//eggman image
eggman(300,eggY);
//sanic
sanicLimbs(x,100,rot);
sanic(x,100);
//uganda knuckle shows up
if (x>700 & ugandaY > 200)
{
ugandaY -=2;
}
//"DO YOU KNOW DA WAE" before stoping
if (ugandaY==202)
{
dawae.play();
}
//kunckle
knuckle(300,ugandaY);
//if pitch is 0 stop playing
if (pitch[note] == 0)
{
osc.stop();
}
//if pitch before is 0 but this note isn't restart
else if (pitch[note-1] == 0 & pitch[note] != 0)
{
osc.start();
}
//play notes
osc.freq(midiToFreq(pitch[note]));
//duration counter ++
if (counter < duration[note] & note < pitch.length)
{
counter++
}
//if reach max duration change note and reset
else if (counter >= duration[note] && note < pitch.length)
{
counter = 0;
note++;
}
//if reach the end restart from the beginning to loop
else
{
note=0;
}
}
//drawing sanic
function sanic(xL,yL)
{
push();
translate(xL,yL);
noStroke();
stroke(0);
fill("blue");
curve(-10,100,-7,-10,-50,-30,-50,50);
curve(-10,100,-7,10,-50,10,-50,50);
curve(-10,100,-7,30,-65,20,-50,100);
curve(-10,100,-7,40,-50,30,-50,50);
curve(-10,100,-7,90,-75,70,-50,200);
strokeWeight(1);
ellipse(0,25,10,20);
ellipse(0,0,50,45);
ellipse(0,70,70,75);
fill(255,255,170);
ellipse(0,70,40,45);
ellipse(3,15,25,10);
fill(255);
ellipse(10,0,15,13);
ellipse(-8,0,15,10);
fill(0);
ellipse(12,0,3,3);
ellipse(-6,0,3,3);
ellipse(0,8,4,4);
stroke(5);
curve(-7,5,-7,15,16,15,16,5);
pop();
}
//drawing sanic's llimbs
function sanicLimbs (xL,yL,r)
{
push();
translate(xL,yL);
push();
translate(15,50);
rotate(r);
fill("blue");
beginShape();
vertex(0, 0);
bezierVertex(0,0,30,-50,60,0);
bezierVertex(60,0,30,-25,0,0);
endShape();
fill(255);
ellipse(60,0,20,20);
pop();
push();
translate(-15,60);
rotate(r);
fill("blue");
beginShape();
vertex(0, 0);
bezierVertex(0,0,-30,-55,-60,0);
bezierVertex(-60,0,-30,-15,0,0);
endShape();
fill(255);
ellipse(-60,0,30,25);
pop();
push();
translate(0,100);
rotate(r);
fill("blue");
beginShape();
vertex(0, 0);
bezierVertex(0,0,-60,0,-60,60);
bezierVertex(-60,60,-60,40,0,0);
endShape();
fill("red");
ellipse(-70,60,40,20);
pop();
push();
translate(20,100);
rotate(r);
fill("blue");
beginShape();
vertex(0, 0);
bezierVertex(0,0,0,40,60,60);
bezierVertex(60,60,0,80,0,0);
endShape();
fill("red");
ellipse(70,60,40,20);
pop();
pop();
}
//ring spins through scalling
function ring (xR,yR,sc,sh)
{
if (sh==true)
{
push();
translate(xR,yR);
scale(sc,1.0);
fill("gold");
ellipse(0,0,50,50);
fill(255);
ellipse(0,0,30,30);
pop();
}
}
function eggman (xE,yE)
{
image(egg,xE,yE,150,150);
}
function knuckle (xU, yU)
{
push();
imageMode(CENTER);
image(uganda,xU, yU, 250,250);
pop();
}One project I found when looking at all the amazing female computer artists was called “Another Moon” by Mimi Son. This was in development since 2015 as an outdoor art exhibition with lasers, code, solar panels, and other elements. It creates “a technically sublime second moon in the sky.” It was made using scanning mirror laser projectors, which were protected from weather during the day as it gained energy from the solar panels to be released through the laser into the sky again at night. I admire this work because it’s very energy efficient while also spectacularly beautiful to behold – I think the use of the lasers is innovative and breathtaking, and I appreciate the thought and care that went into it. The artist, Mimi Son, is the founder of the Seoul-based art studio called Kimchi and Chips, which this exhibition was also a part of. She has a special interest in geometry and Buddhist philosophy, which allows her to use space and time to form various perspectives. Her area of expertise is Conceptualization & Interaction Design, which she studied at the Landsdown Center of Middlesex University in London. She’s also been a teacher of Interactive Storytelling in Korea for six years.
Watch “Another Moon” here.
Read about “Another Moon” here.
I was inspired by the work of Mouna Andraos and Melissa Mongiat. I specifically was intrigued by the Musical Swings project. I like how it is interactive and different notes are played based on the swing. I have always loved swings and so I think it would be so fun to go to one of these swings. Not only are the swings fun but they create a lively atmosphere for the surrounding area.
Additionally, I really like how the swings create a musical composition when they are moving together. It is cool how, when people swing in sync, more complex melodies are triggered; so when people are swinging together, the music sounds nicer.
As mentioned before, there are two creators. Andraos recieved a Master’s degree from New York University’s Interactive Telecommunications Program (ITP) and a Bachelor degree from Concordia University. Mongiat has a Master’s degree in Creative Practice for Narrative Environments from Central Saint Martins College of Art and Design, London, UK.
Both women now work at Daily tous les jours where they make these interactive art pieces.
Here is the link to their work:
Mouna Andraos and Melissa Mongiat, 2011, Musical Swings.
Molmol Kuo is an artist and educator whose interests range from experimental film and AR to storytelling and collective memory. The Drink Up Fountain, created in partnership with creative agencies, is my favorite project she’s worked on. This is a public water fountain that spouts out entertaining prerecorded greetings and compliments when a water drinker sips from it (creating a circuit that is broken when the drinker pulls away). This goofy fountain brings so much joy to unsuspecting people in an otherwise fairly typical urban setting and creates collective memories shared by all that engage with the public fountain.
This appreciation of joy, discovery, and sharing is found across Molmol’s work. During lockdown, she created “The Care Package”, a recipe of sorts that gave people a daily photography project that she would compile, overlay, and gift as a single print. One of her neon works combines the physical neon rods with an animated projection that seems to react to the physical rods like cars piling up on a road.
I tried to use random quadrangles and words to construct a self portrait. And the words I use are the place I was born, grown up and the place i’m staying.
var img;
var words = ['Beijing', 'Kunming', 'Pittsburgh','Alice']
var number = 1;
//preload image
function preload() {
img = loadImage('https://i.imgur.com/QwF6omd.jpeg');
}
function setup() {
createCanvas(400, 480);
//resize image to fit canvas
img.resize(width, height);
frameRate(400);
imageMode(CENTER);
noStroke();
background(255);
img.loadPixels();
}
//draw image
function draw() {
if(number==1) {
drawWord();
} else {
drawPolygon();
}
}
function drawPolygon() {
var x = floor(random(img.width));
var y = floor(random(img.height));
//picking color
var pix = img.get(x, y);
fill(pix, 128);
//draw the random shape
beginShape();
vertex(x,y);
vertex(x-(random(4,7)), y+(random(10, 25)));
vertex(x-(random(4,7)), y+(random(25, 40)));
vertex(x,y+(random(40, 60)));
vertex(x+(random(4,7)), y+(random(25, 40)));
vertex(x+(random(4,7)), y+(random(10, 25)));
endShape();
}
function drawWord() {
var x = floor(random(img.width));
var y = floor(random(img.height));
var pix = img.get(x, y);
fill(pix, 128);
textSize(random(3,15))
//randomly pick words to draw
text(words[int(random(0,4))], x, y)
}
function mousePressed() {
//changing between two options
number++;
if(number > 2) {
number = 1
}
background(255)
}this sketch samples pixel colors and draws random quadrilaterals where the pixel was sampled from. mouseX controls the size of the shapes, while pressing the mouse will fill the shapes, rather than using the color as a stroke. press a key to erase the canvas.
below are some earlier variations in which I manually changed the size and fill/stroke boolean, and tested out density using a loop. (this version was not interactive).
// jaden luscher
// jluscher@andrew.cmu.edu
// section a
// project 09
// initially i had tried making a chuck close-style portrait with a pixel matrix,
// then i shifted to funky shapes instead. the ineraction was added at the end
// when i kept wanting to tweak the size and fill/stroke modes.
var jaden; // original image
var x1;
var y1;
var dx = 0; // noise step
var dy = 0;
var size; // bounds of shape
var yesFill = false;
function preload() {
jaden = loadImage("https://i.imgur.com/BRUtdb2.png") // original portrait
}
function setup() {
createCanvas(400, 400);
background(0);
frameRate(60);
jaden.loadPixels();
}
function draw() {
size = int(map(constrain(mouseX, 0, width), 0, width, 5, 50));
if (mouseIsPressed) { // toggle fill mode
yesFill = true;
} else { // reset to line drawing mode
yesFill = false;
}
if (keyIsPressed) { // erase drawing
background(0);
}
drawShape();
print(yesFill);
}
function drawShape() {
x1 = int(map(noise(dx), 0, 1, -150, width + 150));
y1 = int(map(noise(dy), 0, 1, -150, height + 150));
dx += random(0.1, 1.0);
dy += random(0.1, 1.0);
if (yesFill == true) {
noStroke();
fill(jaden.get(x1, y1)); // returns pixel from canvas
} else if (yesFill == false) {
strokeWeight(1);
stroke(jaden.get(x1, y1)); // returns pixel from canvas
noFill();
}
beginShape(QUADS); // generate random polygons
vertex(random(-1 * size, size) + x1, random(-1 * size, size) + y1);
vertex(random(-1 * size, size) + x1, random(-1 * size, size) + y1);
vertex(random(-1 * size, size) + x1, random(-1 * size, size) + y1);
vertex(random(-1 * size, size) + x1, random(-1 * size, size) + y1);
endShape();
}
The Image is based on how Octopus uses their camouflage:
So Basically I created a bunch of particles that ages and disappear eventually:
when those particles first appear they growth rapidly then they slowly shrink and fade away
Base Image:
/*
* Andrew J Wang
* ajw2@andrew.cmu.edu
* Section A
*
* This Program is Face
*/
//face image for preload the data
let faceImage;
//array of global particles
var particles = [];
//preload image
function preload(){
faceImage = loadImage("https://i.imgur.com/i3WmsKd.jpeg");
}
function particleStep() {
//age of the particles
this.age++;
//shrine slowly after 45 age
if (this.age % 2 == 0 & this.age >= 45)
{
this.sz = this.sz * 0.98;
}
//grow rapidly before 45 age
else if (this.age % 2 == 0 & this.age < 45)
{
this.sz = this.sz * 1.1;
}
}
function particleDraw() {
push();
//grab color based on the location on the image
var kolor = faceImage.get(this.x*2, 220+this.y*2);
fill(kolor);
noStroke();
rectMode(CENTER);
//create rectangle based on location size and color
rect(this.x, this.y, this.sz, this.sz);
pop();
}
//create color particles
function makeParticle(px, py, size) {
p = {x: px, y: py,
age: 0,
sz: size,
stepFunction: particleStep,
drawFunction: particleDraw
}
return p;
}
function setup() {
createCanvas(480,480);
frameRate(120);
}
function draw() {
background(220);
stroke(0);
//create 30 particles per fram just to fill the whole image with particles
for (var n=0; n<30; n++)
{
//create particles at random location on the canvas, origin size = 1
var p = makeParticle(random(480), random(480),1);
particles.push(p);
}
//new particles to refresh
newParticles = [];
for (var i = 0; i < particles.length; i++){ // for each particle
var k = particles[i];
//draw and refresh particles
k.stepFunction();
k.drawFunction();
if (k.age < 250) {
//if younger than 250 keep them if not they are gone
newParticles.push(k);
}
}
// particles refreshed by the new particles
particles = newParticles;
}
I really admire Camille Utterback’s project Text Rain not because of the complexity of the program itself, but when the project is produced. First, I need to introduce who Camille is. She is an American Interactive Installation artist who graduated from William College and gained her master’s degree from the Interactive Telecommunications Program at New York University’s Tisch School of the Arts. Why I prefer her Text Rain installation is because her work is groundbreaking or one of the first of such type (Interactive Installation). Her work might not look impressive at our time, since her program is basically about capturing the silhouette of pedestrians and making random letters float on them. However, because of this “simple” (compared to nowadays interactive projects) installation, which was created during 1999, more and more interactive public installations that we might see on streets were created, making Camille Utterback a pioneer of such computational forms of art.
Text Rain – by Camille Utterback and Romy Achituv:
