creativecoding0987-blog

[creativecoding0987-blog]

My final project was a reference picture drawing tool. Originally, my concept had a 30 second timer, like how in traditional art classes one has to draw a short amount of time, and a prompt feature that would give the user a word that they would draw. However, I thought it would be more interesting to work with pictures, and to make a tool rather than a test. I also originally planned to have more in depth drawing capabilities, I originally referenced brushes like this one, and this one. I did keep the color change idea, there is a color change brush in the final product. However, I eventually decided to concentrate on the image search tool more than the drawing capabilities, because that is what I felt made my project unique. The purpose of my project is to find different pictures of things to draw when one is stuck, or when they are not sure how to draw something. I used the Flickr API, and filtered it to only Getty Images because they are more professional, and more likely to be good quality.

I think that the biggest challenge was working with the API. Trying to get everything to work in the right order, and trying to figure which data to use, and which to scrap was a long process. It was also difficult trying to integrate the HTML with the p5 code.

I have made multiple changes since the presentation of this project. I added a save button. I also added the option to choose the next photo in the line up, or to go back to the previous photo in the line up. The previous photos also disappear when one goes to the next photo. The link now works much better, since it is actually embedded in the HTML, and the user can click on it to go to the website. There is also an opacity tool, which enhances the drawing tools, and there is a legend of the different tools. There are also some minor cosmetic tweaks, like changing the font, adding a border to the canvas and photos, and changing the background color. 

I am glad that I was able to make something functional, which I want to use in the future. I also enjoyed being able to use all the skill that I have acquired over the semester,but I also had to learn new things like new parts of DOM, and different ways to use the keyboard.  Overall, I think that this was a very successful project.

[creativecoding0987-blog]

I chose to put the words “The” “New” “York” and “Times through the New York Times API. I displayed the results on the screen while they are cycling through it.

The most difficult part was getting it to cycle through, and there is till a little problem, where it wont reset and go back to the first item in the array. 

[creativecoding0987-blog]

I used the data of Netflix Categories. I decided to make a grapph of circles, each with a diameter of the number of letters of each category. The most difficult part was figuring out which numbers to use, and how to use them. I used red and white because those are Netflix’s colors. 

[creativecoding0987-blog]

For my sound project I decided to create a piece that functions more as an interactive art piece than a function sound creation tool. There is one large circle in the center that makes bird sounds, while looping. If the user clicks on the right or the left side of it there are two other sounds that play. The right side plays ocean sounds. The left side plays more bird sounds, but they are much quieter. I created the circle first, and based my sounds of off that. At first I was going to create more of a bass line when the user clicked on them. Later, I thought that the circles looked calming, so I changed my mind and decided to put nature sounds instead,

Unfortunately, the sounds do not load correctly onto the circles. There is a lot of lag when playing the sounds, so it ends up being a little jarring instead. Part of that may be because of the size of the sound file. It may also be that the server cannot handle three sound files constantly playing.

[creativecoding0987-blog]

For this assignment I did a ball that made a boing sound when it hit the walls. I decided to choose a blue ball and a orange background because they are complimentary colors, which look nice together. I wanted my project to be more bright, so I decided to use bright colors. 

Here is the code https://github.com/cg2984/Gilligan-CreativeCoding-F17/tree/master/Assignment_10_26_17B

[creativecoding0987-blog]

For my midterm, I decided to create an interactive narrative through p5.js. It is based around a house in the woods, and the growth of the woods around in. The viewer can also see the house at different seasons depending on their mouse X positions. 

When I thought of the project, I originally just wanted to change the seasons, I took inspiration from Animal Crossing and Stardew Valley, which are games that have the seasons change as you play. Later I thought it would be an interesting addition to have an object change along with them, because it continues the theme of change, like the seasons. However, I wasn’t sure how I wanted to approach the changing of seasons, and the changing of years. I felt that it would be too boring, and too long to click through each season, and each year, or to wait for the seasons to change like in those games. I used the installation Red Force Fields, by Marcia Lyons, Woody, Vasulka, Jim Campbell, Leo Villareal, and Ben Weiner as inspiration. In Red Force Fields, the users movement determines how they see the art piece. I applied the same principle to my work, but I made the trees and the seasons follow the users mouse. 

