0%

Preface

Just as another regular work day, I memo down some new things along the task I am facing. Recently I have been crazy about the Voronoi diagram. Although as bad as I wanted to implement the sweepline algorithm, I found the best practice might be patient and learn thing little by little. Also, I am kinds into “Study with me” series on youtube. I feel clam with someone’s company alongside.

Reference

https://discourse.mcneel.com/t/c-select-objects-by-layer/84420/6
Appreciate the help from username Mahdiyar.

Two things are different

  • select object in Rhino DocView
  • select object in GH
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var ghobjs = new List();
var selectedLayer = RhinoDoc.ActiveDoc.Layers.FindName(layerName);
var layers = new List(){selectedLayer};
if(subLayer)
{
foreach(var layer in RhinoDoc.ActiveDoc.Layers)
if(layer.IsChildOf(selectedLayer))
layers.Add(layer);
}
B = layers;
foreach(var layer in layers)
{
var rhobjs = doc.Objects.FindByLayer(layer);
foreach (var rhObj in rhobjs)
ghobjs.Add(rhObj.Geometry);
}
A = ghobjs;

SelectInSameLayer

Lecture Link

https://www.youtube.com/watch?v=Pn19deUBsM8&t=13s

The Post-Office Problem

https://link.springer.com/chapter/10.1007%2F3-540-10291-4_1

http://blog.ivank.net/voronoi-diagram-in-javascript.html

http://paperjs.org/examples/voronoi/

https://shaneosullivan.wordpress.com/2011/03/22/sweep-line-voronoi-algorithm-in-javascript/

https://jacquesheunis.com/post/fortunes-algorithm/

http://blog.ivank.net/fortunes-algorithm-and-implementation.html

https://github.com/pvigier/FortuneAlgorithm

http://www.cs.uu.nl/geobook/

https://pvigier.github.io/2018/11/18/fortune-algorithm-details.html

TakeAwayFromPvigier’s blog

https://pvigier.github.io/2018/11/18/fortune-algorithm-details.html

pseudo-code from Pvigier’s Blog

1
2
3
4
5
6
7
8
9
10
11
add a site event in the event queue for each site
while the event queue is not empty
pop the top event
if the event is a site event
insert a new arc in the beachline
check for new circle events
else
create a vertex in the diagram
remove the shrunk arc from the beachline
delete invalidated events
check for new circle events
  • site event
  • circle event

Diagram’s Data Structure

Double connected edge list(DCEL).

1
2
3
4
5
6
7
8
9
10
class VoronoiDiagram{
public:
//...
private:
std::vector mSite;
std::vector mFace;
std::list mVertices;
std::list mHalfEdges;
}

The Site class represents an input point. Each site has an index, which is useful to query them, coordinates and a pointer to their cell(face):

1
2
3
4
5
struct Site{
std::size_t index;
Vector2 point;
Face* face;
};

The vertices of the cells are represented by the Vertex class, they just have a cooridinates field:

1
2
3
struct Vertex{
Vector2 point;
};

Here is the implementation of half-edges:

1
2
3
4
5
6
7
8
struct HalfEdge{
Vertex* origin;
Vertex* destination;
HalfEdge* twin;
Face* incidentFace;
HalfEdge* prev;
HalfEdge* next;
};

An edge in a Voronoi diagram is shared by two adjacent cells. In the DCEL data structure, we splite these edfes in two half-edges, one for each cell, and they are linked by the twin pointer.

Moreover, a hald-edge has an origin vertex and a desrination vertex.
The incidenetFace field points to the face to which the half-edge belongs to.

Finally, in DCEL, cells are implemented as a circular doubly linked list of half-edges where adjacent half-edges are linked together. Thus the prev and next fields points to the previous and next half-edges in the cell.

Finally, the Face class represents a cell and it just contains a pointer to its site and another to one of its half-edges. It does not matter which half-edge it is because a cell is a closed polygon. Thus we can access to all of its hald-edges by traversing the circular linked list.

1
2
3
4
struct Face{
Site* site;
HalfEdge* outerComponent;
};

Event Queue

The standard way to implement the event queue is to use a priority queue.

During the processing of site and circle events we may need to remove circle events from the queue because they are not valid anymore.

But most of the standard implementations of priority queues do not allow to remove an element which is not the top one. In particular that is the case for std::priority_queue.

There are two ways to tackle this problem.

  1. The first and simplest one is to add a valid flag to true initially. Then instead of removing the circle event from the queue, we just set its flag to false. Finially, when we process the events in the main loop, if the valid flag of an event equals to false, we simply discard it and process the next one.
  2. The second method which I adopted is not to use std::priority_queue. Instead, I implemented my own priority queue which supports removal of any element it contains. The implementation of such a queue is pretty straightforward. I choose this method because I find it makes the code for the algorithm clearer.

