DEV Community: Medusa

Code Art & iDraw H review

Medusa — Mon, 15 May 2023 18:36:52 +0000

Art with code, generative art, coding art, creative coding... It has many names and they all say the same thing.

¿What is coding art?

Generative art is a type of art that is created through the use of algorithms and computer programs. Instead of being created by human hands, generative art is generated using code and software.

This means that each piece of generative art is unique and cannot be replicated exactly.

The process of creating generative art often involves randomness and unpredictability, which can lead to unexpected and surprising results.

Me and code art

I discovered generative art a little over a year ago, and since then, I haven't stopped experimenting with different styles, techniques, and algorithms to explore this immense world. Here's a compilation of 100 sketches from the past year:

Twitter -> https://twitter.com/BenajesMiguel

The latest thing I'm exploring is printing the artwork with the help of a drawing robot, also called pen plotter.

IDraw H review

Generative art has gained significant popularity in recent years, attracting artists from various disciplines. To support this creative endeavor, iDraw H emerges as a remarkable plotter designed specifically for generative art. In this short review, we explore the features, performance, and overall user experience of iDraw H, comparing it to other models such as Axidraw.

Link to web: https://idrawpenplotter.com/

Impressive Performance and Build Quality

Upon testing, it becomes evident that iDraw H outshines its competitors in terms of speed, surpassing the performance of Axidraw. Furthermore, the solid and high-quality metal structure sets it apart from other models in the market.

Precise and Versatile Drawings

One notable feature of iDraw H is its ability to produce precise and sharp drawings. The pen holder, being 2-3mm larger than the Axidraw, accommodates a wider range of pens. This flexibility allows artists to experiment with different types of pens, resulting in diverse artistic outputs.

Integration with Inkscape

iDraw H's compatibility with Inkscape, a free open source popular vector graphics editor, is a significant advantage for artists. This integration seamlessly integrates the plotting process into artists' existing workflows. Notably, the ability to control the order of paths drawn is crucial, especially for creating timelapse videos. Additionally, the inclusion of a button on the controller board acts as a convenient **pause button* during the drawing process.

Smooth Motor Operation and Quiet Servo

The motors of iDraw H operate smoothly, ensuring consistent and uninterrupted plotting. Surprisingly, the servo of this plotter is quieter compared to that of the Axidraw A3 V3, enhancing the overall user experience.

Easy installation

One of the things I have liked the most, even though it may seem silly, is how easy everything is to install. Within a few minutes, you have the machine up and running.

Considerations and Potential Improvements

Some possible improvements would be to facilitate connectivity through Bluetooth or wireless, which would greatly enhance the experience.

Another feature that I find very useful would be to have a programming interface in different languages to directly control the motors. This would be a treat for any generative artist.

Overall, the documentation and video tutorials could be improved.

Conclusion

In summary, the iDraw H plotter is an excellent choice for artists venturing into generative art. It provides a robust and reliable machine that seamlessly integrates with Inkscape, facilitating a smooth workflow. The versatility of the pen holder enables artists to explore various pen types, allowing for creative experimentation. Assembly is straightforward, making it accessible for most artists, while those interested in the technical aspects will appreciate the opportunity to build and understand the plotter's inner workings. Although the A4 drawing area may feel slightly restricted for some users, iDraw H offers for those seeking a larger canvas. With its impressive features and performance, iDraw H is an ideal tool to bring generative art to life on paper.

Creating an animated jellyfish in JS! 👀💥

Medusa — Mon, 06 Jun 2022 12:06:35 +0000

It looks 3D right? The reality is that the animation is composed only of curves in a 2D plane, we are going to see in depth the steps that I have followed to create this effect that we can use on our websites and combine with user actions.

Setup

To start we will need to add the p5js library to our project and create a JS file where we will put all the necessary code. We will create a canvas with a black background through the setup function in this way:

function setup() {
  createCanvas(window.innerHeight, window.innerHeight);
  background(0);
  frameRate(100);
  stroke(255);
  strokeWeight(10);
  noFill();
}

The correct way to draw a circle

At the end of the setup function we will create a circle of points through a for loop that iterates the angles of the circle, like this:

function setup() {
  ...
  const radius = 200;
  const centerX = width / 2;
  const centerY = height / 2;
  for (let angle = 1; angle <= 360; angle += 10) {
    const x = centerX + radius * cos(radians(angle));
    const y = centerY + radius * sin(radians(angle));
    point(x, y);
  }
}

We will get something like this:

Adding lines

