concept: sharp, quadraticVertex


var cx = 250
var cy = 350
var flag = false;

function setup() {
  createCanvas(700, 800);


function feather() {
  vertex(0, 0);
  quadraticVertex(-30, -10, 0, -100);



function draw() {

  // translate(400, 400);
  // feather();
  var intx=200;
  var inty=200;
  var radius=80;
  for(var i=0;i<90;i+=10){
    var ex=intx-cos(radians(i))*radius;
    var ey=inty-sin(radians(i))*radius*radius/150;
    // ellipse(ex,ey,10,10);

programming design systems – assignment #4

Assignment for Monday: Make a black and white design with two ograocedural shapes. The first shape should be a design of the word wet while the other should be a design of the word sharp. You have to use a for-loop, beginShape(), and bezierVertex() in your code. Try to come up with an idea that is better done in code that in Illustrator.


Programming Design Systems Assignment 2 – Chen Mengzhu (Katie)

“Wet” Design:

One thing that took me a long time to debug was that I forgot to push and pop() when creating shapes, and because I used scale() when creating shapes, without push() and pop(), objects always scale from their relative origin to the coordinate system, so as I loop through to initialise the raindrops, the ones got initialized first had smaller scaling percentage and then the later ones larger, and they all clustered around the origin point.

Here’s the code:

Here’s the link to live demo

“Sharp” Design:



Programming Design Systems| Asiya Gubaydullina| Reading Response

This week’s assignment was to read Paul Rand’s conversations and write a reading response. Frankly, design conversations can be rather tricky. I feel like Rand mentioned so many familiar yet complicated topic in design. It was interesting to read about design instead of just looking at it. I’ve never even thought about the possibility of reading about design or learning design through books. It never even occurred to me that before trying to design something you have to have this thought in your mind…

 As he said, design is the conflict between form and content. In fact, he says that the form is the problem. Indeed, because form is the representation of content. Still, before completing the reading, I managed to mix form and content very frequently. I interned as a graphic designer this summer, so I saw ins and outs of the profession. Nonetheless, up until reading the conversation, I didn’t differentiate the content and the form. As Rand stated, the form is the problem because we have to either think of the design as a tribute to symbolism. In fact, even our assignment on WET and Sharp used symbolism. Create a raindrop and people would instantly connect it with raining, puddles, and umbrellas. Some people might think of something else but still, it would be WET. Overall, the assignment was fun and enlightening. Therefore, I think picking up a few books from the library is a good idea.

Programming Design Systems| Asiya Gubaydullina| WET and SHARP

For this week assignment, we had to come up with something wet and something sharp. I have to admit, working on the WET sketch is a lot harder than I thought. I am so used to Illustrator, I think in different forms but in this case, curvative control points are invisible. That made the WET part extremely hard. I am still not satisfied by the result of wet but I’m positive that making use of the office hours could help me. Overall, it was a fun assignment!  Here are the links for SHARP and WET.


Assignment 4: Wet Sharp

Assignment for Monday: Make a black and white design with two procedural shapes. The first shape should be a design of the word wet while the other should be a design of the word sharp. You have to use a for-loop, beginShape(), and bezierVertex() in your code. Try to come up with an idea that is better done in code that in Illustrator.


At first I got inspiration from Sean McIntyre’s wet sharp example https://programmingdesignsystems.com/shape/custom-shapes/index.html

I wanted to manipulate the idea from a series of mountain-looking lines that transform into wave-looking lines in a series of lines to an animated version where it would over a loop transform in motion. This idea became too difficult for me due to my lack of coding prowess and so I adapted the idea into what had came to my current code presented in the link below. I thought waves was a great idea to display wetness but I wanted to distinguish wetness from ocean and so I placed the waves in the middle and I thought that anything placed below would appear like it is in water and thus wet.

Following wet, I  thought of what sharp would be- I am sure everyone would come to the same end point that sharp had points like a triangle, or an isosceles triangle to be more precise. Moving with the trend of adding motion to reaffirm wet and sharp, I created rocks on the bottom of the page to 1, display that they are wet but 2, they would thematically fit in the this picture of possibly an ocean with sharp rocks at the bottom. To make the explicitly sharp I fiddled around with proportions and then randomized in certain constraints to systematize it.

I wanted to use a bezierVertex() for creating the rocks but I ran out of time and so I placed the moon what is suppose to be the sky to satisfy the requirements of this assignment. The moon is very random and if I were to do it over I would change it, however, it does in my opinion balance the picture out to some extent and adds an artsy and personal customization.

Linked Below:


W2 Wet and Sharp

On P5 Editor

For this week’s assignment, we were to represent “wet and sharp” with the shapes learnt in week 2. Unlike last week, I tried to refrain from using hard numbers and if I do use hard numbers, attach it to a variable that I can repeatedly call.

The initial idea for this week’s assignment was to make rows of diamonds that slowly transforms into a water droplet by the end of the row. However, I couldn’t really figure out how to repeat the diamond shape (hint: I later found out how to do this after I finished my assignment). While I was researching how to draw repeated shapes, I figured I could just make a bunch of triangles (I don’t know why I forgot that diamond shape really is just 1 vertex away from a triangle) and while looking at it, I thought of actual diamonds. And since the theme for this week is “wet and sharp”, I thought of…..

*wait for it*

….blood diamond!

Blood Diamond is one of my dad’s favourite movies, so I naturally thought of it.

When writing the code, I actually wrote down all the hard numbers. After that, I went through the code to see if I could simplify them and which numbers I could turn into variables and how to loop them with for loops. The process took a while, especially because I’m not exactly used to this, but in the end, I could say that I came out feeling like I’ve learnt something.

I’m sure there are a thousand more effective ways of programming this design, but I think I’m rather satisfied that at least I somehow moved away from the serious offence of doing the maths in my head (instead of in the code) like I did last week. Moreover, I’m also kinda worried that the design won’t scream “blood diamond!”, because colours could really help sometimes.

All in aaaalll, I look forward to adding colours (and code better) soon!



Week 2 Assignment (Jerry)

Here is my week 2 assignment: https://alpha.editor.p5js.org/JerryWaaaaaaaaaa/sketches/BkTvN8UcW


There are two shapes on my canvas. The one on the left is a water drop that means “wet” and the one on the right is a flying arrow that means “sharp’.

These are my thoughts during my design process.

For “wet”, the first thing that comes to my mind is “water”. At the same time, for “sharp”, the first thing that comes to my mind is the arrow. However, I feel like these two things can be related. The strategy I use is that I put a big water drop on the left side and a flying arrow on the right. I want to emphasize the contrast of motion and stillness so as to create the feeling that the arrow is flying towards the water drop. By doing so, people will feel the arrow is sharper while the water drop is vulnerable so that the water is more vivid.

Thus it comes to my design, I place the curly lines in different density so that it creates the shadow of the water drop so that it has a better texture. By using the same method, I make the shadow around the arrow.

week 2 — wet and sharp(Ronan)

This is the link to my assignments:


When I think of wet and sharp, the first thing pops in my mind is the waterdrops and the rocks in a cave. They have very obvious contrast.

1. waterdrops

I used ES6 to create class, objects in Javascript. And by beginShape() and bezierVertex(). I created the waterdrop shape.

2. The rocks

I used the koch curve to represent the rocks because there’s nothing could’ve done this better than programming. And also, the reader can go to my code to change how the line is divided (change the number in div() function) to create their own rocks.

What’s more, I think sharp and wet can be used to describe more than just a “shape”, it’s more of how we feel this world, for example, winter is sharp because it’s cold and freezing, our skin sometimes get hurt in winter.


Programming Design Systems – Assignment 3

Starting to get a feel for p5.js. I decided to go with a series of B&W triangles to convey sharp and a few water droplets for wet. The droplets, as they are now, aren’t too suited for procedural design, but I wanted to maintain some simplicity to juxtapose the two designs. It was definitely challenging to manipulate the bezier vertices’ control points and anchor points, but I think I’m starting to get the hang of it.