Beachline

If not implemented correctly there is no guarantee that the algorithm will run in O(log(n)). The key to reach this time complecity is to use a self-balancing tree.

In my implementation the beachline is still a tree, but all nodes represent an arc.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
struct Arc{
enum class Color{RED, BLACK};

// Hierarchy
Arc* parent;
Arc* left;
Arc* right;

// Diagram
VoronoiDiagram::Site* site;
VoronoiDiagram::HalfEdge* leftHalfEdge;
VoronoiDiagram::HalfEdge* rightHalfEdge;
Event* event;
// Optimizations
Arc* prev;
Arc* next;
// Only for balancing
Color color;
};

In Fortune’s algorithm we have no key, we only know that we want to insert an arc before or after another in the beachline. To do that, I create methods insertBefore and insertAfter:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
void Beachline::insertBefore(Arc* x, Arc* y){
// Find the right place
if(isNil(x->left)){
x->left = y;
y->parent = x;
}
else{
x->prev->right = y;
y->parent = x->prev;
}
// Set the pointers
y->prev = x->prev;
if(!isNil(y->prev))
y->prev->next = y;

y->next = x;
x->prev = y;

// Balance the tree
insertFixup(y);
}

Priority Queues

https://www.youtube.com/watch?v=wptevk0bshY

What is a Priority Queue

A priority queue is an Abstract Data Type(ADT) that operates similar to a normal queue excpet that each element has a certain priority. The priority of the elements in priority queue determin the order in which elements are removed from the PQ.

NOTE: Priority queues only supports comparable data.

What is a Heap?

A heap is a tree based DS that satifies the heap invariant(also called heap property):
If A is a parent node of B then A is ordered with repect to B for all nodes A, B in the heap.

  • Max Heap
  • Min Heap

Heaps must be trees.

When and where is a PQ used?

  • Used in certain implementaitons of Dijkstra’s shortest Path algorithm.
  • Anytime you need the dynamically fetch the next best or next worst element
  • Used in Huffman coding (which is often used for lossless data compression).
  • Best First Search(BFS) algorithms such as A* use PQs to continuously grab the next most promising node
  • Used by minimum Spanning Tree(MST) algorithms

Complexity PQ with binary heap

  • Binary Heap construction: O(n)
  • Polling: O(log(n))
  • Peeking: O(1)
  • Adding: O(log(n))

Self balance Tree (AVL Tree)

https://www.youtube.com/watch?v=vRwi_UcZGjU

  • Balance
  • Rotation
  • Implementation

Rebalancing threshold

pseudo-code from Jacquesheunis’ blog

https://jacquesheunis.com/post/fortunes-algorithm/

1
2
3
4
5
6
7
Fill the event queue with site events for each input site.
While the event queue still has items in it:
If the next event on the queue is a site event:
Add the new site to the beachline
Otherwise it must be an edge-intersection event:
Remove the squeezed cell from the beachline
Cleanup any remaining intermediate state

Voronoi Diagram - Computataional Geometry

Fortune’s Sweep

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
VoronoiDiagram(P are in R2)
Q : new PriorityQueue(P) // site events sortes by y-coord.
T : new BalancedBinarySearchTree() // sweep status(B)
D : new DCEL() // to-be Vor(P)

while not Q.empty() do
p <- Q.ExtractMax()
if p site event then
HandleSiteEvent(p)
else
a <- arc on B that will disappear
HandleCircleEvent(a)

treat remaining int. nodes of T(unbnd. edges of Vor(P))
return D

Handling Events

  • HandleSiteEvent(point p)
    • Search in T for the arc a vertically above p. If a has pointer to circle event in Q, delete this event.
    • Split a into a0 and a2. Let a1 be the new arc of p
    • Add Vor-edges <q, p> and <p, q> to DECL
    • Check <., a0, a1> and <a1, a2, .> for circle events.
  • HandleCircleEvent(arc a)
    • T.delete(a); update breakpts
    • Delete all circle events involving a from Q
    • Add Vor-vtx a_left and a_right

Just want to a quick note for the cool thing I found we can do in github.

https://www.youtube.com/watch?v=ow1gea4FHMc

Basically, as in this video.

Now we can put

1
vscode.dev/ + `any_githubRepo`

then we can editting code on our browser

Hey, it’s been a while since the last time I updated my blog. I spent some time learnig html, css and javascript. Though I am still in a very beginner state, I feel like I would like to learn some interesting code I randomly found. Try to breakdown to see what I can learn from them.

The article is about implementing Voronoi-Diagram in Javascript. The resource can be found here.

Preface

