Git: https://github.com/krawc/bossysuits/tree/master/src/admin/client/modules/orders/edit/components (all the relevant code is located in the packaging.js component)
The project uses node.js attached to a Mongo database. The store itself is based off of an open-source e-commerce project (beta version) named Cezerin.
For generating SVG files, I’m using the Rune.js library.
For generating vertices of a Delaunay triangular pattern, I’m using the following library: https://github.com/ironwallaby/delaunay
What has been accomplished:
What needs to be accomplished:
link to the project :
link to the explanation:
What is it: a social art for woman’s committee to encourage people to speak up about their experience of violence.
Background context: 35% of women had suffered intimate relationship violence. In China, there is tradition of “家丑不可外扬“，women who suffered from violence fail to protect their rights. It created more negative effects for the next generations. And there had been instances of women who suffer the violence of so many times and in the end kill their husbands. I believe that speaking up is the first step and this piece of art allow the women who explode the fact to feel that she is not alone.
How to speak up: Take the user input and leave a scar in the corresponding are.
A future development of the project will be able to get the user input from the QR code, and show each update version of the based on each input.
For this project, I made a generative smartphone case.
The components include: branch function; buds/flower if statement; switch/case.
I tried to make the tree from a recursion function I made for another class a few years ago. It proved hard to manipulate into what I wanted for this project. I then tried to build one from scratch based on mtchl’s “Recursive Tree” sketch I found on p5js. At this point in time, I should’ve been farther in my project than I was, so I had to move on. This led me to just use mtchl’s sketch and focus on the other parts. The branch function is, therefore, now mtchl’s “Recursive Tree” (as noted in the code itself). You can find that here: https://editor.p5js.org/mtchl/sketches/ryyW2U5Fx
For the switch and case, it was easy to implement it in my code. I made each case a season. The array I called season has 4 objects (numbers 0 -3) that correspond to a season. Under each case, the season is set to a certain value. Each branch function called has the parameters of b (branch depth aka how many times it splits) and col (color of the ellipses). For the winter season (case 3) I just didn’t include a color parameter because there are no ellipses drawn.
For the buds and flowers, I made if statements with for loops in them. The if statements look for which season is called, then looks to see if the depth is less than 4. I set this number based on what I personally think is aesthetically pleasing. This can be changed to a higher number (as well as the random b variable at the beginning of the sketch) to allow for more iterations. After all the if requirements are filled, the sketch will run 4 varying ellipses at the junction of each branch split off.
I ran into many issues. First, as I mentioned was trying to find the right look and workable code for the tree. I wasn’t quite sure how to make the ellipses “attach” to the tree at first. I then placed them inside the branch function figuring I could use the branches’ lines’ x and y positions to be the ellipses’ x and y positions. I think I was “overcalling” if that’s a thing. I just had to put (0,0) for the center of the ellipses and the sketch put them at the junctions. I also wanted most of the “editable” code to be in the switch portion. I ran into global and undefined variable issues. I finally found the right order with lots of console.log() and talking with Professor. I eventually completely got rid of my size variable because it wasn’t making that much of a difference in my sketch. I also wanted to be able to produce randomSeeds for the user to see which iteration it is that they like. RandomSeed() locked everything, though. I just wanted a few things locked. I decided to not include it, just to keep the b variable and being able to change out seasons. Lastly, today my browsers stopped running my sketch. I kept getting a ( Script error. (: line 0) ). I tried running it in Safari, no luck. It did work for a small amount of time in Internet Explorer, but then eventually stopped running there, too. Now, every third to fifth run, the sketch will display, but for the most part, I cannot see my sketch when I click run. Thankfully I grabbed some screen captures before this started happening.
Original problem: “My friend wants print postcards to thank Professors who wrote recommendation letters for her. One of the things she said was it would be nice if she could send something that said it came from Shanghai.”
She told me she wanted to give it to three different people, so I wanted to give her three different options. I initially wanted to make them very customizable and then figured out that as a designer making something for someone who isn’t one, I had to simplify and give simple options. Therefore, I chose to do preset color schemes or for the Shanghai one, I removed the option customize the scene.
First of all, I realized that a lot of thank you were very abstract, so this wavy design was loosely inspired by the idea of Shanghai and it’s Chinese meaning. It’s very flexible. LINK
After doing a little more research, I realized that there weren’t a lot of options for other languages, and that’s what this design does. There are four fields, and you can adjust accordingly. The main sample below is mine. LINK
And then for my roommate’s very specific request of wanting it to be from Shanghai, I figured out that she wanted something more in line with a travel postcard. This one has a dropdown choice of sky behind the illustrations that can hopefully help her write. LINK
I designed a business card system for a flower studio. People can generate business card due to their own preference on the flower color.
In the beginning, I collected many realistic images in different colors:
I don’t like the feeling of collage. So I changed it into watercolor images:
I hope to haves three layers: leave layer, stem layer and flower layer. The second issue is all of the images would overlay with each other. It’s ok for leave and stem layers, but I don’t want flowers to overlay each other. I used Dan Shiffman’s No Overlay method to solve this problem: https://www.youtube.com/watch?v=XATr_jdh-44
For background, I used Perlin noise to make it look more dynamic.
This is what I got in the end:
Professor: Rune Madsen | Student: Sabrina Goodman
Link to code: https://editor.p5js.org/Olesia/sketches/Sy7Q5VaCQ
Link to presentation: https://docs.google.com/presentation/d/1aiPfrknHq3IZwbW1IIil6D9HXIKH4UZao3LuAXDSIOI/edit?usp=sharing
Coding Train, Programming Design Systems Book, Dan Shiffman’s Example Codes on Github.
This project uses dat.GUI library by Don McCurdy. (Thank Miki for sharing this amazing library!!)
Live demo: https://editor.p5js.org/Susan_Xu/sketches/ByzhyBTJV
This project visualizes the diversity of personality in the form of name tag based on test result from 16personalities. Users are able to customize their own name tag online by inputting their personality test result and their name. They are free to choose from either a color-orientated version or a shape-orientated version. The common framework for both version includes a organic shape controlled by six points. Among them, two points on the sides are fixed, and the rest four points each signifies the degree of one personality traits.
In the color mode, I define the color for four pairs of personality traits. They fill the shape above in gradient, started four vertex with their designated color.
The line version mimic the contour map and it’s mono-colored shown below:
The line version is beneficial for color vision deficiency group, and avoids binary labelling. It provides a potential template for entities to customize the tag with their theme color. On the other hand, the color version is very lively, and conveys personality with color connotation. It’s more suitable for intimate groups, eg. mutual-aid group.