https://github.com/illimag/300

Graphical Interactive Experience built with P5.JS and Angular 8
https://github.com/illimag/300

angularjs interaction webapp

Last synced: 20 days ago
JSON representation

Graphical Interactive Experience built with P5.JS and Angular 8

• Host: GitHub
• URL: https://github.com/illimag/300
• Owner: Illimag
• Created: 2019-12-08T21:08:33.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2019-12-08T23:56:42.000Z (almost 5 years ago)
• Last Synced: 2024-05-02T04:49:38.045Z (6 months ago)
• Topics: angularjs, interaction, webapp
• Language: TypeScript
• Homepage:
• Size: 60.3 MB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 300

## Overview

https://www.youtube.com/watch?v=8MXdJdToxZw

300 is a Graphical Interactive Experience built with P5.JS Library and Angular.JS 8 Framework, hosted on Github Pages.

### Human Computer P5.JS element

https://editor.p5js.org/jaemnkm/sketches/NS8xQKwvy

Manually assorted triangles and quadrangle layed out in the following design with P5.JS.

![overview](img/overview.png)

On User Interaction Mouse Press Event, Triggers Mouse Click event.

        /* Mouse Pressed Event */

        if (p.mouseIsPressed){

        /* Mouse Click Event */

        mouseClicked();

        }

Mouse Click Event runs randomizeColor and randomizeStrokeColor functions.

      function randomizeColor() {

        for (let i = 0; i < 148; i++) {

          rgbArr[i] = { R: p.random(255), G: p.random(255), B: p.random(255) };

        }

      }

      function randomizeStrokeColor() {

        for (let i = 0; i < 148; i++) {

          rgbArr[i] = { R: p.random(255), G: p.random(255), B: p.random(255) };

        }

      }

### Angular.JS 8

https://github.com/jaemnkm/300/blob/master/angularApp/src/app/human-computer/human-computer.component.ts

Create Angular Component with P5.JS element.

    

Add 300 components in the following 20 by 15 grid formation.

![grid](img/grid-01.png)

Each component styled by global styles located in following dir:

    /src

Component width and height css styling and override:

    width: 5% !important;

    height: 5% !important;

### Human Computer Component

Change display to contents, to stack.

human-computer.component.html

    


human-computer.component.css

    #computer-div {

        display: contents;

    }

### Graphic Performance

![gpu](img/gpu-01.png)

## Link

https://jaemnkm.com/300/angularApp/