メニュー 閉じる

171. Processingで入力された文字をニコ動風にスクロールしてみる

Processing Advent Calendar 2019 13日目の記事です。

Processingでテキスト入力部分を作って、そこに入力したメッセージをニコニコ動画風に
右から左へスクロールするサンプルです。

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;

JLayeredPane text_pane;
JTextField text_field;

CreateNavigation navigation;

ArrayList<CreateMessage> messages;

PFont font01;
PFont font02;

String[] font_list = PFont.list ();

void setup () {

	size (1280, 720);
	colorMode (HSB, 100);
	pixelDensity (displayDensity ());

	Canvas canvas = (Canvas) surface.getNative ();

	text_field = new JTextField ();
	text_field.setBounds (10, 10, 400, 20);
	text_field.addActionListener (enter_action);

	text_pane = (JLayeredPane) canvas.getParent ().getParent ();
	text_pane.add (text_field);

	font01 = createFont ("HiraginoSans-W6", 200);
	font02 = createFont ("HiraMinProN-W6", 200);

	navigation = new CreateNavigation ();

	messages = new ArrayList<CreateMessage> ();

	printArray (font_list);

}

void draw () {

	background (0, 0, 0);

	navigation.update ();
	navigation.render ();

	for (int i = 0; i < messages.size (); i++) {
		CreateMessage cm = messages.get (i);
		cm.update ();
		cm.render ();
	}

	//saveFrame ();

}

void mouseReleased () {

	if (navigation.mouse_on) {
		messages.add (new CreateMessage (text_field.getText ()));
		text_field.setText ("");
	}

}

private ActionListener enter_action = new ActionListener () {

	@Override
	public void actionPerformed (ActionEvent e) {
		messages.add (new CreateMessage (text_field.getText ()));
		text_field.setText ("");
	}

};

class CreateNavigation {

	boolean mouse_on;

	CreateNavigation () {

		mouse_on = false;

	}

	void update () {

		if (mouseX > 420 && mouseX < 500 && mouseY > 10 && mouseY < 30) {
			mouse_on = true;
		} else {
			mouse_on = false;
		}

	}

	void render () {

		if (mouse_on) {
			fill (0, 0, 40);
		} else {
			fill (0, 0, 100);
		}
		noStroke ();
		rectMode (CENTER);
		rect (460, 20, 80, 20);

		if (mouse_on) {
			fill (0, 0, 100);
		} else {
			fill (0, 0, 0);
		}
		noStroke ();
		textFont (font01);
		textSize (12);
		textAlign (CENTER, CENTER);
		textLeading (12);
		text ("送信", 460, 20 - 1);

	}

}

class CreateMessage {

	String message;

	float end_x;

	float text_x;
	float text_y;

	float text_size;
	float text_speed;

	color text_color;

	CreateMessage (String msg) {

		message = msg;

		text_x = width;
		text_y = random (20, height - 20);

		text_size = random (12, 200);
		text_speed = random (2, 20);

		text_color = color (random (100), random (100), 100);

		textSize (text_size);
		end_x = textWidth (message);

	}

	void update () {

		text_x -= text_speed;

		if (text_x < -end_x) {
			messages.remove (this);
		}

	}

	void render () {

		noStroke ();
		textFont (font01);
		textSize (text_size);
		textAlign (LEFT, CENTER);
		textLeading (12);
		fill (text_color);
		text (message, text_x, text_y);

	}

}

 

Posted in processing