Evan 12/5 UI Update

Today I built the project UI, I did this primarily in Adobe Illustrator. I had a vision for what I assumed our interface would look like. I had wireframed a design concept already. However, it was good that we were all working together on this because our team had other (really better) ideas than me. We decided to design only the GUI window because that’s all we had control over. Below is what our UI will look like after we are done. This took many iterations, and we even made a logo for our project.

#GUI GLITCH TEAM, December 2018
#Danny Anderson, Molli Nava, Katie Dawe, Evan Gustafson

import gui
from gui import *

  
def setUp():
  window = Display("GUI Glitch Photo Editor", 375, 667)
  

def showAnswer(x, y):
  global guiWindow, screenState, filePath
  guiWindow.removeAll()
  if screenState == 1:
    guiWindow.add(Icon(filePath + 'GlitchLogoBG.png'), 0, 0) 

def setUpMediaPaths():
  global filePath
  showInformation("Choose the folder where your media files are")
  filePath = pickAFolder()
  
setUp()

This is my code I continued on, the GUI is taking a bit more time to get the correct background in place like the above UI.

Solutions – Molli Nava

Thanks to office hours and Mckenzie, our RGB glitch has been solved and the API-altered image makes more sense.

After spending quite a bit of time brainstorming with Mckenzie, we figured out a much simpler way to execute the separation of the RGB channels of an image. We separated out the different color channels of an image, blended the pixels like the example in the book, and offset the different colors by changing their x and y values.

This is the new code:

#RGB SHIFT GLITCH

#Picture
picture = makePicture(pickAFile())
width = picture.getWidth()
height = picture.getHeight()
redImg = []
blueImg = []
greenImg = []

#Description: This code take an image and shifts the RGB channels in different directions.
# Leave Red in place
# Shift Blue up/left
# Shift Green down/right
for x in range(width):
  redImg.append([])
  blueImg.append([])
  greenImg.append([])
  for y in range(height):
    redImg[x].append([])
    blueImg[x].append([])
    greenImg[x].append([])
    
for x in range(width):
  for y in range(height):
    pixel = getPixel(picture, x, y)
    
    redImg[x][y] = getRed(pixel)
    greenImg[x][y] = getGreen(pixel)
    blueImg[x][y] = getBlue(pixel)

for x in range(width):
  for y in range(height):
    rPixel = redImg[x][y]
    bPixel = blueImg[x-50][y-50]
    gPixel = greenImg[x - 100][y - 100]
    
    newR = rPixel
    newG = gPixel
    newB = bPixel
    color = makeColor(newR, newG, newB)
    setColor(getPixel(picture, x, y), color)
    
    
explore(picture)

Examples of images I’ve glitched:

Mckenzie also explained how to go about altering an image using current temperature data. This is just the beginning of that, pulling in our specific data and value we want to use:

import urllib
import simplejson as json

#API WEATHER GLITCH
#Description: This is the starting point for creating our API weather-based glitch.
#It currently uses a yahoo url to grab the current temperature and prints out that value, which we can then use to alter our photographs.
url = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22boulder%2C%20co%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys"
response = urllib.urlopen(url)
data = json.loads(response.read())
print data['query']['results']['channel']['item']['condition']['temp']

 

W14 Lab – Katie Dawe

I spent this weeks lab updating the categories structure of this WordPress site, and then learning about the differences of image processing in the GUI library we are using (jythonmusic.me) vs JES. I managed to write some code that isolates the red channel of a selected image. What remains is to be able to shift it from it’s original position and copy it onto a blank canvas. Code snippet below:

# GUI GLITCH GROUP
# RGB Shift 

import gui
from image import *

# concept: grab all pixels and copy to new canvas 3x, each time shifting position and reducing colors
# code execution: imports image, removes all green and blue, returns new RED image

def copyPic():
  # set up source and target pictures
  src = Image(pickAFile())
  src.hide()
  # do the copying
  targetX = 0
  for sourceX in range(0,src.getWidth()):
    targetY = 0
    for sourceY in range(0, src.getHeight()):
      rgbList = []  #jython reads colors as a list
      pixelColor = src.getPixel(sourceX,sourceY)
      redValue = pixelColor[0]
      rgbList.append(redValue)
      greenValue = 0
      rgbList.append(greenValue)
      blueValue = 0
      rgbList.append(blueValue)
      rgbList.append(85) # alpha channel - supposed to reduce transparency but it doesn't look different when it generates
      src.setPixel(targetX, targetY, rgbList)
      targetY = targetY + 1
    targetX = targetX + 1
  src.show()

