final proposal jackie

Entity: I will design for generated book covers for French philosopher and novelist Albert Camus

Format: Print and bookmarks

Why code: I can personalize book covers for people who love collecting books or Camus’ fans. It will be published in only limited editions.

updated slides:

https://docs.google.com/presentation/d/1Y-XVCvpZs16vmww2qaT205UahHYO2rvJkveTQcHOLfU/edit?usp=sharing

previous:

https://docs.google.com/presentation/d/1pemjjDZOWLqk7xnR7FtAHjR6rHStz22LhZ7v14vE5ng/edit?usp=sharing

 

pds // random 12102018

Instructor: Rune Madsen | Student: Jackie

https://editor.p5js.org/jackiehu/sketches/Hkj-Ov6n7

left: original                                     right: my sketch

The first step I took to create my sketch in code is to analyze the original one. Though the original one is created by hands, the author (Pinterest Account: The Lovely Drawer) creates a design system and applies it in his/her own sketch:

  1. the big ellipses are usually divided into 2 or 3 pies;
  2. elements: paralleled lines and small dots;
  3. elements are only used in half of the ellipse;
  4. five colors in total: black, white, pink, orange, cyan.

I think about how to draw my sketch like photoshop layers:

  1. draw the base ellipse;
  2. draw an arc on top of the ellipse in another color(visually it looks like the big ellipse is divided into two parts);
  3. between the ellipse layer and arc layer, draw small ellipses, paralleled lines, and texture;
  4. on top of arc layer, draw two random lines sometimes to make the sketch more vivid.

I used quite a lot of randomness in this sketch in different part:

  1. angles(start and ending point) of the arc are randomized;
  2. small ellipses in the base ellipse are distributed randomly and in random shapes;
  3. texture(created by very small white ellipses with the diameter between 0.98-1.5) are randomly positioned;
  4. the paralleled lines are distributed with some randomness added between the 8th and the 12nd lines;
  5. the two lines generated in the arc have the random chance < 0.2  and are drawn by two random points on the arc.

I had a few troubles with sin and cos because I forgot or my high school knowledge.

For example, I used (xcosθ+ysinθ,ycosθ-xsinθ)(θ = 180) to get the opposite point for any point (x, y) on the circle, but when I connected them, instead of creating a group of paralleled lines, the lines I got crossed each other in the center look like:

After rethinking about it, I created points that are symmetrical to each other by y-axes and rotate other later to created my paralleled lines :

let x = sin(angle) * r;
let y = cos(angle) * r;
let m = -sin(angle) * r;
let n = cos(angle) * r;
line(x, y, m, n);

https://editor.p5js.org/jackiehu/sketches/ryH6_EIpX

pds // logo inspiration

Instructor: Rune Madsen | Student: Jackie

https://docs.google.com/presentation/d/1DMilnbS7r8IFa8k2DtFuDk-F9Am7qFIwqGL5mSorj60/edit?usp=sharing

I’m going to design a few variations for Power Station of Art Shanghai based on its recent exhibitions. I’m also interested in design for their Emerging Curators Projects, and museum store products(such as a logo printed in tote bags).

The current design is an abstract illustration of the museum architecture, which previously was a factory.

It looks pretty good already but lack of a dynamic, especially given that so many exhibitions it holds every year, and they’re already designing posters with the adaption of the current logo.

I would consider PSA as a very open-minded client – you can tell it from their website.

Possible exhibitions I would design for:

 

pds // brockman poster 10082018

Instructor: Rune Madsen | Student: Jackie

https://editor.p5js.org/jackiehu/sketches/SyGQiiOFQ

I first dragged the picture in photoshop to see the RGB of three colors, and then copied the number to a HSL converter to see the Hue of each one. Their Saturation and Brightness are pretty similar, and there’s a roughly a gap of 10 among the Hues.

I tried using modulo to intimate the colors, but the color order for the rectangles I got are reversed. I ended up using switch instead.

 

pds // the martian 09262018

Instructor: Rune Madsen | Student: Jackie

https://editor.p5js.org/jackiehu/sketches/ryuHHKDFQ

I interpreted the book/film as a story about surviving and rescuing between Mars and Earth of the astronaut, so I made these three elements my key figures for my poster. Since most of the story happens on Mars, I designed the perspective to be closer to Mars, and earth is further away. This way, Mars looks bigger than Earth. The astronaut is floating in between the two planets, indicating an oscillating situation of his life. He also becomes the bridge between earth.

I tried to use relative positioning for all the shapes created so that it works on canvas in any size except the astronaut, for it has a lot of rotated rectangles and I didn’t figure out how to set his position to be relative too. I also tried to add some stars with ellipses but removed it later on, because I feel the scattered stars destroys the coalesce, bold style it has now.

 

pds // wet and sharp 09172018

Instructor: Rune Madsen | Student: Jackie Hu

https://editor.p5js.org/jackiehu/sketches/ry7GM6i_X

A drop of tear falls into terrestrial mountains.

I want to create something simple and poetic, and I want the “wet” and “sharp” part can speak to each other. I still think my current design of “wet” is too literal, but can’t think of a better idea yet.

What are the objects that are “wet”? Rain, water, tears, ocean… But what are the things that can create a “wet” atmosphere? Mist, windows in a rainy day, spilt drink… Maybe it’s not the best idea to convey an atmosphere with shapes..