Creative coding

Process: design and composition

I want to use this project to show the great female artist Frida Kahlo. The layout of Webpage 1 is very simple because I failed to achieve the gallery effect I wanted to do. (https://artsandculture.google.com/story/frida-kahlo-in-fashion-conde-nast-archive/JQVRZqNen8EuKg?hl=en). I decided to split every paragraph into an individual div because I don’t want the readers to be deterred by several huge blocks of texts. 

As for the background, I used the gradient effect in the beginning, but I didn’t like it. So I made a picture with procreate and used it as the background. 

There are two buttons that will direct you to the 2nd webpage on the 1st webpage. This is an advice from Sonny just in case users don’t want to read through the texts. 

There aren’t many visual designs on the second webpage. I put the canvas and the interactive buttons in the middle of the second webpage, and a small video captured from the camera in the top left corner so that users can know how they look like before they click “capture”. It makes more sense to put all of my buttons in flex box and only use two lines in total. (Previously, there were 3 lines, stamps, capture & export, instructions & back to the first page)

Things I achieved with the help of others (Prof Leon &  google)

Pixel Manipulation: 

Undo function: https://editor.p5js.org/stalgiag/sketches/ynaav4MsI  

(I don’t want to directly borrow this code so I wrote a few analysis on this set of code)

Other helpful reference: 

P5js: https://p5js.org/learn/program-flow.html

Flexbox: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox   

Process: Technical

Layout:

I def become more comfortable using div after this project. Fixing the layout of my first webpage was really hard, because I named my class/Id in a really “illegal” way. I worked it out by noting everything I already have, and what I want them to look like on a piece of paper, and rename everything accordingly. 

I should be more careful naming everything in my project in the future. As mentioned before, I named my class/id in a very messy way, so i had a hard time trying to do any action with them (especially in CSS). In the future, I definitely should be more conscious about everything name I come up with. Try to be more logical 😉

CSS:

I learned that the “hover” can only be applied to class.

Reflection and future development:

About layout:

Prof. Marcela mentioned that my first webpage can be organized in a way more related to Frida Kahlo’s work. It struck me that I can make the layout similar to the earrings in Kahlo’s work. 

For the title on the webpage, I think it would be cool if I can make it similar to the eyebrows in Kahlo’s paintings, so that it makes more sense for it to stick on the webpage. 

About the interactive function:

Make the cursor in my second webpage changeable according to the stamp the user choose would be cool! Also, maybe change the size of the stamps according to the size of the webpage, or according to users choice.

Another function I can add is the brush function, so that users can draw something in addition to using the stamps. 

About contents:

I wish to do further research on female artists/ writers in general. By putting what I’ve researched for my literature/ humanities courses together on the webpage would be so so so so nice ! As for this project, I can add my understanding of Kahlo’s paintings instead of copying and pasting contents found online. 

link to the project: https://yyyyyelena.github.io/CCLab_Yelena/frida/ 

Project Description:

Yelena Ye

Frida Kahlo: Beyond the Mirror

Stamp a portrait with elements from Frida Kahlo’s artwork

2023

Elevator Pitch: 

Frida Kahlo: Beyond the Mirror allows users to unleash their creativity and connect with the art of Frida Kahlo. It allows users to recreate their captured photo with some elements from Frida Kahlo’s artworks. In this way, users will not only have fun making their artworks, but also gain a deeper appreciation for the artistry and symbolism behind Frida Kahlo’s personal style.

Abstract:

Frida Kahlo: Beyond the mirror is an interactive project sourcing inspiration from the renowned Mexican artist Frida Kahlo. The project comprises two parts. Part one is a brief introduction of the artist and showcases some of her artworks, especially her self-portraits. These self portraits demonstrate her signature style of painting characterized by thick eyebrows and bold use of colors. Part two is an interactive project that allows users to create their own portrait with elements derived from Kahlo’s painting. 

The motivation behind this project is the observation that the art world has historically been male-dominated, with female artists facing persistent underrepresentation and marginalization. As a feminist icon, Frida Kahlo boldly challenged traditional gender roles and societal expectations of women through her unconventional life and thought-provoking artwork. By offering an interactive project that engages users with Kahlo’s art in a fun and creative way, this project aims to not only promote appreciation of her work but also to raise awareness about the ongoing struggles faced by women in the art world. Ultimately, Frida Kahlo: Beyond the Mirror serves as a platform for reflection on the critical issues of underrepresentation and gender disparity in the field of art.

Project description: 

This is a project inspired by female artist Frida Kahlo. 

WebPage1: Webpage 1 is a basic introduction to Frida Kahlo. You will see:

• • Some Basic Information of Frida Kahlo
  • Some of her paintings & short analysis, with link to the webpage that gives detailed information on the paintings
  • Some of her quotes
  • Reference links and suggested readings
  • A link to the second webpage where you can create your portrait sourcing inspiration from her paintings

I want to make the page more interactive, for example, the introduction on her painting will not show until you click on the painting. But I think such interactive page is really hard to code for me. So… we will see.

WebPage2: Create your portrait with stamps

This is a page generated by P5.js. When you click on the button “capture”, you activate your camera and your video will be shown in the black area. The stamps for you to choose from are on the right. These are from her painting self portrait dedicated to Dr Eloesser. I might include other options in the future, like her painting The Frame.

The background of the canvas shows a texture that is supposed to be the watercolor texture. But it isn’t so satisfying, so I just used it as the background 😛

A failure: https://yyyyyelena.github.io/CCLab_Yelena/11r-sketch-gallery-page/

The second failure but better than the first one: https://yyyyyelena.github.io/CCLab_Yelena/11r-sketch-gallery-page-withSliderInsideP5js/ 

• How can orderly file name convention (html files, css files, images, etc.) prevent errors when building a website?
• When would you want to use classes, when IDs?
• Which limitations did you run into in the styling of your page?
• How does editing and styling a text in (WYSIWYG) text editor, such as Microsoft Word, compare to writing HTML? What are advantages of each over the other?
• Explain how different web technologies come together in your webpage. How is writing HTML or CSS different from writing p5.js (JavaScript)?

• How can orderly file name convention (html files, css files, images, etc.) prevent errors when building a website?
  • Name the files using the same standard. I encounter the problem when working on project B because I jump between _ and – when naming images lolll. This is very annoying;;
• When would you want to use classes, when IDs?
  • Class can be used for multiple elements, while Id can only be used for one. I think it is very helpful when editing the styles of elements. 
• Which limitations did you run into in the styling of your page?
  • I tried to create two slider bars in the html page, and I did achieve that, but I have been spending three days figuring out how to link them to my P5.js sketch, and I failed😭😭 this really stressed me out a lot. But at least in this process, I figured out the class and id thing. 
  • In the second link, I keep the slider bars in the P5.js sketch. I tried to use different variables to stick them in a set position, but I failed again😅. Considering I will not be using the slider bar in my final project, I decided to quit completely😰😰.
• How does editing and styling a text in (WYSIWYG) text editor, such as Microsoft Word, compare to writing HTML? What are advantages of each over the other?
  • Many text editors have auto mistake correction, so I don’t have to worry about the typos. And it’s much easier to just select the styles in text editors. (I always have the impulse to drag things on webpage to style them when editing the webpage.
  • Visual studio gives suggestion/ recommendations when writing HTML/ CSS page, which is very helpful when exploring different properties. 
• Explain how different web technologies come together in your webpage. How is writing HTML or CSS different from writing p5.js (JavaScript)?
  • I always forget to set the canvas as: let cnv = createCanvas(900,800);  cnv.parent(“canvasContainer”);

 

• I also struggled a lot with CSS, so I searched online for instructions. Here are some of my notes:
• Q: what does display: flex mean?
• A: display: flex is a CSS property that is used to create a flexible layout for HTML elements. It enables you to easily control the positioning and alignment of elements within a container by allowing you to specify how much space each element should take up within the container.
• When you set the display property of a container to flex, it transforms the container into a flex container. This means that the container’s child elements become flex items, and can be arranged and positioned using a set of flexbox properties.
• Some of the key properties that you can use to control the layout of flex items include:
• justify-content: controls the horizontal alignment of flex items within the container.
• align-items: controls the vertical alignment of flex items within the container.
• flex-direction: controls the direction of the main axis along which flex items are laid out.
• flex-wrap: controls whether flex items are allowed to wrap onto multiple lines if there is not enough space to fit them on a single line.
• flex-grow: controls the amount of space that a flex item should take up within the container, relative to the other flex items.
• Overall, display: flex provides a powerful and flexible way to create complex and responsive layouts using HTML and CSS.

 

• Q: what are the other property for display in css?
• A: Besides display: flex, there are several other values that can be used with the display property in CSS to control how an HTML element should be displayed on a webpage. Here are some of the most commonly used ones:
• display: block: This value makes the element a block-level element, which takes up the full width of its parent container and creates a new line after it.
• display: inline: This value makes the element an inline-level element, which allows it to flow within a line of text and does not create a new line.
• display: inline-block: This value makes the element an inline-level block container, which behaves like an inline element, but also allows for padding, margins, and setting a width and height.
• display: none: This value completely hides the element from the page, so it takes up no space and is not visible to users.
• display: table: This value makes the element behave like a table.
• display: table-cell: This value makes the element behave like a table cell.
• display: grid: This value turns the element into a grid container, which can be used to create complex layouts with multiple rows and columns.
• Each of these values has its own unique properties and behaviors, and can be used in different ways depending on the needs of your webpage layout.

 

• Q: what does position: relative mean?
• A: position: relative is a CSS property used to position an HTML element relative to its normal position within the document flow. When an element is set to position: relative, it remains within the normal document flow but can be shifted in any direction using the top, bottom, left, and right properties.

 

• Q:what is the difference between display and position?
• A:display and position are both CSS properties used to control the layout and positioning of HTML elements on a webpage, but they have different syntax and serve different purposes.
• display is used to control how an element should be displayed on the page, such as whether it should be a block-level element, an inline-level element, or a flex container. The display property takes a single value, such as block, inline, or flex.
• position, on the other hand, is used to control the position of an element on the page, such as whether it should be fixed in place, absolute, or relative to its parent container. The position property takes a value such as static, fixed, absolute, or relative.
• In summary, display controls the basic layout of an element, while position controls the positioning of an element within its layout.

 

In the early days of Internet, the term “New Media” describes digital publishing forms during the process of communication and distributing contents. It indicates the emergence of multimedia. New Media Art refers to the art generated by new technologies and concerned with the cultural, political and atheistic possibilities of these tools. For me as a reader reading this work 15 years later, I think the forms of New Media Art expands a lot with the development of technology. In my understanding, it becomes more interactive and more engaging. And artists definitely feel more comfortable using these tools. I really like the statement “by deploying these technologies for critical or experimental purposes, New Media artists redefine them as art media” in this work. I think New Media artists utilize the technologies in creative and innovative way, and are not limited by the technology. AI generated works can also be counted as New Media Art as well. But it also brings along the problem of intellectual property. 

Work before 2000:

Reference: https://philamuseum.org/collection/object/89204

In Brillo Boxes, three Brillo boxes are positioned in slightly different angles, but the name of the product can be easily read. Other famous pieces created by this artist, Andy Warhol includes the painting and the photograph Campbell’s Soup Cans. The forms of his art works include canvas painting, photography, video art, and filmmaking. In my understanding, Andy Warhol uses his art pieces as commentaries on mass production, commercialization and capitalism. His pieces pose the questions that can everyday, mundane items be art? How can they be art? Where is the boundary? How do we define the artistic value of a certain object?

 

 

 

 

 

Work after 2000: 

Reference: https://www.metmuseum.org/art/collection/search/284985 

Every Shot, Every Episode by Jennifer and Kevin McCoy is definitely a very new form of art to me. The video player and the screen are displayed in the briefcase, and the collection of labeled CDs are stored somewhere next to the briefcase. The McCoys use thousands of individual shots from Starsky & Hutch to create a fictitious world, and classified them based on the structural technique, stock character or action. In this way, they expose the repetitive patterns in making so-called successful films and TV shows. For audience to view the contents, they have to pickup one CD and put it in the CD player. In this sense, this art piece is very interactive.