copyPic()

#the hard part is figuring out how to copy this to a blank canvas - since Jython treats images differently and does not allow you 
# to just 'display.add(image)'. then we will need to figure out how to copy the position offset

# we will need to execute the above code three times - for each RGB channel - and place them on a new canvas in slightly different 
# positions. then we can write it into a jpg or png from Jython

EDIT:

After lab, I added some changes that turns the image into icons and places them on a canvas. However, it’s still not working due to some alpha channel issues.

# GUI GLITCH GROUP
# RGB Shift 

import gui
from image import *

# concept: grab all pixels and copy to new canvas 3x, each time shifting position and reducing colors

def copyPic():
  # set up source and target pictures
  src = Image(pickAFile())
  src.hide()
  canvas = gui.Display("RGB Shift", src.getWidth(), src.getHeight())
  # do the copying
  
  targetX = 0
  for sourceX in range(0,src.getWidth()):
    targetY = 0
    for sourceY in range(0, src.getHeight()):
      rgbList = []  #jython reads colors as a list
      pixelColor = src.getPixel(sourceX,sourceY)
      redValue = pixelColor[0]
      rgbList.append(redValue)
      greenValue = 0
      rgbList.append(greenValue)
      blueValue = 0
      rgbList.append(blueValue)
      rgbList.append(85) # alpha channel - supposed to reduce transparency but it's not working
      src.setPixel(targetX, targetY, rgbList)
      targetY = targetY + 1
    targetX = targetX + 1
  
  src.write("Users/Katie/Desktop/ATLS3000/final project/media/adjustedPictureRed.png")
  redChannel = gui.Icon("Users/Katie/Desktop/ATLS3000/final project/media/adjustedPictureRed.png")
  
  targetX = 0
  for sourceX in range(0,src.getWidth()):
    targetY = 0
    for sourceY in range(0, src.getHeight()):
      rgbList = []  #jython reads colors as a list
      pixelColor = src.getPixel(sourceX,sourceY)
      redValue = 0
      rgbList.append(redValue)
      greenValue = pixelColor[1]
      rgbList.append(greenValue)
      blueValue = 0
      rgbList.append(blueValue)
      rgbList.append(85) # alpha channel - supposed to reduce transparency but it's not working
      src.setPixel(targetX, targetY, rgbList)
      targetY = targetY + 1
    targetX = targetX + 1
  
  src.write("Users/Katie/Desktop/ATLS3000/final project/media/adjustedPictureGreen.png")
  greenChannel = gui.Icon("Users/Katie/Desktop/ATLS3000/final project/media/adjustedPictureGreen.png")
  
  targetX = 0
  for sourceX in range(0,src.getWidth()):
    targetY = 0
    for sourceY in range(0, src.getHeight()):
      rgbList = []  #jython reads colors as a list
      pixelColor = src.getPixel(sourceX,sourceY)
      redValue = 0
      rgbList.append(redValue)
      greenValue = 0
      rgbList.append(greenValue)
      blueValue = pixelColor[2]
      rgbList.append(blueValue)
      rgbList.append(85) # alpha channel - supposed to reduce transparency but it's not working
      src.setPixel(targetX, targetY, rgbList)
      targetY = targetY + 1
    targetX = targetX + 1
  
  src.write("Users/Katie/Desktop/ATLS3000/final project/media/adjustedPictureBlue.png")
  blueChannel = gui.Icon("Users/Katie/Desktop/ATLS3000/final project/media/adjustedPictureBlue.png")
  
  canvas.add(redChannel, -5, -5)
  canvas.add(greenChannel, 0, 0)
  canvas.add(blueChannel, 5, 5)
  canvas.show()

  
  
copyPic()

# okay, I am able to get all three channels onto a new canvas by turning them into icons ... but it turns out black

 

Gustafson W14 Lab

I updated our blog to include a page for everyone.

