Chloe Varelidi is an indie game designer/developer that designs and builds playful products that empowers humans to be creative, kind, and curious.
One of her projects was the Minicade, and this was a collaboration with Atul Varma for her artist residency at Eyebeam. The Minicade is a website and app where people can collaboratively build mini arcade games with multiple users. Each person can add a link to one or more games to a custom playlist and instantly play them as one massive game, that keeps track of score and increases the difficulty. Its very simple to use and users can either play the games already provided or remix the mini-game with their own code. While the Minicade is mostly used by kids to encourage them to learn the basics of programming, it is fun for everyone to use.
The use of mini-games itself reminds me of mini-games in popular apps like Dumb Ways to Die, and it adds a cool competitive aspect for kids to interact with each other by building games they did themselves.
The Minicade also has a creative external feature looking like an emoji come to lifeA user interacting with the Minicade
To learn more about this project, click the links below:
/* Chelsea Fan
Section 1B
chelseaf@andrew.cmu.edu
Project-11
*/
//important variables
var fish = [];
var star = [];
function setup() {
createCanvas(480, 480);
frameRate(20);
//initial collection of fish
for (i = 0; i < 30; i++) {
var fishx = random(width);
var fishy = random(300, height);
fish[i] = makeFish(fishx, fishy);
}
//initial collection of stars
for (i = 0; i < 10; i++) {
var starx = random(width);
var stary = random(0, 100);
star[i] = makeStar(starx, stary);
}
}
function draw() {
//black background
background(0);
//draw mountains, water, bed, fish, stars, and moon
drawMountains();
drawWater();
drawBed();
fishies();
stars();
drawMoon();
}
function drawBed() {
stroke(0); //black outline
fill(255, 254, 242); //bed color
rect((width/2)-30, (height/2)-10, 150, 40); //bed shape
fill(255); //pillow color
ellipse(width/2+105, height/2-14, 30, 10); //pillow shape
fill(255, 243, 222); //head color
ellipse(width/2+100, height/2-25, 20, 20); //head shape
noStroke(); //no outline for neck
ellipse(width/2+83, height/2-20, 20, 5); //neck shape
stroke(0); //black outline
fill(203, 202, 204); //blanket color
ellipse(width/2+30, height/2-10, 120, 40); //blanket shape
}
function drawWater() {
fill(66, 112, 128); //blue water color
rect(0, height/2, width, height); //fill bottom half of canvas
}
function drawFish() {
noStroke(); //no outline
fill(255, 160, 122); //orange fish color
push();
translate(this.x1, this.y1); //locate fish at x1, y1
ellipse(10, 10, 10, 5); //fish body
triangle(10, 10, 5, 5, 5, 15); //fish tail
pop();
}
function makeFish(xlocation, ylocation) {
var makeF = {x1: xlocation,
y1: ylocation,
fishx: random(0, width),
fishy: random(300, height),
speed: -3.0,
move: moveFish,
draw: drawFish}
return makeF;
}
function moveFish() {
this.x1 += this.speed; //speed of fish moving
if (this.x1<=-10) { //restart fish at width after it disappears on left
this.x1 += width;
}
}
function fishies() {
for(i=0; i<fish.length; i++) {
fish[i].move();
fish[i].draw();
}
}
function drawStar() {
noStroke();
fill(255, 251, 0); //yellow color
push();
translate(this.x2, this.y2); //draw stars at x2, y2
ellipse(10, 10, 5, 5); //star shape
pop();
}
function makeStar(xlocation, ylocation) {
var makeS = {x2: xlocation,
y2: ylocation,
starx: random(0, width),
stary: random(0, 100),
speed: -3.0,
move: moveStar,
draw: drawStar}
return makeS;
}
function moveStar() {
this.x2 += this.speed; //speed of stars moving
if (this.x2<=-10) { //restart stars on right if it leaves canvas
this.x2 += width;
}
}
function stars() {
for(i=0; i<star.length; i++) {
star[i].move();
star[i].draw();
}
}
function drawMoon(){
fill(255, 253, 184); //yellow moon color
ellipse(400, 50, 50, 50); //moon shape
}
function drawMountains(){
noStroke();
fill(43, 43, 36); //dark gray mountain color
beginShape();
for (i=0; i<width; i++) {
var mountainSpeed = .0007; //speed of mountains moving
var mountainDetail = 0.02; //smoothness of mountains
var t = (i * mountainDetail) + (millis() * mountainSpeed);
//mountain y coord
var y = map(noise(t), 0, 1.8, height/8, height);
//keep drawing mountain
vertex(i, y);
}
//height constriant of mountains
vertex(width, height);
//restart mountains at left side
vertex(0, height);
endShape();
}
This process took me a long time. I spent a while thinking about what I wanted to draw and I decided on a Parent Trap theme with a bed floating in the ocean. The stars, moon, mountains, and fish are meant to resemble an ocean view at night. I had some difficulty making my own object, but once I got the hang of it, it was pretty fun.
A rendition of the KitesFight designed by Eva Schindling
A project designed and implemented by a female artist is the KitesFight by Eva Schindling. Schindling focused heavily on the application of technology in the realm of media art. She received a MSc. in Art and Technology from Chalmers University in Sweden and a degree in Interaction and Media Design from FH Joanneum in Austria. Schindling’s range of artwork is very wide with architectural Trojan Horse and simple sound projects. Out of such an extensive array of projects, I selected the KitesFight as it seems very similar to the projects that we engage with during this course.
The project features many triangles that interact with one another depending on a number of rule sets. The algorithm changes varying by the volume of the sound inputted. Then, the triangles follow each other, repel each other, and attach with one another. As we have been working on projects where different shapes interact with one another and we also just did the Sonic Art Project, I believe that though further practice. Such complex projects can be feasible.
In 2018, Japanese sound artist Ryoji Ikeda created an audiovisual “Code-Verse”l that took computer graphics and translated them into electronic noises and drones, coining it as “code-verse.” Ikeda created this code-verse project after creating his own type of techno music that was formed from sonic textures from graphics. The code probably was composed of a series of sonic partnership with the direction and speed of the graphics from Code-Verse. I found this project very interesting because it was a balanced intersection of two forms of entertainment– visuals and audio. By conjoining the two mediums, Ikeda created a mesmerizing audiovisual that allowed viewers to feel as if they were placed in a new dimension. Ikeda sought to create a unique art form that escaped from the media-infested society we live in and a form that allowed viewers to feel as if they were interacting and in the actual art environment, and this was manifested in Code-Verse which allowed visitors to feel as if they were in a different dimension from the Big Data world that we live in.
Originally, I was going to do Goku’s Super Saiyan transformation from Dragon Ball Z, since that show involves a lot of yelling and loud sounds. However, I decided to do an image from the movie My Neighbor Totoro. The image I chose was the cover, with the character Satsuki standing at a bus stop in the rain next to Totoro. I was originally going to color their outlines, but decided to base the color scheme off the Studio Ghibli’s logo and use their blue color with white outlines. I was pretty accurate with recreating the cover, although mine was more simplistic since there are only two colors and the background is left out. The only other changes I made were to the sign, where instead of the actual sign from the cover I put a soot sprite, a little acorn sprout, and the mini white Totoro, all from the movie, and on the ground near the sign, where I added little sprouts. I used A LOT of the bezier() element to recreate the image.
My Sounds
The rain is a constant sound that isn’t variable in any way
If the user presses the center of the umbrella, the sound of rain hitting an umbrella appears.
If the user presses Totoro’s stomach, the sound of him growling/rumbling appears
If the user presses Totoro’s leaf, the sound of rain hitting a leaf appears
These are the areas where the user should press in order to trigger the sounds
The original image I used as a reference for my code
For this project, I wanted to create a landscape that responded to the position of your mouse both visually and through sound. When you click your mouse, depending on the mouse’s position, different sounds will play. The four sounds I chose were chirping birds to represent the daytime, insects to represent the night, wind blowing through grass for the field/desert, and water flowing for the river.
//Julia Nishizaki
//Section B
//jnishiza@andrew.cmu.edu
//Project 10
var night; //nighttime sounds
var daytime; //daytime sounds
var field; //sound of fields
var river; //river sounds
function preload() {
// loads four sounds
field = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/field.wav");
night = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/night.wav");
daytime = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/day.wav");
river = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/river.wav");
}
function setup() {
createCanvas(480, 480);
useSound();
}
function soundSetup() { // setup for audio generation
field.setVolume(0.1); //sets Volume for all four sounds at a quarter the volume
night.setVolume(0.1);
daytime.setVolume(0.1);
river.setVolume(0.1);
}
function draw() {
background(200);
noStroke();
colorMode(HSB, 100); //switches color mode to HSB, easier to manipulate with mouse
var constMouseX = constrain(mouseX, 0, width); //constrains X direction of mouse within canvas
var constMouseY = constrain(mouseY, 0, height); //constrains Y direction of mouse within canvas
//variables for the different colors
var skyColor = color(55, 55, map(constMouseX, 0, width, 25, 100)); //sky changes color w/ mouse position between light and dark blue
var mountainColor = color(25, 55, map(constMouseX, 0, width, 0, 85)); //mountains change color w/ mouse between light and dark green
var desertColor = color(map(constMouseY, 0, height, 10, 25), 67, 75); //field or desert changes color w/ mouse between brown and green
var riverColor = color(48, 70, map(constMouseY, height, 0, 50, 100)); //river changes color w/ mouse slightly from light to dark blue
//sky
createSky(skyColor);
//background mountains
createMountains(mountainColor);
//desert or field
createDesert(desertColor);
//river
createRiver(riverColor);
}
function mousePressed() {
if (mouseX < (width / 2)) {
night.play(0, 1, 2); //plays nighttime sounds
} else {
night.pause();
}
if (mouseX > (width / 2)) {
daytime.play(0, 1, 2); //plays daytime sounds
} else {
daytime.pause();
}
if (mouseY < (height / 2)) {
field.play(0, 1, 2); //plays field sounds
} else {
field.pause();
}
if (mouseY > (height / 2)) {
river.play(0, 1, 2); //plays river sounds
} else {
river.pause();
}
}
function createSky(fillColor) { //function creates the sky
fill(fillColor);
rect(0, 0, width, height);
}
function createMountains(fillColor) { //function creates background hills
var mountainY = height * 2 / 3;
fill(fillColor);
ellipse(width / 5, mountainY, width / 2, height / 2);
ellipse(width * 2 / 3, mountainY, width * 3 / 4, height * 4 / 5);
}
function createDesert(fillColor) { //function creates desert/field
var desertY = height * 5 / 8;
fill(fillColor);
rect(0, desertY, width, desertY);
}
function createRiver(fillColor) { //function creates river
var riverY = height * 7 / 8;
fill(fillColor);
var constRivMouseY = constrain(mouseY, height / 2, height); //river only starts to appear when the mouse is below the halfway mark
rect(0, map(constRivMouseY, height, height / 2, riverY, height), width, riverY);
}
//Crystal Xue
//15104-section B
//luyaox@andrew.cmu.edu
//project-10
//size of the vinyl
var size1 = 300;
//size of the label
var size2 = 100;
function preload(){
jazz1 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/475409__sandib__bass2.wav");
jazz2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/49658__sub-d__more-jazz-guitar.wav");
jazz3 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/233699__gulyas25__acid-jazz-loop-music-bed.wav");
jazz4 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/187099__simondsouza__alto-sax-90bpm-cm-4-solo.wav");
jazz4.setVolumn(0.1);
}
function setup() {
createCanvas(500, 500);
}
function draw() {
background(250);
drawRecord();
}
function drawRecord(){
fill(0);
ellipse(width/2, width/2, size1, size1);
for (var i = 0; i < 8; i++) {
noFill();
stroke(105);
strokeCap(SQUARE);
strokeWeight(0.4);
arc(width/2, width/2, i * 20 + 140, i * 20 + 140, PI, 0.8 * PI);
}
for (var i = 0; i < 8; i++) {
noFill();
stroke(255);
strokeCap(SQUARE);
strokeWeight(1);
arc(width/2, width/2, i * 20 + 140, i * 20 + 140, 0.8 * PI, PI);
}
for (var i = 0; i < 8; i++) {
noFill();
stroke(105);
strokeCap(SQUARE);
strokeWeight(0.4);
arc(width/2, width/2, i * 20 + 140, i * 20 + 140, PI, 1.8 * PI);
}
for (var i = 0; i < 8; i++) {
noFill();
stroke(255);
strokeCap(SQUARE);
strokeWeight(1);
arc(width/2, width/2, i * 20 + 140, i * 20 + 140, 1.8 * PI, 2 * PI);
}
fill(250,50);
arc(width/2, width/2, i * 20 + 140, i * 20 + 140, 0.8 * PI, PI);
fill(250,50);
arc(width/2, width/2, i * 20 + 140, i * 20 + 140, 1.8 * PI, 2 * PI)
//drawing red label
fill(255, 0, 0);
noStroke();
ellipse(width/2, width/2, size2, size2);
//drawing controls
var yc = constrain(mouseY,350, 470);
fill(100);
rect(410, 350, 10, 120);
fill(0);
rect(400, yc, 30, 15);
fill(100);
rect(450, 350, 10, 120);
fill(0);
rect(440, yc, 30, 15);
fill(100);
ellipse(430, 100, 60, 60);
fill(0);
ellipse(430, 100, 40, 40);
fill(100);
ellipse(450, 160, 45, 45);
fill(0);
ellipse(450, 160, 30, 30);
}
function mousePressed() {
//setting mousepresed location
if (dist(mouseX,mouseY, width / 2, height/ 2) <= size1 ) {
jazz1.play();
} else {
jazz1.pause();
}
if (dist(mouseX, mouseY, 430, 100) <= 60) {
jazz2.play();
} else {
jazz2.pause();
}
if (dist(mouseX, mouseY, 450, 160) <= 45) {
jazz3.play();
} else {
jazz3.pause();
}
}
function mouseMoved(){
if (mouseX <= 450 & mouseX >= 410 && mouseY <= 470 && mouseY >= 350) {
jazz4.play();
} else {
jazz4.pause();
}
}
It is inspired by jazz mixtapes. there are 3 different jazz tracks that can be started and paused by pressing the buttons and the record player. The fouth is controlled by the moving control which is more interesting to play with.
/*
Claire Lee
15-104 Section B
seoyounl@andrew.cmu.edu
Project-10
*/
// I'm using one of my grace days for this project!
var bearUrls = [
"https://i.imgur.com/BOQ7Bt9.jpg",
"https://i.imgur.com/uhBjJf4.jpg",
"https://i.imgur.com/UK6rJXn.jpg",
"https://i.imgur.com/UsOhg2L.jpg" ]
var bearBrown;
var bearPolar;
var bearBlack;
var bearPanda;
var bearBrownSound;
var bearPolarSound;
var bearBlackSound;
var bearPandaSound;
//setting the global variables
function preload() {
bearBrown = loadImage(bearUrls[0]);
bearPolar = loadImage(bearUrls[1]);
bearBlack = loadImage(bearUrls[2]);
bearPanda = loadImage(bearUrls[3]);
//loading the images
bearBrownSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bark.wav");
bearPolarSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/meow.wav");
bearBlackSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/hi.wav");
bearPandaSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/moo.wav");
//loading the sounds
}
function setup() {
createCanvas(480, 120);
useSound();
}
function soundSetup() { // setup for audio generation
bearBrownSound.setVolume(1);
bearPolarSound.setVolume(1);
bearBlackSound.setVolume(1);
bearPandaSound.setVolume(1);
}
function draw() {
image(bearBrown, 0, 0, width/4, height);
image(bearPolar, width/4, 0, width/4, height);
image(bearBlack, width/2, 0, width/4, height);
image(bearPanda, 3*width/4, 0, width/4, height);
//divides canvas into quarters and sets different image for each
}
function mousePressed() {
if (mouseX > 0 & mouseX < (width/4)) {
bearBrownSound.play();
} else {
bearBrownSound.pause();
}
// brown bear sound
if (mouseX > (width/4) & mouseX < (width/2)) {
bearPolarSound.play();
} else {
bearPolarSound.pause();
}
// polar bear sound
if (mouseX > (width/2) & mouseX < (3*width/4)) {
bearBlackSound.play();
} else {
bearBlackSound.pause();
}
// black bear sound
if (mouseX > (3*width/4) & mouseX < width) {
bearPandaSound.play();
} else {
bearPandaSound.pause();
}
//panda bear sound
}
I decided to do bears (with the addition of some unexpected sounds) because I wanted to make a group of cute characters with some unity. I had a lot of fun making the visuals for this project, and it was really interesting to learn how to manipulate sound files and work on a local server.
/* Rachel Shin
reshin@andrew.cmu.edu
15-104 Section B
Project 10
*/
// 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().)
var imageLinks = [
"https://i.imgur.com/VyMU3A0.png", //charmander
"https://i.imgur.com/qji2HbI.png", //pikachu
"https://i.imgur.com/dHUobNP.png", //squirtle
"https://i.imgur.com/bugsaaS.png", //bulbasaur
]
//image variables
var charmander;
var pikachu;
var squirtle;
var bulbasaur;
//sound variables;
var fire;
var thunder;
var water;
var grass;
function preload() {
//loading images
charmander = loadImage("https://i.imgur.com/VyMU3A0.png");
pikachu = loadImage("https://i.imgur.com/qji2HbI.png");
squirtle = loadImage("https://i.imgur.com/dHUobNP.png");
bulbasaur = loadImage("https://i.imgur.com/bugsaaS.png");
//loading sounds
fire = loadSound("fire-2.wav");
thunder = loadSound("thunder.wav");
water = loadSound("water-4.wav");
grass = loadSound("grass.wav");
// call loadImage() and loadSound() for all media files here
}
function setup() {
// you can change the next 2 lines:
createCanvas(480, 480);
usesound();
}
function soundSetup() { // setup for audio generation
fire.setVolume(3);
thunder.setVolume(1);
water.setVolume(1.5);
grass.setVolume(1.2);
}
function draw() {
background(196, 186, 118);;
// images of the four elements
image(charmander, 0, 0, width/2, height/2);
image(pikachu, width/2, 0, width/2, height/2);
image(squirtle, 0, height/2, width/2, height/2);
image(bulbasaur, width/2, height/2, width/2, height/2);
}
function mousePressed() {
if (mouseX >= 0 & mouseX < width/2 && mouseY >= 0 && mouseY < height/2) {
fire.play();
}
else {
fire.pause();
}
if (mouseX >= 0 & mouseX < width/2 && mouseY >= height/2 && mouseY < height) {
water.play();
}
else {
water.pause();
}
if (mouseX >= width/2 & mouseX < width && mouseY >= 0 && mouseY < height/2) {
thunder.play();
}
else {
thunder.pause();
}
if (mouseX >= width/2 & mouseX < width && mouseY >= height/2 && mouseY < height) {
grass.play();
}
else {
grass.pause();
}
}
After thinking of ways to incorporate 4 different sounds, I immediately thought of the 4 elements, and I decided to connect it to one of my childhood favorites- Pokemon. I decided to use the first four Pokemon that I loved and used their types and connected it to different sounds. I was inspired by the legendary Pokemon mural from the first season of Pokemon. It was fun to configure sound and visuals together especially when it came to designing my own version of the mural with 4 basic Pokemon that I loved as a kid.
![[OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
