MANGA
Motion
OVERVIEW
2019.Oct / Personal Project / Processing / Multimedia
BACKGROUND
In 2016 Junji Itou’s horror manga exhibition, I was overwhelmed by a widescreen on which traditional static images in his manga were all moving. This attributed a lot to the immersive interaction in this exhibition. However, there WERE flaws, that these motion graphics were made in GIF formats, and all the motions were made into videos and be played, which meant these images could not afford long-time or complex animations. There would be lots of pressure on the hardware equipment.
Try moving mouse!
IDEA
Generally, this type of motion graphics are made in Photoshop, After Effects or similar software, and making these motion graphics is labor-consuming. I've come up with an idea:
Are there any better alternatives or more efficient methods to make motion graphics?
There are two main steps for this trial:
First, certain methods to make it possible for static elements in pictures to move;
Second, additional or more interactive ways to be added to enrich the interaction experience.
Goal:
Substitutional outcomes with smaller image sizes and more intriguing interaction.
Outcome-Phase1
The demo has been realized via Processing.
The size of the outcome was only 3K and 1.1mb together with the asset pic.
This would help save lots of burden for the server and devices that display the visual effects.
int totalNums=200;
PImage img;
void setup() {
size(800, 500, P3D);
smooth();
img=loadImage("未标题-1.png");
}
void draw() {
background(255);
Particle[] particles=new Particle[totalNums];
for (int i=0; i<particles.length; i++) {
particles[i]=new Particle(random(width), random(height));
}
Attractor attractor=new Attractor(width/2, height/2, -1);
for (int time=0; time<totalNums; time++) {
for (Particle p : particles) {
//float x=random(-1, 1);
//float y=random(-1, 1);
//PVector force=new PVector(x, y);
PVector force=attractor.force(p.position);
p.apply(force);
p.display();
p.update();
}
}
image(img, 120, 215);
img.resize(650, 0);
}
class Attractor{
PVector position;
float magnitude;
Attractor(float x, float y, float magnitude){
position=new PVector(x,y);
this.magnitude=magnitude;
}
PVector force(PVector position){
PVector force=this.position.sub(position);
force=force.normalize();
force=force.mult(magnitude);
return force;
}
}
class Particle {
PVector position;
PVector velocity;
PVector acceleration;
float mass=1;
float maxSpeed=0.25;
Particle(float x, float y) {
position=new PVector(x, y);
velocity =new PVector();
acceleration=new PVector();
}
void apply(PVector force) {
acceleration=acceleration.add(force.copy().div(mass));
}
void update() {
velocity=velocity.add(acceleration);
velocity=velocity.limit(maxSpeed);
position=position.add(velocity);
acceleration=acceleration.mult(0);
}
void display() {
stroke(0);
strokeWeight(1);
point(position.x, position.y);
}
}
Phase2
In phase 2, I added sound interactions to the canvas. This was realized via P5.js.
With the assistance of sound, there are more touchpoints for users to get access to business.
For example, in this trial, users were required to shout loudly to certain levels so that they can unlock the challenges and get rewards.
Such a demo can be used in public areas like metro stations and online campaign landing pages.
Since sound interaction is banned in Wix, please refer to the site below for experience:
var mic, amp, rms;
let btnW = 168;
let btnH = 40;
function preload() {
backgroundImg = loadImage('fireFull2.png');
popImg = loadImage('pop.png');
}
function setup() {
createCanvas(400, 564);
mic = new p5.AudioIn();
mic.start();
amp = new p5.Amplitude();
amp.setInput(mic);
if (rms * 2200 > dist(0, 0, width / 2, height / 2)) {
unLock1();
}
}
function draw() {
noStroke();
background(255);
image(backgroundImg, 0, 0, 400, 564);
fill(255, 40);
rect(0, 0, width, height);
var rms = amp.getLevel();
push();
translate(-30, -20);
fill(0, 100);
ellipse(width / 2, height / 2, rms * 2500, rms * 2500, 10);
if (rms * 1800 > dist(0, 0, width / 2, height / 2)) {
unLock1();
}
if(mousePressed){ mousePressed();}
}
function unLock1() {
//loadng pop img;
image(popImg, 33, 82, 33 + 333, 82 + 328);
//loading button;
push();
translate(30, 100);
//btn;
fill(100);
stroke(0);
strokeWeight(3);
rectMode(CENTER);
rect(width / 2, height / 2, btnW, btnH, 5);
//text on the btn;
push();
noStroke();
fill(255);
textSize(22);
textAlign(CENTER);
text("Next>>", width / 2, height / 2 + 5);
pop();
pop();
noLoop();
}
function mousePressed() {
if (mouseX > (400 - btnW) / 2 && mouseX < (400 - 168) / 2 + btnW &&
mouseY > height / 2 + 40 && mouseY < height / 2 + 40 + btnH) {
loop();
}
}