I found this recently hosted AEC hackathon video. To be honest, this will be the first hackathon I knew in AEC industy was held.Just want to memo down some interesting ideas from each project. Oh also, I heard the Glodfinger was the big winner of this event. I would like to dive deep into there source code in near future, and I might write some other posts for that topic.

Sunday Programme

Pollution Solution

People from A to B, might consider not only the distance, but also the air quality as well.

  • Find alternative routes where pollution levels are significantly lower
  • Algorithm taking the Google pollution data into account.

How we got here

  1. Google pollution data
  2. Making a graph network
  3. A* shortest path

Readapt

https://readapt-a2656.web.app/

Reuse of components off-site

  • Reduce
  • Reuse
  • Recycle

Scenario 1

Adapt components to building

Scenario 2

Adapt building to components

What is LCA

https://tenbou.nies.go.jp/science/description/detail.php?id=57

Procyon

Fuzzy Bunnies

Fuzzy Logic: Mapping off data

Why

We want to find a way to make LCA/ LCC faster regardless off data with spelling errors or disrupted data.

We know from our day-to-day work in AEC industry in the AEC industry that the data in our BIM-models is sometimes a bit fuzzy/ fluffy/ messy.

https://www.sciencedirect.com/science/article/abs/pii/S0926580518309841
https://www.wbdg.org/resources/life-cycle-cost-analysis-lcca#:~:text=Life%2Dcycle%20cost%20analysis%20(LCCA)%20is%20a%20method%20for,a%20building%20or%20building%20system.&text=Lowest%20life%2Dcycle%20cost%20%20is%20a%20method%20for,a%20building%20or%20building%20system.&text=Lowest%20life%2Dcycle%20cost%20)(LCC,interpret%20measure%20of%20economic%20evaluation.

Learn Carbon

Hypar-Hygge

Goldfinger

LBD hackers

AFRY

Paper Sketch

Google Air Quality

Domovoy

Preface

Recently, I found myself tend to absorb some general knowledge in tech-field at late night. I got company with Lofi music from Spotify. This post tend to note down some benefits for programmer switch to Linux instead of other OS, for say Windows or MacOS.

I’ve had this rough ideas about those great programmers tend to work in pure text, command line enviroment a lot, not saying they don’t want to use GUI, it’s just faster if both hands can stick on their keyboard and get everything done.

Resources

https://www.youtube.com/watch?v=otDOHt_Jges

7 things programmers appreicate about LINUX

  1. Security
  2. Improved programming workflow
  3. No rebooting
  4. Powerful Programming tools
  5. Task automation
  6. Performace
  7. Useful Error Messages
  8. (secret one) customized enviornment

Security

LinuxOS is open source, meaning anyone who want to can look at the source code.
Although this might mean anyone who want to attack the other’s machine can find the system flaw easily, it turns out become harder to hack in. Because Linux is a famous OS, thousands of other programmers run the code on their local machine,and they don’t want someone can get a way hack in, they patched the flaws once found it.

Improve programming workflow

For example, if you want to install something:

The scenario in a linux machine will be

1
sudo apt-get install whatever-you-want-to

However, if you are in a MacOS or Windows.

  1. you might need a package manager
  2. Or find the correct link on the correct webpage
  3. click several button while installing
  4. might need to restart your machine

As a developer, we constantly install things and linux make this procedure less pain.

No rebooting

Linux can update the entire whole Operating System without any reboot.
This is neither possible on MacOS nor Windows.
This no-rebooting thing is one of the reason why linux is choosed for running most of the servers.

Many Linux servers on the Internet have been running for years without failure or even being restarted.

Powerful Programming Tools pre-installed

  1. GREP
  2. wget
  3. _corn

Task automation

Linux lend itself very well for automation.
one-liner means short little scripts that you write to automate a task.

Performace

Linux is not neccessary faster than other OS, but it is very lightweight for an OS.

Useful Error Messages

Bootstrap

The world’s most popular CSS framework

Components

Bootstrap gives us access to a bunch of pre-built components that we can incorporate into our own website.

Grid System

Bootstrap also comes with a grid system, which help us construct our own custom, responsive layouts.

Foreword

I went a long long walk today, approximately 21km and took me 6.7 hours. The weather today was just so great. Recently, I noticed that if the article I posted only has the techicial contents, that might be a bit boring. The whole keep posting thing is for me to be motivated, so I decided that I need to write down some thoughts ahead or behind the article, to make it more human.

What’s my thoughts about YAML before learning it.

I have had much knowledge about yaml before I tried to post on github Page. I am currently using the hexo framework, organizing my blogs, and inside the folder, there’s one .yaml file owns a lot of settings we can play around.

Lecture

https://www.youtube.com/watch?v=cdLNKUoMc6c&t=2s

YAML is a data_serialization language, which means it’s basically just used to store information about different things

  • We can use yaml to define key-value pairs.
  • Very similar to JSON, but YAML focusing on readability and user friendiness