Today I also began our code and prepared our GUI in JES. I also added it to our repository. This is just the beginning set up, so it isn’t totally functional yet. Right now our code displays a GUI that is the shape of an iPhone, this could change going forward but for now, it will do. I used code from our past labs to build the GUI display. I had some trouble adding buttons to the window so I’m going to get some help on that today. 

The original base code. Still some errors…

 

Gustafson W14H2

Since Monday, I have been looking into how to create a visually appealing snap filter UI. I want our project to look professional and be user friendly. I have been looking into how to work with the GUI to make it look designed with a clean vibrant style. While I already expect this to be a challenge, I think it will be very worth it. I have been going through design websites finding material to work with.

Snapchat Redesign Concept web app shots illustration typography behance concept animation ui ux user interface redesign photoshop new style dribbble designs creative clean behance adobe xd design
Experimenting with Snapchat UI on iPhone X using Adobe XD message bright stories video snap friends fun app camera snapchat iphone x adobe xd

Anderson W14H2

On Wednesday, I worked on researching some different approaches to manipulating image programs in Python. There are some common effects found in glitch art, one of which is RGB shifting (see image below). Our goal is the have one of our glitch art filters create an RGB shift effect. Additionally, I looked back on some of our previous code from earlier on in the semester when we worked with images to see how our group could continue to use and learn from the skills we started working with.

rgb_split_effect

W14HW2 – Molli Nava

On Wednesday we grouped up and began figuring out what our workflow would look like and how we should start. I created a drive for us to upload our jes file to as well as any design elements we make and organized our group chat so we can all keep in contact while some of us go out of town this weekend.

We decided to start coding our first filter and refresh ourselves on all of the image information we learned at the beginning of the semester. And we gathered some online sources to help us with some of the glitches we aren’t sure how to execute.

We are definitely going to be challenged in understanding how to create each glitch, especially the one that utilizes API. But, we are starting with what we think we can do ourselves.

 

 

W14H2 – Katie Dawe

Helpful Links and More

The first thing I did was create a code repository. Then, like others, I did general research into what has been done in the glitch art realm in Python. I compiled a list of helpful links (below), however, after looking further into specific examples I realized that none of these links might actually be helpful.

General Resources

Filter Specific Resources

The problem with every single resource that I found was that they all imported a module called Pillow. After attempting to import this module and doing a brief google search on how to import Pillow into JES, I found out that this specific module is incompatible with JES. I then researched GUI modules for Python, considering that maybe we should write application this outside of JES. My next step will be consulting with the TAs on whether we should find a workaround in JES or consider coding in Python directly.

Post One

Artist’s Statement

We have learned a lot about how to code and specifically in the realm of GUIs and photography. Using this knowledge we will tamper create a platform/app that will allow users to tamper with imagery and create glitch art. Glitch art is a topic discussed in many of our other TAM classes, but we have never used code to alter our photographs. This project will cross the multiple disciplines and allow us to integrate our knowledge from other classes.

“For a more creative brain, embrace constraints.”

We are all makers in our group of some sort – photography, illustration, design, etc. This project creates new limits for us to play with and learn to use to create and make art.

 

Our Team

We will all collaborate on the bulk of this project, but some of us will lead in certain aspects.

Evan Gustafson – will serve as the “creative director” and will guide the overall look and feel

Danny Anderson – will guide the group in types of glitch art and how to navigate that in the code

Molli Nava – will guide the user interface design

Katie Dawe – will guide the user interaction design

Work Plan

We will create a GUI that allows users to create glitch art out of their chosen photos/ This GUI will take photos and be able to glitch them in five different ways, manipulating pixels and the RGB color channels in these ways:

  • Shift each color channel to create a layered effect (similar to taking of 3D glasses)
  • Switch sections of pixels with others to create a. cut-up effect
  • Create a double exposure image out of two images from the user
  • Switch color channel data to create negative based on current/daily weather data (temperatures)

Process:

  • We will first create an outline that describes the functions needed to create each filter/glitch type.
  • We will then work on coding the functions and then figure out how to allow the user to interact.
  • We will design the GUI window and fix bugs.
  • And of course, we will seek help out from the super super TA’s throughout!

Schedule

Wednesdays from 6-8pm

Fridays from 8-11am (with lab)

What do we need to learn?

We need to learn different methods of glitching imagery and how to manually do that using Python. We also need to learn how to allow the user to interact with this process and create a window that feels like a well-designed application.