Now we will replace the points with lines that go from each point to the center. And we change the strokeWeight from 10 to 1:

function setup() {
  ...
    const y = centerY + radius * sin(radians(angle));
    beginShape();
    curveVertex(centerX, centerY);
    curveVertex(centerX, centerY);
    curveVertex(x, y);
    curveVertex(x, y);
    endShape();
  }
}

Moving the center and crushing the circle

Now we would be seeing our future "jellyfish" from above. To create a side view effect I have decided to move the center of the circle higher on the Y axis and flatten the circle creating this effect:

function setup() {
  ...
    const y = centerY + radius * sin(radians(angle));
    beginShape();
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX, centerY - 100);
    curveVertex(x, y / 10 + 500);
    curveVertex(x, y / 10 + 500);
    endShape();
  }
}

Curving the lines

Now our experiment begins to take on more of a jellyfish shape by adding curvature to the lines we just created. To do this we will modify above all the first and last curveVertex that correspond to the anchor points of the curve.

function setup() {
  ...
    const y = centerY + radius * sin(radians(angle));
    beginShape();
    curveVertex(centerX, centerY + 80);
    curveVertex(centerX, centerY - 50);
    curveVertex(x, y / 10 + 500);
    curveVertex(x, y / 10 + 1200);
    endShape();
  }
}

Adding lots of lines and noise 🤘🏿

Adding many lines, lowering the opacity of each line and adding perlin noise on the Y axis we get a more organic and natural effect that already reminds us of a jellyfish.

function setup() {
  createCanvas(window.innerHeight, window.innerHeight);
  background(0);
  frameRate(100);
  stroke(255, 20);
  strokeWeight(1);
  noFill();

  const radius = 200;
  const centerX = width / 2;
  const centerY = height / 2;
  for (let angle = 1; angle <= 360; angle += 0.2) {
    const x = centerX + radius * cos(radians(angle));
    const y = centerY + radius * sin(radians(angle));
    const noiseY = 50 - noise(angle / 200) * 100;
    beginShape();
    curveVertex(centerX, centerY + 80);
    curveVertex(centerX, centerY - 50);
    curveVertex(x, y / 10 + 500 + noiseY);
    curveVertex(x, y / 10 + 1200);
    endShape();
  }
}

More noise, color and movement 🤯

Playing with the values of our curves and with the stroke color of each line adding variation over time we created the complete effect we were looking for. I leave you the complete code of the animation and I encourage you to create your own jellyfish with new shapes and colors and adding user or sound interaction. Happy Coding! 🖖🏻🙌🏾

function setup() {
  createCanvas(window.innerHeight, window.innerHeight);
  background(0);
  frameRate(100);

  stroke(255, 20);
  strokeWeight(1);
  noFill();
}

let i = 0;
function draw() {
  i++;
  background(0);
  const centerX = width / 2;
  const centerY = height / 2;
  const radius = 200 * noise(i / 300) + 100;
  const radius2 = 20 * noise(i / 300) + 20;
  strokeWeight(1);
  translate(0, -150);
  for (let angle = 1; angle <= 360; angle += 0.2) {
    const x = centerX + radius * cos(radians(angle));
    const y = centerY + radius * sin(radians(angle)) + (200 - noise(radians(angle), i / 100) * 400);
    const noiseStrokeR = noise(radians(angle));
    const noiseStrokeG = noise(i / 100);
    const noiseStrokeB = noise(radians(angle), i / 100);
    stroke(
      Math.round(255 * noiseStrokeR + 10),
      Math.round(120 * noiseStrokeB + 40),
      Math.round(255 * noiseStrokeG),
      60
    );
    beginShape();
    const noiseY = noise(radius / 100) * 100;
    const noiseY2 = 50 - noise(radius / 100, i / 120) * 100;
    const noiseX = 500 - noise(radians(angle), i / 120) * 1000;
    curveVertex(centerX, centerY + 200);
    curveVertex(centerX, centerY - 120 + noiseY);
    curveVertex(x, y / 10 + 500 + noiseY2);
    curveVertex(x + noiseX, y / 10 + 1000);
    endShape();
  }

  for (let angle = 1; angle <= 360; angle += 20) {
    const x = centerX + radius2 * 3 * cos(radians(angle));
    const x2 = centerX + (radius2 / 2) * cos(radians(angle));
    const y = centerY + radius2 * sin(radians(angle));
    const noiseStrokeR = noise(angle / 200);
    const noiseStrokeG = noise(i / 100);
    const noiseStrokeB = noise(angle / 200, i / 100);
    stroke(
      Math.round(255 * noiseStrokeR + 10),
      Math.round(120 * noiseStrokeB + 40),
      Math.round(255 * noiseStrokeG),
      120
    );
    strokeWeight(2);
    beginShape();
    const noiseY = noise(radius / 100) * 100;
    const noiseY2 = 50 - noise(i / 200, angle) * 100;
    const noiseX = 1000 - noise(radians(angle), i / 200) * 2000;
    const noiseX2 = 100 - noise(radians(360 - angle), i / 200) * 200;
    curveVertex(x2, centerY + 200);
    curveVertex(x2, centerY - 120 + noiseY);
    curveVertex(x + noiseX2, y / 1.1 + 500 + noiseY2);
    curveVertex(x + noiseX, y / 10 + 1000);
    endShape();
  }
}