Format

  • .yml
  • .yaml

comment in YAML

1
# This won't be executed in yaml

key-value example in yaml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
person:
name: &name "mike"
occupation: 'programmer'
age: 23
gpa: 3.5
fav_num: 1e+10
male: true
birthday: 1994-02-06 14:33:22 #ISO 8601
flaws: null
hobbies:
- hiking
- movies
- riding bike
movies: ["Dark Knight", "Good Will Hunting"]
friends:
- name: "Steph"
age: 22
- {name: "Adam", age: 22}
-
name: "joe"
age: 23
desciption: >
Coming soon, Aeron in Onyx, made with ocean-bound plastic. Same design. Same comfort. Now more sustainable.
signature: |
Mike
Giraffe Academy
email - giraffeacademy@gmail.com
id: *name #"mike"

base: &base
var1: value1

foo:
<<: *base # var1: value1
var2: value2


The way that we can define scope inside of yaml is with indentation(tab).

  • With > before a bunch of text, yaml will render the text in a single line.
  • With |, this will preserve the format correctly.
  • & as an anchor mark, * to call that anchor value
  • & anchor mark can also anchor a entire key-value, the example &base
  • !!float can force int to float, changing the type

Introduction to CSS Flexbox

The Basic

What is it?

Flexbox is one-dimensional layout method for laying out items in rows or columns.

It’s New(ish)

Flexbox is a recent addition to CSS, included to address common layout frustations.

Why ‘Flex’?

Flexbox allows us to distirbute space dynamically accross elements of an unknown size, hence the term “flex”

Flex direction

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

Justify-content

https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

Flex Wrap

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

  • main Axis: left-right
  • cross Axis: `top-down

Align Item

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

Flex-Basis, Grow and Shrink

Flex-Basis

Defines the initial size of an element before additional space is distributed.

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

Flex-Grow

Controls the amount of available space an element should take up. Accepts a unit-less number value.

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow

Flex-Shrink

If items are large than the container. They shrink according to flex-shrink.

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink

Flex Shorthands

1
2
/* Three values: flex-grow flex-shrink flex-basis */
flex: 2 2 10%

Responsive Design and Media_Queries_Intro

https://www.ibest.tw/page01.php

The problem

As mobile devices and tablets became widely available, developers had a problem… how do we create websites that look good on all screen sizes?

One approach

Early on, it was common to create separate stylesheets for different devices, or even completely different websites for each size.

Enter Responsive

These days, we typically create ONE website and stylesheet that is able to respond to different device sizes and features.

Media Queries

Media queries allow us to modify our styles depending on particular parameters like screen width or device type.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@media(max-width: 800px){
.sidebar{
display: none;
}
.main{
width: 80%;
}
}

@media(min-width: 30em) and (orientation: landscape){
#container{
flex-direction: column;
justify-content: center;
}
}

The Power of Media Queries

Breakpoint to find the most frequently used px size

https://www.browserstack.com/guide/what-are-css-and-media-query-breakpoints

rgba(0, 209, 112, 0.5)

  • alpha 0-1
  • opacity 0-1

Opacity affect the whole element.

position

https://developer.mozilla.org/en-US/docs/Web/CSS/position

position: sticky is coooool. Go check it out.

Transitions

1
2
3
div:nth-of-type(2){
transition-timing-function: cubic-bezier(0.7, 0, 0.84, 0);
}

The Power of CSS Transforms

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

FancyButton_Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14








Document


Hover me!


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
body{
font-family: 'Roboto', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #151b29;
}

button{
background: none;
color: #ffa260;
border: 2px solid ;
padding: 1em 2em;
font-size: 1em;
transition: all 0.25s;
}

button:hover{
border-color: #f1ff5c;
color: white;
box-shadow: 0 0.5em 0.5em -0.4em #f1ff5c;
transform: translateY(-0.25em);
/* box-shadow: 12px 12px 2px 1px red; */
cursor: pointer;
}

The truth about Background

https://developer.mozilla.org/en-US/docs/Web/CSS/background

Google Font is Amazing

I could put whatever font I want. It might work on my machine, but I have no guarantees that same font will exist or be installed on your machine or the average person’s machine.

One option that we have is to actually include a font. As part of our document, we can include a font file so you can buy a font, you can download them.

Google font is free.

https://fonts.google.com/

  1. copy-paste the link part to the <head> in your html file
  2. In css file,
1
2
3
body{
font-family: Roboto, sans-serif;
}

PhotoBlogCodeAlog_Pt1

In order to do some simple calculation, we can use calc() in css.

1
2
3
4
img {
width: 30%;
margin: calc(10%/6);
}

white space element:

Annoying issue for html, the reason why

1

NOT

1
2
3