I decided to write a post about Lorna Barnshaw, a 3D designer from London, United Kingdom. She earned her degree for Bachelor of Fine Arts at Winchester School of Art, and also studied at the University of Northampton. She creates virtual, glitch sculptures, which I thought was interesting because a lot of her works generate different looks depending on the perspective that the viewers are looking at which could be skewed at some point but still makes sense. She creates these mask-like sculptures, with characteristics unique to the different programs that she uses. Some of her studies look very realistic, and some are highly abstracted, geometric reinterpretation of the human face. They are very experimental, often uncanny, but I think that’s the thing that is enticing about her work and differentiates them from everything else.
This week, I chose to do my Looking Outwards of Chloe Varelidi. Her portfolio can be found here.
Chloe Varelidi is a game designer that focuses on building playful products to encourage children to “be creative, kind, and curious about the world behind them” (quote from Chloe’s portfolio). She received her Masters in Fine Arts at Parsons’ Design and Technology Program and has since worked at Quest to Learn, Institute of Play, Mozilla, and now littleBits.
I specifically admire her projects for littleBits, codekit and a minicade. that I find particularly interesting. At littleBits, she works as a senior product design strategist. The codeKit is a small introduction kit of magnets and electrical items that create an interactive activity that teaches coding. The minicade is an open source mobile web application that encourages children to make short (40 line) games with their friends. This project aims to also teach coding but in an interactive and “silly” way.
Caption: Chloe says in the future, she hopes that the minicade can become a pop-up structure at any city corner, like the one in the picture above.
//Allison Mui
//15-104 Section A
//amui1@andrew.cmu.edu
//Project-10
//
//variables for image
var starImg = "https://i.imgur.com/0ns3TvE.png";
var monsterImg = "https://i.imgur.com/hqvDkxx.png";
var star;
var monster;
//variables for star positions
var sx = [];
var sy = [];
//variables for objects
var met = [];
var monst = [];
//variable for points
var counter = 0;
//loads images
function preload() {
star = loadImage(starImg);
monster = loadImage(monsterImg);
}
function setup(){
createCanvas(480,380);
//intializes meteor by calling make meteor. stores them in meteor array
for (num = 0; num < 4; num++) {
var ogX = random(width/2+width/4,width);
met[num] = makeMet(ogX);
}
//intializes monster by calling make monster
monst[0] = makeMonster();
//creates random x and y locations for star
for (s = 0; s < 15; s++) {
sx.push(random(width));
sy.push(random(height));
}
//loads star picture
star.loadPixels();
}
function draw(){
background(6,13,29);
//shows picture of star in random x and y locations
for (st = 0; st < 15; st++) {
image(star,sx[st],sy[st]);
}
//displays meteor
showMet();
//constrains so space ship won't go off of screen
var y = constrain(mouseY,45/2,height-38/2);
var x = 80;
//space ship
fill(106,139,189);
arc(x,y,45,45, PI, 0);
fill(253,194,74);
ellipse(x,y+6,50,25);
ellipse(x,y+4,80,15);
fill(68,110,172);
ellipse(x,y,80,15);
//displays monster
showMonster();
//keep tracks of points
fill(255);
text("Points:" + counter, 15, 20);
text("Avoid the meteors!", width/2-50, 20);
}
function showMet() {
//displays and moves all meteors in meteor array
for (var i = 0; i < met.length; i++) {
met[i].move();
met[i].draw();
}
}
function showMonster() {
//displays and moves monster
monst[0].move();
monst[0].draw();
}
function drawMet() {
//overall meteor
var metSize = this.metSize;
fill(146,164,174);
noStroke();
//meteor body
ellipse(this.x,this.y,metSize,metSize);
fill(75,99,107);
//meteor blimps
ellipse(this.x - 16, this.y, metSize/8,metSize/8);
ellipse(this.x, this.y+17, metSize/8,metSize/8);
ellipse(this.x + 8, this.y - 10, metSize/4, metSize/4);
ellipse(this.x + 10, this.y + 10, metSize/10, metSize/10);
//flames behind
fill(247,223,61);
rect(this.x+metSize/2+5, this.y-18,this.metSize+10,5,5);
fill(243,161,28);
rect(this.x+metSize/2+5,this.y-10,this.metSize+10-10,5,5);
fill(247,223,61);
rect(this.x+metSize/2+5, this.y-2, this.metSize+10-20,5,5);
fill(243,161,28);
rect(this.x+metSize/2+5,this.y+5,this.metSize+10,5,5);
}
function moveMet() {
//moves meteor by speed
this.x += this.speed;
//moves meteor by meteor object speed
if (this.x < -this.metSize/2-(this.metSize+10)) {
//if meteor slips of successfully, increase point
counter += 1;
this.x = width+this.metSize/2;
this.y = random(30,height-25);
}
}
function makeMet(ogX) {
//based off of provided code
//creates meteor object
meteor = {x: ogX,
y: random(30,height-25),
speed: random(-4,-1),
move: moveMet,
metSize: int(random(40,80)),
draw: drawMet}
return meteor;
}
function drawMonster() {
//displays monster picture
image(monster,monty.x,monty.y);
monster.loadPixels();
}
function moveMonster() {
//moves monster by monster object speed
monty.x += monty.speed;
//if off screen, re start monster
if (monty.x < -monty.x-200) {
monty.x = width+1500;
monty.y = random(30,height-100);
}
}
function makeMonster() {
//makes monster object
monty = {x: width,
y: random(30,height-100),
speed: random(-2,-0.5),
move: moveMonster,
draw: drawMonster}
return monty;
}
I enjoyed this project more than the past projects. It had a lot of room for creativity. I first started off by sketching my idea and then went off to coding. For future improvements for this, with more time, I would find a way to incorporate shooting something when the mouse is clicked and if the shot x position reached the meteor or monster, then the monster would disappear. I would also try to find a way to decrease the points if the mouseY was in the same position as a meteor. All in all, I enjoyed this project and am happy with my final result.
Caption: Above is my first sketch of what I wanted the canvas to look like.
Caption: Above is my ugly monster. I drew it Illustrator and then loaded it onto imgur.
For this weeks post, I decided to look at Allison Burtch’s project, Mic Jammer. In collaboration with Eric Rosenthal, Burtch created a small device that can mute people’s microphones. It works by emitting a high ultrasonic noise that is inaudible to human ears but can be heard by microphones.
Mic Jammer
I found this project interesting because of how relevant it is. Burtch describes the purpose of Mic Jammer as being like taping over your webcam, but for audio and microphones. Personally, I find that there is a growing fear of being watched through my webcam, but I never considered the possibility of being listened to through the microphone and this brings up that second possibility.
The product itself is in the beginning stages of being designed and Burtch as well comments on the fact that the next step is to collaborate with a product designer to re-engineer and design the product. I find it really interesting how the product was also designed around the iphone, specifically the iphone 4/5 and later iphone 6 when it came out. It considers the placement of the microphones (on the bottom for iphone 4/5 and two on top and two on bottom for iphone 6), trying to find best way to hit and aim for the microphones.
//Yoon Young Kim
//Section E
//yoonyouk@andrew.cmu.edu
//Project10
// Simple demonstration of the noise() function.
// Change these for different effects:
var terrainSpeed = 0.0005;
var terrainDetail = 0.003;
var cacti = [];
function setup() {
createCanvas(480, 300);
background(255);
for(var i = 0; i <5; i++){
var rx = random(width);
cacti[i] = makeCacti(rx);
}
frameRate(10);
}
function draw() {
background(255, 192, 141);
stroke(255, 231, 101, 80);
strokeWeight(20);
fill(250, 212, 87);
ellipse(width/2, height/2 - 30, 200, 200);
fill(196, 100, 76);
noStroke();
beginShape();
for (var x1 = 0; x1 < width; x1++) {
var t1 = (x1 * terrainDetail/2) + (millis() * terrainSpeed/3);
var y1 = map(noise(t1), 0,1, 75, height/2+100);
vertex(x1, y1);
}
vertex(x1, height);
vertex(0, height);
vertex(0, y1);
endShape();
fill(102, 36, 39);
noStroke();
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail*1.5) + (millis() * terrainSpeed*1.5);
var y = map(noise(t), 0,1, 170, 3*height/4);
vertex(x, y);
}
vertex(x, height);
vertex(0, height);
vertex(0, y);
endShape();
fill(25, 7, 5);
noStroke();
beginShape();
for (var x2 = 0; x2 < width; x2++) {
var t2 = (x2 * terrainDetail*2) + (millis() * terrainSpeed*3);
var y2 = map(noise(t2), 0,1, height/2 + 50, height);
vertex(x2, y2);
}
vertex(x2, height);
vertex(0, height);
vertex(0, y2);
endShape();
updateAndDisplayCacti();
addCacti();
}
function updateAndDisplayCacti(){
// Update the building's positions, and display them.
for (var i = 0; i < cacti.length; i++){
cacti[i].move();
cacti[i].display();
}
}
function addCacti() {
// With a very tiny probability, add a new building to the end.
var newCactiLikelihood = 0.007;
if (random(0,1) < newCactiLikelihood) {
cacti.push(makeCacti(width));
}
}
// method to update position of building every frame
function cactiMove() {
this.x += this.speed;
}
// draw the building and some windows
function cactiDisplay() {
fill(25, 7, 5);
push();
translate(0, 120);
rect(width/2+this.x, height/2 -60, 20, 70, 200, 200, 0 ,0);
rect(width/2+15+ this.x, height/2 - 20, 20, 10);
rect(width/2+25+ this.x, height/2-30, 10, 20, 200, 200, 0, 0);
rect(width/2 - 15+ this.x, height/2 - 35, 15, 10);
rect(width/2-15+ this.x, height/2-50, 10, 20, 200, 200, 0, 0);
pop();
}
function makeCacti(birthLocationX, birthLocationY) {
var plant = {x: birthLocationX,
speed: -1.0,
r: random(0, 50),
move: cactiMove,
display: cactiDisplay,
}
return plant;
}
For this week’s landscape project, I decided to do a desert scene. I used the noise part in order to create different layers of the landscape essentially creating a foreground, midground, and a background. The front most layer, or the foreground, displays the most detailed landscape and with cacti silhouettes. I found it a bit challenging to create the randomly generated cacti that would move across the screen. I have yet to figure out how to actually place the cacti on top of the terrain.
For this week’s Looking Outwards based on female artists, I looked into Angela Washko. Her works are very unique – a lot of times she is pushing our boundaries of what we can truly call ‘art’. One of the project I found intriguing was her project: “The Council on Gender Sensitivity and Behavioral Awareness in World of Warcraft”. This was a project where Washko would go into the virtual world in World of Warcraft to tell the players about feminism and gender equality. Angela Washko presented this by showcasing her discussing the issue ingame and on a projector. Personally, I found the work interesting as internet is often used as a place where people show blatant sexism and offend others, but Washko used it to attempt to educated the players. Her project can be seen here.
var fish = [];
var oceanSpeed = 0.0005;
//ocean detail is low to make it look wavy instead of jagged
var oceanDetail = 0.001;
var floorSpeed=0.0004;
//floor detail is high to simulate rocky bottom
var floorDetail=0.02;
function setup() {
createCanvas(480, 240);
}
function draw() {
background(147,202,243);
//makes ocean
displayOcean();
//makes fish
updateAndDisplayFish();
//removes fish that aren't on screen
removeFishThatHaveSlippedOutOfView();
//adds new fish
addNewFishWithSomeRandomProbability();
//makes ocean floor
displayFloor();
}
function updateAndDisplayFish(){
// Update and display the fish
for (var i = 0; i < fish.length; i++){
fish[i].move();
fish[i].display();
}
}
function removeFishThatHaveSlippedOutOfView(){
//If fish aren't on screen, remove them from the array
//I based this on the provided code
var fishToKeep = [];
for (var i = 0; i < fish.length; i++){
if (fish[i].x + fish[i].breadth > 0) {
fishToKeep.push(fish[i]);
}
}
fish = fishToKeep;
}
function addNewFishWithSomeRandomProbability() {
//with a low probability, add new fish to array
var newFishLikelihood = 0.009;
if (random(0,1) < newFishLikelihood) {
fish.push(makeFish(width));
}
}
//change position of fish every frame to make them look like they're moving
function fishMove() {
this.x += this.speed;
}
// draw the fish
function fishDisplay() {
//randomize the color of the fish
//I kept blue at zero so the fish wouldn't blend into water
fill(this.fRed, this.fGreen, 0);
noStroke()
push();
//translate so 0 means the moving x
translate(this.x, height);
//makes body of fish
ellipse(0, -this.fPosition, this.fLength, this.fHeight)
//makes tail of fish
triangle(this.fLength/2-8, -this.fPosition, this.fLength, -this.fPosition+this.fHeight/2,
this.fLength, -this.fPosition-this.fHeight/2)
//makes eye of fish
fill(0);
ellipse(-6,-this.fPosition,6)
pop();
}
//makes the object of a fish
function makeFish(birthLocationX) {
var fsh = {x: birthLocationX,
breadth: 50,
//randomizes speed
speed: random(-2.5, -1),
//randomizes position in water
fPosition: round(random(50,150)),
//randomizes length
fLength: round (random(20,50)),
//randomizes height
fHeight: round (random(10,20)),
//randomizes color
fRed: random(0,255),
fGreen: random(0,255),
move: fishMove,
display: fishDisplay}
return fsh;
}
function displayOcean(){
noFill();
stroke(55,122,172)
beginShape();
//generates the ocean using the noise function
for (var x = 0; x < width; x++) {
var t = (x * oceanDetail) + (millis() * oceanSpeed);
var y = map(noise(t), 0,1, 0, 60);
vertex(x, y);
rect (x, y, 1, height)
}
endShape();
}
function displayFloor(){
noFill();
stroke(104,81,47)
beginShape();
//generates the ocean floor using the noise function
for (var x = 0; x < width; x++){
var z = (x * floorDetail) + (millis() * floorSpeed);
var v= map(noise(z), 0, 1, 200, height)
rect(x, v, 1, 50)
}
endShape();
}
For this project, I knew I wanted to randomize the speed at which the objects crossed the screen. For this to make sense, the object needed to be something that was moving on its own. I thought about a couple of options, including cars, bees, clouds, and hot air balloons. I ultimately decided on fish because I thought I could have fun making the water look like it was moving. You can see my original sketch below.
Although I based this project on the provided code, I tried my best to insert my original ideas. I made the water have a low detail to look like it was calm but still moving. I made the sea floor have a high detail so it looked jagged and rocky. I made the fish move at different speeds, ensured that they would be between the surface of the water and the sea floor, and randomized their colors to some degree. (I set the blue value equal to zero so they would never be blue and blend into the water.) It took some trial and error to figure out the right proportions of the fish tails and how to color in the water and ground, but I figured out both of those eventually. I had some trouble with making objects in the past, so although the code is simple I’m proud of it. However, I glanced through other projects and noticed a lot of other people decided to something with fish, so in retrospect I wish I could’ve been more original. Overall, though, still a fun project!
//Daphne Lee
var terrainSpeed = 0.0003;
var terrainCurves = 0.001;
var jx=280;
var jy=300;
var jw=107;
var jh=149;
var jx2=240;
var jy2=280;
var jw2=72;
var jh2=100;
var cx=0;
var cy=390
var cw=113;
var ch=75;
var kx=0;
var ky=350;
var kw=249;
var kh=250;
function preload(){
jellyfish1 = loadImage("https://i.imgur.com/7ELhX6R.png?1");
jellyfish2 = loadImage("https://i.imgur.com/Uhau0GX.png?1")
crab = loadImage("https://i.imgur.com/tPxrvjd.png?1")
kelp= loadImage("https://i.imgur.com/OZH9VCf.png?1")
}
function setup() {
createCanvas(480, 480);
}
function drawSeaAndFloor(){
beginShape();
noStroke(0);
//sea
beginShape();
fill(51, 204, 204);
for (var x = 0; x < width; x++) {
var t = (x * terrainCurves) + (millis() * terrainSpeed*2);
var y = map(noise(t/2), 0,1, 0, 400);
vertex(width, height);
vertex(0,height);
vertex(x, y);
}
endShape();
//floor
beginShape();
fill(204, 153, 102);
for (var x = 0; x < width; x++) {
var t = (x * 2* terrainCurves) + (millis() * terrainSpeed);
var y = map(noise(t), 0,1, 400, height);
vertex(width, height);
vertex(0,height);
vertex(x, y);
}
endShape();
}
function drawJellyfish(){
//the bigger jellyfish moving left
image(jellyfish1,jx,jy,jw,jh);
jx-=random(0.5,1);
jy-=random(-0.5,0.5);
if(jx<-jw){
jx=480;
}
image(jellyfish2,jx2,jy2,jw2,jh2);
//smaller jellyfish moving right;
jx2+=random(-0.5,2);
jy2+=random(-0.5,0.5);
if(jx2>width){
jx2=-100;
}
}
function drawCrab(){
//crab
image(crab,cx,cy,cw,ch);
cx+=random(0.1,2);
cy+=random(-0.5,0.5);
if(cx>width){
cx=-100;
}
}
function drawKelp(){
image(kelp,kx,ky,kw,kh);
kx+=random(0.5,2);
ky+=random(-0.5,0.5);
if(kx>width){
kx=-250;
}
}
function draw(){
background(179, 236, 255);
drawSeaAndFloor();
drawJellyfish();
drawCrab();
drawKelp();
//sun
fill(255, 255, 0);
ellipse(20,20,150,150)
}
I started off with the idea of wanting to make an ocean with sea creatures swimming inside. I tried starting off with clouds but it didn’t really end up the way I wanted to. I decided to use photos to depict these sea creatures and the first picture I stumbled upon was a jellyfish. I started off with one, and then added another one. It was hard for me to figure out how to work with using objects so I ended up going a simpler route that felt more straightforward in my opinion. I tried to make the ocean more realistic looking so I added some kelp and a crab to add more details to it. I didn’t have enough time to try to incorporate some of the other ideas I had such as working with more objects and creating new functions to relate them to and getting a clearer understanding on how these objects move.
I was inspired by Van Gogh’s Starry Night painting. I thought it would be interesting to see what his painting would look like if it was animated, since he painted a sky with wind that was painted with the intention of motion. I made each aspect of the painting into different functions, so they would be easier to place when each part was complete. I utilized many for loops in order to achieve his brush stroke affect. All in all, I think my code provides insight into what the wind in his painting would look like if it could be animated.
![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