There were a lot of challenges, but one of the main ones was figuring out how to layer, and how to position all the visual elements together. I was having difficulty because some of the visual elements would cover others. I also had some trouble figuring out which way I wanted to have visual elements. I wasn’t sure if I wanted to have a photograph of all the different elements, a drawing of all the different elements, or use the geometry in the program. I eventually decided to use the geometry, because I didn’t like how all the pictures came together, and my own drawings weren’t up to the task. With the programs geometry, I also had the added bonus of being able to fine tune the color I wanted in the program, rather than having to use a tint. However, I had to deal with bugs that would came about because of multiple pieces of geometry working together.

Ultimately, I think that this project was successful in doing what I wanted. However, I think that I could have improved the story telling elements in the art piece. I think that I could have done a better job portraying emotion in the piece. What I intended to be happy, because the house got rebuilt and inhabited, might looked creepy or confusing in the end. I had the house get rebuilt at the end because I thought leaving it decrepit would be sad, and I wanted to have a more positive project. 

Research/References/Inspiration:

https://en.wikipedia.org/wiki/Narrative_art

https://www.sophia.org/tutorials/elements-of-art-movement-and-time

http://www.marcialyons.org/images/RED_catalogue_Final3.pdf

https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ffarm4.staticflickr.com%2F3009%2F2979041561_e7370d802d_o.jpg&f=1

https://images.duckduckgo.com/iu/?u=https%3A%2F%2Fs-media-cache-ak0.pinimg.com%2F736x%2Fb1%2F22%2F55%2Fb122555a6631e28359aa6d9278e1b86f.jpg&f=1

https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.awesomeinventions.com%2Fwp-content%2Fuploads%2F2014%2F09%2Fnature-civilization.jpg&f=1

Stardew Valley (Video Game)

Animal Crossing (Video Game)

[creativecoding0987-blog]

 Concept: based around the changing of seasons, and how a human object in nature handles each season, and throughout time. Eventually there be some animals and plants that move into the object. A sign of human existence via interaction at the end, to keep it from being too sad. I don’t think I want to add a human, but maybe I can add a river and you will see two fishing poles, or new writing on the object that someone left. Or I could make the object a house, and have a light turn on the inside at the end, or a light in the sky from a nearby town at the end

o   There could be a constantly changing color scheme based on where the mouse is, where it would show summer, spring, winter fall of that year

o   While the plants between the years grow, the would change color (with the growth stopping during the winter?) to signify the changing of the seasons

o   There would only be a certain number of clicks that would create the growth of nature, I don’t think that I would loop it forever

§  The end might be when we see people again, or when we see a sign of people again

Custom function:

o   Would need a function to create a sprite that can move and be affected, and other visual elements

o   A function to light up the area at a certain time to indicate it should be interacted with

o   A function to show “control” time within the animation/game

o   I could have a function to control how the world changes during each season

-          Mouse or keyboard interactivity:

o   The user would press on a specific area to activate the animation between each year

§  (ex): the user clicks on a sprout to trigger the growth of the next year

§  (ex): the user would click on the car to trigger the decay of the object and the growth of another year

o   The users mouse would determine which season you are in  

§  The only issue with this is that it takes away from the passage of time effect

For loops

o   For loops to create a pattern with the custom function

o   While loops to create different nature objects during a certain time duration

Logic statements

o   The user interaction would have to use if else statements  

Color and style references

o   Animal crossing (which shows changing of seasons in game)

o   Stardew valley (which shows changing of seasons in game) 

o   https://en.wikipedia.org/wiki/Narrative_art

o   https://www.sophia.org/tutorials/elements-of-art-movement-and-time

o   http://www.marcialyons.org/images/RED_catalogue_Final3.pdf

Challenges:

o   Finding a natural looking way for the nature objects to grow

o   Creating simple sprites to represent the objects in a simple way

o   Figuring out how to show signs of human life and activity without showing humans

o   Figuring out the time between seasons and the time between years

The Psuedo Code

Draw function{

If (mousepress)  

               Then ()

                               Custom function season (with time parameters that control color)

Custom function growth (with time parameters that control the creation or removal of new objects) }

 Custom function season (time){

               Fill(time)

               Drawing of a leaf }

 Custom function years (time){

               Drawing of leaf (time =position)

}

[creativecoding0987-blog]

Assignment 10/5/17

For this assignment I worked with Jessica who coded the movement of the smiley faces, the position of the smiley faces, and the color changing background. I coded the changing color of the smiley faces. The position of the smiley face rings, the background, and the color of the smiley faces all change depending on the position of the mouse.  On the day of class we coded the smiley face itself. I came up with the smiley face idea, and the circular part. However, I envisioned more smiley faces in rings that didn’t move in and our like the rings in the finished product do. I liked Jessica’s take on the smiley faces better because its more interactive, and it looks more fun than my idea was. I think we worked pretty well together, we had clear communication through text, and that both of our ideas came through in the end.  

