make some colors move on a screen – https://app.meemoo.org/#gist/c80560726b93c6a2495299ecdfb15c7f

scroll-a-gradient-challenge.meemoo.json

{
  "info": {
    "title": "make some colors move on a screen",
    "author": "forresto",
    "description": "tween → color → rectangle → slitscan",
    "url": "scroll-a-gradient-challenge",
    "parents": [
      "https://gist.github.com/forresto/c80560726b93c6a2495299ecdfb15c7f"
    ]
  },
  "nodes": [
    {
      "id": 6,
      "src": "meemoo:image/rectangle",
      "x": 1417,
      "y": 752,
      "w": 339.666656,
      "h": 408.666656,
      "state": {
        "x": 0,
        "y": 0,
        "w": 1080,
        "h": 540,
        "stroke": "black",
        "strokewidth": 0,
        "fill": ""
      }
    },
    {
      "id": 7,
      "src": "meemoo:util/color-hsla",
      "x": 1051,
      "y": 887,
      "w": 200,
      "h": 210,
      "state": {
        "hue": 0,
        "saturation": 1,
        "lightness": 0.5,
        "alpha": 1
      }
    },
    {
      "id": 8,
      "src": "meemoo:image/slitscan",
      "x": 2044,
      "y": 849,
      "w": 402.333344,
      "h": 468.291687,
      "state": {
        "width": 1080,
        "height": 1080,
        "direction": "right",
        "speed": 3,
        "fixed": true
      }
    },
    {
      "id": 9,
      "src": "meemoo:time/tween",
      "x": 656,
      "y": 888,
      "w": 200,
      "h": 210,
      "state": {
        "from": 0,
        "to": 1,
        "duration": 15,
        "type": "Linear",
        "ease": "InOut",
        "loop": true
      }
    },
    {
      "id": 10,
      "src": "meemoo:ui/button",
      "x": 160,
      "y": 869,
      "w": 200,
      "h": 210,
      "state": {
        "label": "start"
      }
    },
    {
      "id": 11,
      "src": "meemoo:image/transform",
      "x": 2021,
      "y": 401,
      "w": 81.979172,
      "h": 346,
      "state": {
        "width": 240,
        "height": 1080,
        "scale": 1,
        "translateX": 0,
        "translateY": 270,
        "rotate": 0,
        "composite": "source-over",
        "smoothing": "true"
      }
    },
    {
      "id": 12,
      "src": "meemoo:image/cam",
      "x": 452,
      "y": 264,
      "w": 194,
      "h": 234,
      "state": {
        "width": 500,
        "height": 500,
        "fps": 30
      }
    },
    {
      "id": 13,
      "src": "meemoo:image/palette",
      "x": 921,
      "y": 259,
      "w": 200,
      "h": 210,
      "state": {
        "max": 16,
        "palette": [
          "rgb(40,29,23)",
          "rgb(82,55,42)",
          "rgb(190,138,120)",
          "rgb(102,80,65)",
          "rgb(231,223,212)",
          "rgb(232,161,146)",
          "rgb(139,110,94)",
          "rgb(132,88,73)",
          "rgb(225,196,177)",
          "rgb(192,176,163)",
          "rgb(213,172,146)",
          "rgb(159,104,82)",
          "rgb(127,75,52)",
          "rgb(68,108,84)",
          "rgb(68,100,84)"
        ]
      }
    },
    {
      "id": 15,
      "src": "meemoo:time/metronome",
      "x": 607,
      "y": 573,
      "w": 241.666672,
      "h": 89.666664,
      "state": {
        "bpm": 120
      }
    },
    {
      "id": 16,
      "src": "meemoo:image/rectangle",
      "x": 1417,
      "y": 241,
      "w": 357.3125,
      "h": 386.333344,
      "state": {
        "x": 0,
        "y": 0,
        "w": 1080,
        "h": 1080,
        "stroke": "black",
        "strokewidth": 0,
        "fill": ""
      }
    },
    {
      "id": 17,
      "src": "meemoo:image/transform",
      "x": 2737,
      "y": 700,
      "w": 984.666687,
      "h": 978.666687,
      "state": {
        "width": 1080,
        "height": 1080,
        "scale": 1,
        "translateX": 0,
        "translateY": 0,
        "rotate": 0,
        "composite": "source-over",
        "smoothing": "true"
      }
    },
    {
      "id": 20,
      "src": "meemoo:image/transform",
      "x": 3886,
      "y": 360,
      "w": 195,
      "h": 209,
      "state": {
        "width": 1080,
        "height": 1080,
        "scale": 1,
        "translateX": 0,
        "translateY": 0,
        "rotate": 0.001,
        "composite": "source-over",
        "smoothing": "true"
      }
    },
    {
      "id": 14,
      "src": "meemoo:time/tween",
      "x": 3391,
      "y": 323,
      "w": 200,
      "h": 210,
      "state": {
        "from": 0.49,
        "to": 0.51,
        "duration": 5,
        "type": "Sinusoidal",
        "ease": "InOut",
        "pingpong": true,
        "percent": 0.51
      }
    },
    {
      "id": 19,
      "src": "meemoo:image/crop",
      "x": 1928,
      "y": 1394,
      "w": 607,
      "h": 194,
      "state": {
        "x": 0,
        "y": "=(1080-24)*0.5",
        "width": 1080,
        "height": 24
      }
    }
  ],
  "edges": [
    {
      "source": [
        7,
        "color"
      ],
      "target": [
        6,
        "fill"
      ]
    },
    {
      "source": [
        9,
        "value"
      ],
      "target": [
        7,
        "hue"
      ]
    },
    {
      "source": [
        10,
        "bang"
      ],
      "target": [
        9,
        "start"
      ]
    },
    {
      "source": [
        10,
        "bang"
      ],
      "target": [
        8,
        "start"
      ]
    },
    {
      "source": [
        6,
        "image"
      ],
      "target": [
        11,
        "image"
      ]
    },
    {
      "source": [
        11,
        "image"
      ],
      "target": [
        8,
        "stream"
      ]
    },
    {
      "source": [
        12,
        "image"
      ],
      "target": [
        13,
        "image"
      ]
    },
    {
      "source": [
        10,
        "bang"
      ],
      "target": [
        12,
        "send"
      ]
    },
    {
      "source": [
        15,
        "bang"
      ],
      "target": [
        13,
        "random"
      ]
    },
    {
      "source": [
        13,
        "color"
      ],
      "target": [
        16,
        "fill"
      ]
    },
    {
      "source": [
        16,
        "image"
      ],
      "target": [
        11,
        "background"
      ]
    },
    {
      "source": [
        9,
        "value"
      ],
      "target": [
        17,
        "rotate"
      ]
    },
    {
      "source": [
        10,
        "bang"
      ],
      "target": [
        15,
        "start"
      ]
    },
    {
      "source": [
        17,
        "image"
      ],
      "target": [
        20,
        "image"
      ]
    },
    {
      "source": [
        20,
        "image"
      ],
      "target": [
        17,
        "background"
      ]
    },
    {
      "source": [
        14,
        "value"
      ],
      "target": [
        20,
        "rotate"
      ]
    },
    {
      "source": [
        8,
        "image"
      ],
      "target": [
        19,
        "image"
      ]
    },
    {
      "source": [
        19,
        "image"
      ],
      "target": [
        17,
        "image"
      ]
    }
  ]
}