Easily animate React components when mount/unmount 😅

Medusa — Sat, 06 Mar 2021 16:54:17 +0000

One of the things that I have neglected the most as a React programmer when it comes to animations is the transitions when mounting and unmounting a component. Normally I always left without animations because I didn't see an easy and comfortable way to put them either. The result is quite forced and the experience for the user is that things appear and disappear by magic, nothing fluid.

Until a couple of days ago I decided to investigate the best and simplest way to run animations when mounting and unmounting components. I came to the conclusion that the best thing was to create a generic component that allows mounting and unmounting components through the simplest possible syntax.

I started creating a component that would manage the animation of the component and take care of mounting and unmounting it when indicated. The animation had to be done using the CSS keyframes, so I came up with a solution like this simple example:

Instead of this (mount/unmount without animation):

const MyComponent = () => {
  const [isMounted, setIsMounted] = useState(false);

  ...

  return (
   <>
      {isMounted && (
        <div>
          Hi World!
        </div>
      )}
   </>
)
...

We do this (same with animation):

import Animated from "react-mount-animation";

const MyComponent = () => {
  const [isMounted, setIsMounted] = useState(false);

  ...

  return (
      <Animated.div //You can use any HTML element here
        show={isMounted}
        mountAnim={` 
            0% {opacity: 0}
            100% {opacity: 1}
        `}
      >
        Hi World!
      </Animated.div>
)
...

Anyone who wants to collaborate on it can contact me and any technical or non-technical opinion I will receive with pleasure. Maybe this package does not make sense, maybe it does, in any case I would love for you to leave a comment.

If you want to inspect the code or simply test it, you can do it by consulting the repository: https://github.com/mijim/react-mount-animation

https://www.npmjs.com/package/react-mount-animation

Thanks & Happy Coding! ⚡️

⚡️ RULERULER ⚡️ - Chrome extension for designers & developers (BETA)

Medusa — Fri, 24 Jul 2020 16:48:21 +0000

Check & download the extension here --> ruleruler.design

How did the idea come?

In my company (Aluxion) we always try to take care about the front-end finish, using design systems and looking for the pixel to fit as much as possible the proposed design. A couple of months ago, working on the final stages of a commercial application, the design department was asked to perform a visual QA to verify that the measurements of the elements and font types fit the design well. As expected, this task was an ordeal, the inspector is not something friendly for design people, nor for an initiated developer. So we looked for extensions that would make our task easier, and although we found some, none of them combined everything we wanted in one.

This is how I came up with creating an extension (as a challenge more than anything) that allowed to see the font styles and the measurements between elements in a comfortable and fast way.

First steps

The first approach I made was to go through all the elements on the page and create a box with their measurements in a very small font size. I thought it would be comfortable to have all the measurements of the elements together, but the result was something like an ultra-baroque painting:

Looking for the UX

It was clear that the user couldn't have all the information, one of the basic rules of the UX is that only relevant information should be displayed for the user. So I tried various possible interactions until I realized that the interaction was already there, I just had to catch it. For the design of our applications we use Figma, what kind of interaction will our designers and developers be more used to? To which this tool offers us without a doubt.

Analyzing the UX

The interaction is quite simple:

The item you go through shows your measurements.
When the item is clicked, it is selected.
When you move the cursor, the measurement relationship between the selected element and the one you are on appears.
Also, to add value to the product, the item you are on shows its font type and allows you to copy the font styles.

Once the interaction was clear, undoubtedly the most complicated point was the third. How do I create the lines and what possible scenarios can be given depending on the position of the elements? Here, after playing around with figma, narrow the result to 4 possible scenarios that had to be covered from the code:

Implementation

I love React, I am a big fan and I use it professionally in the applications, however and considering that this was more of a challenge than anything else, I wanted to try creating the extension with flat javascript without using any external library, so I also made sure that Google did not put any impediment to upload the app to the Chrome Store.

Basically I divided the implementation into X main methods (not counting other aux functions):

openClose(show). Used to show or hide the extension. It is responsible for instantiating the elements, setting the listeners and assigning the corresponding css to the different components that make up the extension.
handleHover(elem). Used in the mouse listener to analyze and display the dimensions of the element you are on and the distances between the selected element. It also calls drawNav to show the font styles.
handleClick(elem). Set the lines above the element you click and save the it to be used in the handleHover.
drawNav(elem). It is responsible for creating the nav and displaying the font values of the element you are on.
copyCSS(). Copy the styles to the clipboard of the item you are on.

Results

Although the extension is in Beta and it still gives some errors in some pages, the results have been very satisfactory and it is already free available in the chrome store for those who want to try it.

ruleruler.design

Add sitemap.xml and robots.txt to Next.js app (SEO - 01)

Medusa — Fri, 03 Jul 2020 17:28:46 +0000

Since Next.js has become the best option (in my opinion) to create serverless apps with React, I will start a new group of articles talking about how to perform SEO with this great library.

This first one is a very simple recipe to add sitemap.xml and robots.txt files. As almost every body knows, these files are used by the Google Search Bot in order to know the site structure and the files that should list.

In order to don't extend much the post, I'll show you only the static files. Anyway, you can transform these files into dynamic ones by fetching previously and passing to getSitemap and getRobots methods the data you want to put in.

pages/sitemap.xml.tsx

import React from 'react';

const getSitemap = () => `<?xml version="1.0" encoding="utf-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com/</loc>
    <lastmod>2020-07-01</lastmod>
    <changefreq>daily</changefreq>
    <priority>0.9</priority>
  </url>
</urlset>`;

class Sitemap extends React.Component {
  public static async getInitialProps({ res }) {
    res.setHeader('Content-Type', 'text/xml');
    res.write(getSitemap());
    res.end();
  }
}

export default Sitemap;

pages/robots.txt.tsx

import React from 'react';

const getRobots = () => `User-agent: *
Disallow: /_next/static/
`;

class Sitemap extends React.Component {
  public static async getInitialProps({ res }) {
    res.setHeader('Content-Type', 'text/plain');
    res.write(getRobots());
    res.end();
  }
}

export default Sitemap;

Hey, now I know React, so what’s next? 🧐

Medusa — Sun, 14 Jul 2019 14:32:09 +0000

As a junior software engineer I’ve been working recently on some React projects inside the professional area and I would like to share a big lesson I’ve learned.

Sometimes, when we’re beginners we start learning a new modern framework by following the page tutorial, creating our first project, consulting the API, creating new project, searching great components, consulting the API, creating new project, searching great components, consulting the API, creating new project, searching great components... InternalError: too much recursion.

So what’s next? The big problem is to think that what we are going to create is worse than other solutions.

-🤨 Okay, we need a calendar for our app, should I create a new calendar component?
-😎🍹 mmm no, I’ve been searching a bit and I found a really nice calendar, very complete and easy to use. This will save us a lot of time.

That’s all, using others components will save you time, at least at the beginning.

-🤨 hey, the client needs to pick a range of dates in this part of the app.
-🤯 oh, our calendar doesn’t allow it, I will try to find a new one.

We all know what are the time pressures and deadlines, but forcing you, your team or you company to spend a little bit more time creating generic reusable components that scale through the projects, attending to the new requirements and solving the use cases, will save you time. And that’s not all, your mind will work in a more abstract perspective of the solution. What we have to follow are these simple rules of component design:

*Scale the component on every new project.
*Always backwards compatible.
*Always with tests.
*Style has to be as modificable as possible.
*Keep a good documentation.
*Share it with the community.

With the last rule comes what I think is the most beautiful part of programming, see that other developers use your approach/solution/component and they get benefit with them.

-🤬 wait wait wait, we are not going to share our code for free, I pay you for this.

This is a typical boss thinking that doesn't have a large business perspective. By sharing your code you are building a brand, you expand your contacts, you generate knowledge inside and outside your company, you get less errors and, for sure, you don’t lose money (trust me). So if your company is a bit archaic with this, try to change it as possible, the benefits are multiple.

-🤨 hey, the client needs to pick a range of dates in this part of the app.
-🤓😝 oh, our calendar doesn’t allow it, I will add the functionality to it.