[creativecoding0987-blog]

Image Source

I decided to recreate one of Frank Stella’s artworks, Double Grey Scramble. I decided to go with this one because I liked the color and the contrast between the color and the grey. The most challenging part was the color because it was difficult to loop the different color parts. It was simply to get the grey gradient because that was one simple loop. 

I also made an error with the color loops because they dark square and the grey square are supposed to have different colors in different places. However, there was a part of my code that would make the outermost part of the square the same color, which I could not figure out.  

[creativecoding0987-blog]

For version 2 of my drawing program what I really focused on was adding more variables so that it would be easier to adjust the canvas and the objects on screen. Before, most of the objects, like the color circles and the size circles, were put in their place with specific numbers. Now, almost all of them are assigned to a variable. This will make it much easier for me in the future to add more features because I can easily move stuff around, and fit other buttons onto the screen. 

I also worked on a screen clear button, which I did not think of before, but I realized was a huge issue. The only trouble is, which can be seen in the second picture, is that I cannot clear the whole screen without removing the other buttons. I also added a 30 second timer button, but right now it doesn’t do anything else other than print the seconds on the console when you hover over it. I also made the lines much smoother. Now, instead of being a line of circles that disconnect when the mouse moves too fast it is a continues line, no matter how fast the mouse moves. 

In the future, I will try to work more on the 30 second timer button. My goal is to have it clear the screen after 30 seconds pass. However, before I do that, I will have to figure out a way to clear all of the drawings on scree, without taking out the buttons. I tried to make it so that the user can’t make a line when the X mouse value is greater or less than a certain value, but it wouldn’t work. I will have to try different ways in the future, since it is important for the 30 second timer. 

[creativecoding0987-blog]

This is the first version of the drawing program that I made. Right now, it has the capability to draw in different color and sizes, which is almost everything that I planned to do. However, I would like to have a tool to adjust opacity, and to add shape as well. Other than that there are many changes that have to happen in the future. For starters, I need to make the code more reliant on variables. Many of the values in the program are just written in, like the size of the circles and parts of the positions of the circles. I would also like to final a way for the drawing tool to be smoother. Right now, you can see the little circles that make up the tool, which isn’t how real drawing tools look.

[creativecoding0987-blog]

I decided to make a concept for a drawing tool/program. The drawing logic system would be based around mouse press, when someone presses down with the mouse and drags it around a line will form. The adjustments to that line would be based around clicking on certain areas, and using an “if” “then” statement to change what type of line that person is using. This method would change the opacity, size, color, and type of line that is being used. There is also something similar to make shapes, where someone could click on a certain spot in the canvas, and put the shape there. Ideally, the shape could have its size changed, this could happen where one clicking and dragging the shape would increase the size in small increments (like 3 pixels). There could also be a color select before the shape is drawn to change the fill and line color, and this logic would work the same as changing the color for the line. 

[creativecoding0987-blog]

This is my self portrait made in Processing! When I began thinking about my self portrait I decided I wanted to do a clean, angular style without any outlines because I liked how that looked when I was learning how to make shapes in Processing. I have also done some art with this style before, so I wanted to give it a try with Processing. 

I wasn’t sure which artists I would reference for this sketch when I began, but I decided to start anyways, first by simplifying what I could, and then I would take it from there. I started with my head shape, my eyes, eye brows, and glasses. I couldn’t figure out my nose and hair. I realized my head shape looked like a Mii head shape, and I decided to use Miis as inspiration to make my nose and my hair. Mii are very simple, shape based cartoons used to represent yourself in some of Nintendo’s games.(https://en.wikipedia.org/wiki/Mii). I did not use any picture in particular, but I did remember making my own Mii, and the features I used to make it. I made my hair angular because curly hair is angular for a Mii, but I was originally going to make it curvy. I realized I liked the angular look, so I made my eyes and eyebrows square as well, they had been ellipses before. 

I had trouble figuring out how to style my hair. I decided to stay true to real life, and I put my hair in a ponytail, which is what I wear the most of the time anyways. I also had trouble with my glasses, which are not a uniform thickness, so I just decided to make them ovals, which is what they basically are.  

The code behind this image is right here:https://github.com/cg2984/Gilligan-CreativeCoding-F17/blob/master/assignment_09_07/assignment_09_07.pde